/* ==========================================================================
   Chris R. Becker — styles.css
   Palette: blue (primary / interaction), teal (support), blood orange (accent)
   ========================================================================== */

:root {
  /* Color */
  --blue-900: #0b2a5b;
  --blue-700: #14479f;
  --blue-600: #1a5bc4;   /* primary interaction */
  --blue-500: #2f74e0;
  --blue-100: #e4eefc;
  --blue-50:  #f2f7fe;
  --teal-600: #0e8c8a;
  --teal-500: #14a5a1;
  --teal-100: #dcf4f2;
  --orange-600: #c23b17;  /* blood orange */
  --logo-blue: #00AEEF;   /* light blue from the logo */
  --orange-500: #d94a22;
  --orange-100: #fbe6df;
  --ink: #12203a;
  --ink-soft: #4a5a75;
  --line: #d9e1ee;
  --paper: #f3f2f2;
  --bg: #f7f9fc;

  /* Type */
  --font-display: "Andada Pro", "Rockwell", "Georgia", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shape & motion */
  --radius: 8px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 2px rgba(11, 42, 91, .08), 0 2px 8px rgba(11, 42, 91, .06);
  --shadow-md: 0 8px 30px rgba(11, 42, 91, .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-h: 55px; /* primary bar */
  --sub-h: 0px;  /* on-page bar, home page only */
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap: 1120px;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--sub-h) + 8px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1 rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; color: var(--blue-900); letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw + .5rem, 3.75rem); font-weight: 400; }
h2 { font-size: clamp(1.3rem, 2.5vw + 1rem, 2.5rem); font-weight: 400; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--blue-600); text-underline-offset: 3px; }
a:hover { color: var(--blue-700); }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tint { background: var(--blue-50); }
.eyebrow {
  display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--logo-blue); margin-bottom: .75rem;
  background: var(--blue-900); padding: .4rem .75rem; border-radius: 4px;
}
.eyebrow a { color: inherit; }
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 65ch; }
.section-head { max-width: 62ch; margin-bottom: 2.5rem; }
.skip-link {
  position: absolute; left: 1rem; top: -4rem; background: var(--blue-600); color: #fff;
  padding: .6rem 1rem; border-radius: var(--radius-sm); z-index: 200; transition: top .2s;
}
.skip-link:focus { top: 1rem; color: #fff; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

hr {
  display: block;
  color: var(--line);
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 10 px;
  margin-right: 10 px;
  border-style: inset;
  border-width: 2px;
  width: 90%;
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 500 1rem/1 var(--font-body); padding: .95rem 1.5rem; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), color .2s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue-600); color: #fff; box-shadow: 0 6px 18px rgba(26, 91, 196, .3); }
.btn--primary:hover { background: var(--blue-700); color: #fff; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--blue-600); border-color: var(--blue-600); }
.btn--ghost:hover { background: var(--blue-100); color: var(--blue-700); }
.btn--lg { padding: 1.15rem 2.1rem; font-size: 1.125rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* Navigation ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--blue-900); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 60px; align-items: center; column-gap: 1rem; }
.nav .logo { grid-area: 1 / 1; }
.nav__menu { display: contents; }
.nav__links { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--blue-900); }
.logo__img { display: block; height: 32px; width: auto; flex: none; }
.logo__text { font: 400 1.05rem var(--font-display); }
/* Primary nav: links to other pages, with icons */
.nav__primary { grid-area: 1 / 2; justify-self: end; gap: .25rem; }
.nav__primary a {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 8px; text-decoration: none;
  color: var(--paper); font-weight: 500; font-size: .98rem; transition: background .2s, color .2s;
}
.nav__primary a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav__primary a:hover { background: var(--blue-100); color: var(--blue-700); }
.nav__primary a[aria-current] { color: #fff; background: transparent; border-radius: 0; box-shadow: inset 0 -2px 0 #fff; }
.nav__primary .btn { color: #fff; margin-left: .5rem; padding: .6rem 1.2rem; border-radius: 999px; }
.nav__primary .btn:hover { background: var(--blue-700); color: #fff; }
/* On-page nav (home page only): centered anchor links on a light blue bar */
.has-subnav { --sub-h: 36px; }
.subnav { background: var(--blue-100); border-top: 1px solid var(--line); }
.nav__secondary { justify-content: center; gap: 1.5rem; height: var(--sub-h); }
.nav__secondary .nav__label { font: 400 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-right: .25rem; }
.nav__secondary a {
  display: block; padding: .3rem 0; font-size: .82rem; font-weight: 500; text-decoration: none; color: var(--blue-900);
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.nav__secondary a::before { content: "#"; margin-right: .15em; opacity: .5; }
.nav__secondary a:hover { color: var(--blue-600); border-bottom-color: rgba(26, 91, 196, .4); }
.nav__secondary a.is-active { color: var(--blue-600); border-bottom-color: var(--orange-500); }
.nav__toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--blue-900); border-radius: 2px;
  position: relative; transition: transform .25s var(--ease), background .2s;
}
.nav__toggle[aria-expanded="true"] span::before,
.nav__toggle[aria-expanded="true"] span::after { background: var(--orange-600); }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Hero ------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(1000px 420px at 85% -10%, var(--teal-100), transparent 70%),
    radial-gradient(800px 380px at 0% 0%, var(--blue-100), transparent 70%),
    var(--bg);
}
.hero__intro { text-align: center; max-width: 52rem; margin: 0 auto 2rem; }
.hero__intro h1 { margin-bottom: .25em; }
.hero__roles { font: 500 1.05rem var(--font-body); color: var(--ink-soft); }
.hero__roles b { color: var(--orange-600); font-weight: 600; margin-inline: .35em; }

.sketch { max-width: 960px; margin-inline: auto; }
.sketch__tools {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center;
  margin-bottom: 1rem;
}
.tool {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem;
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer;
  font: 500 .92rem var(--font-body); color: var(--ink); transition: all .15s var(--ease);
}
.tool svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool:hover { border-color: var(--blue-500); color: var(--blue-600); }
.tool[aria-pressed="true"] { background: var(--blue-600); border-color: var(--blue-600); color: #fff; box-shadow: 0 4px 12px rgba(26, 91, 196, .3); }
.tool--action { border-style: dashed; }
.sketch__sep { width: 1px; height: 26px; background: var(--line); margin-inline: .25rem; }

/* The "device" frame — desktop browser by default, phone under 768px */
.device {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.device__bar {
  display: flex; align-items: center; gap: .4rem; padding: .65rem .9rem;
  background: var(--blue-50); border-bottom: 1px solid var(--line);
}
.device__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.device__bar i:nth-child(1) { background: var(--orange-500); }
.device__bar i:nth-child(2) { background: #e8b24a; }
.device__bar i:nth-child(3) { background: var(--teal-500); }
.device__url {
  margin-left: .75rem; flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: .78rem; color: var(--ink-soft); padding: .15rem .9rem;
}
.device__canvas { position: relative; aspect-ratio: 16 / 9; background: #fff; }
.device__canvas canvas { width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sketch__hint {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  color: var(--ink-soft); font: 500 1rem var(--font-body); opacity: .75; transition: opacity .3s;
}
.sketch__hint.is-hidden { opacity: 0; }

.sketch__prompt {
  text-align: center; margin: 1.5rem 0 1rem;
  font: 400 clamp(1.3rem, 2vw + .8rem, 1.9rem) var(--font-display); color: var(--blue-900);
}
.sketch__prompt span { color: var(--orange-600); }
.sketch__actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }

/* Work with me ----------------------------------------------------------- */
.work {
  text-align: center; color: #fff; position: relative; overflow: hidden; padding-block: clamp(4.5rem, 10vw, 7.5rem);
  /* swap images/backgrounds/work-bg.svg for your own photo; the navy overlay keeps the text readable */
  background: linear-gradient(rgba(11, 42, 91, .78), rgba(11, 42, 91, .88)), url("../images/backgrounds/Enzo-chair-context-crb2026.png") center / cover no-repeat, var(--blue-900);
}
.work::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  right: -160px; top: -220px; background: radial-gradient(circle, rgba(20, 165, 161, .35), transparent 70%);
}
.work h2 { color: #fff; }
.work .eyebrow { color: #ff9b7d; background: transparent; padding: 0; }
.work .btn--primary { background: var(--orange-500); box-shadow: 0 8px 24px rgba(217, 74, 34, .4); }
.work .btn--primary:hover { background: var(--orange-600); }
.work .btn--primary { display: inline-flex; align-items: center; gap: .6rem; }
.work .btn--primary svg { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.work__sub { margin: 2rem auto 0; max-width: 56ch; }
.work__sub h3 { color: #fff; font-size: 1.5rem; }
.work__sub p { color: #c9d6ee; margin: 0; }
.work .wrap { position: relative; }

/* Services --------------------------------------------------------------- */
.services { list-style: none; margin: 0 auto; padding: 0; max-width: 780px; display: flex; flex-direction: column; gap: .85rem; }
.service {
  display: flex; align-items: center; gap: 1.25rem; padding: 1.15rem 1.35rem; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.service:hover { transform: translateX(6px); box-shadow: var(--shadow-md); border-color: var(--blue-500); color: inherit; }
.service__icon {
  flex: none; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-900); color: var(--logo-blue); transition: background .2s, color .2s;
}
.service:nth-child(3n+2) .service__icon { background: var(--teal-100); color: var(--teal-600); }
.service:nth-child(3n) .service__icon { background: var(--orange-100); color: var(--orange-600); }
.service:hover .service__icon { background: var(--blue-600); color: #fff; }
.service__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service__body { flex: 1; min-width: 0; }
.service__body h3 { margin: 0 0 .15rem; font-size: 1.15rem; }
.service__body p { margin: .2rem 0 0; font-size: .6rem; font-weight: 700; letter-spacing: .04em; line-height: 1.7; text-transform: none; color: var(--blue-900); } /* eyebrow type style, dark blue */
.service__body p.eyebrow { background: none; padding: 0; border-radius: 0; }
.service__arrow { color: var(--blue-600); font-size: 1.4rem; transition: transform .2s; }
.service:hover .service__arrow { transform: translateX(4px); }

/* About ------------------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split__text { max-width: 54ch; }
.split__text .btn { margin-top: .5rem; }
.placeholder-img {
  aspect-ratio: 4 / 5; border-radius: var(--radius); display: grid; place-items: center; text-align: center;
  color: var(--blue-600); font-weight: 600; padding: 1rem; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(26, 91, 196, .06) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--blue-100), var(--teal-100));
  border: 2px dashed var(--blue-500);
}
.placeholder-img svg { width: 64px; height: 64px; margin: 0 auto .5rem; stroke: currentColor; fill: none; stroke-width: 1.4; }
.placeholder-img small { display: block; font-weight: 400; color: var(--ink-soft); }
.stats { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1.5rem 0; padding: 0; list-style: none; }
.stats strong { display: block; font: 400 2rem var(--font-display); color: var(--orange-600); line-height: 1.1; }
.stats span { font-size: .9rem; color: var(--ink-soft); }

/* Testimonials ----------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; }
.quote {
  margin: 0; padding: 1.75rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--line);
  border-top: 4px solid var(--blue-600); box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.quote--book { border-top-color: var(--orange-500); }
.quote--teal { border-top-color: var(--teal-500); }
.quote__tag {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .65rem; border-radius: 999px; background: var(--blue-100); color: var(--blue-700); margin-bottom: 1rem;
}
.quote--book .quote__tag { background: var(--orange-100); color: var(--orange-600); }
.quote--teal .quote__tag { background: var(--teal-100); color: var(--teal-600); }
.quote__stars { color: #e8a21a; letter-spacing: 2px; margin-bottom: .6rem; }
.quote blockquote { margin: 0 0 1.25rem; font-size: 1.02rem; flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: .8rem; font-size: .92rem; color: var(--ink-soft); }
.quote figcaption strong { display: block; color: var(--ink); }
.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue-700); font: 400 .9rem var(--font-display);
}

/* Contact ---------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.form {
  background: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; color: var(--blue-900); }
.field input, .field textarea {
  width: 100%; font: inherit; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: #b4c4de; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-600); background: #fff; box-shadow: 0 0 0 4px rgba(26, 91, 196, .15);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--orange-500); }
.form__status { margin: 1rem 0 0; font-weight: 500; min-height: 1.5em; }
.form__status.is-ok { color: var(--teal-600); }
.form__status.is-error { color: var(--orange-600); }
.contact__list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.contact__list li { padding: .5rem 0; border-top: 1px solid var(--line); }
.hp { position: absolute; left: -9999px; }

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--blue-900); color: #c9d6ee; padding-block: 3rem 2rem; }
.footer__top { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.site-footer .logo { color: #fff; }
.social { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.social a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px;
  color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, .28); transition: background .2s, border-color .2s;
}
.social svg { width: 20px; height: 20px; }
.social a:hover { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; font-size: .9rem; }
.footer__bottom p { margin: 0; }
.footer__credit { margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); text-align: center; font-size: .85rem; color: #c9d6ee; }

/* Print dialog ----------------------------------------------------------- */
dialog {
  border: none; border-radius: var(--radius); padding: 0; width: min(94vw, 560px); max-height: 92vh;
  box-shadow: 0 30px 80px rgba(11, 42, 91, .35); color: var(--ink);
}
dialog::backdrop { background: rgba(11, 42, 91, .55); backdrop-filter: blur(3px); }
.dialog__body { padding: 1.5rem; overflow-y: auto; max-height: 92vh; }
.dialog__body h2 { font-size: 1.6rem; }
.dialog__preview { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 1.25rem; background: #fff; width: 100%; }
.dialog__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.dialog__actions .btn { padding: .8rem 1.2rem; font-size: .95rem; }
.dialog__close { float: right; background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }

/* Sub pages -------------------------------------------------------------- */
.page-hero { padding-block: clamp(3rem, 7vw, 5.5rem); background: linear-gradient(160deg, var(--blue-100), var(--teal-100) 70%, #fff); }
.page-hero h1 { margin-bottom: .3em; }
.page-hero--bar { height: 200px; padding-block: 0; display: flex; align-items: center; background: none; border-bottom: 1px solid var(--blue-100); }
.page-hero--bar h1 { font-size: clamp(1.75rem, 3vw + .5rem, 2.5rem); }
.page-hero--bar .lede { font-size: 1rem; margin-bottom: 0; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2em; font-size: 1.75rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.card h3 { font-size: 1.15rem; }
.card p:last-child { margin-bottom: 0; }
.card .tag { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-600); }

/* Articles (writing.html) ------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.filter {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .9rem; border-radius: 999px;
  font: 500 .92rem var(--font-body); color: var(--ink); background: #fff; border: 1px solid var(--line); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.filter svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.filter__count { font-size: .78rem; font-weight: 600; color: var(--ink-soft); background: var(--blue-50); border-radius: 999px; padding: .1rem .5rem; }
.filter:hover { border-color: var(--blue-600); color: var(--blue-700); }
.filter[aria-pressed="true"] { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.filter[aria-pressed="true"] .filter__count { background: rgba(255, 255, 255, .2); color: #fff; }
.filter[disabled] { opacity: .45; cursor: not-allowed; border-color: var(--line); color: var(--ink); }
.filters__status { margin: 1rem 0 1.25rem; font-size: .9rem; color: var(--ink-soft); }

.articles {
  list-style: none; margin: 0; padding: 1.5rem 0 0; display: grid; gap: 2.5rem 1.25rem; /* tall row gap leaves room for the flag tabs */
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 184px; grid-auto-flow: dense;
}
.article {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s var(--ease), transform .2s var(--ease);
}
.article:hover { border-color: var(--blue-500); box-shadow: 0 4px 10px rgba(11, 42, 91, .5), 0 1px 3px rgba(11, 42, 91, .4); }
.article__link { display: flex; flex: 1 1 0; min-height: 0; color: var(--ink); text-decoration: none; border-radius: inherit; overflow: hidden; }
/* Optional flag ("Must read", "Top rated") sits on top of the card as a tab (set featured / topRated in articles.js) */
.article__tab {
  position: absolute; left: 14px; bottom: 100%; height: 20px; display: flex; align-items: center; padding: 0 .75rem;
  background: var(--orange-600); color: #fff; border-radius: 8px 8px 0 0;
  font: 400 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.article__tab--top { background: var(--blue-100); color: var(--blue-900); box-shadow: inset 0 0 0 1px var(--line); }
.article:hover .article__tab { box-shadow: none; }
/* Small card: icon box top-left, date top-right (centered with the icon), text centered in the card, CTA box at the bottom */
.article:not(.article--featured) .article__link { display: grid; grid-template-rows: auto 1fr auto; }
.article__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem .9rem 0; }
.article .article__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue-100); color: var(--blue-700); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s; }
.article:hover .article__icon { box-shadow: inset 0 0 0 2px var(--blue-600); }
.article__content { display: flex; flex-direction: column; justify-content: center; gap: .15rem; min-width: 0; padding: .4rem .9rem; }
.article__content > * { flex: none; }
.article__date { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: var(--ink-soft); text-align: right; }
.article__title { margin: 0; font-size: 1rem; line-height: 1.3; color: var(--blue-900); }
/* title max 3 lines, subtitle 1 line, both end in … when cut */
.article__content .article__title, .article__content .article__excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.article__content .article__title { font-size: 1rem; line-height: 1.3; } /* 16px, up to 3 lines then … */
.article__content .article__excerpt { font-size: .8333rem; line-height: 1.35; -webkit-line-clamp: 1; line-clamp: 1; } /* 10pt */
.article .article__cta {
  display: flex; align-items: center; justify-content: flex-end; gap: .35rem; margin: 0; padding: .5rem .9rem;
  background: var(--blue-50); border-top: 1px solid var(--line); font-size: .8125rem; line-height: 1.2;
}
.article .article__cta .article__cta-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness .15s; }
.article:hover .article__cta .article__cta-text { text-decoration-thickness: 3px; }
.article:hover .article__cta { background: var(--blue-100); }
.article__cta svg { width: 15px; height: 15px; }
.article__icon svg, .chip svg { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.article__icon svg { display: block; width: 22px; height: 22px; }

.tone-blue { background: var(--blue-100); color: var(--blue-700); }
.tone-teal { background: var(--teal-100); color: var(--teal-600); }
.tone-orange { background: var(--orange-100); color: var(--orange-600); }

.article--featured { grid-column: span 2; grid-row: span 3; } /* 3 rows */
.article--featured .article__link { display: flex; flex-direction: column; height: auto; flex: 1; }
/* Image takes whatever height the text leaves, so the card fits its 4 grid rows */
.article__img { width: 100%; flex: 1 1 0; min-height: 0; object-fit: cover; background: var(--blue-50); }
.article--featured .article__head { padding: 1rem 1.25rem 0; }
.article--featured .article__icon { width: 44px; height: 44px; }
.article--featured .article__date { font-size: .78rem; }
.article--featured .article__content { padding: .6rem 1.25rem .9rem; }
.article--featured .article__content .article__title { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.article--featured .article__content .article__excerpt { font-size: 1rem; line-height: 1.5; }
.article__excerpt { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.article__cta { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .35rem; font-weight: 600; font-size: .95rem; color: var(--blue-600); }
.article__cta svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.article:hover .article__cta { color: var(--blue-700); }
.article:hover .article__cta svg { transform: translate(2px, -2px); }
.article__tags { flex: none; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0 1.25rem 1rem; }
/* Tag pills match the filter pills */
.chip {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .9rem; border-radius: 999px;
  font: 500 .92rem var(--font-body); color: var(--ink); background: #fff; border: 1px solid var(--line); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.chip svg { width: 18px; height: 18px; flex: none; }
.chip:hover { border-color: var(--blue-600); color: var(--blue-700); }

@media (max-width: 1023px) {
  .articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .articles { grid-template-columns: 1fr; }
  .article--featured { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .article, .article:hover, .article__cta svg, .article:hover .article__cta svg { transition: none; transform: none; }
}

/* Reveal animation ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Breakpoints: tablet / mobile ------------------------------------------- */
@media (max-width: 900px) {
  .split, .contact { grid-template-columns: 1fr; }
  .placeholder-img { aspect-ratio: 16 / 10; }
}

/* Breakpoint 1 — MOBILE: phone-shaped portrait canvas */
@media (max-width: 767px) {
  :root { --nav-h: 62px; }
  .nav__toggle { display: inline-flex; }
  .nav { grid-template-rows: var(--nav-h); }
  .nav__toggle { grid-area: 1 / 2; justify-self: end; }
  .nav__menu {
    display: block; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--blue-900); padding: .75rem 1rem 1.25rem; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all .25s var(--ease);
  }
  .nav__menu.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__links { flex-direction: column; align-items: stretch; }
  .nav__primary a { padding: .8rem 1rem; }
  .nav__primary .btn { margin: .5rem 0 0; justify-content: center; }
  .nav__secondary { flex-direction: row; align-items: center; gap: 1.1rem; }
  .nav__secondary .nav__label { display: none; }
  /* Drawing area runs edge to edge on phones */
  .device { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); border: 0; border-radius: 0; border-block: 1px solid var(--line); box-shadow: none; }
  .device__bar { display: none; }
  .device__canvas { width: 100%; aspect-ratio: 9 / 16; max-height: 72vh; }
  .sketch__sep { display: none; }
  .tool { padding: .5rem .75rem; font-size: .85rem; }
  .service { gap: .9rem; padding: 1rem; }
  .service:hover { transform: none; }
  .service__icon { width: 46px; height: 46px; }
  .footer__top, .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Breakpoint 2 — DESKTOP: landscape browser canvas */
@media (min-width: 768px) {
  .device__canvas { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .sketch__tools, .sketch__actions, dialog { display: none !important; }
}

/* Services: secondary contact button under the list */
.services__cta { max-width: 780px; margin: 1.5rem auto 0; display: flex; justify-content: center; }
.services__cta .btn { display: inline-flex; align-items: center; gap: .5rem; }
.services__cta .btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Books page: one section per book ---------------------------------------- */
.book { padding-block: clamp(3rem, 7vw, 5rem); }
.book--alt { background: var(--blue-50); }
.book__grid { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.book--alt .book__cover { order: 2; justify-self: end; }
.book__cover { margin: 0; }
.book__cover img { display: block; width: 100%; height: auto; border-radius: 4px 10px 10px 4px; box-shadow: 0 18px 40px rgba(11, 42, 91, .28), 0 2px 6px rgba(11, 42, 91, .2); }
.book__info h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.book__sub { font-size: 1.15rem; line-height: 1.5; color: var(--ink-soft); max-width: 52ch; margin: 0 0 1rem; }
.book__desc { max-width: 52ch; margin: 0 0 .75rem; color: var(--ink); }
.book__points { max-width: 52ch; margin: 0 0 1.25rem; padding-left: 1.2rem; color: var(--ink-soft); }
.book__points li { margin-bottom: .35rem; }
.book__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0 0 1.75rem; font: 400 .8rem/1.4 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.book__cta { display: inline-flex; align-items: center; gap: .6rem; }
.book__cta svg { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) {
  .book__grid { grid-template-columns: 1fr; }
  .book__cover { max-width: 220px; justify-self: start; }
  .book--alt .book__cover { order: 0; justify-self: start; }
}

/* Writing page: idea slider hero */
.idea-hero { border-bottom: 1px solid var(--blue-100); }
.idea-hero__stage { width: 100%; }
.idea-hero__svg { display: block; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.idea-hero__label { font: 500 12px/1 var(--font-body); fill: var(--ink-soft); pointer-events: none; }
.idea-slider { cursor: pointer; outline: none; }
.idea-slider__track { stroke: var(--blue-100); }
.idea-slider__fill { stroke: var(--blue-600); }
.idea-slider__thumb { fill: #fff; stroke: var(--blue-600); cursor: grab; }
.idea-slider__grip { stroke: var(--blue-600); fill: none; pointer-events: none; }
.idea-slider__ring { stroke: var(--blue-500); opacity: 0; }
.idea-slider:focus-visible .idea-slider__ring { opacity: 1; }
.idea-slider__cap { font: 400 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-soft); pointer-events: none; }
.idea-slider__hint { transition: opacity .3s; }
.idea-slider__node { fill: #fff; stroke: var(--blue-600); }
.idea-slider__node.is-on { fill: var(--blue-600); }

/* Writing page: Medium CTA */
.medium-cta__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.medium-cta__main .lede { margin-bottom: 1.5rem; }
.medium-cta .btn { display: inline-flex; align-items: center; gap: .6rem; }
.medium-cta__pubs h3 { font-size: 1.05rem; margin-bottom: .9rem; }
.pubs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.pubs li { padding: .5rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; font-size: .95rem; color: var(--blue-900); box-shadow: var(--shadow-sm); }
@media (max-width: 767px) { .medium-cta__grid { grid-template-columns: 1fr; } }

/* Product work: case studies + more-work cards */
.case { padding-block: clamp(3rem, 7vw, 5.5rem); border-bottom: 1px solid var(--line); }
.case--alt { background: var(--blue-50); }
.case__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.case--alt .case__media { order: 2; }
.case__media { margin: 0; }
.case__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); background: var(--blue-100); }
.case__info h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .3em; }
.case__sub { font-size: 1.1rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 1rem; }
.case__meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1.25rem 0; }
.case__meta div { display: flex; flex-direction: column; gap: .2rem; }
.case__meta dt { font: 400 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.case__meta dd { margin: 0; font-weight: 500; }
.tags { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li { padding: .3rem .8rem; border-radius: 999px; background: var(--blue-100); color: var(--blue-700); font-size: .82rem; font-weight: 500; }
.workcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.workcard { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.workcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.workcard img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 60%; background: var(--blue-50); border-bottom: 1px solid var(--line); }
.workcard__body { display: flex; flex-direction: column; flex: 1; padding: .8rem 1.1rem 1rem; }
.workcard h3 { font-size: 1.1rem; margin-bottom: .25em; }
.workcard p { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .95rem; }
.workcard__cta { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-end; margin-top: auto; padding-top: .5rem; color: var(--blue-600); font-weight: 600; font-size: .92rem; }
.workcard__cta-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness .15s; }
.workcard:hover .workcard__cta-text { text-decoration-thickness: 3px; }
.workcard:hover .workcard__cta { color: var(--blue-700); }
@media (max-width: 900px) { .workcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .case__grid { grid-template-columns: 1fr; }
  .case--alt .case__media { order: 0; }
  .workcards { grid-template-columns: 1fr; }
}
.process-caption { font: 600 14px/1 var(--font-body); fill: var(--blue-900); pointer-events: none; }

/* Case study page */
.cs-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem; }
.cs-hero h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); max-width: 20ch; }
.cs-hero .lede { max-width: 56ch; margin-bottom: 1.25rem; }
.cs-hero .tags { margin-bottom: 1.75rem; }
.cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem 2rem; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.cs-meta dt { font: 400 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .45rem; }
.cs-meta dd { margin: 0; font-weight: 500; }
.cs-meta dd span { font-weight: 400; font-size: .9rem; color: var(--ink-soft); }
.cs-fig { margin: 0; }
.cs-fig img, .cs-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--blue-100); box-shadow: var(--shadow-md); }
.cs-fig figcaption, .cs-gallery figcaption { margin-top: .6rem; font-size: .88rem; color: var(--ink-soft); }
.cs-cover { padding-bottom: 1rem; }
.cs-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--line); }
.cs-tldr { background: var(--blue-50); }
.cs-grid { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.cs-label { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.cs-label h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0; }
.cs-tab { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; padding: .7rem 1rem .8rem; background: var(--blue-600); color: #fff; border-radius: 0 0 14px 14px; font: 500 .78rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(26, 91, 196, .22); }
.cs-tab span { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255, 255, 255, .2); font-weight: 700; letter-spacing: 0; }
.cs-section--tabbed { padding-top: 0; }
.cs-section--tabbed .cs-label { top: var(--nav-h); }
.cs-section--tabbed .cs-body { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.cs-body { max-width: 68ch; }
.cs-body p { line-height: 1.7; }
.cs-body h3 { font-size: 1.1rem; margin: 2rem 0 .6rem; }
.cs-lead { font-size: 1.25rem; line-height: 1.55 !important; color: var(--blue-900); }
.cs-body .cs-fig, .cs-body .cs-gallery, .cs-body .cs-sprints { margin-block: 1.75rem; }
.cs-stats { list-style: none; margin: 1.75rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cs-stats li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); }
.cs-stats strong { display: block; font: 400 1.9rem/1.1 var(--font-display); color: var(--blue-600); margin-bottom: .3rem; }
.cs-stats span { font-size: .88rem; color: var(--ink-soft); }
.cs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.cs-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.cs-box h3 { margin-top: 0; }
.cs-box ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); }
.cs-people, .cs-phases { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .75rem; }
.cs-people li, .cs-phases li { display: grid; gap: .2rem; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue-600); border-radius: var(--radius-sm); }
.cs-people span, .cs-phases span { color: var(--ink-soft); font-size: .95rem; }
.cs-sprints { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: .35rem; }
.cs-sprint { display: grid; place-items: center; height: 2.6rem; border-radius: 6px; background: var(--blue-100); color: var(--blue-700); font: 400 .8rem var(--font-mono); }
.cs-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.cs-gallery figure { margin: 0; }
.cs-gallery figcaption strong { display: block; color: var(--ink); }
.cs-quote { margin: 1.75rem 0; padding: 1.1rem 1.4rem; border-left: 4px solid var(--orange-500); background: var(--orange-100); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.1rem; }
.cs-quote cite { display: block; margin-top: .5rem; font-size: .88rem; font-style: normal; color: var(--ink-soft); }
.cs-close { background: var(--blue-50); }
@media (max-width: 767px) {
  .cs-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cs-label { position: static; }
  .cs-section--tabbed .cs-body { padding-top: 0; }
  .cs-stats, .cs-two, .cs-gallery { grid-template-columns: 1fr; }
}
.cs-gallery figure:last-child:nth-child(odd) { grid-column: 1 / -1; }

.cs-embed { margin: 1.75rem 0 0; }
.cs-embed__label { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding: .35rem .8rem; border-radius: 999px; background: var(--blue-100); color: var(--blue-700); font: 500 .78rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.cs-embed__label svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-embed { text-align: center; }
.cs-embed__label { justify-self: center; }
/* 1:1 with a 390 x 844 phone (iPhone 14/15 points); shrinks only when the screen is narrower */
.cs-embed__frame { position: relative; width: 390px; max-width: 100%; aspect-ratio: 390 / 844; margin-inline: auto; background: var(--blue-50); }
.cs-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-embed figcaption { margin-top: 1.4rem; font-size: .88rem; color: var(--ink-soft); }

.cs-video { margin: 1.75rem 0 0; }
.cs-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: var(--blue-900); }
.cs-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-video figcaption { margin-top: .6rem; font-size: .88rem; color: var(--ink-soft); }
.cs-outcomes { margin: 0 0 1.5rem; padding-left: 1.2rem; line-height: 1.7; }
.cs-outcomes li { margin-bottom: .5rem; }

/* Featured work (home): reuses the .services list */
.featured__more { display: inline-flex; align-items: center; gap: .4rem; flex: none; font-weight: 600; color: var(--blue-600); }
.featured__more svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.service:hover .featured__more svg { transform: translateX(4px); }

/* Home page: section titles line up with the 780px list, and sections are 64px tighter (32px top and bottom) */
.section-head--list { max-width: 780px; margin-inline: auto; }
.has-subnav .section { padding-block: clamp(1.5rem, calc(8vw - 2rem), 4.5rem); }
.has-subnav .hero { padding-block: clamp(1rem, calc(6vw - 2rem), 2.5rem) clamp(1.5rem, calc(6vw - 2rem), 3rem); }

/* Arrows turn burnt orange on hover (services + featured work) */
.service:hover .service__arrow { color: var(--orange-600); }
.service:hover .featured__more svg { stroke: var(--orange-600); }

/* Clear turns red on hover */
#clear:hover { border-color: #d92d20; color: #d92d20; }

/* Experiments + Inspiration band (home) */
.experiments { background: var(--orange-600); color: #fff; padding-block: 1.75rem; }
.experiments__inner { display: flex; align-items: center; gap: 1.5rem; }
.experiments__icon { width: 72px; height: 72px; border-radius: 18px; flex: none; }
.experiments__icon svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.experiments__text { flex: 1; min-width: 0; }
.experiments h2 { margin: 0 0 .15rem; font-size: clamp(1.4rem, 2vw + .8rem, 2rem); color: #fff; }
.experiments p { margin: 0; color: rgba(255, 255, 255, .9); }
.experiments .btn--primary { background: var(--blue-900); color: #fff; box-shadow: 0 6px 18px rgba(11, 42, 91, .35); }
.experiments .btn--primary:hover { background: var(--blue-700); }
@media (max-width: 767px) { .experiments__inner { flex-direction: column; align-items: flex-start; } }
.experiments .btn { display: inline-flex; align-items: center; gap: .6rem; }
.experiments .btn svg { width: 22px; height: 22px; flex: none; stroke: var(--logo-blue); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Experiments + Inspiration page */
.lab { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem); background: linear-gradient(180deg, var(--blue-50), #fff); }
.lab h1 { margin-bottom: .2em; }
.lab .lede { margin-bottom: 1.75rem; }
.sandbox { border-radius: var(--radius); overflow: hidden; background: var(--blue-900); box-shadow: var(--shadow-md); }
.sandbox__bar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .8); font: 400 .78rem/1 var(--font-mono); }
.sandbox__dots { display: inline-flex; gap: .4rem; }
.sandbox__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange-500); }
.sandbox__dots i:nth-child(2) { background: #e8b13a; } .sandbox__dots i:nth-child(3) { background: var(--teal-500); }
.sandbox__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sandbox__title b { color: var(--logo-blue); font-weight: 400; }
.sandbox__ctrl { display: inline-flex; align-items: center; gap: .4rem; }
.sandbox__tabs { display: inline-flex; gap: .3rem; }
.sandbox__tab, .sandbox__btn { border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; border-radius: 6px; cursor: pointer; font: 400 .75rem/1 var(--font-mono); padding: .35rem .5rem; transition: background .15s, border-color .15s; }
.sandbox__btn { display: grid; place-items: center; padding: .3rem; }
.sandbox__btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sandbox__tab:hover, .sandbox__btn:hover { border-color: var(--logo-blue); }
.sandbox__tab[aria-pressed="true"] { background: var(--logo-blue); border-color: var(--logo-blue); color: var(--blue-900); }
.sandbox__canvas { display: block; width: 100%; height: clamp(260px, 38vw, 380px); touch-action: pan-y; cursor: crosshair; }
.sandbox__foot { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; color: rgba(255, 255, 255, .75); font-size: .88rem; }
.sandbox__count { font-family: var(--font-mono); font-size: .78rem; white-space: nowrap; }
@media (max-width: 700px) { .sandbox__title { display: none; } .sandbox__ctrl { margin-left: auto; } }

/* The thinking shelf: an isometric scene ---------------------------------- */
.shelf-room { padding-block: clamp(2rem, 5vw, 3.5rem); }
.shelf-head { max-width: 860px; margin: 0 auto 1.25rem; }
.shelf-head h2 { margin-bottom: .25rem; }
.shelf-head p { margin: 0; color: var(--ink-soft); }
.scene { max-width: 860px; margin-inline: auto; border-radius: 18px; overflow-x: auto; background: #f4f8fe; box-shadow: var(--shadow-md); }
.scene__svg { display: block; width: 100%; min-width: 560px; height: auto; }
.sbook { cursor: pointer; outline: none; transition: transform .2s var(--ease), opacity .2s, filter .2s; }
.sbook:hover, .sbook:focus-visible { transform: translate(6px, 3px); filter: brightness(1.18); }
.sbook.is-out { transform: translate(12px, 6px); opacity: .4; }
.sbook__ring { fill: none; stroke: var(--logo-blue); stroke-width: 2.2; opacity: 0; pointer-events: none; }
.sbook:focus-visible .sbook__ring { opacity: 1; }
.sbook text { pointer-events: none; }

/* Reader */
.reader { border: 0; padding: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: rgba(6, 18, 40, .86); backdrop-filter: blur(6px); color: #fff; }
.reader::backdrop { background: transparent; }
.reader[open] { display: block; }
.reader__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; max-width: 1400px; margin-inline: auto; transform-origin: var(--ox, 50%) var(--oy, 50%); animation: bookOpen .5s var(--ease); }
@keyframes bookOpen { from { transform: scale(.12); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.reader__head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.rchip { display: grid; place-items: center; width: 40px; height: 64px; border-radius: 4px; box-shadow: inset 3px 0 4px rgba(255, 255, 255, .15), inset -3px 0 5px rgba(0, 0, 0, .3); }
.rchip--sketch { background: #0c0c0c; align-content: center; }
.rchip--sketch span { writing-mode: vertical-rl; padding: 5px 3px; background: #f4efe4; color: #111; font: 600 9px/1 var(--font-mono); letter-spacing: .06em; white-space: nowrap; }
.reader__titles { flex: 1; min-width: 0; }
.reader__titles h2 { margin: 0; color: #fff; font-size: clamp(1.3rem, 2.5vw, 1.9rem); }
.reader__titles p { margin: .15rem 0 0; font-size: .88rem; color: rgba(255, 255, 255, .7); }
.reader__count { margin: 0; font: 400 .78rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--logo-blue); white-space: nowrap; }
.reader__close, .reader__nav { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.reader__close:hover, .reader__nav:hover:not(:disabled) { background: var(--orange-600); border-color: var(--orange-600); }
.reader__close svg, .reader__nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reader__nav:disabled { opacity: .3; cursor: default; }
.reader__stage { position: relative; min-height: 0; }
.reader__nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); }
.reader__nav--prev { left: .75rem; } .reader__nav--next { right: .75rem; }
.reader__strip { --sw: min(86vw, 980px); position: absolute; inset: 0; display: flex; align-items: center; gap: 0; padding-block: .5rem; padding-inline: calc((100% - var(--sw)) / 2); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline-offset: -3px; }
.reader__strip::-webkit-scrollbar { display: none; }
.spread { position: relative; flex: none; display: flex; flex-direction: column; width: var(--sw); height: min(100%, 700px); box-sizing: border-box; overflow: hidden; scroll-snap-align: center; padding: 1rem 1.5rem 1.25rem; color: var(--ink); background: #fbf8f1 radial-gradient(rgba(11, 42, 91, .16) 1px, transparent 1.6px) 0 0 / 20px 20px; border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.spread::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(11, 42, 91, .12) 45%, rgba(11, 42, 91, .22) 50%, rgba(11, 42, 91, .12) 55%, transparent); }
.spread + .spread { margin-left: 0; box-shadow: -1px 0 0 rgba(11, 42, 91, .25), 0 20px 50px rgba(0, 0, 0, .45); border-left: 1px dashed rgba(11, 42, 91, .35); border-radius: 0 6px 6px 0; }
.spread:has(+ .spread) { border-radius: 6px 0 0 6px; }
.spread:not(:first-child):has(+ .spread) { border-radius: 0; }
.spread__head { flex: none; position: relative; z-index: 1; display: flex; align-items: center; gap: .75rem; padding-bottom: .75rem; }
.spread__num { font: 400 .8rem/1 var(--font-mono); color: var(--orange-600); }
.spread__head h3 { flex: 1; margin: 0; font-size: 1.3rem; color: var(--blue-900); }
.share { display: inline-flex; gap: .3rem; }
.share__btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--blue-700); cursor: pointer; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.share__btn:hover { background: var(--blue-900); color: var(--logo-blue); border-color: var(--blue-900); }
.share__btn.is-done { background: #0b7270; color: #fff; border-color: #0b7270; }
.share__btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.spread__pages { --rows: 2; position: relative; z-index: 1; flex: 1 1 0; min-height: 0; display: grid; gap: .5rem; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }
.spread__pages::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; transform: translateX(-50%); pointer-events: none; z-index: 3; background: linear-gradient(90deg, transparent, rgba(11, 42, 91, .28) 50%, transparent); }
/* Layouts: 1 | 2 | 2+1 | 2+2 | 3+2 | 3+3 | 4+4 */
.spread__pages > figure { grid-column: span 6; position: relative; margin: 0; min-height: 0; overflow: hidden; border-radius: 3px; background: var(--blue-100); box-shadow: 0 2px 8px rgba(11, 42, 91, .2); }
.spread__pages.n1, .spread__pages.n2 { --rows: 1; }
/* Sketchbook pages: one row, each page fills its column (cropped to the column width) */
.spread__pages.nrow { --rows: 1; grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); }
.spread__pages.nrow > figure { grid-column: auto; }
.spread__pages.nrow img { object-position: 62% 35%; }
.spread__pages.n1 > figure { grid-column: span 12; }
.spread__pages.n3 > figure:nth-child(3) { grid-column: span 12; }
.spread__pages.n5 > figure:nth-child(-n+3), .spread__pages.n6 > figure { grid-column: span 4; }
.spread__pages.n8 > figure { grid-column: span 3; }
.spread__pages img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.spread__pages > figure.is-contain { background: #fff; }
.spread__pages > figure.is-contain img { object-fit: contain; }
.spread__pages figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .65rem .45rem; color: #fff; font-size: .75rem; line-height: 1.3; background: linear-gradient(transparent, rgba(6, 24, 58, .85)); pointer-events: none; }
.spread__foot { flex: none; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; padding-top: .85rem; }
.spread__foot p { flex: 1 1 260px; margin: 0; font-size: .95rem; color: var(--ink-soft); }
.spread__links { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: 0; padding: 0; list-style: none; }
.spread__links a, .spread__links .is-placeholder { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 600; color: var(--blue-600); text-decoration: none; border-bottom: 1px solid currentColor; }
.spread__links .is-placeholder { color: var(--ink-soft); border-bottom-style: dashed; font-weight: 500; }
.spread__links svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spread__pp { font: 400 .72rem/1 var(--font-mono); color: var(--ink-soft); letter-spacing: .06em; }
.reader__map { display: flex; gap: .35rem; padding: .85rem 1.25rem 1.1rem; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.reader__map button { flex: none; min-width: 34px; height: 30px; padding: 0 .5rem; border-radius: 4px; border: 0; border-bottom: 3px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .75); font: 400 .72rem/1 var(--font-mono); cursor: pointer; }
.reader__map button.is-seen { border-bottom-color: var(--logo-blue); }
.reader__map button.is-on { background: var(--logo-blue); color: var(--blue-900); border-bottom-color: var(--orange-500); }
html.reader-open { overflow: hidden; }
@media (max-width: 767px) {
  .reader__strip { --sw: 92vw; }
  .reader__nav { display: none; }
  .reader__count { display: none; }
  .spread { padding: .75rem .9rem 1rem; }
  .spread__head { flex-wrap: wrap; }
  .spread__pages > figure { grid-column: span 6 !important; }
  .spread__pages.nrow { grid-template-columns: repeat(2, minmax(0, 1fr)); --rows: 2; } .spread__pages.nrow > figure { grid-column: auto !important; aspect-ratio: 3 / 4; }
  .spread__pages.n1 > figure, .spread__pages.n2 > figure, .spread__pages.n3 > figure, .spread__pages.n5 > figure:last-child { grid-column: span 12 !important; }
  .spread__pages.n2 { --rows: 2; } .spread__pages.n3 { --rows: 3; } .spread__pages.n5 { --rows: 3; }
  .spread__pages.n6 { --rows: 3; } .spread__pages.n8 { --rows: 4; }
}
@media (prefers-reduced-motion: reduce) { .reader__panel { animation: none; } .book { transition: none; } }

/* BMW 2002 isometric experiment hero */
.iso-hero { padding-block: clamp(2rem, 5vw, 3.5rem); background: var(--blue-900); color: #fff; }
.iso-hero h2 { color: #fff; margin-bottom: .35rem; }
.iso-hero__lede { max-width: 62ch; margin: 0 0 1.5rem; color: rgba(255, 255, 255, .78); }
.iso-hero__frame { border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); background: #0c0d0e; }
.iso-hero__frame iframe { display: block; width: 100%; height: 780px; border: 0; }

.cs-fig--wide img { aspect-ratio: auto; height: auto; object-fit: contain; background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.cs-gallery--contain img { object-fit: contain; background: #fff; border: 1px solid var(--line); }

.cs-awards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-block: 1.25rem 1.75rem; }
.cs-awards figure { margin: 0; }
.cs-awards img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem; }
.cs-awards figcaption { margin-top: .5rem; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 767px) { .cs-awards { grid-template-columns: 1fr; } }

/* Case study hero: image to the right of the title */
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; margin-bottom: 2rem; }
.cs-hero__text .tags { margin-bottom: 0; }
.cs-hero__img { margin: 0; }
.cs-hero__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--blue-100); box-shadow: var(--shadow-md); }
@media (max-width: 860px) { .cs-hero__grid { grid-template-columns: 1fr; } .cs-hero__img { order: 2; } }
.cs-hero__img--fit img { aspect-ratio: auto; height: auto; object-fit: contain; background: #fff; border: 1px solid var(--line); }

/* Show images whole, at their own height */
.cs-gallery--natural { align-items: start; }
.cs-gallery--natural img { aspect-ratio: auto; height: auto; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.cs-fig--tall img { max-width: 560px; margin-inline: auto; }
.case__media--fit img { object-fit: contain; background: #fff; border: 1px solid var(--line); }

/* Smaller project pages */
.eyebrow--plain { background: none; padding: 0; border-radius: 0; color: var(--blue-700); display: block; margin: 0 0 .5rem; }
.pj-section { padding-block: clamp(2.25rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.pj-section--alt { background: var(--blue-50); }
.pj-grid { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.4fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.pj-grid h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin: 0; }
.pj-body { max-width: 68ch; }
.pj-body p { line-height: 1.7; }
.pj-section--alt > .wrap > h2 { margin-bottom: 1.25rem; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.pj-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.pj-shot, .pj-video { margin: 0; }
.pj-shot img, .pj-video video { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #1d1d1d; box-shadow: var(--shadow-md); }
.pj-shot figcaption, .pj-video figcaption { margin-top: .6rem; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.pj-shot figcaption strong, .pj-video figcaption strong { color: var(--ink); }
.pj-video { margin-top: 1.5rem; }
.pj-cta { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--blue-900); color: #fff; }
.pj-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.pj-cta h2 { color: #fff; margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.pj-cta p { margin: 0; color: rgba(255, 255, 255, .82); max-width: 52ch; }
.pj-cta .eyebrow--plain { color: var(--logo-blue); }
.pj-cta__btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.pj-cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
.pj-cta .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 767px) { .pj-grid, .pj-grid-2 { grid-template-columns: 1fr; } }
.pj-shot--light img { background: #fff; border: 1px solid var(--line); }
.pj-video__frame { position: relative; aspect-ratio: 2296 / 1342; border-radius: var(--radius); overflow: hidden; background: #1d1d1d; box-shadow: var(--shadow-md); }
.pj-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.workcard__tags { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0 0 .6rem; padding: 0; }
.workcard__tags li { padding: .1rem .5rem; border-radius: 999px; background: var(--blue-100); color: var(--blue-700); font-size: .68rem; font-weight: 600; line-height: 1.5; }
.pj-section--video { padding-block: clamp(1.5rem, 4vw, 2.5rem); border-top: 0; }
.pj-video--lead { margin-top: 0; }
.pj-video__frame--16x9 { aspect-ratio: 16 / 9; }
.cs-hero__img--phone img { max-width: 300px; margin-inline: auto; background: transparent; border: 0; box-shadow: none; }

/* Deck viewer (project highlight pages) */
.pj-deck__intro,.pj-deck__note{color:var(--ink-soft,#4a5568);margin:.25rem 0 1.25rem;max-width:60ch}
.pj-deck__note{margin:1rem 0 0;font-size:.9rem}
.deck{max-width:1100px;margin:0 auto}
.deck:focus-visible{outline:3px solid var(--blue-600);outline-offset:4px;border-radius:12px}
.deck__stage{position:relative;aspect-ratio:16/9;background:#fff;border:1px solid rgba(11,42,91,.15);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(11,42,91,.14);touch-action:pan-y}
.deck__slides{list-style:none;margin:0;padding:0;height:100%}
.deck__slides li{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.deck__slides li.is-active{opacity:1;visibility:visible}
.deck__slides img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}
.deck__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(11,42,91,.82);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s}
.deck__nav:hover{background:var(--orange-600)}
.deck__nav:focus-visible{outline:3px solid #fff;outline-offset:2px}
.deck__nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.deck__nav--prev{left:12px}.deck__nav--next{right:12px}
.deck__nav[disabled]{opacity:.3;cursor:default}
.deck__bar{display:flex;align-items:center;gap:1rem;margin-top:.9rem}
.deck__count{font-family:var(--font-mono);font-size:.85rem;color:var(--blue-900);min-width:5.5rem}
.deck__range{flex:1;accent-color:var(--blue-600)}
.deck__full{font:inherit;font-size:.85rem;font-weight:600;color:var(--blue-900);background:#fff;border:1px solid rgba(11,42,91,.25);border-radius:999px;padding:.4rem .9rem;cursor:pointer}
.deck__full:hover{border-color:var(--orange-600);color:var(--orange-600)}
.deck__strip{position:relative;margin-top:.9rem}
.deck__thumbs{list-style:none;margin:0;padding:0 0 .5rem;display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.deck__thumbs li{flex:0 0 calc((100% - 7 * .5rem) / 8);scroll-snap-align:start}
.deck__thumbs button{display:block;width:100%;padding:0;border:2px solid transparent;border-radius:5px;background:#fff;cursor:pointer;opacity:.7;overflow:hidden;box-shadow:0 2px 8px rgba(11,42,91,.12)}
.deck__thumbs button:hover{opacity:1}
.deck__thumbs button[aria-current="true"]{border-color:var(--orange-600);opacity:1}
.deck__thumbs img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.deck__scroll{position:absolute;top:calc(50% - .25rem);transform:translateY(-50%);z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(11,42,91,.85);color:#fff;display:grid;place-items:center;cursor:pointer}
.deck__scroll:hover{background:var(--orange-600)}
.deck__scroll svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.deck__scroll--prev{left:-10px}.deck__scroll--next{right:-10px}
.deck__scroll[disabled]{opacity:0;pointer-events:none}
.deck:fullscreen{background:#0b2a5b;max-width:none;display:flex;flex-direction:column;justify-content:center;padding:1rem}
.deck:fullscreen .deck__stage{max-height:80vh;margin:0 auto;border-radius:6px}
.deck:fullscreen .deck__count{color:#fff}
@media (max-width:640px){.deck__nav{width:38px;height:38px}.deck__full{display:none}.deck__thumbs li{flex-basis:calc((100% - 3 * .5rem) / 4)}.deck__scroll--prev{left:-4px}.deck__scroll--next{right:-4px}}
@media (prefers-reduced-motion:reduce){.deck__slides li{transition:none}}

/* Hero carousel (project pages) */
.hcar:focus-visible{outline:3px solid var(--blue-600);outline-offset:4px;border-radius:var(--radius)}
.hcar__stage{position:relative;aspect-ratio:var(--hcar-ratio,1149/700);border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md)}
.hcar__slides{list-style:none;margin:0;padding:0;height:100%}
.hcar__slides li{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.hcar__slides li.is-active{opacity:1;visibility:visible}
.hcar .hcar__slides img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;border:0;border-radius:0;box-shadow:none}
.hcar__nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:rgba(11,42,91,.82);color:#fff;display:grid;place-items:center;cursor:pointer}
.hcar__nav:hover{background:var(--orange-600)}
.hcar__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hcar__nav--prev{left:8px}.hcar__nav--next{right:8px}
.hcar__dots{display:flex;justify-content:center;gap:.5rem;margin-top:.75rem}
.hcar__dots button{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:rgba(11,42,91,.25);cursor:pointer}
.hcar__dots button[aria-current="true"]{background:var(--orange-600)}
@media (prefers-reduced-motion:reduce){.hcar__slides li{transition:none}}
.deck__caption{margin:.75rem 0 0;color:var(--blue-900);font-size:.95rem;min-height:1.5em}
.deck__caption:empty{display:none}

/* Back link: 16px under the nav on every project and case study */
.cs-hero { padding-top: 16px; }
.cs-hero .cs-back { display: block; width: fit-content; line-height: 1.2; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }

/* Teaching page */
.tc-section h2 { margin: 0 0 .5rem; }
.tc-section--alt { background: var(--blue-100, #eef4fc); }
.tc-intro, .tc-note { color: var(--ink-soft, #4a5568); max-width: 62ch; }
.tc-note { margin-top: 1.5rem; font-size: .95rem; }
.tc-logos { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 900px) { .tc-logos { grid-template-columns: repeat(2, 1fr); } }
.tc-logos li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2.1rem 1rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .75rem; }
.tc-logos li.is-current { border-color: var(--orange-600); padding: 0; transition: box-shadow .2s; }
.tc-logos li.is-current:hover { box-shadow: 0 8px 22px rgba(11, 42, 91, .2); }
.tc-logos__link { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .75rem; height: 100%; padding: 2.1rem 1rem 1rem; color: inherit; text-decoration: none; border-radius: var(--radius); }
.tc-logos__link:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.tc-logos__cta { font-size: .8rem; font-weight: 600; color: var(--blue-600); }
.tc-logos__link:hover .tc-logos__cta { color: var(--orange-600); }
.tc-logos__link:hover img { filter: none; opacity: 1; }
.tc-logos img { display: block; height: 64px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.tc-logos li:hover img { filter: none; opacity: 1; }
.tc-logos__name { font-size: .78rem; color: var(--ink-soft, #4a5568); text-align: center; line-height: 1.3; }
.tc-logos__tag { position: absolute; top: .6rem; left: .6rem; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--orange-600); border-radius: 999px; padding: .2rem .55rem; }
.tc-sample { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-top: 2.5rem; }
.tc-sample h3 { margin: 0 0 .5rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.tc-sample p { color: var(--ink-soft, #4a5568); }
.tc-sample__btn { margin-top: 1.1rem; }
.tc-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #1d1d1d; box-shadow: var(--shadow-md); }
.tc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tc-talks { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.tc-talk { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: box-shadow .2s; }
.tc-talk:hover { box-shadow: 0 8px 22px rgba(11, 42, 91, .2); }
.tc-talk img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--blue-100); }
.tc-talk__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.15rem 1.25rem; flex: 1; }
.tc-talk h3 { margin: 0; font-size: 1.05rem; color: var(--blue-900); }
.tc-talk p { margin: 0; font-size: .92rem; color: var(--ink-soft, #4a5568); }
.tc-talk__cta { margin-top: auto; padding-top: .5rem; font-size: .85rem; font-weight: 600; color: var(--blue-600); }
.tc-talk:hover .tc-talk__cta { color: var(--orange-600); }
.tc-rating { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-top: 1.5rem; box-shadow: var(--shadow-sm); }
.tc-rating p { margin: 0; color: var(--ink-soft, #4a5568); }
.tc-rating__score { font-size: 2.6rem; line-height: 1; color: var(--blue-900) !important; font-family: var(--font-display); }
.tc-rating__score span:not(.visually-hidden) { color: var(--orange-600); }
.tc-reviews { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.tc-review { margin: 0; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.tc-review blockquote { margin: 0 0 1rem; flex: 1; }
.tc-review blockquote p { margin: 0; color: var(--blue-900); line-height: 1.6; }
.tc-review figcaption { display: flex; flex-direction: column; font-size: .9rem; }
.tc-review figcaption span { color: var(--ink-soft, #4a5568); font-size: .82rem; }
@media (max-width: 860px) { .tc-sample { grid-template-columns: 1fr; } .tc-rating { grid-template-columns: 1fr; } }
.tc-hero { padding-top: 16px; }
.tc-hero .cs-back { display: block; width: fit-content; line-height: 1.2; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.tc-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.tc-hero__text h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.tc-hero__title { font-size: clamp(1.15rem, 2vw, 1.45rem); margin: 0 0 .4rem; }
.tc-hero__text > p:not(.eyebrow):not(.lede):not(.tc-sample__btn) { color: var(--ink-soft, #4a5568); margin: 0; }
@media (max-width: 860px) { .tc-hero__grid { grid-template-columns: 1fr; } }
.vf { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background-color: #1d1d1d; background-size: cover; background-position: center; }
.vf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 42, 91, 0) 55%, rgba(11, 42, 91, .35)); transition: background .2s; }
.vf:hover::after { background: rgba(11, 42, 91, .25); }
.vf:focus-visible { outline: 3px solid var(--blue-600); outline-offset: -3px; }
.vf__play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--orange-600); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); transition: transform .15s; }
.vf__play::before { content: ""; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 23px; border-color: transparent transparent transparent #fff; }
.vf:hover .vf__play { transform: scale(1.08); }
.vf--figma { background-image: linear-gradient(135deg, var(--blue-900), var(--blue-600)); }
.vf__label { position: absolute; left: 1.5rem; bottom: 1.25rem; z-index: 1; color: #fff; font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.5rem); text-align: left; line-height: 1.25; }
.vf__label small { display: block; margin-top: .25rem; font-family: var(--font-body); font-size: .8rem; opacity: .85; }
.tc-resource { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.tc-resource h3 { margin: 0 0 .5rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.tc-resource p { color: var(--ink-soft, #4a5568); }
@media (max-width: 860px) { .tc-resource { grid-template-columns: 1fr; } }
.tc-resource--flip { border-top: 0; margin-top: 2.5rem; padding-top: 0; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.tc-resource--flip .tc-resource__thumb { order: 2; }
.tc-resource__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #1d1d1d; box-shadow: var(--shadow-md); }
.tc-resource__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-resource__thumb:hover .vf__play { transform: scale(1.08); }
.tc-resource__thumb:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; }
@media (max-width: 860px) { .tc-resource--flip { grid-template-columns: 1fr; } .tc-resource--flip .tc-resource__thumb { order: 0; } }

/* Feature work: cards + work roulette */
.featured-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: none; }
.roulette { --pull: 40px; display: inline-flex; align-items: center; gap: 1rem; font: inherit; color: var(--blue-900); background: transparent; border: 0; padding: .25rem 0; cursor: pointer; }
.roulette:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 6px; border-radius: 12px; }
.roulette__text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.roulette__title { font-family: var(--font-display); font-size: 1.15rem; }
.roulette__hint { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-600); }
.roulette:hover .roulette__title { color: var(--orange-600); }
.roulette__machine { position: relative; flex: none; width: 46px; height: calc(var(--pull) + 52px); }
.roulette__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 16px; margin-left: -8px; border-radius: 999px; background: linear-gradient(90deg, #06183a, var(--blue-900) 60%, #1b4a93); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .6); }
.roulette__stick { position: absolute; left: 50%; top: 14px; width: 6px; margin-left: -3px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, #8a95a8, #e9eef6 45%, #8a95a8); transform-origin: top; transition: none; }
.roulette__knob { position: absolute; left: 50%; top: 0; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a63, var(--orange-600) 55%, #8f2408); box-shadow: 0 4px 8px rgba(11, 42, 91, .35), inset 0 -3px 5px rgba(0, 0, 0, .25); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.roulette:hover .roulette__knob { transform: translateY(3px); }
.roulette.is-pulled .roulette__knob { transform: translateY(var(--pull)); transition: transform .28s cubic-bezier(.5, 0, .9, .6); }
.roulette.is-pulled .roulette__stick { height: calc(var(--pull) + 4px); transition: height .28s cubic-bezier(.5, 0, .9, .6); }
.roulette__stick { transition: height .5s cubic-bezier(.3, 1.6, .5, 1); }
.roulette.is-pulled .roulette__text .roulette__hint { opacity: 0; }
.roulette__hint { transition: opacity .2s; }
.feat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; transition: opacity .22s ease, transform .22s ease; }
.feat-grid .feat { animation-fill-mode: both; animation-duration: .32s; animation-delay: calc(var(--i, 0) * 60ms); }
.feat-grid.is-out .feat { animation-name: reel-out; animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
.feat-grid.is-in .feat { animation-name: reel-in; animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .9, .3, 1.15); }
@keyframes reel-out { to { opacity: 0; transform: translateY(70px) scaleY(.92); filter: blur(3px); } }
@keyframes reel-in { from { opacity: 0; transform: translateY(-70px) scaleY(.92); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.feat--big { grid-column: 1 / -1; }
.feat__link { display: grid; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.feat__link:hover { box-shadow: 0 12px 30px rgba(11, 42, 91, .2); transform: translateY(-2px); }
.feat__link:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; }
.feat--big .feat__link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: clamp(280px, 34vw, 440px); }
.feat--small .feat__link { grid-template-rows: auto 1fr; }
.feat__media { display: block; overflow: hidden; background: var(--blue-100); }
.feat--small .feat__media { aspect-ratio: 16 / 9; }
.feat__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .4s ease; }
.feat--big .feat__media img { min-height: 100%; }
.feat__link:hover .feat__media img { transform: scale(1.03); }
.feat__body { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: clamp(1.25rem, 3vw, 2.25rem); }
.feat--small .feat__body { padding: 1.25rem 1.4rem 1.4rem; }
.feat__type { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-600); }
.feat__body h3 { margin: 0; color: var(--blue-900); font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.15; }
.feat--small .feat__body h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.feat__sub { margin: 0; color: var(--ink-soft, #4a5568); }
.feat--small .feat__sub { font-size: .92rem; }
.feat__tags { list-style: none; margin: .25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.feat__tags li { font-size: .75rem; font-weight: 600; color: var(--blue-600); background: var(--blue-100); border-radius: 999px; padding: .2rem .65rem; }
.feat__body .featured__more { margin-top: auto; padding-top: .75rem; }
.feat__link:hover .featured__more svg { transform: translateX(4px); stroke: var(--orange-600); }
@media (max-width: 860px) {
  .feat-grid { grid-template-columns: 1fr; }
  .feat--big .feat__link { grid-template-columns: 1fr; min-height: 0; }
  .feat--big .feat__media { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .feat-grid, .feat__link, .feat__media img, .roulette__knob, .roulette__stick { transition: none; } .feat-grid .feat { animation: none !important; } }
.hcar__caption { margin: .5rem 0 0; text-align: center; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; color: var(--ink-soft, #4a5568); min-height: 1.4em; }
.about-car .hcar__stage { box-shadow: var(--shadow-md); }
.about-car__note { margin: .6rem 0 0; text-align: center; font-size: .95rem; color: var(--blue-900); }
.about-car__note a { color: var(--blue-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.about-car__note a:hover { color: var(--orange-600); }

/* About page */
.prose-wide { max-width: 72ch; }
.prose-wide h2 { margin: 0 0 .75rem; }
.about__links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.elsewhere { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.elsewhere__card { position: relative; display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1.25rem 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: box-shadow .2s, border-color .2s; }
.elsewhere__card:hover { border-color: var(--blue-500); box-shadow: 0 4px 10px rgba(11, 42, 91, .5), 0 1px 3px rgba(11, 42, 91, .4); }
.elsewhere__card:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; }
.elsewhere__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--blue-900); color: var(--logo-blue, #00aeef); }
.elsewhere__icon svg { width: 26px; height: 26px; }
.elsewhere__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.elsewhere__body strong { color: var(--blue-900); font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; }
.elsewhere__handle { font-family: var(--font-mono); font-size: .78rem; color: var(--orange-600); overflow-wrap: anywhere; }
.elsewhere__desc { font-size: .9rem; color: var(--ink-soft, #4a5568); }
.elsewhere__go { margin-left: auto; font-size: 1.2rem; color: var(--blue-600); }
.elsewhere__card:hover .elsewhere__go { color: var(--orange-600); }
.about__portrait { margin: 0; justify-self: center; width: min(100%, 440px); }
.about__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.about__sketch { margin: 0; }
.about__sketch img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.about__contact .eyebrow { margin-bottom: .5rem; }
.about__contact h2 { margin-top: 0; }

/* Product work: featured case studies heading + arrow on case CTAs */
.cs-intro { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
.cs-intro .section-head { margin-bottom: 0; }
.cs-intro h2 { margin: 0 0 .4rem; }
.btn__arrow { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Now page: sticky notes on a Stendig-style calendar */
.now { background: #fff; padding-block: 16px clamp(2rem, 5vw, 3.5rem); position: relative; overflow: hidden; color: #111; }
.now .cs-back { margin: 0 0 1.5rem; display: block; width: fit-content; }
.now__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 1rem; }
.now__title h1 { font-family: "Helvetica Neue", Helvetica, Arial, var(--font-body), sans-serif; font-weight: 800; font-size: clamp(3rem, 8vw, 6rem); letter-spacing: -.03em; line-height: .95; margin: 0 0 .5rem; color: #111; }
.now__title .lede { margin: 0; color: #444; }
.now__month { margin: 0; display: flex; flex-direction: column; text-align: right; font-family: "Helvetica Neue", Helvetica, Arial, var(--font-body), sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .92; font-size: clamp(2.6rem, 8vw, 6.4rem); color: #111; }
.now__month span:last-child { color: #c23b17; }
.now__dow { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 4px solid #111; padding-top: .5rem; font: 800 clamp(.8rem, 1.6vw, 1.1rem) "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .02em; color: #111; }
.now__dow span { padding-left: .5rem; }
.now__stage { position: relative; }
.now-cal { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(5, 1fr); pointer-events: none; }
.now-cal__d { position: relative; padding: .15rem 0 0 .5rem; font: 800 clamp(2.2rem, 7.6vw, 6.4rem)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -.04em; color: #111; }
.now-cal__d--mark::after { content: ""; position: absolute; left: .1rem; top: -.05rem; width: 1.2em; height: 1.2em; border: 3px solid #c23b17; border-radius: 50%; transform: rotate(-8deg); }
.now__notes { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(210px, auto)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(.75rem, 2vw, 1.75rem) clamp(2rem, 4vw, 3rem); align-items: start; min-height: 640px; }
.note--g { grid-column: 1; grid-row: 1; justify-self: start; }
.clip { grid-column: 2; grid-row: 1 / span 2; }
.note--y { grid-column: 3; grid-row: 1; justify-self: end; }
.note--b { grid-column: 1; grid-row: 2; justify-self: center; }
.note--p { grid-column: 3; grid-row: 2; justify-self: center; }
.note { position: relative; width: clamp(150px, 17vw, 200px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.3rem 1.1rem 1rem; background: var(--note, #ffe66d); color: #2b2b2b; box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 14px 18px -6px rgba(0, 0, 0, .28); transform: rotate(var(--tilt, -1.5deg)); transition: transform .2s var(--ease, ease), box-shadow .2s; font-family: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive; }
.note::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(180deg, rgba(0, 0, 0, .07), transparent); }
.note::after { content: ""; position: absolute; right: 0; bottom: 0; width: 38%; height: 18px; background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .12) 50%); filter: blur(3px); transform: translateY(6px); z-index: -1; }
.note:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 18px 24px -8px rgba(0, 0, 0, .35); }
.note p { margin: 0; font-size: clamp(1.05rem, 1.75vw, 1.4rem); line-height: 1.2; font-weight: 400; color: #1a1a1a; letter-spacing: .01em; transform: rotate(-1deg); }
.note--yellow { --note: #ffe66d; --tilt: -1.8deg; }
.note--blue { --note: #9edcff; --tilt: 1.6deg; }
.note--pink { --note: #ffb3d1; --tilt: -1deg; }
.note--green { --note: #b9f0a0; --tilt: 2deg; }
.note--wide { grid-column: span 2; --tilt: -1.2deg; }
.note__cta { margin-top: 1rem; font-family: var(--font-body); }
.note__cta .btn { font-size: .95rem; padding: .75rem 1.25rem; }
.clip { position: relative; display: block; background: #fff; border: 1px solid #ddd; padding: .75rem .75rem 1rem; color: inherit; text-decoration: none; transform: rotate(1.2deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 14px 18px -6px rgba(0, 0, 0, .28); transition: transform .2s var(--ease, ease), box-shadow .2s; }
.clip:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 18px 24px -8px rgba(0, 0, 0, .35); }
.clip:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 4px; }
.clip__tape { position: absolute; left: 50%; top: -14px; width: 110px; height: 28px; margin-left: -55px; background: rgba(255, 238, 170, .75); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transform: rotate(-3deg); }
.clip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #fff; border: 1px solid #eee; }
.clip__body { display: flex; flex-direction: column; gap: .35rem; padding: .85rem .35rem 0; }
.clip__eyebrow { font: 700 .66rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange-600); }
.clip__title { font: 400 1.4rem/1.15 var(--font-display); color: var(--blue-900); }
.clip__text { font-size: .92rem; color: #444; }
.clip__cta { align-self: flex-end; display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-weight: 600; font-size: .9rem; color: var(--blue-600); }
.clip__cta-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness .15s; }
.clip:hover .clip__cta-text { text-decoration-thickness: 3px; }
.clip__cta svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.now__credit { margin: 0; font-size: .75rem; color: #777; text-align: right; }
@media (max-width: 900px) { .now__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } .note--g, .note--y, .note--b, .note--p, .clip { grid-column: auto; grid-row: auto; } .clip { grid-column: span 2; } }
@media (max-width: 600px) { .now__notes { grid-template-columns: 1fr; } .clip { grid-column: auto; } .now-cal__d { font-size: 2.2rem; } }
@media (prefers-reduced-motion: reduce) { .note, .clip { transition: none; } .note:hover, .clip:hover { transform: rotate(var(--tilt, 0)); } }

.now__intro { padding: 1.5rem 0 2.25rem; }
.now__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 3rem; margin: 0; }
.now__facts > div { display: flex; flex-direction: column; gap: .25rem; }
.now__facts dt { font: 400 .72rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-600); }
.now__facts dd { margin: 0; font-size: 1.05rem; line-height: 1.55; color: #222; }
@media (max-width: 700px) { .now__facts { grid-template-columns: 1fr; } }

/* Footer navigation */
.footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding: 2rem 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer__col h2 { margin: 0 0 .9rem; font: 400 .72rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--logo-blue, #00aeef); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.footer__col a { color: #c9d6ee; text-decoration: none; font-size: .92rem; line-height: 1.35; }
.footer__col a:hover, .footer__col a:focus-visible { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 900px) { .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer__nav { grid-template-columns: 1fr; } }

/* Friends page */
.friends { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem 1.25rem; }
.friends__item { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.friends__name { font: 400 1.25rem/1.2 var(--font-display); color: var(--blue-900); }
a.friends__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness .15s, color .15s; }
a.friends__name:hover { color: var(--orange-600); text-decoration-thickness: 3px; }
.friends__desc { color: var(--ink-soft, #4a5568); font-size: .95rem; line-height: 1.5; }
.friends__item--todo { border-style: dashed; background: transparent; box-shadow: none; }
.friends__credit { margin: 2rem 0 0; font-size: .9rem; color: var(--ink-soft, #4a5568); }
.friends__credit a { color: var(--blue-600); }
.now__inspired { margin: 1.5rem 0 0; font-size: .9rem; color: #555; }
.now__inspired a { color: var(--blue-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.now__inspired a:hover { color: var(--orange-600); }
.friends--compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .85rem 1rem; }
.friends--compact .friends__item { padding: .9rem 1.1rem; gap: .15rem; }
.friends--compact .friends__name { font-size: 1.1rem; }
.friends--compact .friends__desc { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-soft, #4a5568); overflow-wrap: anywhere; }
.pj-grid-2--crop .pj-shot img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: center 40%; width: 100%; }
.pj-sub { margin: 2.5rem 0 1rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--blue-900); }
.cs-hero__img--poster { justify-self: center; width: min(100%, 400px); }
.cs-hero__img--poster a { display: block; }
.cs-hero__img--poster img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); background: #fff; }
.pj-steps { margin: 1.25rem 0 2rem; padding-left: 1.4rem; display: grid; gap: .6rem; max-width: 70ch; line-height: 1.6; }
.cs-natural .cs-fig img { aspect-ratio: auto; height: auto; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.cs-fig--natural img { aspect-ratio: auto; height: auto; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.cs-fig--natural img { width: auto; max-width: 100%; height: auto; max-height: 720px; }
.cs-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .cs-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cs-stats--1 { grid-template-columns: minmax(0, 20rem); }
.pj-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 767px) { .pj-grid-3 { grid-template-columns: 1fr; } }
.pj-grid-2--natural { align-items: start; }
.pj-grid-2--natural .pj-shot img { width: 100%; height: auto; max-height: 720px; object-fit: contain; }
.pj-grid-3--photos { align-items: start; }
.pj-grid-3--photos .pj-shot img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: contain; }
.hcar__pause{position:absolute;top:.6rem;right:.6rem;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(11,42,91,.82);color:#fff;display:grid;place-items:center;cursor:pointer}
.hcar__pause svg{width:16px;height:16px;fill:currentColor}
.hcar__pause .i-play{display:none}
.hcar__pause[aria-pressed="true"] .i-pause{display:none}
.hcar__pause[aria-pressed="true"] .i-play{display:block}
.hcar__pause:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Cookie consent banner */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1000; max-width: 46rem; margin-inline: auto; display: flex; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1rem 1.25rem; background: var(--blue-900); color: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.consent__text { margin: 0; flex: 1 1 18rem; font-size: .95rem; line-height: 1.5; }
.consent__text a { color: #fff; text-underline-offset: 3px; }
.consent__btns { display: flex; gap: .6rem; }
.consent .btn--ghost { color: #fff; border-color: #fff; background: transparent; padding: .55rem 1.2rem; }
.consent .btn--ghost:hover { background: #fff; color: var(--blue-900); }
.consent .btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linklike:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.35rem; margin-top: 2rem; }
.legal p { max-width: 65ch; }