/* ─────────────────────────────────────────────────────────────
   Pondering Phoenix — site.css
   Websites, apps & games by Glen Vanderpost
   Design language ("Rekindle", October 2026): warm ash paper, char
   ink and one ember accent. Fraunces carries the voice (soft display
   cuts, an ember italic for the key phrase), Inter does the work.
   The ember line (a short flame-to-ember rule that draws in) and the
   semicolon from the phoenix mark are the two signatures.
   ───────────────────────────────────────────────────────────── */

/* Self-hosted fonts. Fraunces is the "full" latin build from
   @fontsource-variable/fraunces 5.2.8 (axes opsz, wght, SOFT, WONK), instanced
   to weights 300-700 to keep it small; Inter is the latin wght build from
   @fontsource-variable/inter 5.3.0. OFL licences beside them in /assets/fonts/.
   A new version needs a new file name, because /assets/fonts/ is cached as
   immutable. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-5.2.8-latin-full-wght300-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-5.2.8-latin-full-wght300-700-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-5.3.0-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* "Rekindle" palette: warm ash paper, char ink, one ember accent.
     Contrast (WCAG AA): white on --ember-btn 4.91:1; --ember-text on --paper
     and --surface >= 5:1; --muted on --paper >= 5.5:1. --ember and --flame
     are for glows, rules and large display type only, never small text. */
  --paper: #f1ece4;
  --surface: #faf7f2;
  --ink: #1b1916;
  --ink-deep: #191714;
  --ink-soft: #3f3933;
  --muted: #5d564e;
  --border: #dcd3c6;
  --border-soft: #e7e0d5;

  --ember: #e8590c;
  --flame: #f5a524;
  --sprout: #4e6a40;

  --ember-btn: #c4480a;
  --ember-btn-hover: #a63c08;
  --ember-text: #a63c08;
  --field-border: #8a8176; /* >= 3:1 on --surface (WCAG 1.4.11) */

  /* The ember line: the site's one gradient, flame into ember. */
  --phoenix-gradient: linear-gradient(90deg, #f5a524 0%, #e8590c 55%, #c4480a 100%);

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Type scale: about 1.2 at phone width, opening to about 1.4 at 1440px. */
  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);   /* 12-13 labels */
  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);   /* 14-15 small */
  --step-0:  clamp(1.0625rem, 1rem + 0.14vw, 1.125rem);     /* 17-18 body */
  --step-1:  clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);      /* 18-24 lede */
  --step-2:  clamp(1.5rem, 1.2rem + 0.8vw, 2rem);           /* 24-32 h3 */
  --step-3:  clamp(1.875rem, 1.35rem + 2.1vw, 3rem);        /* 30-48 h2 */
  --step-4:  clamp(2.375rem, 1.3rem + 4.4vw, 4.75rem);      /* 38-76 page h1 */
  --step-5:  clamp(2.5rem, 1.1rem + 5.6vw, 5.75rem);        /* 40-92 home h1 */

  /* Fraunces voices (optical size follows font size unless pinned). */
  --fv-display: 'opsz' 96, 'SOFT' 50, 'WONK' 1;
  --fv-heading: 'SOFT' 30, 'WONK' 0;
  --fv-sub: 'SOFT' 0, 'WONK' 0;
  --fv-italic: 'opsz' 144, 'SOFT' 100, 'WONK' 1;

  /* Spacing: a 4px base. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: clamp(4rem, 2.8rem + 4.4vw, 7rem);
  --space-section-s: clamp(2.5rem, 1.8rem + 2.8vw, 4.5rem);

  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --col-gap: clamp(1.5rem, 0.8rem + 3vw, 4rem);
  --site-max: 1240px;
  --measure: 34em;       /* about 66-70 characters of Inter */
  --measure-lede: 30em;

  /* Motion: one ease for everything that settles, one for hovers. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hover: cubic-bezier(0.3, 0.7, 0.4, 1);

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(27, 25, 22, 0.05), 0 10px 28px -18px rgba(27, 25, 22, 0.25);
  --shadow-lift: 0 2px 4px rgba(27, 25, 22, 0.06), 0 18px 38px -18px rgba(27, 25, 22, 0.32);
  --shadow-device: 0 1px 0 rgba(0, 0, 0, 0.04), 0 24px 60px -18px rgba(27, 25, 22, 0.38), 0 0 0 1px rgba(27, 25, 22, 0.08);
  --char: #17181c;      /* Ember Tiles charcoal */
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Typography ─────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 450;
  font-variation-settings: var(--fv-heading);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.012em;
  font-weight: 460;
  font-variation-settings: var(--fv-display);
}
h2 { font-size: var(--step-3); }
h3, .h3 {
  font-size: var(--step-2);
  line-height: 1.22;
  letter-spacing: -0.008em;
  font-weight: 520;
  font-variation-settings: var(--fv-sub);
}
h4 { font-size: var(--step-0); margin: 0 0 0.5em; }

/* An <em> in a headline is the ember italic: soft, a little wonky. */
h1 em, h2 em {
  font-style: italic;
  font-weight: 380;
  font-variation-settings: var(--fv-italic);
  color: var(--ember-text);
}

p { margin: 0 0 1em; max-width: var(--measure); }
li { margin-bottom: 0.35em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
p, li, figcaption { text-wrap: pretty; }

.lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  line-height: 1.5;
  letter-spacing: -0.006em;
  max-width: var(--measure-lede);
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ember) 55%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.16s var(--ease-hover), text-decoration-color 0.16s var(--ease-hover);
}

a:hover { color: var(--ember-text); text-decoration-color: var(--ember); }

:focus-visible {
  outline: 2.5px solid var(--ember-btn);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: color-mix(in srgb, var(--flame) 35%, transparent); }

/* One small-caps label style for every eyebrow, footer title and meta label. */
.eyebrow, .site-footer .footer-h, h3.included-h, .stage-tag {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Section eyebrow, led by the semicolon from the phoenix mark. */
.eyebrow {
  display: block;
  color: var(--ink-soft);
  margin-bottom: var(--space-s);
}

/* An eyebrow that is a real heading looks the same as the span version. */
h2.eyebrow { text-wrap: wrap; margin-top: 0; font-variation-settings: normal; }

.eyebrow::before {
  content: ';';
  margin-right: 0.3em;
  font-family: var(--font-display);
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.12em;
  font-style: italic;
  font-weight: 600;
  font-variation-settings: var(--fv-italic);
  color: var(--ember-text);
  letter-spacing: 0;
}

/* ── Layout ─────────────────────────────────────────────────── */

.wrap {
  width: min(var(--site-max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section { padding-block: var(--space-section); }
.section-tight { padding-block: var(--space-section-s); }
.section-alt { background: var(--surface); border-block: 1px solid var(--border-soft); }

.section-head { margin-bottom: var(--space-xl); }
.section-head > p { max-width: var(--measure-lede); }

/* Page intros (eyebrow, h1, lede) followed by content: no double padding. */
main > section.section:first-child:not(.hero) { padding-bottom: var(--space-l); }
main > section.section:first-child:not(.hero) + .section-tight,
main > section.section:first-child:not(.hero) + .section { padding-top: var(--space-l); }

/* The ember line: a short flame-to-ember rule that draws itself in when its
   section scrolls into view (the hidden state only exists under .motion-ok). */
.ember-line,
.section-head::before {
  content: '';
  display: block;
  width: clamp(3rem, 2rem + 3vw, 5rem);
  height: 3px;
  border-radius: 999px;
  background: var(--phoenix-gradient);
  transform-origin: left center;
}
.section-head::before { margin-bottom: var(--space-m); }
.center .section-head::before { margin-inline: auto; transform-origin: center; }
.motion-ok .ember-line,
.motion-ok .section-head::before {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) 0.1s;
}
.motion-ok .ember-line.in,
.motion-ok .section-head.in::before { transform: scaleX(1); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ── Header ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }

.brand img { width: 34px; height: auto; }

.brand-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 560;
  font-variation-settings: var(--fv-heading);
  line-height: 1.1;
}

.site-nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.6rem); }

.site-nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ember-text); }
.site-nav a[aria-current='page'] {
  color: var(--ink);
  border-bottom-color: var(--ember);
}

/* The CTA pill inside the nav must not inherit nav-link colours */
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover {
  color: #fff;
  border-bottom: none;
  padding: 0.6rem 1.25rem;
  min-height: 2.75rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { display: block; }

/* The collapsible menu only exists once JS has run: an inline script in each
   <head> adds .js to <html> before first paint. Without JS the links stay
   visible as a wrapped row and the (useless) toggle stays hidden. */
@media (max-width: 820px) {
  html:not(.js) .site-header .wrap { flex-wrap: wrap; padding-block: 0.6rem; }
  html:not(.js) .site-nav { flex-wrap: wrap; gap: 0.25rem 1rem; }
  .js .nav-toggle { display: block; }
  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    padding: 0.5rem 1.25rem 1.1rem;
  }
  .js .site-nav.open { display: flex; }
  .js .site-nav a:not(.btn) { padding: 0.8rem 0.25rem; border-bottom: 1px solid var(--border-soft); }
  .js .site-nav a[aria-current='page'] { border-bottom-color: var(--border-soft); color: var(--ember-text); }
  .js .site-nav .btn { margin-top: 0.9rem; text-align: center; }
}

/* ── Buttons ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 3rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.005em;
  line-height: 1.2;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s var(--ease-hover), color 0.16s var(--ease-hover),
    border-color 0.16s var(--ease-hover), transform 0.16s var(--ease-hover),
    box-shadow 0.16s var(--ease-hover);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ember-btn);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(196, 72, 10, 0.6);
}
.btn-primary:hover {
  background: var(--ember-btn-hover);
  color: #fff;
  box-shadow: 0 14px 26px -12px rgba(196, 72, 10, 0.7);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.btn-secondary:hover { border-color: var(--ember); color: var(--ember-text); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* ── Hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1rem + 6vw, 6.5rem) clamp(3rem, 1rem + 6vw, 6.5rem);
}

.hero-inner { position: relative; z-index: 1; }

.hero-mark {
  width: clamp(52px, 7vw, 72px);
  height: auto;
  margin-bottom: var(--space-l);
}

/* Home hero: the promise on the left, Glen and the work on the right. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--col-gap);
  align-items: center;
}
.hero-grid .eyebrow { margin-bottom: var(--space-m); }
.hero-grid h1 {
  font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.6rem);
  line-height: 1;
  max-width: 13em;
  margin-bottom: var(--space-m);
}
.hero-grid .ember-line { margin-bottom: var(--space-m); }
.hero .lede { margin-bottom: var(--space-l); }
.hero-alt { margin: var(--space-m) 0 0; color: var(--ink-soft); font-size: var(--step--1); }

.hero-media { position: relative; margin: 0; }
.hero-media::before {
  /* the ember glow behind the photo */
  content: '';
  position: absolute;
  inset: 8% -12% -10% 4%;
  background: radial-gradient(closest-side, rgba(245, 165, 36, 0.32), rgba(232, 89, 12, 0.12) 55%, transparent);
  filter: blur(24px);
  pointer-events: none;
}
.hero-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}
/* Client work in the first screen: a browser frame over the sky. */
.hero-media .hero-browser {
  position: absolute;
  top: 4%;
  left: -9%;
  width: 50%;
}
.hero-media figcaption {
  position: relative;
  margin-top: var(--space-xs);
  text-align: right;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: var(--fv-italic);
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--muted);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 34rem; }
  .hero-photo { aspect-ratio: 4 / 3; object-position: 50% 90%; }
  .hero-media .hero-browser { display: none; }
}

/* ── Cards & grids ──────────────────────────────────────────── */

.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.card h3 a { text-decoration: none; }

.point-card { padding: 1.35rem 1.5rem; }
.point-card h3 { font-size: 1.08rem; font-family: var(--font-body); font-weight: 700; }
.point-card p { font-size: 0.97rem; color: var(--muted); }

/* Project cards */
.project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.project-card:hover { box-shadow: var(--shadow-lift); }

.project-card .shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--border-soft);
  background: var(--border-soft);
}

.project-card .body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }

/* Category notes: italic serif, sentence case, no pill. */
.chip {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-variation-settings: 'opsz' 24, 'SOFT' 100, 'WONK' 1;
  font-size: var(--step--1);
  color: var(--ember-text);
}
.chip-violet { color: var(--ember-text); }

.project-card h3 { margin-bottom: 0.1em; }
.project-card p { font-size: 0.97rem; color: var(--muted); flex: 1; }

.card-links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.95rem; font-weight: 600; }

/* Numbered process page list */
.process-list { list-style: none; margin: 0; padding: 0; counter-reset: pstep; display: grid; gap: 1.1rem; }
.process-list > li {
  counter-increment: pstep;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.4rem 4.4rem;
  box-shadow: var(--shadow-card);
  margin: 0;
}
.process-list > li::before {
  content: counter(pstep, decimal-leading-zero);
  position: absolute;
  left: 1.4rem;
  top: 1.45rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ember);
}
.process-list h2 { font-size: 1.15rem; margin-bottom: 0.3em; }
.process-list p { font-size: 0.98rem; color: var(--ink-soft); }

/* ── Checklists ─────────────────────────────────────────────── */

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { position: relative; padding-left: 1.8rem; margin-bottom: 0.6rem; }
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: var(--phoenix-gradient);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6.2 12.3 2.4 8.5l1.4-1.4 2.4 2.4 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Forms ──────────────────────────────────────────────────── */

.contact-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.3rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.93rem;
  margin-bottom: 0.35rem;
}
.field label .optional { font-weight: 500; color: var(--muted); font-size: 0.85em; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember) 18%, transparent);
}

.form-note { font-size: 0.92rem; color: var(--muted); }
.field-error { color: #b02a1a; font-size: 0.9rem; font-weight: 600; margin: 0.35rem 0 0; } /* 6.48:1 on --surface */
.field [aria-invalid='true'] { border-color: #b02a1a; }

/* ── CTA band ───────────────────────────────────────────────── */

.cta-band {
  background: var(--ink-deep);
  color: #f4efe7;
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.2rem);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 280px at 90% 115%, rgba(245, 165, 36, 0.24), transparent 65%),
    radial-gradient(420px 240px at 5% -30%, rgba(232, 89, 12, 0.14), transparent 65%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #d9d1c6; }
.cta-band .btn-primary { background: var(--ember-btn); }
.cta-band .btn-primary:hover { background: var(--ember-btn-hover); }
.cta-band .btn-secondary { color: #f4efe7; border-color: rgba(244, 239, 231, 0.5); }
.cta-band .btn-secondary:hover { color: #fff; border-color: #fff; }

/* ── Footer ─────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink-deep);
  color: #c9c0b4;
  margin-top: 0;
  padding-block: 3rem 2.2rem;
  font-size: 0.95rem;
}

.site-footer a {
  color: #f1ece4;
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--flame);
  text-decoration: underline;
  text-decoration-color: rgba(240, 140, 0, 0.6);
}
.site-footer a.btn-footer:hover { text-decoration: none; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.2rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: flex; align-items: flex-start; gap: 0.8rem; }
.footer-brand img { width: 40px; height: auto; }
.footer-brand p { font-size: 0.92rem; margin-top: 0.5rem; }
.footer-brand strong { color: #fff; }

/* Footer column titles are h2s (for heading order) styled as small caps
   labels in the body font, exactly as the old h4s looked. */
.site-footer .footer-h {
  text-wrap: wrap;
  color: #fff;
  font-variation-settings: normal;
  margin: 0 0 0.8rem;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.45rem; }

.footer-bottom {
  border-top: 1px solid rgba(201, 192, 180, 0.2);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* ── Utilities ──────────────────────────────────────────────── */

.center { text-align: center; }
.center .section-head { margin-inline: auto; }
.center p { margin-inline: auto; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }
/* Text for screen readers only, e.g. the project name on repeated "Visit the site" links. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

img { max-width: 100%; height: auto; }

/* ── Motion preferences ─────────────────────────────────────── */

@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;
  }
}

/* ── Project-card hover: the lift warms up ─────────────────── */

.project-card:hover {
  box-shadow: 0 2px 4px rgba(27, 25, 22, 0.06),
    0 18px 38px -16px rgba(232, 89, 12, 0.38);
}

/* ── Footer sign-off line ───────────────────────────────────── */

.footer-sign {
  font-family: var(--font-display);
  font-style: italic;
  color: #ffe3bf;
  font-size: var(--step-1);
  font-weight: 350;
  font-variation-settings: var(--fv-italic);
}

/* ── Footer: pages in two tight columns, and a proper inquiry button ── */

.footer-pages {
  column-count: 2;
  column-gap: 1.6rem;
}
.footer-pages li { break-inside: avoid; }

.btn-footer {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  border: 1.5px solid rgba(240, 140, 0, 0.5);
  background: color-mix(in srgb, var(--ember) 16%, transparent);
  color: #ffe3bf;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease,
    transform 0.16s ease;
}
.site-footer a.btn-footer:hover,
.site-footer a.btn-footer:focus-visible {
  background: var(--ember-btn);
  border-color: var(--ember-btn);
  color: #fff;
}

/* ── Page-specific bits (formerly inline style="" attributes, moved here so
      the Content-Security-Policy can forbid inline styles) ───────────────── */

.cta-band h3 { color: #fff; }
.btn-row-center { justify-content: center; }
.center .hero-mark { margin-inline: auto; }
.grid.about-grid { gap: 2.5rem; align-items: start; }
.portrait { margin: 0; }
.portrait img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.portrait figcaption { margin-top: 0.6rem; }
.card.form-card { padding: 2rem; }
.heading-aside { font-weight: 500; font-size: 0.85em; }
.card.card-accent-teal { border-left: 4px solid var(--sprout); }
.card.card-accent-ember { border-left: 4px solid var(--ember); }
.grid.grid-roomy { gap: 1.6rem; }
h2.h2-card { font-size: 1.5rem; }

/* ── Header nav at in-between widths ─────────────────────────── */

.site-nav .btn { white-space: nowrap; }
@media (min-width: 821px) { .brand { flex-shrink: 0; } }
@media (min-width: 821px) and (max-width: 940px) {
  .site-nav { gap: 0.75rem; }
  .site-nav a.btn-primary, .site-nav a.btn-primary:hover { padding-inline: 1rem; }
}

/* "Prefer email?" line under the buttons in each CTA band */
.cta-alt { margin-top: 1.1rem; font-size: 0.98rem; }
.cta-band .cta-alt a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.55); overflow-wrap: anywhere; }
.cta-band .cta-alt a:hover { color: #ffe3bf; text-decoration-color: var(--flame); }

.footer-brand p.footer-legal { margin-top: 0.4rem; font-size: 0.85rem; }
.footer-hiring { margin: 1rem 0 0; font-size: 0.9rem; }

/* ── Device frames: one browser and one phone, used everywhere ── */

.browser {
  position: relative;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-device);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: clamp(20px, 2.2vw, 30px);
  padding: 0 clamp(8px, 1vw, 12px);
  background: #f3f0eb;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.browser-bar i {
  flex: none;
  width: clamp(6px, 0.6vw, 9px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d8d1c6;
}
.browser-bar span {
  margin-left: clamp(4px, 1vw, 12px);
  flex: 0 1 15rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 999px;
  background: #fff;
  padding-inline: 0.7em;
  font-size: clamp(8px, 0.75vw, 11px);
  line-height: 1.7;
  color: #6b655e;
}
.browser > img,
.browser > picture > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.device-phone {
  position: relative;
  background: #141210;
  border-radius: 15% / 7%;
  padding: clamp(3px, 0.5vw, 8px);
  box-shadow: 0 30px 60px -20px rgba(20, 18, 16, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.device-phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 1688;
  object-fit: cover;
  object-position: top;
  border-radius: 12% / 5.6%;
}

/* ── Client work: colour stages ─────────────────────────────────
   Each project sits on a stage tinted from its own palette, with a
   browser frame and a phone. The card is one link (the caption's
   "Visit" link stretches over it). */

.stages {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 1.5rem + 3vw, 4rem) clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
}
.stage-card { grid-column: span 6; position: relative; display: flex; flex-direction: column; gap: var(--space-m); }
.stage-card.wide { grid-column: 1 / -1; }

.stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--stage, var(--surface));
}
.stage-card.wide .stage { aspect-ratio: 21 / 9; }

.stage .browser { position: absolute; left: 8%; right: 8%; top: 11%; transition: transform 0.6s var(--ease-out); }
.stage .device-phone { position: absolute; width: 22%; right: 5%; bottom: -14%; transition: transform 0.6s var(--ease-out); }
.stage-card.wide .stage .browser { left: 6%; right: 30%; top: 10%; }
.stage-card.wide .stage .device-phone { width: 14%; right: 9%; bottom: -8%; }

/* Phone-led stage (Mireille & Co.): phone and browser side by side. */
.stage-card.wide .stage.stage-duo .device-phone { left: 14%; right: auto; bottom: auto; top: 9%; width: 15%; }
.stage-card.wide .stage.stage-duo .browser { left: 36%; right: 8%; top: 13%; }

.stage-muskoka { --stage: #e3ecec; }
.stage-rochelle { --stage: #eed7d1; }
.stage-cow { --stage: #ffc22e; }
.stage-mireille { --stage: #f1d2cb; }

.stage-card:hover .stage .device-phone,
.stage-card:focus-within .stage .device-phone { transform: translateY(-10px); }
.stage-card:hover .stage .browser,
.stage-card:focus-within .stage .browser { transform: translateY(-4px); }

.stage-cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s) var(--space-l); }
.stage-cap h3 { margin: 0.3em 0 0.25em; }
.stage-cap p { margin: 0; color: var(--ink-soft); max-width: 40em; }
.stage-cap p + p { margin-top: 0.7em; }
.stage-tag { display: block; color: var(--muted); }
.stage-link {
  flex: none;
  font-weight: 600;
  font-size: var(--step--1);
  white-space: nowrap;
  text-decoration-thickness: 2px;
}
/* Stretch the link over the whole card. */
.stage-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.stage-card:hover .stage-link { color: var(--ember-text); text-decoration-color: var(--ember); }
.stage-link:focus-visible { outline: none; }
.stage-link:focus-visible::after { outline: 2.5px solid var(--ember-btn); outline-offset: 4px; }

@media (max-width: 860px) {
  .stage-card, .stage-card.wide { grid-column: 1 / -1; }
  .stage-card.wide .stage { aspect-ratio: 4 / 3; }
  .stage-card.wide .stage .browser { left: 8%; right: 8%; top: 11%; }
  .stage-card.wide .stage .device-phone { width: 22%; right: 5%; bottom: -14%; }
  .stage-card.wide .stage.stage-duo .device-phone { left: 8%; top: 8%; width: 28%; bottom: auto; right: auto; }
  .stage-card.wide .stage.stage-duo .browser { left: 42%; right: -20%; top: 16%; }
  .stage-cap { flex-direction: column; gap: var(--space-xs); }
}

/* ── Prices: a rate card ─────────────────────────────────────── */

.rate-section .wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--col-gap);
  align-items: start;
}
.rate-section .section-head { position: sticky; top: 6rem; margin: 0; }
.rate-section .wrap > :not(.section-head) { grid-column: 2; }

.rate-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.rate-list li { margin: 0; max-width: none; border-bottom: 1px solid var(--border); }
.rate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-l);
  padding: var(--space-m) var(--space-xs);
  margin-inline: calc(var(--space-xs) * -1);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.2s var(--ease-hover);
}
.rate:hover { color: var(--ink); background: color-mix(in srgb, var(--flame) 9%, transparent); }
.rate:hover h3 { color: var(--ember-text); }
.rate h3 { font-size: var(--step-2); margin: 0 0 0.25em; transition: color 0.2s var(--ease-hover); }
.rate p { grid-column: 1; margin: 0; font-size: var(--step--1); line-height: 1.5; color: var(--muted); }
.rate .price { grid-column: 2; grid-row: 1 / span 2; text-align: right; margin: 0; }

@media (max-width: 860px) {
  .rate-section .wrap { grid-template-columns: 1fr; }
  .rate-section .wrap > :not(.section-head) { grid-column: 1; }
  .rate-section .section-head { position: static; margin-bottom: var(--space-l); }
}
@media (max-width: 560px) {
  .rate { grid-template-columns: 1fr; }
  .rate .price { grid-column: 1; grid-row: auto; text-align: left; margin-top: var(--space-xs); }
}

/* Price typography: a "From" label, the figure in Fraunces, the timeline. */
.price { line-height: 1.1; color: var(--ink); margin-bottom: 0.5em; }
.price-from {
  display: block;
  font-size: var(--step--2);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.01em;
}
.price-num small { font-family: var(--font-body); font-size: 0.5em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.price-meta {
  display: block;
  margin-top: 0.3em;
  font-size: var(--step--1);
  font-weight: 450;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ── Products: full-width bands in each product's own colours ── */

.band {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
  color: var(--band-text);
  background: var(--band-bg);
}
.band-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--col-gap);
  align-items: center;
}
@media (min-width: 861px) {
  .band-flip .band-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .band-flip .band-media { order: 2; }
}
.band h3, .band .band-title {
  font-size: var(--step-3);
  font-weight: 420;
  font-variation-settings: var(--fv-display);
  letter-spacing: -0.012em;
  line-height: 1.05;
  color: var(--band-head);
  margin: 0.35em 0 0.4em;
}
.band p { color: var(--band-soft); }
.band .lede { color: var(--band-soft); }
.band .band-chip {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: var(--fv-italic);
  font-weight: 400;
  font-size: var(--step-0);
  color: var(--band-accent);
}
.band .btn-primary { background: var(--band-btn); box-shadow: none; }
.band .btn-primary:hover { background: var(--band-btn-hover); }
.band .btn-secondary { color: var(--band-head); border-color: color-mix(in srgb, var(--band-head) 45%, transparent); }
.band .btn-secondary:hover { color: var(--band-head); border-color: var(--band-head); }
.band a:not(.btn) { color: var(--band-head); }
.band :focus-visible { outline-color: var(--band-accent); }

.band-media { position: relative; }
.band-media .device-phone { position: absolute; width: 24%; right: -3%; bottom: -12%; }
.band-canvas {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(46, 53, 59, 0.12), 0 30px 60px -30px rgba(46, 53, 59, 0.45);
}
.band-canvas img { display: block; width: 100%; height: auto; }
.band-phones { display: flex; justify-content: center; gap: 6%; padding-bottom: 8%; }
.band-phones .device-phone { position: relative; right: auto; bottom: auto; width: 36%; }
.band-phones .device-phone:nth-child(2) { margin-top: 14%; }

.band-panda {
  --band-bg: radial-gradient(70% 80% at 20% 110%, rgba(64, 160, 110, 0.22), transparent 65%), #21302b;
  --band-text: #d6e0da; --band-head: #f3f6f2; --band-soft: #c1cec6; --band-accent: #a9e3bf;
  --band-btn: #2e6b4f; --band-btn-hover: #245a41;
}
.band-buddha {
  --band-bg: #eeeadf;
  --band-text: #2e353b; --band-head: #22282d; --band-soft: #46505a; --band-accent: #3c5a4c;
  --band-btn: #3c5a4c; --band-btn-hover: #2f4a3d;
}
.band-ember {
  --band-bg: radial-gradient(60% 70% at 25% 70%, rgba(251, 146, 60, 0.2), transparent 70%), #0b0b0e;
  --band-text: #cfd2da; --band-head: #f4efe7; --band-soft: #b9bdc9; --band-accent: #fdba74;
  --band-btn: #c2410c; --band-btn-hover: #9a3412;
}

@media (max-width: 860px) {
  .band-grid { grid-template-columns: 1fr; }
  .band-media .device-phone { width: 26%; right: 2%; }
  .band-phones { max-width: 26rem; margin-inline: auto; }
  .band-phones .device-phone { width: 42%; }
}

/* ── "Why work with me" and "How it works" ───────────────────── */

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

.btn-sm { padding: 0.6rem 1.1rem; font-size: 0.92rem; }

/* /services/: price line, "What's included" label, who-I-work-with list */
.service-card .price { margin: var(--space-xs) 0 var(--space-s); }
.service-card .price-num { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.service-card .check-list li { font-size: 0.98rem; }
h3.included-h {
  color: var(--ink-soft);
  font-variation-settings: normal;
  margin: 1.2rem 0 0.7rem;
  text-wrap: wrap;
}
.who-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.7rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.who-list li { margin: 0; color: var(--ink-soft); }
.who-list strong { color: var(--ink); }
@media (max-width: 760px) { .who-list { grid-template-columns: 1fr; } }

/* /contact/: email and the free website check first, then a short form */
.contact-options { margin-top: 0.5rem; }
.contact-big { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.6rem; }
.contact-big a { overflow-wrap: anywhere; }
.form-card > .h3 { margin-bottom: 0.3em; }
.form-card > p.small { margin-bottom: 1.2rem; }
.more-details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  background: var(--paper);
}
.more-details summary { cursor: pointer; font-weight: 600; }
.more-details summary .optional { font-weight: 500; color: var(--muted); font-size: 0.85em; }
.more-details[open] summary { margin-bottom: 1rem; }
.section.contact-top { padding-bottom: 0.5rem; }
.grid.about-more { gap: 2.5rem; align-items: start; }

/* ═════════════════════════════════════════════════════════════
   Rekindle, October 2026: type, spacing and quieter boxes on the
   inner pages.
   ═════════════════════════════════════════════════════════════ */

.card { padding: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); }
.project-card .body { padding: var(--space-m); }
.project-card h3 { font-size: var(--step-2); }
.point-card h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 520; font-variation-settings: var(--fv-sub); }
h2.h2-card { font-size: var(--step-2); line-height: 1.22; font-weight: 520; font-variation-settings: var(--fv-sub); }
.check-list li { margin-bottom: var(--space-s); }
.service-card { padding: clamp(1.25rem, 0.8rem + 1.8vw, 2.25rem); }

/* FAQ: two columns of text separated by hairlines, no boxes. */
#faq .grid-2 { display: block; columns: 2 22rem; column-gap: var(--col-gap); }
#faq .card {
  break-inside: avoid;
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-m) 0 var(--space-l);
}
#faq .card h3 { font-size: var(--step-1); line-height: 1.3; margin-bottom: 0.4em; }

/* Process: two columns of steps with big italic ember numbers. */
.process-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--space-xl) var(--col-gap); }
.process-list > li {
  max-width: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-m) 0 0 clamp(4.25rem, 2.5rem + 4.4vw, 7rem);
}
.process-list > li::before {
  left: 0;
  top: var(--space-s);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem);
  line-height: 0.9;
  font-style: italic;
  font-weight: 300;
  font-variation-settings: var(--fv-italic);
  font-variant-numeric: lining-nums;
  color: var(--ember-text);
}
.process-list h2 { font-size: var(--step-2); line-height: 1.22; font-weight: 520; font-variation-settings: var(--fv-sub); margin: 0.1em 0 0.35em; }
.process-list p { font-size: var(--step-0); }

.cta-band { padding: clamp(2rem, 1rem + 4vw, 4.5rem); }
.cta-band h2 { font-size: var(--step-3); max-width: 18em; font-weight: 420; font-variation-settings: var(--fv-display); }
.cta-band h2 em { color: #ffb37a; }

.site-footer { padding-block: var(--space-2xl) var(--space-l); font-size: var(--step--1); }
.footer-brand strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; font-variation-settings: var(--fv-heading); }

/* Scroll reveals for the stages and bands: a plain fade, nothing moves. */
.motion-ok .reveal {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.motion-ok .reveal.in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .stage .browser, .stage .device-phone { transition: none; }
  .stage-card:hover .stage .device-phone,
  .stage-card:focus-within .stage .device-phone,
  .stage-card:hover .stage .browser,
  .stage-card:focus-within .stage .browser { transform: none; }
}

.products-intro { padding-bottom: var(--space-l); }
.products-intro .section-head { margin-bottom: 0; }
@media (min-width: 761px) {
  .project-card-row { flex-direction: row; }
  .project-card-row .shot { width: 55%; flex: none; border-bottom: 0; border-right: 1px solid var(--border-soft); }
  .project-card-row .body { justify-content: center; padding: var(--space-xl); }
}