/* ──────────────────────────────────────────────────────────────
   StarApple AI Canada, design system
   Ground: snowlight ivory. Ink: spruce black.
   Seven practice accents drawn from the Canadian landscape:
   aurora green, glacier blue, lake cyan, maple red, prairie gold,
   starapple violet (carried from the parent brand), tundra plum.
   Type: Newsreader (display) · Archivo (interface) · IBM Plex Mono (data)
   ────────────────────────────────────────────────────────────── */

:root {
  /* surfaces */
  --paper:      #EFEDE5;
  --raised:     #F8F7F2;
  --sunken:     #E6E3D9;
  --ink:        #17201D;
  --body:       #46504C;
  --muted:      #5C6660;
  --rule:       rgba(23, 32, 29, 0.15);
  --rule-soft:  rgba(23, 32, 29, 0.08);
  --shadow:     rgba(23, 32, 29, 0.10);

  /* practice accents */
  --aurora:     #127357;
  --glacier:    #2160A8;
  --lake:       #077583;
  --maple:      #B5342A;
  --prairie:    #8D5E0A;
  --violet:     #5B2D9B;
  --plum:       #87355F;

  --accent:     var(--violet);
  --on-accent:  #FFFFFF;

  /* type */
  --ff-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --ff-ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* rhythm */
  --gutter:     clamp(20px, 5vw, 64px);
  --band:       clamp(72px, 9vw, 132px);
  --measure:    66ch;
  --wide:       1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #121715;
    --raised:    #192120;
    --sunken:    #0D1211;
    --ink:       #ECEAE1;
    --body:      #B4BDB7;
    --muted:     #7F8A84;
    --rule:      rgba(236, 234, 225, 0.18);
    --rule-soft: rgba(236, 234, 225, 0.09);
    --shadow:    rgba(0, 0, 0, 0.5);

    --aurora:    #3FC79B;
    --glacier:   #6BA8E8;
    --lake:      #3FC0D2;
    --maple:     #F0796C;
    --prairie:   #E0A63C;
    --violet:    #B08BEE;
    --plum:      #DC86B4;

    --on-accent: #121715;
  }
}

:root[data-theme="dark"] {
  --paper:     #121715;
  --raised:    #192120;
  --sunken:    #0D1211;
  --ink:       #ECEAE1;
  --body:      #B4BDB7;
  --muted:     #7F8A84;
  --rule:      rgba(236, 234, 225, 0.18);
  --rule-soft: rgba(236, 234, 225, 0.09);
  --shadow:    rgba(0, 0, 0, 0.5);

  --aurora:    #3FC79B;
  --glacier:   #6BA8E8;
  --lake:      #3FC0D2;
  --maple:     #F0796C;
  --prairie:   #E0A63C;
  --violet:    #B08BEE;
  --plum:      #DC86B4;

  --on-accent: #121715;
}

/* ── base ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--ff-ui);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; z-index: 200; font-family: var(--ff-mono); font-size: 13px;
}
.skip:focus { left: 8px; top: 8px; }

/* ── layout primitives ────────────────────────────────── */

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

.band { padding-block: var(--band); }

.rule-top { border-top: 1px solid var(--rule-soft); }

.lede { max-width: var(--measure); }

/* ── type ─────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(40px, 6.6vw, 78px); line-height: 1.02; }
h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; }
h3 { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; }

p { margin: 0; }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 52px;
}

.section-head p { max-width: var(--measure); font-size: 18px; }

/* ── buttons ──────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 13px 22px;
  border-radius: 4px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}

.btn-solid {
  background: var(--ink);
  color: var(--paper);
}
.btn-solid:hover { background: var(--accent); color: var(--on-accent); }

.btn-line {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-line:hover { border-color: var(--ink); }

.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ── masthead ─────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark b {
  font-family: var(--ff-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.wordmark span {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--maple);
  border-left: 1px solid var(--rule);
  padding-left: 9px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav a:not(.btn) {
  font-size: 14.5px;
  color: var(--body);
  text-decoration: none;
  transition: color .18s ease;
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav .btn { font-size: 14px; padding: 9px 16px; }

@media (max-width: 880px) {
  .nav a:not(.btn) { display: none; }
}

/* At phone width the wordmark and the call to action have to share one
   line, so the button tightens rather than wrapping to two. */
@media (max-width: 560px) {
  .masthead .wrap { gap: 12px; }
  .nav .btn { font-size: 12.5px; padding: 8px 12px; white-space: nowrap; }
  .wordmark b { font-size: 17px; }
  .wordmark span { font-size: 10px; letter-spacing: 0.12em; padding-left: 7px; }
}

/* Smallest phones: the same row, one notch tighter again. */
@media (max-width: 380px) {
  .masthead .wrap { gap: 8px; }
  .nav .btn { font-size: 12px; padding: 8px 10px; }
  .wordmark span { letter-spacing: 0.08em; padding-left: 6px; }
}

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

.hero { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px); }

.hero h1 { margin-block: 26px 28px; max-width: 15ch; }

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero-lede {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.55;
  max-width: 54ch;
  color: var(--body);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--ff-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ── full-bleed imagery ───────────────────────────────── */

.bleed { margin-inline: calc(50% - 50vw); width: 100vw; }


/* ── spectrum: seven practices as one rule ────────────── */

.spectrum {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-top: 8px;
}

.spectrum a {
  display: block;
  text-decoration: none;
  padding-top: 14px;
  border-top: 5px solid var(--seg);
  transition: border-width .2s ease;
}
.spectrum a:hover { border-top-width: 11px; }

.spectrum .code {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--seg);
}

.spectrum .name {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(13px, 1.35vw, 17px);
  color: var(--ink);
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .spectrum { grid-template-columns: repeat(2, 1fr); gap: 3px 18px; }
}

/* ── facts row ────────────────────────────────────────── */


/* ── practice cards ───────────────────────────────────── */


/* ── regulatory surface ───────────────────────────────── */




/* ── method steps ─────────────────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--rule-soft); }

.step { background: var(--paper); padding: 30px 28px 34px; display: flex; flex-direction: column; gap: 12px; }

.step .n {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.step h3 { font-size: 22px; }
.step p { font-size: 15.5px; }

/* ── differentiators ──────────────────────────────────── */

.diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px 48px; }
.diff h3 { font-size: 23px; margin-bottom: 10px; }
.diff p { font-size: 15.5px; }
.diff .mark {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--seg, var(--accent));
  margin-bottom: 18px;
}

/* ── quote band ───────────────────────────────────────── */

.quote-band { background: var(--sunken); }

.quote {
  font-family: var(--ff-display);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.22;
  color: var(--ink);
  max-width: 20ch;
  margin: 0;
  letter-spacing: -0.015em;
}
.quote em { font-style: italic; color: var(--accent); }

.quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } }

.quote-grid img { border-radius: 3px; height: clamp(240px, 34vw, 400px); object-fit: cover; width: 100%; }

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

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.card-contact {
  background: var(--raised);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 30px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-role { display: flex; flex-direction: column; gap: 4px; }
.contact-role .role {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-role a {
  font-family: var(--ff-display);
  font-size: 24px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  align-self: flex-start;
  padding-bottom: 2px;
}
.contact-role a:hover { color: var(--accent); }

.cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
}

form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field label {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field select,
.field textarea {
  font-family: var(--ff-ui);
  font-size: 16px;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color .18s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); outline: none; }

.field textarea { resize: vertical; min-height: 118px; line-height: 1.55; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.hp { position: absolute; left: -9999px; }

.form-note {
  font-size: 13.5px;
  color: var(--muted);
}

.form-status {
  font-family: var(--ff-mono);
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--raised);
  color: var(--ink);
}
.form-status[data-tone="ok"] { border-color: var(--aurora); color: var(--aurora); }

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

.site-foot {
  border-top: 1px solid var(--rule-soft);
  padding-block: 48px 40px;
  font-size: 14.5px;
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 36px 40px;
  align-items: start;
}

.foot-col .foot-h {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-col a { text-decoration: none; color: var(--body); }
.foot-col a:hover { color: var(--ink); }

.foot-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ── entrance (from a visible resting state) ──────────── */

.rise { animation: rise .7s cubic-bezier(.2,.85,.3,1) both; }
.rise-2 { animation-delay: .07s; }
.rise-3 { animation-delay: .14s; }
.rise-4 { animation-delay: .21s; }

@keyframes rise {
  from { opacity: .55; transform: translateY(11px); }
  to   { opacity: 1;   transform: none; }
}

/* ── services page ────────────────────────────────────── */

.detail {
  padding-block: clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--rule-soft);
  scroll-margin-top: 80px;
}

.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 12px clamp(28px, 5vw, 64px);
  align-items: baseline;
}
@media (max-width: 820px) { .detail-head { grid-template-columns: 1fr; } }

.detail .code {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--seg);
}

.detail h2 { font-size: clamp(28px, 3.6vw, 40px); }
.detail .full { font-size: 15px; color: var(--muted); margin-top: 6px; }

.detail .claim {
  font-family: var(--ff-display);
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.34;
  color: var(--ink);
  max-width: 44ch;
}

.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 28px clamp(28px, 5vw, 64px);
  margin-top: 34px;
  align-items: start;
}
@media (max-width: 820px) { .detail-body { grid-template-columns: 1fr; } }

.detail-body h3 {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.deliverables { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 32px; }
.deliverables li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.5;
}
.deliverables li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 2px;
  background: var(--seg);
}

.spec { display: flex; flex-direction: column; gap: 16px; }
.spec div { display: flex; flex-direction: column; gap: 3px; }
.spec .k {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec .v { font-size: 15.5px; color: var(--ink); }

/* Charter closes the practice grid: a full-width capstone rather than a lone
   cell beside dead space. Reads as a horizontal band once there is room for it. */
@media (min-width: 640px) {
}

/* Anchored practice cards clear the sticky masthead. */

/* ══════════════════════════════════════════════════════════
   MOTION
   The page moves in three registers: a hero that assembles
   itself once on load, a settle-in as sections enter, and
   hover feedback on anything clickable. Everything is
   reversible from a visible resting state, and everything
   stops under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════ */

/* ── scroll progress: the seven practice hues, left to right ── */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 140;
  background: linear-gradient(90deg,
    var(--aurora) 0%, var(--prairie) 17%, var(--lake) 33%,
    var(--glacier) 50%, var(--maple) 67%, var(--violet) 83%, var(--plum) 100%);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  pointer-events: none;
}

/* ── masthead condenses once the hero is behind you ── */

.masthead {
  transition: min-height .3s ease, background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.masthead[data-mode="film"] {
  background: transparent;
  border-bottom-color: transparent;
}
.masthead .wrap { transition: min-height .3s ease; }

.masthead[data-mode="film"] .wordmark b { color: var(--film-ink); }
.masthead[data-mode="film"] .nav a:not(.btn) { color: rgba(244, 242, 234, 0.82); }
.masthead[data-mode="film"] .nav a:not(.btn):hover { color: var(--film-ink); }
.masthead[data-mode="film"] .wordmark span { color: #F2A9A0; border-left-color: rgba(244, 242, 234, 0.3); }
.masthead[data-mode="film"] .btn-solid { background: var(--film-ink); color: #17201D; }

.masthead[data-mode="page"] {
  background: var(--paper);
  border-bottom-color: var(--rule-soft);
  box-shadow: 0 1px 18px var(--shadow);
}
.masthead[data-mode="page"] .wrap { min-height: 58px; }

/* nav links grow an underline from the centre */
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.nav a:not(.btn):hover::after { transform: scaleX(1); }

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

:root { --film-ink: #F4F2EA; }

.hero--film {
  position: relative;
  isolation: isolate;
  padding-block: clamp(120px, 17vw, 190px) clamp(28px, 4vw, 44px);
  margin-top: -68px;
  overflow: hidden;
  background: #0B100E;
}

.hero-media { position: absolute; inset: 0; z-index: -2; }

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: filmIn 2.4s cubic-bezier(.2,.8,.3,1) both;
}

@keyframes filmIn {
  from { opacity: .35; transform: scale(1.045); }
  to   { opacity: 1;   transform: none; }
}

/* Two scrims: a vertical one that darkens the foot so the spectrum rule reads,
   and a lateral one that protects the headline column. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(9,14,12,.72) 0%, rgba(9,14,12,.42) 38%, rgba(9,14,12,.78) 100%),
    linear-gradient(90deg, rgba(9,14,12,.62) 0%, rgba(9,14,12,.14) 62%, rgba(9,14,12,.34) 100%);
}

.hero--film .eyebrow { color: rgba(244, 242, 234, 0.72); }
.hero--film h1 { color: var(--film-ink); }
.hero--film h1 em { color: #9FE6C6; font-style: italic; }
.hero--film .hero-lede { color: rgba(244, 242, 234, 0.88); }
.hero--film .hero-meta { color: rgba(244, 242, 234, 0.68); border-top-color: rgba(244, 242, 234, 0.2); }

.hero--film .btn-solid { background: var(--film-ink); color: #17201D; }
.hero--film .btn-solid:hover { background: #9FE6C6; color: #12201B; }
.hero--film .btn-line { color: var(--film-ink); border-color: rgba(244, 242, 234, 0.4); }
.hero--film .btn-line:hover { border-color: var(--film-ink); background: rgba(244, 242, 234, 0.08); }

/* the spectrum becomes the hero's foot rule */
.hero-spectrum { margin-top: clamp(52px, 7vw, 84px); }
.hero-spectrum .name { color: var(--film-ink); }
.hero-spectrum a { opacity: .92; transition: opacity .25s ease, border-width .2s ease; }
.hero-spectrum a:hover { opacity: 1; }

/* hero assembles once, on load */
.hero--film .rise { animation: heroIn .9s cubic-bezier(.16,1,.3,1) both; }
.hero--film .rise-2 { animation-delay: .12s; }
.hero--film .rise-3 { animation-delay: .24s; }
.hero--film .rise-4 { animation-delay: .36s; }
.hero-spectrum.rise { animation-delay: .5s; }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ── settle-in on scroll ─────────────────────────────────
   Applied only once JS confirms it can run, so with no JS
   every element is simply visible. The resting state is
   dimmed and nudged, never hidden. */

.js .reveal {
  opacity: .72;
  transform: translateY(16px);
  transition: opacity .75s cubic-bezier(.2,.8,.3,1), transform .75s cubic-bezier(.2,.8,.3,1);
  transition-delay: var(--d, 0ms);
}
.js .reveal.in { opacity: 1; transform: none; }

/* ── hover feedback ──────────────────────────────────── */


.quote-grid img { transition: transform 1.1s cubic-bezier(.2,.8,.3,1); }
.quote-grid img:hover { transform: scale(1.02); }


.step { transition: background .25s ease; }
.step:hover { background: var(--raised); }

.diff .mark { transition: width .35s cubic-bezier(.2,.8,.3,1); }
.diff:hover .mark { width: 56px; }

.foot-col a { transition: color .2s ease, padding-left .2s ease; }
.foot-col a:hover { padding-left: 4px; }

.contact-role a { transition: color .2s ease, border-color .2s ease; }

.field input, .field select, .field textarea { transition: border-color .18s ease, background .18s ease; }


/* ── reduced motion: everything holds still ──────────── */

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .hero-video { animation: none; }
  .hero--film .rise { animation: none; }
  .progress { display: none; }
}

/* ══════════════════════════════════════════════════════════
   BLOG AND FREE TOOLS
   ══════════════════════════════════════════════════════════ */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

.tool-card {
  background: var(--paper);
  padding: 32px 30px 34px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-decoration: none;
  position: relative;
  transition: background .22s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}
.tool-card:hover { background: var(--raised); transform: translateY(-3px); }

.tool-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--seg);
  transform: scaleX(.14);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.tool-card:hover::before { transform: scaleX(1); }

.tool-card .code {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--seg);
}
.tool-card h3 { color: var(--ink); transition: color .22s ease; }
.tool-card:hover h3 { color: var(--seg); }
.tool-card p { font-size: 15.5px; }
.tool-card .foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.tool-card .foot .go { color: var(--seg); font-size: 15px; transition: transform .26s cubic-bezier(.2,.8,.3,1); }
.tool-card:hover .foot .go { transform: translateX(5px); }

/* ── tool pages ───────────────────────────────────────── */

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 940px) { .tool-layout { grid-template-columns: 1fr; } }

.q {
  border: 0;
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--rule-soft);
}
.q:last-of-type { border-bottom: 1px solid var(--rule-soft); }

.q legend {
  padding: 0;
  font-size: 16.5px;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 14px;
}
.q .hint { display: block; font-size: 13.5px; color: var(--muted); margin-top: 5px; }

.opts { display: flex; flex-wrap: wrap; gap: 8px; }

.opts label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
  background: var(--paper);
}
.opts label:hover { border-color: var(--ink); }
/* Visually hidden but still focusable and hit-testable: a zero-size, fully
   transparent control is skipped by some assistive tech and by automation. */
.opts input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.opts input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.opts label:has(input:checked) {
  background: var(--seg, var(--accent));
  border-color: var(--seg, var(--accent));
  color: #fff;
}
:root[data-theme="dark"] .opts label:has(input:checked) { color: #121715; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opts label:has(input:checked) { color: #121715; }
}

/* ── result panel ─────────────────────────────────────── */

.result {
  position: sticky;
  top: 84px;
  background: var(--raised);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result .band {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
}

.score {
  font-family: var(--ff-display);
  font-size: clamp(42px, 6vw, 62px);
  line-height: 1;
  color: var(--seg, var(--accent));
  font-variant-numeric: tabular-nums;
}
.score small { font-size: .38em; color: var(--muted); margin-left: 6px; }

.verdict {
  font-family: var(--ff-display);
  font-size: 20px;
  line-height: 1.32;
  color: var(--ink);
}

.result p { font-size: 14.5px; }

.meter { display: flex; flex-direction: column; gap: 11px; }
.meter div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13px; }
.meter .track {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--sunken);
  border-radius: 2px;
  overflow: hidden;
}
.meter .fill {
  display: block;
  height: 100%;
  background: var(--seg, var(--accent));
  border-radius: 2px;
  transition: width .5s cubic-bezier(.2,.8,.3,1);
}
.meter .k { color: var(--body); }
.meter .v { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.result .btn { justify-content: center; }

.privacy-note {
  font-size: 12.5px;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

/* ── calculator inputs ────────────────────────────────── */

.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }

.calc-grid .field label { text-transform: none; letter-spacing: .04em; font-size: 12.5px; }
.calc-grid .field .unit { font-family: var(--ff-mono); font-size: 11.5px; color: var(--muted); }

.workings {
  margin-top: 26px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 18px;
}
.workings table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.workings th, .workings td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.workings td:last-child, .workings th:last-child {
  text-align: right;
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.workings tr.total td { font-weight: 600; color: var(--ink); border-bottom: 0; }
.workings caption {
  text-align: left;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
}

/* ── use-case scorer table ────────────────────────────── */

.rank { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 8px; }
.rank th {
  text-align: left;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0 10px 10px 0;
}
.rank td { padding: 11px 10px 11px 0; border-top: 1px solid var(--rule-soft); vertical-align: middle; }
.rank td:last-child, .rank th:last-child { text-align: right; padding-right: 0; }
.rank .name { color: var(--ink); }
.rank .n { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pill[data-v="now"]   { color: var(--aurora); }
.pill[data-v="pilot"] { color: var(--glacier); }
.pill[data-v="park"]  { color: var(--prairie); }
.pill[data-v="avoid"] { color: var(--maple); }

.case-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-soft);
  align-items: end;
}
@media (max-width: 760px) { .case-row { grid-template-columns: 1fr 1fr; } }

.case-row .field label { font-size: 10.5px; }
.case-row input[type="range"] { width: 100%; accent-color: var(--seg, var(--accent)); }
.case-row output { font-family: var(--ff-mono); font-size: 12px; color: var(--muted); }

/* ── literacy answer feedback ─────────────────────────── */

.why {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 2px solid var(--seg, var(--accent));
  background: var(--raised);
  font-size: 14px;
  border-radius: 0 3px 3px 0;
}
.why b { color: var(--ink); font-weight: 600; }

/* ── writing list ─────────────────────────────────────── */

.notes { display: flex; flex-direction: column; }
.note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 6px 32px;
  padding: 22px 0;
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
  text-decoration: none;
  transition: padding-left .25s ease;
}
.note:last-child { border-bottom: 1px solid var(--rule-soft); }
.note:hover { padding-left: 10px; }
.note h3 { font-size: 21px; color: var(--ink); }
.note p { font-size: 15px; color: var(--muted); }
@media (max-width: 640px) { .note { grid-template-columns: 1fr; } }

/* Inline link inside a figure caption, so it reads as clickable without shouting. */

/* Anchor targets clear the fixed masthead. */
#practices, #governance, #method, #contact { scroll-margin-top: 84px; }
.q { scroll-margin-top: 104px; }

/* ══════════════════════════════════════════════════════════
   THE SEVEN QUESTIONS
   One band per practice: a question the reader recognises,
   the evidence under it, what the programme unlocks, and a
   photograph that arrives as the band enters the viewport.
   ══════════════════════════════════════════════════════════ */

.q-intro { padding-top: var(--band); }
.q-lead {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 20ch;
  margin-top: 14px;
}

.q { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--rule-soft); }
.q:first-of-type { border-top: 0; padding-top: clamp(40px, 5vw, 64px); }

.q-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* Alternating sides keep the eye moving down the page rather than
   settling into one column. Source order stays text first, so the
   reading order and the tab order never diverge from the markup. */
.q--flip .q-text { order: 2; }

.q-text > * + * { margin-top: 18px; }

.q .code {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--seg);
}

.q-ask {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(28px, 3.7vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 19ch;
  margin-top: 12px;
}

/* The figure sits on a coloured stem so the practice hue reads even
   before the reader reaches the link. */
.q-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 4px;
  align-items: baseline;
  padding: 22px 0 22px 20px;
  border-left: 3px solid var(--seg);
  margin-top: 26px;
}
.q-stat b {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 62px);
  line-height: .92;
  letter-spacing: -0.03em;
  color: var(--seg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.q-stat > span { font-size: 16px; color: var(--body); line-height: 1.5; }
.q-stat cite {
  grid-column: 2;
  font-family: var(--ff-mono);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--muted);
}

.q-unlock-h {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 30px;
}
.q-unlock { list-style: none; margin-top: 12px; }
.q-unlock li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  color: var(--body);
  line-height: 1.55;
}
.q-unlock li + li { margin-top: 10px; }
.q-unlock li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 1px;
  background: var(--seg);
}

.q-go {
  display: inline-block;
  margin-top: 26px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--seg);
  padding-bottom: 3px;
  transition: color .2s ease;
}
.q-go:hover { color: var(--seg); }
.q-go span { display: inline-block; transition: transform .26s cubic-bezier(.2,.8,.3,1); }
.q-go:hover span { transform: translateX(5px); }

.q-shot {
  /* The figure is a grid item under align-items:center, so it needs an
     explicit width for aspect-ratio to resolve height from it rather
     than the other way round. */
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--sunken);
  aspect-ratio: 3 / 2;
}
.q-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.8,.3,1);
}
.q:hover .q-shot img { transform: scale(1.03); }

/* The photograph's arrival: a clip reveal plus a settle out of scale,
   so it reads as arriving rather than fading. The resting state is
   dimmed, never hidden, so a missed observer cannot lose the image. */
.js .pop {
  opacity: .5;
  transform: translateY(26px) scale(.95);
  clip-path: inset(12% 8% 12% 8% round 3px);
  transition:
    opacity .85s cubic-bezier(.2,.8,.3,1),
    transform 1s cubic-bezier(.2,.8,.3,1),
    clip-path 1s cubic-bezier(.2,.8,.3,1);
}
.js .pop.in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 3px);
}
.js .pop img { transform: scale(1.1); }
.js .pop.in img { transform: none; }

@media (max-width: 860px) {
  .q-grid { grid-template-columns: 1fr; gap: 30px; }
  .q--flip .q-text { order: 0; }
  .q-ask { max-width: none; }
  .q-stat { grid-template-columns: 1fr; row-gap: 10px; }
  .q-stat cite { grid-column: 1; }
}

/* ── Canadian instruments, as a named row ─────────────── */

.instruments {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
}
.instruments li {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: 10px 14px;
  transition: border-color .22s ease, transform .22s cubic-bezier(.2,.8,.3,1);
}
.instruments li:hover { border-color: var(--accent); transform: translateY(-2px); }

.instruments-note {
  margin-top: 30px;
  max-width: 58ch;
  font-size: 15px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .js .pop { opacity: 1; transform: none; clip-path: none; }
  .js .pop img { transform: none; }
}