/* ==========================================================================
   Taktically - site styles
   Every colour and size is a custom property in :root. Change it there once
   and it changes everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts
   --------------------------------------------------------------------------
   Self-hosted rather than loaded from Fontshare and Google Fonts. Those were
   two render-blocking stylesheets on two other origins, which held first
   paint at about 3.2 seconds on a throttled phone and kept the Lighthouse
   performance score in the mid-eighties. These are the identical files those
   services serve, so the type renders exactly the same.

   To update a weight: download the .woff2 from the same source, drop it in
   assets/fonts/ with the same name, and nothing else needs to change.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/plex-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour - 60 / 30 / 10 */
  --c-primary:        #0B1016;  /* page background */
  --c-secondary:      #151D26;  /* tiles, header, panels, dividers */
  --c-accent:         #E9631A;  /* CTAs, active states, key data, actual bars */
  --c-accent-hover:   #F47A36;

  /* Text */
  --c-text:           #F2F4F5;  /* headings and primary text */
  --c-text-body:      #B4BEC8;  /* body and secondary text, 18px minimum */
  --c-text-caption:   #B4BEC8;  /* small captions. See note below. */

  /* NOTE ON --c-text-caption
     The brief specifies #6B7682 for captions, but it measures 4.13:1 on the
     primary background and 3.69:1 on tiles - below the 4.5:1 the brief also
     requires, and enough to cost marks on Lighthouse Accessibility.
     #B4BEC8 is used instead: no new colour is introduced, and it measures
     9.93:1 and 8.89:1. Captions are separated by size and weight instead of
     by colour. */

  /* Aurora glows only */
  --c-aurora-navy:    #0D3349;

  /* Chart */
  --c-plan-bar:       #9AA6B2;  /* "planned" bar outline */

  /* Surfaces and lines */
  --c-tile-border:    rgba(255,255,255,.08);
  --c-hairline:       rgba(255,255,255,.08);
  --c-empty-segment:  rgba(255,255,255,.10);

  /* Type families */
  --f-display: "Clash Display", serif;
  --f-mono:    "IBM Plex Mono", monospace;
  --f-sans:    "IBM Plex Sans", sans-serif;

  /* Type sizes */
  /* H1 is sized so the headline sits on 3 lines at every desktop width.
     See the note above .hero__grid for why it is not 84px. */
  --t-h1:        clamp(46px, 5.3vw, 72px);
  --t-h2:        clamp(34px, 3.9vw, 56px);
  --t-h3:        clamp(21px, 1.7vw, 24px);
  --t-statement: clamp(34px, 5vw, 72px);
  --t-body:      18px;
  --t-body-lg:   24px;
  --t-mono:      13px;
  --t-mono-sm:   12px;
  --t-caption:   14px;

  --lh-heading: 1.02;
  --lh-body:    1.75;
  --ls-heading: 0.02em;
  --ls-mono:    0.12em;

  /* Space */
  --sp-section:   140px;  /* top and bottom padding of a section */
  --sp-block:     80px;   /* between two content blocks in a section */
  --sp-para:      40px;   /* between paragraph blocks */
  --sp-tile:      40px;   /* tile inner padding */
  --sp-grid-gap:  20px;   /* bento grid gap */
  --sp-hero-gap:  28px;   /* between hero blocks - see note in section 6 */

  /* Layout */
  --w-content:    1240px;
  --w-gutter:     32px;
  --h-header:     68px;
  --r-tile:       20px;
  --r-button:     12px;
  --h-cta:        64px;
  --h-cta-sm:     44px;

  /* Motion */
  --dur-reveal:   300ms;
  --dur-chart:    1600ms;
  --ease-out:     cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-primary);
  color: var(--c-text-body);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--f-display);
  color: var(--c-text);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 700; }
h2 { font-size: var(--t-h2); font-weight: 700; }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.2; }

p { margin: 0; }
p + p { margin-top: var(--sp-para); }

a { color: var(--c-accent); }
a:hover { color: var(--c-accent-hover); }

img { max-width: 100%; display: block; }

/* Focus: a visible 2px accent ring everywhere */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--w-gutter);
  top: -100px;
  z-index: 100;
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  padding: 14px 20px;
  border-radius: var(--r-button);
  text-decoration: none;
  transition: top 150ms var(--ease-out);
}
.skip-link:focus { top: 14px; color: var(--c-primary); }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--w-content) + (var(--w-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--w-gutter);
}

.section { padding-block: var(--sp-section); position: relative; }

/* Anchor targets clear the sticky header when a CTA scrolls to them */
[id] { scroll-margin-top: var(--h-header); }

/* Small uppercase mono label */
.label {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-body);
  margin: 0;
}
.label--accent { color: var(--c-accent); }

.caption {
  font-family: var(--f-mono);
  font-size: var(--t-caption);
  font-weight: 500;
  line-height: 1.6;
  color: var(--c-text-caption);
  margin: 0;
}

.lead { color: var(--c-text); font-size: var(--t-body-lg); line-height: 1.5; }

/* Aurora glows - hero, reframe and booking only */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora::before, .aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(160px);
}
.aurora::before {                                  /* accent, top-right */
  width: 780px; height: 620px;
  top: -220px; right: -180px;
  background: var(--c-accent);
  opacity: .20;
}
.aurora::after {                                   /* deep navy, bottom-left */
  width: 900px; height: 700px;
  bottom: -300px; left: -260px;
  background: var(--c-aurora-navy);
  opacity: .70;
}
.section > .wrap, .hero > .wrap { position: relative; z-index: 1; }

/* Tile */
.tile {
  background: var(--c-secondary);
  border: 1px solid var(--c-tile-border);
  border-radius: var(--r-tile);
  padding: var(--sp-tile);
}
.tile--accent { border-color: var(--c-accent); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h-cta);
  padding-inline: 34px;
  background: var(--c-accent);
  color: var(--c-primary);
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  border-radius: var(--r-button);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out);
}
.btn:hover { background: var(--c-accent-hover); color: var(--c-primary); }
.btn--sm { height: var(--h-cta-sm); padding-inline: 20px; font-size: 14px; }

/* Secondary: outlined, for actions that must not compete with "Book a call" */
.btn--secondary {
  height: auto;
  min-height: var(--h-cta-sm);
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--c-accent);
  border-radius: var(--r-button);
  color: var(--c-accent);
  font-size: 14px;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.btn--secondary:hover {
  background: var(--c-accent);
  color: var(--c-primary);
}

/* Accent text link */
.link {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link:hover { color: var(--c-accent-hover); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--h-header);
  background: var(--c-secondary);
  border-bottom: 1px solid var(--c-hairline);
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--c-text);
}
.brand img { height: 32px; width: auto; }
.brand span {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--c-text);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* NOTE ON HERO SPACING
   The 80px block rhythm used elsewhere cannot coexist with the brief's
   requirement that the label, headline, subheadline, CTA and trust line are
   all visible without scrolling on a 1366x768 screen. The hero therefore uses
   its own tighter rhythm (--sp-hero-gap); every other section keeps the 80px. */
.hero {
  position: relative;
  min-height: calc(100svh - var(--h-header));
  display: flex;
  align-items: center;
  padding-block: 56px;
}
/* NOTE ON THE HERO SPLIT AND HEADLINE SIZE
   The brief asks for a ~60/40 split, an H1 of about 84px (80px minimum) and a
   headline on 3 lines. Measured in Clash Display 700 with the 0.02em heading
   letter-spacing, the longest line of "Deliver every project / without
   needing / heroes to rescue it." needs a column of 11.21x the font size:
   943px at 84px, 898px at 80px. Inside a 1240px content width that leaves the
   chart tile under 260px of inner width, too narrow to draw a five-trade
   programme at the required 14px bar thickness.
   Three lines is what makes the whole hero fit above the fold on 1366x768,
   so the headline is 72px (807px) and the split is 68/32, leaving the chart
   tile 384px outer and 304px inner.
   Adeel reviewed this trade-off and chose to keep 72px on 3 lines over the
   80px minimum. If the headline copy ever changes, re-check the line count
   at 1366 and 1920 before changing the size back. */
.hero__grid {
  display: grid;
  grid-template-columns: 68fr 32fr;
  gap: 40px;
  align-items: start;
}
.hero__copy > * + * { margin-top: var(--sp-hero-gap); }
.hero__copy .label + h1 { margin-top: 20px; }
.hero__sub { max-width: 46em; }
.hero__trust {
  font-family: var(--f-mono);
  font-size: var(--t-caption);
  line-height: 1.6;
  color: var(--c-text-body);
  max-width: 62ch;
  margin: 0;
}
.hero__cta + .hero__trust { margin-top: 20px; }

/* --------------------------------------------------------------------------
   7. Programme drift chart (hero) - the signature moment
   -------------------------------------------------------------------------- */
/* Both charts are drawn into these boxes by site.js after the page has laid
   out. Their heights depend only on the number of rows, not on the width, so
   reserving them here costs nothing and stops the tile growing underneath the
   reader - which was most of the measured layout shift. Keep these in step
   with CHART_DEFAULTS in site.js if the row metrics ever change. */
#drift-chart { min-height: 269px; }
/* No reserve needed: site.js is deferred, so the grid is built before first
   paint. Verified with Lighthouse at CLS 0. A fixed reserve would also be
   wrong at one breakpoint or the other - the grid is 348px at desktop and
   394px on a phone, where the legend wraps. */

.chart-tile { padding: var(--sp-tile); }
.chart-tile__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--c-text);
  margin: 0 0 24px;
}
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--f-mono); font-weight: 500; }
.chart__row-label { font-size: 13px; fill: var(--c-text-body); }
.chart__week      { font-size: 12px; fill: var(--c-text-caption); }
.chart__grid      { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.chart__marker    { stroke: var(--c-text-caption); stroke-width: 1; stroke-dasharray: 4 4; }
.chart__planned   { fill: none; stroke: var(--c-plan-bar); stroke-width: 1; }
.chart__actual    { fill: var(--c-accent); }

/* Both keys sit on one row, with "Illustration only." on its own line
   beneath. The swatch and inner gap are sized so the pair fits the narrow
   hero tile without wrapping. */
.chart-legend {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  color: var(--c-text-body);
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.chart-legend i { width: 18px; height: 10px; border-radius: 2px; flex: none; }
.chart-legend .swatch-planned { border: 1px solid var(--c-plan-bar); }
.chart-legend .swatch-actual  { background: var(--c-accent); }
.chart-tile .caption { margin-top: 14px; }

/* --------------------------------------------------------------------------
   7b. Bento grid and shared section furniture
   -------------------------------------------------------------------------- */
/* Every block inside a section is separated by the 80px rhythm. */
.section .wrap > * + * { margin-top: var(--sp-block); }

/* Tiles stretch to the height of their row. With align-items: start a short
   tile ends early and leaves background showing beneath it until the next
   row, which reads as dead space - most obviously in the fee and questions
   sections. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-grid-gap);
  align-items: stretch;
}
.c2 { grid-column: span 2; }
.c3 { grid-column: span 3; }
.c4 { grid-column: span 4; }
.c6 { grid-column: span 6; }
.r2 { grid-row: span 2; }

.section__head > * + * { margin-top: 28px; }
.section__intro { max-width: 60ch; }

/* A caption sits close to the grid it belongs to, not a full block away. */
.section .wrap > .bento__caption { margin-top: 32px; }

.tile > * + * { margin-top: 20px; }
.tile h3 + p { margin-top: 16px; }

/* Big accent figures */
.stat__figure {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(56px, 6.6vw, 96px);
  line-height: 1;
  letter-spacing: var(--ls-heading);
  color: var(--c-accent);
}
.stat__text { color: var(--c-text-body); }
.stat > * + * { margin-top: 16px; }
.pattern__intro { color: var(--c-text-body); }

/* --------------------------------------------------------------------------
   7c. The reframe
   -------------------------------------------------------------------------- */
.reframe__statement {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-statement);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-text);
  max-width: 1000px;
}
.reframe__cols { max-width: 760px; }
.reframe__cols p + p { margin-top: var(--sp-para); }
.reframe__line { max-width: 1000px; }

/* --------------------------------------------------------------------------
   7d. The 20 days
   -------------------------------------------------------------------------- */
.takt-tile { padding: var(--sp-tile); }

.weeks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-grid-gap);
  align-items: stretch;
}

/* Fallback: equal-height tiles with the YOU GET block pushed to the bottom.
   The selector has to out-specify `.tile > * + *`, which would otherwise win
   and replace the auto margin with 20px. */
.week { display: flex; flex-direction: column; }
.week.tile > .week__out { margin-top: auto; }

/* Preferred: a subgrid, so the week label, heading, paragraph and YOU GET
   block all line up across the four tiles, not just their bottom edges. */
@supports (grid-template-rows: subgrid) {
  .weeks { grid-template-rows: auto auto 1fr auto; }
  .week {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .week.tile > * + * { margin-top: 20px; }
  .week.tile > .week__out { margin-top: 24px; }
}

.week__out {
  padding-top: 24px;
  border-top: 1px solid var(--c-hairline);
}
.week__out > * + * { margin-top: 10px; }
.week__deliverable { color: var(--c-text); }

.six__num {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--c-accent);
}
.six h3 { font-size: 20px; }
.six p { font-size: 16px; }

/* --------------------------------------------------------------------------
   7e. What you get
   -------------------------------------------------------------------------- */
.bento--deliverables { grid-auto-rows: min-content; }

.ticks { list-style: none; margin: 28px 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding: 16px 0 16px 28px;
  border-top: 1px solid var(--c-hairline);
  color: var(--c-text);
  font-size: 17px;
  line-height: 1.5;
}
.ticks li:last-child { border-bottom: 1px solid var(--c-hairline); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 14px;
  height: 1px;
  background: var(--c-accent);
}

.sample__title { margin-top: 12px; }
.sample__link { margin-top: 24px; }

/* Miniature of the Delivery Health Assessment */
.mini-ratings { margin-top: 28px; display: grid; gap: 12px; }
.mini-rating {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}
/* This card uses Clash Display for its title (it is an h3) and IBM Plex Sans
   for the row labels and caption. Only the ILLUSTRATIVE SAMPLE label stays in
   IBM Plex Mono. */
.mini-rating > span {
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--c-text-body);
}
.sample-card > .caption { font-family: var(--f-sans); font-size: 15px; line-height: 1.55; }
.mini-rating > i { display: flex; gap: 4px; }
.mini-rating > i b {
  display: block;
  width: 26px;
  height: 8px;
  border-radius: 2px;
  background: var(--c-empty-segment);
}
.mini-rating > i b.is-filled { background: var(--c-accent); }

/* Miniature of the future way of delivering */
.mini-flow { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 8px; }
.mini-flow li {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,.12);
  font-family: var(--f-mono);
  font-size: var(--t-caption);
  line-height: 1.35;
  color: var(--c-text);
}
.mini-flow li:nth-child(1) { margin-left: 0;   }
.mini-flow li:nth-child(2) { margin-left: 4%;  }
.mini-flow li:nth-child(3) { margin-left: 8%;  }
.mini-flow li:nth-child(4) { margin-left: 12%; }
.mini-flow li:nth-child(5) { margin-left: 16%; }
.mini-flow li:nth-child(6) { margin-left: 20%; }
.mini-flow li.is-accent { background: var(--c-accent); color: var(--c-primary); }

/* --------------------------------------------------------------------------
   7f. The fee
   -------------------------------------------------------------------------- */
.fee__figure {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(56px, 8.2vw, 120px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--c-accent);
}
.fee__terms { color: var(--c-text); }
.fee > * + * { margin-top: 16px; }
.rule { border: 0; border-top: 1px solid var(--c-hairline); margin: 32px 0; }
.fee__cta { display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   7g. About
   -------------------------------------------------------------------------- */
/* The photo fills its tile rather than setting the row height, so it lines up
   with the copy tile beside it. */
.about__photo {
  padding: 0;
  overflow: hidden;
  position: relative;
  align-self: stretch;
  min-height: 420px;
}
.about__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.about__photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(11,16,22,0), rgba(11,16,22,.85));
  pointer-events: none;
}
.about__copy .label + h2 { margin-top: 14px; }

/* --------------------------------------------------------------------------
   8. Booking
   -------------------------------------------------------------------------- */
.booking__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}
/* The calendar is far taller than this column, so the copy stays in view
   while the time slots scroll past. Sticky is desktop only - see the
   max-width: 1000px block, where it is switched off. */
.booking__copy { position: sticky; top: 120px; }
.booking__copy > * + * { margin-top: var(--sp-para); }
.booking__facts {
  list-style: none;
  margin: var(--sp-para) 0 0;
  padding: 0;
  border-top: 1px solid var(--c-hairline);
}
.booking__facts li {
  border-bottom: 1px solid var(--c-hairline);
  padding-block: 18px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-body);
}
.booking__panel { padding: 28px; }
.booking__panel > .label { margin-bottom: 20px; }

/* The embed reports its own content height and grows to match, so the whole
   calendar is on the page and only the page scrolls. Nothing here may clip it
   or give it a fixed height, or the booker gets its own inner scrollbar. */
#cal-embed { width: 100%; min-height: 620px; height: auto; overflow: visible; }
#cal-embed > * { width: 100% !important; }
#cal-embed iframe { display: block; width: 100%; border-radius: 12px; }

.booking__fallback { display: none; text-align: center; padding: 48px 0 16px; }
.booking__fallback p { margin-bottom: 28px; color: var(--c-text-body); }
.booking--failed #cal-embed { display: none; }
.booking--failed .booking__fallback { display: block; }

.booking__aside { margin-top: 20px; }
.booking__note { margin-top: 14px; }

/* --------------------------------------------------------------------------
   8b. Sub-pages: the two samples and the privacy policy
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sub-pages open on their title rather than a near-empty screen, so the top
   padding is well under the 140px the long home-page sections use. */
.subpage { padding-top: 44px; }
.subpage .wrap > * + * { margin-top: 56px; }
.subpage__head > * + * { margin-top: 18px; }
.subpage__sub { color: var(--c-text-body); font-size: 20px; }
.subpage h2 { font-size: clamp(28px, 2.6vw, 38px); }
.tile__h2 { font-family: var(--f-display); font-weight: 600; font-size: 24px; line-height: 1.2; }

/* "Download as PDF" is a real button, styled like the accent text links */
.link--btn {
  background: none;
  padding: 0 0 2px;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
}

.finding { font-size: clamp(21px, 2vw, 26px); line-height: 1.35; color: var(--c-text); }

.numbered { margin: 0; padding-left: 1.3em; }
.numbered li { margin-top: 14px; }
.numbered li::marker { color: var(--c-accent); font-family: var(--f-mono); }

.ticks--tight li { padding-block: 12px; font-size: 16px; }
.ticks--tight li b { color: var(--c-text); }

/* Rating: four segments, the first N in accent */
.rating { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.rating > i { display: inline-flex; gap: 4px; flex: none; }
.rating > i b {
  display: block;
  width: 18px; height: 8px;
  border-radius: 2px;
  background: var(--c-empty-segment);
}
.rating > i b.is-filled { background: var(--c-accent); }

.rating-key__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.rating-key__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  font-size: 16px;
}
.rating-key__list b { color: var(--c-text); }

/* Data tables */
.dtable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
}
.dtable th, .dtable td {
  padding: 20px 24px 20px 0;
  border-bottom: 1px solid var(--c-hairline);
  vertical-align: top;
  font-weight: 400;
}
.dtable thead th {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-body);
  border-bottom-color: var(--c-tile-border);
  padding-bottom: 14px;
}
.dtable tbody th { color: var(--c-text); width: 20%; padding-right: 32px; }
.dtable td { color: var(--c-text-body); }
.dtable td:last-child, .dtable th:last-child { padding-right: 0; }
/* On "What changes" only the new-way column is in bright text, so the eye
   goes to what changes. The area and Today columns stay at the muted body
   colour; the new-way column is lifted to --c-text rather than the others
   being darkened, because --c-text-caption is already the body colour and
   the brief's #6B7682 fails the 4.5:1 contrast rule. */
.dtable--changes tbody th { width: 22%; color: var(--c-text-body); font-weight: 400; }
.dtable .is-today { color: var(--c-text-body); }
.dtable--changes tbody td:not(.is-today) { color: var(--c-text); }

/* The staircase: six tiles, each taller than the last */
.staircase {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-grid-gap);
  align-items: end;
}
/* The staircase shape is the point of this section, so the whole ladder plus
   its heading has to fit one 1366x768 screen. The tallest tile is capped at
   400px, which with the heading and its margin comes to 494px of the ~700px
   available below the sticky header. */
.staircase li { display: flex; flex-direction: column; padding: 24px; }
.staircase li:nth-child(1) { height: 200px; }
.staircase li:nth-child(2) { height: 240px; }
.staircase li:nth-child(3) { height: 280px; }
.staircase li:nth-child(4) { height: 320px; }
.staircase li:nth-child(5) { height: 360px; }
.staircase li:nth-child(6) { height: 400px; }
.staircase h3 { font-size: 17px; margin-top: 14px; }
.staircase p:last-child { margin-top: 10px; font-size: 15px; line-height: 1.45; }
.staircase__num {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  color: var(--c-text-body);
}
.staircase__num--accent { color: var(--c-accent); }

/* Long-form copy (privacy policy) */
.prose { max-width: 760px; }
.prose h2 { margin-top: 56px; }
.prose h2:first-child { margin-top: 0; }
.prose > p { margin-top: 24px; }
.prose .ticks { margin-top: 24px; }

/* The closing line sits above the button, both centred, 24px apart */
.subpage__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* --------------------------------------------------------------------------
   7d2. The Takt plan
   --------------------------------------------------------------------------
   Zones down the side, takt periods across the top, one cell per trade per
   zone per week. Built by site.js; the cell colours are set inline there,
   alongside the text colour each one needs to stay legible.
   -------------------------------------------------------------------------- */
.takt { position: relative; }

.takt__head { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.takt__time { color: var(--c-text-body); }

/* The grid scrolls sideways rather than squashing */
.takt__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}

/* min-content resolves to the sum of the column minimums - the zone column
   plus nine 56px cells plus the gaps - so the grid never squeezes cells below
   56px, and the 1fr lets it expand to fill the tile when there is room.
   max-content would instead force the full text width and overflow at desktop
   sizes that could have held the grid; no min-width at all lets the 1fr
   resolve against the squeezed container and the cells drop under 56px. */
.takt__grid {
  display: grid;
  gap: 4px;
  min-width: min-content;
}
.takt__row {
  display: grid;
  grid-template-columns: var(--zone-col, 84px) repeat(var(--weeks), minmax(56px, 1fr));
  gap: 4px;
}

/* The zone column stays put while the weeks scroll under it */
.takt__zone,
.takt__corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--c-secondary);
}
.takt__zone {
  display: flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  color: var(--c-text-body);
  padding-right: 10px;
}
.takt__wk {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  color: var(--c-text-caption);
  text-align: center;
  padding-bottom: 2px;
}

.takt__cell {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  /* Empty cells are just an outline, so the diagonal carries the meaning */
  border: 1px solid rgba(255,255,255,.06);
}
.takt__cell.is-filled { border-color: transparent; }

/* Full trade names while there is room; short codes below that, with the
   legend carrying the meaning. The switch is at the width where
   "M&E first fix" stops fitting a cell. */
.takt__abbr { display: none; }
@media (max-width: 1320px) {
  .takt__full { display: none; }
  .takt__abbr { display: inline; }
}

/* Reveal, column by column: the train moving through the zones */
.takt__grid .takt__cell { opacity: 0; transform: scale(.94); }
.takt__grid.is-in .takt__cell {
  opacity: 1;
  transform: none;
  transition: opacity 260ms var(--ease-out) var(--d, 0ms),
              transform 260ms var(--ease-out) var(--d, 0ms);
}

.takt__fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  bottom: 74px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms var(--ease-out);
  background: linear-gradient(to right, rgba(21,29,38,0), var(--c-secondary));
}
.takt.is-scrollable .takt__fade { opacity: 1; }

.takt__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 20px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  color: var(--c-text-body);
}
.takt__key { display: inline-flex; align-items: center; gap: 8px; }
.takt__key i { width: 16px; height: 10px; border-radius: 2px; flex: none; }

@media (max-width: 700px) {
  .takt__row { --zone-col: 68px; }
  .takt__zone { font-size: 12px; padding-right: 8px; }
  .takt__cell { min-height: 40px; }
}

/* --------------------------------------------------------------------------
   8b1. The planning cascade (Last Planner explainer)
   --------------------------------------------------------------------------
   Five levels down the page, each with the question it answers in the left
   gutter. The accent shades run darkest to lightest as the horizon shortens
   and the detail increases - the same five shades the Takt grid uses, so the
   two explainers read as one family.
   -------------------------------------------------------------------------- */
.cascade { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.cascade__step {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 24px;
  align-items: stretch;
  background: var(--c-secondary);
  border: 1px solid var(--c-tile-border);
  border-radius: var(--r-tile);
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
}
/* The coloured spine, one shade per level */
.cascade__step::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--step-colour, var(--c-accent));
}
.cascade__state {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--step-colour, var(--c-accent));
  margin: 0;
  padding-top: 2px;
}
.cascade__body > * + * { margin-top: 10px; }
.cascade__body h3 { font-size: 21px; }
.cascade__body p { font-size: 16px; line-height: 1.6; }
.cascade__horizon {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  color: var(--c-text-caption);
}

@media (max-width: 700px) {
  .cascade__step { grid-template-columns: 1fr; gap: 10px; padding: 22px; }
  .cascade__state { padding-top: 0; }
}

/* A plain definition list used for the assignment criteria */
.deflist { margin: 28px 0 0; display: grid; gap: 0; }
.deflist > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--c-hairline);
}
.deflist > div:last-child { border-bottom: 1px solid var(--c-hairline); }
.deflist dt {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-accent);
}
.deflist dd { margin: 0; font-size: 16px; line-height: 1.6; }

@media (max-width: 700px) {
  .deflist > div { grid-template-columns: 1fr; gap: 8px; }
}

/* A formula or key equation, set apart from the prose */
.formula {
  margin: 32px 0;
  padding: 28px 32px;
  background: var(--c-secondary);
  border: 1px solid var(--c-tile-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-tile);
}
.formula__eq {
  font-family: var(--f-mono);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text);
}
.formula__eq b { color: var(--c-accent); font-weight: 500; }
.formula__note { margin-top: 16px; font-size: 16px; line-height: 1.6; }

/* A pointer from an explainer to the free tools that put it into practice */
.try-it { margin-top: var(--sp-block); }
.try-it .label { margin-bottom: 14px; }
.try-it h3 { margin-bottom: 14px; }
.try-it > p { max-width: 70ch; }
.tool-links { list-style: none; margin: 24px 0 0; padding: 0; }
.tool-links li {
  padding: 16px 0;
  border-top: 1px solid var(--c-hairline);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: baseline;
}
.tool-links li:last-child { border-bottom: 1px solid var(--c-hairline); }
.tool-links a {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  color: var(--c-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.tool-links a:hover { color: var(--c-accent-hover); }
.tool-links span { font-size: 16px; line-height: 1.55; color: var(--c-text-body); }

@media (max-width: 700px) {
  .tool-links li { grid-template-columns: 1fr; gap: 8px; }
}

/* Small-print attribution at the foot of an explainer */
.attribution {
  margin-top: var(--sp-block);
  padding-top: 24px;
  border-top: 1px solid var(--c-hairline);
  max-width: 760px;
}
.attribution p + p { margin-top: 14px; }

/* --------------------------------------------------------------------------
   8b2. 404
   -------------------------------------------------------------------------- */
.notfound { min-height: calc(100svh - var(--h-header) - 120px); display: flex; align-items: center; }
.notfound__inner { max-width: 640px; }
.notfound__inner > * + * { margin-top: 24px; }
.notfound__inner h1 { font-size: clamp(40px, 5.2vw, 68px); }
.notfound__text { color: var(--c-text-body); }
.notfound__text a { color: var(--c-accent); }
.notfound__inner .btn { margin-top: 32px; }

/* --------------------------------------------------------------------------
   8c. Cookie banner
   -------------------------------------------------------------------------- */
/* A compact card in the bottom-left corner, not a bar across the page, so it
   covers as little of the hero as possible while it is showing. */
.consent {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 60;
  width: calc(100% - 48px);
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: var(--c-secondary);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.38);

  /* Appears only after the visitor scrolls past the hero. See site.js. */
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.consent.is-in { opacity: 1; }
.consent__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-body);
}
.consent__text a { color: var(--c-accent); }
.consent__actions { display: flex; gap: 10px; }
.consent__actions .btn { flex: 1 1 0; width: auto; }

/* On phones it spans the width, but stays short enough to keep clear of the
   bottom 180px of the viewport. */
@media (max-width: 700px) {
  .consent {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    padding: 16px;
    gap: 14px;
  }
  .consent__text { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--c-hairline);
  padding-block: 40px;
  background: var(--c-primary);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: var(--t-caption);
  color: var(--c-text-caption);
}
.footer__inner a { color: var(--c-text-caption); text-decoration: none; border-bottom: 1px solid var(--c-hairline); }
.footer__inner a:hover { color: var(--c-accent); }
.footer__right { display: flex; flex-wrap: wrap; gap: 24px; }

/* --------------------------------------------------------------------------
   10. Scroll reveal - 300ms fade and 12px rise. The only motion besides 7.
   -------------------------------------------------------------------------- */
/* Only hide the tiles once site.js has confirmed it is running and will
   reveal them again. Without this guard, a failure to load site.js would
   leave every tile on the page invisible. */
.js .reveal { opacity: 0; transform: translateY(12px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
/* Short desktop screens (e.g. 1366x768): keep the whole hero above the fold */
@media (min-width: 1000px) and (max-height: 860px) {
  :root { --sp-hero-gap: 22px; }
  .hero { padding-block: 36px; }
  .hero__copy .label + h1 { margin-top: 14px; }
  .hero__cta + .hero__trust { margin-top: 16px; }
}

@media (max-width: 1000px) {
  .hero__grid,
  .booking__grid { grid-template-columns: 1fr; gap: 56px; }
  .hero { min-height: 0; padding-block: 72px; }
  .booking__copy { position: static; top: auto; }

  .bento { grid-template-columns: repeat(2, 1fr); }
  .c2, .c3 { grid-column: span 1; }
  .c4, .c6 { grid-column: span 2; }
  .r2 { grid-row: auto; }
  .weeks { grid-template-columns: repeat(2, 1fr); }
  .reframe__cols { grid-template-columns: 1fr; gap: var(--sp-para); }
  .about__photo { min-height: 340px; }
}

@media (max-width: 700px) {
  :root {
    --t-h1: 46px;
    --t-h2: 34px;
    --t-body: 17px;
    --sp-section: 80px;
    --sp-block: 56px;
    --sp-tile: 28px;
    --w-gutter: 20px;
  }
  .brand span { font-size: 19px; }
  .brand img { height: 28px; }
  .btn { width: 100%; }
  .header .btn { width: auto; }
}

/* Narrow phones: the CTA keeps its full wording, so the wordmark gives way to
   the logo mark alone rather than letting the two collide. */
@media (max-width: 480px) {
  .brand span { display: none; }
  .header .btn { font-size: 13px; padding-inline: 16px; }
  .booking__panel { padding: 20px; }
  #cal-embed { min-height: 560px; }

  .bento { grid-template-columns: 1fr; }
  .c2, .c3, .c4, .c6 { grid-column: auto; }
  .weeks { grid-template-columns: 1fr; }
  .mini-flow li { margin-left: 0 !important; }
  .about__photo { min-height: 280px; }

  /* Each table row becomes a stacked block, labelled by its column heading */
  .dtable thead { display: none; }
  .dtable, .dtable tbody, .dtable tr, .dtable th, .dtable td { display: block; width: auto; }
  .dtable tr {
    border: 1px solid var(--c-tile-border);
    border-radius: var(--r-tile);
    background: var(--c-secondary);
    padding: 24px;
    margin-bottom: var(--sp-grid-gap);
  }
  .dtable th, .dtable td { border: 0; padding: 0; }
  .dtable tbody th {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
  }
  .dtable td { margin-top: 16px; }
  .dtable td::before {
    content: attr(data-th);
    display: block;
    margin-bottom: 6px;
    font-family: var(--f-mono);
    font-size: var(--t-mono-sm);
    font-weight: 500;
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--c-text-body);
  }
}

@media (max-width: 1000px) {
  .staircase { grid-template-columns: repeat(2, 1fr); }
  .staircase li { height: auto !important; min-height: 0 !important; }
}

@media (max-width: 700px) {
  .staircase { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   11b. Print - white background, dark text
   -------------------------------------------------------------------------- */
@media print {
  /* Redefining the tokens repaints the whole page for paper in one place. */
  :root {
    --c-primary:       #FFFFFF;
    --c-secondary:     #FFFFFF;
    --c-text:          #0B1016;
    --c-text-body:     #2A3138;
    --c-text-caption:  #4A525A;
    --c-tile-border:   #C8CFD6;
    --c-hairline:      #D5DAE0;
    --c-empty-segment: #E3E7EB;
    --sp-section:      0;
    --sp-block:        28px;
  }

  html, body { background: #FFFFFF; color: #2A3138; }

  /* Screen furniture that has no meaning on paper */
  .header, .footer, .no-print, .aurora, .skip-link, .consent { display: none !important; }

  .wrap { max-width: none; padding-inline: 0; }
  .section { padding-block: 0; }
  .subpage .wrap > * + * { margin-top: 28px; }

  /* Never animate, never hide, never split a tile across a page */
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
  .tile {
    background: #FFFFFF;
    border: 1px solid var(--c-tile-border);
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .tile--accent { border-color: var(--c-accent); }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  tr, li { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }

  a { color: inherit; text-decoration: underline; }

  /* Keep the ratings readable when a printer drops background colours */
  .rating > i b, .mini-rating > i b { border: 1px solid var(--c-tile-border); }
  .rating > i b.is-filled, .mini-rating > i b.is-filled {
    background: var(--c-accent);
    border-color: var(--c-accent);
  }

  .staircase { display: block; }
  .staircase li { height: auto !important; min-height: 0 !important; margin-bottom: 12px; }

  @page { margin: 16mm; }
}

/* --------------------------------------------------------------------------
   11c. Touch targets
   --------------------------------------------------------------------------
   The brief asks for a 44px minimum. Buttons already clear it; small text
   links do not. On touch devices their tappable area is extended with a
   transparent overlay, which leaves the visible text and the layout exactly
   as they are. Restricted to coarse pointers so mouse hit areas are
   unchanged.
   -------------------------------------------------------------------------- */
.brand { padding-block: 8px; }   /* 28px mark -> 44px tappable */

@media (pointer: coarse) {
  .link,
  .footer__inner a,
  .booking__note a,
  .sample__link a,
  .consent__text a {
    position: relative;
  }
  .link::after,
  .footer__inner a::after,
  .booking__note a::after,
  .sample__link a::after,
  .consent__text a::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* --------------------------------------------------------------------------
   12. Reduced motion - show final states, move nothing
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}