/* Shared visual system. Base rules are consolidated by selector; responsive rules follow. */

/* Respect native hidden state used by archive filtering. */
[hidden] {
  display: none !important;
}

:root {
  --white: #fff
;
  color-scheme: light;
  --space-section: clamp(72px,9vw,120px);
  --space-card: 28px;
  --max: var(--content-max);
  --page-gutter: clamp(20px,4vw,64px)
;
  --paper: var(--page-bg);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --page-bg: #f8f6f1;
  --surface: #ffffff;
  --surface-muted: #eeebe3;
  --text-primary: #17233e;
  --text-secondary: #526074;
  --border: #dedcd5;
  --accent: #2455c7;
  --terracotta: #a64d31;
  --blue: var(--accent);
  --blue-soft: #edf1fa;
  --green: var(--terracotta);
  --gold: var(--terracotta);
  --content-max: 1240px;
  --radius-card: 0;
  --radius-media: 4px;
  --radius-control: 4px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Arial, sans-serif

}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  font: 16px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  background: var(--page-bg);
  color: var(--text-primary);
  line-height: 1.65;
  font-family: var(--sans);
  font-size: 18px
}

a {
  color: inherit
}

button {
  font: inherit;
  color: inherit
}

input {
  font: inherit
}

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

::selection {
  background: #c9e0e4;
  color: #172b3b
}

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

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px
}

.skip:focus {
  left: 12px
}

.site-header {
  border-bottom: 1px solid var(--line);
  top: 0;
  z-index: 20;
  border-color: #2e4166;
  background: #14213b;
  backdrop-filter: none;
  position: relative
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 90px
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  min-width: 190px;
  color: #f8faff
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font: 700 12px/1 var(--serif);
  letter-spacing: -.04em;
  border-color: #8ca6d2
}

.brand-name {
  font: 700 16px/1.1 var(--serif);
  letter-spacing: -.02em;
  font-size: 21px;
  color: #f8faff
}

.brand-role {
  display: block;
  font: 500 12px/1.4 var(--sans);
  letter-spacing: .02em;
  margin-top: 3px;
  color: #c4d1ec;
  font-size: 13px
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px,1.5vw,20px)
}

.primary-nav a {
  font-size: 14px;
  text-decoration: none;
  color: #f8faff
}

.footer-links a {
  font-size: 14px;
  text-decoration: none;
  color: var(--text-primary)
}

.primary-nav a:hover {
  color: #b8d2ff;
  text-decoration: underline;
  text-underline-offset: 4px
}

.footer-links a:hover {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px
}

.primary-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ink);
  padding: 10px 15px;
  text-decoration: none;
  font-weight: 650;
  font-size: 13px;
  color: #14213b;
  transition: background .18s ease,color .18s ease,transform .18s ease;
  border-radius: var(--radius-control);
  background: #e9f0ff;
  border-color: #e9f0ff
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ink);
  padding: 10px 15px;
  text-decoration: none;
  font-weight: 650;
  font-size: 13px;
  color: #fff;
  transition: background .15s ease,color .15s ease,border-color .15s ease;
  border-radius: var(--radius-control);
  background: var(--accent);
  border-color: var(--accent)
}

.primary-nav .nav-cta:hover {
  color: #14213b;
  text-decoration: none;
  transform: translateY(-1px);
  background: #cfdfff;
  border-color: #cfdfff
}

.button:hover {
  color: #fff;
  text-decoration: none;
  transform: none;
  background: #1c43a0;
  border-color: #1c43a0
}

.menu-toggle {
  display: none;
  border: 1px solid var(--line);
  background: transparent;
  padding: 8px 10px;
  font-size: 13px;
  color: #fffefa;
  border-color: #6c7a85;
  border-radius: 4px;
  min-height: 44px
}

.eyebrow {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .045em;
  color: var(--terracotta)
}

.home-hero {
  border-bottom: 1px solid var(--line);
  border-color: var(--border);
  padding: clamp(52px,7vw,88px) 0 clamp(48px,6vw,72px)
}

.hero-grid {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(48px,5vw,64px)
}

.hero-copy h1 {
  font: 500 clamp(44px,6vw,78px)/.99 var(--serif);
  letter-spacing: -.055em;
  margin: 15px 0 22px;
  font-size: clamp(48px,6vw,76px);
  line-height: 1;
  max-width: 12ch
}

.hero-copy .lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.58;
  max-width: 62ch;
  color: #3f4b56
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 26px
}

.role-line {
  font-size: 13px;
  margin: 22px 0 0;
  color: var(--text-secondary)
}

.hero-art {
  position: relative;
  width: min(100%,540px);
  justify-self: end;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none
}

.hero-art img {
  height: auto;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 2px
}

.art-caption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 2px 0;
  font-size: 13px;
  color: var(--text-secondary)
}

.art-caption a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px
}

.section-head h2 {
  font: 500 clamp(32px,4vw,49px)/1.05 var(--serif);
  letter-spacing: -.04em;
  margin: 8px 0 0;
  line-height: 1.08;
  font-size: clamp(34px,3.7vw,48px);
  max-width: 23ch
}

.page-head h1 {
  font: 500 clamp(32px,4vw,49px)/1.05 var(--serif);
  letter-spacing: -.04em;
  margin: 8px 0 0;
  line-height: 1.08;
  font-size: clamp(34px,3.7vw,48px);
  max-width: 23ch
}

.section-head p {
  color: var(--text-secondary);
  font-size: 17px;
  margin: 8px 0 0;
  max-width: 64ch;
  line-height: 1.6
}

.text-link {
  color: var(--blue);
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  font-size: 13px;
  white-space: nowrap
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(22px,3vw,44px)
}

.workflow-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 0 22px;
  min-height: 0;
  transition: none;
  border-top: 1px solid var(--border)
}

.article-card {
  display: grid;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 22px 0;
  min-height: 0;
  transition: transform .18s ease,border-color .18s ease;
  grid-template-columns: 132px minmax(0,1fr);
  column-gap: 24px;
  border-top: 1px solid var(--border)
}

.plain-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: var(--radius-card);
  padding: 0;
  min-height: 0;
  max-width: 70ch
}

.card-kicker {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  color: var(--terracotta);
  letter-spacing: .045em
}

.workflow-card h3 {
  font: 600 22px/1.15 var(--serif);
  letter-spacing: -.025em;
  margin: 13px 0 9px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 500
}

.article-card h3 {
  font: 600 clamp(20px,2.1vw,25px)/1.18 var(--sans);
  letter-spacing: -.025em;
  margin: 0;
  font-size: clamp(24px,2vw,28px);
  line-height: 1.15;
  grid-column: 2;
  grid-row: 1
}

.plain-card h3 {
  font: 600 22px/1.15 var(--serif);
  letter-spacing: -.025em;
  margin: 13px 0 9px;
  font-size: clamp(24px,2vw,28px);
  line-height: 1.15
}

.workflow-card p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary)
}

.article-card p {
  margin: 8px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  grid-column: 2;
  max-width: 64ch
}

.plain-card p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary)
}

.card-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  flex-wrap: wrap
}

.card-bottom button {
  background: none;
  border: 0;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center
}

.card-bottom a {
  background: none;
  border: 0;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center
}

.card-bottom span {
  font-size: 12px;
  color: var(--muted)
}

.proof-grid {
  display: grid;
  gap: 64px;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr)
}

.proof-item h3 {
  font: 500 24px/1.15 var(--serif);
  margin: 8px 0;
  font-size: 26px;
  line-height: 1.15;
  margin-top: 10px;
  margin-bottom: 8px;
  margin-left: 0;
  margin-right: 0
}

.proof-item p {
  color: var(--muted);
  margin: 0 0 15px;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.6;
  margin-left: 0;
  margin-right: 0
}

.proof-item a {
  font-weight: 700;
  color: var(--blue);
  font-size: 13px;
  text-underline-offset: 4px
}

.callout {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  position: relative;
  border-radius: 0;
  border-left: 3px solid var(--terracotta);
  gap: 40px;
  background: transparent;
  border: 0;
  padding: 24px 0
}

.callout h2 {
  font: 500 31px/1.05 var(--serif);
  margin: 0 0 8px;
  font-size: clamp(30px,3vw,38px)
}

.callout p {
  color: #43554f;
  font-size: 14px;
  margin: 0;
  max-width: 650px
}

.home-about {
  display: grid;
  align-items: start;
  max-width: 920px;
  grid-template-columns: .8fr 1.2fr;
  gap: 64px
}

.home-about h2 {
  font: 500 36px/1.08 var(--serif);
  margin: 9px 0
}

.home-about p {
  max-width: 670px;
  color: #40505d;
  margin: 0 0 16px;
  font-size: 18px
}

.page-head {
  border-bottom: 1px solid var(--line);
  border-color: var(--border);
  padding: clamp(46px,6vw,72px) 0 32px
}

.page-head .intro {
  max-width: 64ch;
  color: var(--text-secondary);
  font-size: 17px;
  margin: 14px 0 0;
  line-height: 1.6
}

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 17px
}

.search-wrap {
  position: relative;
  flex: 1 1 330px
}

.search-wrap input {
  width: 100%;
  height: 48px;
  border: 1px solid #aeb5b5;
  background: var(--surface);
  padding: 0 16px 0 42px;
  color: var(--ink);
  border-color: var(--border);
  border-radius: var(--radius-card);
  font-size: 16px
}

.search-wrap input:focus {
  outline: 3px solid #8ab1bd;
  outline-offset: 2px;
  border-color: var(--blue)
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 12px;
  color: var(--muted);
  font-size: 17px
}

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0 18px
}

.filter-btn {
  border: 1px solid #aeb5b5;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  border-color: var(--border);
  padding: 9px 14px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-control)
}

.filter-btn[aria-pressed="true"] {
  color: white;
  background: var(--accent);
  border-color: var(--accent)
}

.filter-btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px
}

.menu-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px
}

.button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px
}

.card-bottom button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px
}

.result-meta {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 15px
}

.article-title {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px
}

.article-title:hover {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px
}

.article-title:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  outline-color: var(--terracotta)
}

.article-card .article-meta {
  color: var(--muted);
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1px;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  font-size: 14px
}

.article-card .group-tag {
  border: 1px solid #c7d2d0;
  background: #edf1ed;
  color: #395d57;
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 12px;
  display: none
}

.article-card .access-note {
  color: #56636b;
  margin: 8px 0 0;
  font-size: 14px
}

.article-card .card-bottom {
  border-top: 1px solid #e4e3dc;
  margin-top: auto;
  padding-top: 18px;
  grid-column: 2;
  border: 0;
  margin: 2px 0 0;
  padding: 0;
  justify-content: flex-start
}

.empty-state {
  padding: 38px 20px;
  text-align: center;
  border: 1px dashed #b7bdb9;
  color: var(--muted);
  background: var(--surface)
}

.empty-state h3 {
  font: 500 23px var(--serif);
  color: var(--ink);
  margin: 0 0 4px
}

.load-more {
  display: flex;
  justify-content: center;
  margin-top: 24px
}

.workflow-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(24px,2vw,32px)
}

.workflow-card.compact {
  min-height: 210px
}

.workflow-card .tools-line {
  color: #60706f;
  margin-top: 3px;
  font-size: 13px
}

.workflow-detail {
  padding: 36px 0 70px
}

.back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--blue);
  text-underline-offset: 4px;
  margin-bottom: 20px
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;
  gap: 44px;
  align-items: start
}

.detail-main h1 {
  font: 500 clamp(38px,5vw,59px)/1.02 var(--serif);
  letter-spacing: -.045em;
  margin: 8px 0 15px
}

.detail-main .dek {
  font-size: 18px;
  color: #4b5c66;
  max-width: 750px
}

.detail-main h2 {
  font: 500 29px/1.12 var(--serif);
  margin: 34px 0 11px
}

.detail-main li {
  padding: 0 0 9px 5px
}

.detail-main ul {
  padding-left: 22px
}

.detail-main ol {
  padding-left: 22px
}

.detail-aside {
  position: sticky;
  top: 100px;
  border-radius: 0;
  border-color: var(--border);
  border-top-color: var(--terracotta);
  padding: 22px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border)
}

.detail-aside h2 {
  font: 600 16px var(--sans);
  margin: 0 0 12px
}

.detail-aside p {
  color: var(--muted);
  font-size: 15px
}

.detail-aside li {
  color: var(--muted);
  font-size: 15px
}

.detail-aside ul {
  padding-left: 18px
}

.article-reading-note {
  border-left: 3px solid var(--blue);
  background: #e8eef0;
  padding: 16px 18px;
  margin: 24px 0;
  color: #344a58;
  font-size: 14px
}

.article-reading-note strong {
  display: block;
  color: var(--ink);
  margin-bottom: 3px
}

.article-detail .article-preview {
  font: 20px/1.6 var(--serif);
  color: #374958;
  border-left: 2px solid var(--gold);
  padding-left: 18px;
  margin: 23px 0 28px
}

.about-layout {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 46px
}

.about-note {
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: 500 25px/1.25 var(--serif);
  border-radius: var(--radius-card);
  border-color: var(--border)
}

.about-copy h2 {
  font: 500 28px var(--serif);
  margin: 0 0 9px
}

.about-copy p {
  color: #43525e
}

.focus-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 22px 0
}

.focus-list span {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 13px;
  margin: 28px 0
}

.service-grid .plain-card {
  min-height: 175px
}

.resource-links {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px
}

.resource-links a {
  display: block;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 24px 0;
  border-radius: var(--radius-card);
  border-color: var(--border)
}

.resource-links a:hover {
  border-color: var(--blue);
  background: var(--blue-soft)
}

.resource-links strong {
  display: block;
  font: 600 19px var(--serif)
}

.resource-links span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 23px;
  border-bottom: 1px solid var(--line);
  border-color: #34476b;
  gap: 60px
}

.footer-summary {
  max-width: 390px
}

.footer-summary strong {
  font: 600 19px var(--serif)
}

.footer-summary p {
  color: #dce6fa;
  font-size: 13px;
  margin: 6px 0
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  max-width: 620px;
  gap: 16px 24px
}

.footer-bottom {
  padding-top: 12px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #dce6fa
}

.new-pill {
  display: inline-block;
  color: #465b56;
  border: 1px solid #c5d3cd;
  padding: 3px 7px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em
}

.notice {
  font-size: 14px;
  color: var(--muted);
  margin: 14px 0 0
}

.workflow-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px
}

.workflow-art {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 8px
}

.workflow-art img {
  width: 100%;
  height: auto
}

.source-note {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px
}

.button.secondary:hover {
  border-color: var(--accent);
  background: #e8efff;
  color: #1c43a0
}

.section {
  border-color: var(--border);
  padding: 78px 0;
  border-bottom: 0
}

.section-workflows {
  background: var(--surface);
  padding: 76px 0 84px
}

.article-list {
  gap: 0;
  display: grid;
  grid-template-columns: 1fr
}

.workflow-card:hover {
  transform: none;
  border-color: var(--accent);
  box-shadow: none
}

.article-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: none
}

.proof-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-card);
  border-top: 2px solid var(--accent);
  background: transparent;
  border: 0;
  padding: 0
}

.proof-item .card-kicker {
  margin-top: 22px;
  margin-left: 0;
  margin-right: 0
}

.proof-item>a:not(.video-thumb) {
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0
}

.video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  background: #202a36;
  border-radius: var(--radius-media);
  aspect-ratio: 4/3;
  border: 0
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: none
}

.play-icon {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 62px;
  height: 62px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding-left: 4px;
  color: white;
  font-size: 22px;
  line-height: 1;
  background: rgba(20,33,59,.88)
}

.callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  background: var(--accent);
  display: none
}

.search-wrap input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  outline-color: var(--terracotta)
}

a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
  outline-color: var(--terracotta)
}

.section-paths {
  padding-top: clamp(48px,6vw,76px);
  padding-bottom: clamp(48px,6vw,76px);
  background: transparent;
  padding: 20px 0 68px
}

.path-card {
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  text-decoration: none;
  min-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: background .15s ease;
  padding: 26px 0 0;
  border-right: 0
}

.path-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  outline-color: var(--terracotta)
}

.path-card .card-kicker {
  color: var(--terracotta);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none
}

.path-card h3 {
  font: 500 25px/1.15 var(--serif);
  letter-spacing: -.02em;
  margin: 12px 0 8px;
  font-size: 28px;
  max-width: 19ch
}

.path-card p {
  margin: 0 0 20px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 18px;
  font-size: 16px
}

.workflow-preview {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  width: min(680px,calc(100% - 32px));
  max-width: none;
  max-height: min(84vh,900px);
  overflow: auto;
  padding: clamp(24px,4vw,38px);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 18px 60px rgba(32,42,54,.22)
}

.workflow-preview::backdrop {
  background: rgba(25,34,43,.58)
}

.workflow-preview[open] {
  display: block
}

.workflow-preview .preview-close {
  float: right;
  margin: -4px 0 12px 18px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer
}

.workflow-preview h2 {
  clear: both;
  margin: 8px 0 10px;
  font: 500 clamp(30px,4vw,42px)/1.08 var(--serif);
  letter-spacing: -.03em
}

.workflow-preview .preview-summary {
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.55
}

.workflow-preview section {
  margin-top: 23px;
  padding-top: 17px;
  border-top: 1px solid var(--border)
}

.workflow-preview h3 {
  margin: 0 0 8px;
  font: 650 16px/1.3 var(--sans);
  color: var(--text-primary)
}

.workflow-preview p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6
}

.workflow-preview li {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  padding: 0 0 7px 3px
}

.workflow-preview ol {
  padding-left: 22px;
  margin: 8px 0 0
}

.workflow-preview .preview-tools {
  margin: 22px 0
}

.workflow-preview .button {
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer
}

.workflow-preview :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px
}

.selected-experience {
  border-bottom: 1px solid var(--border);
  background: var(--page-bg);
  padding: 52px 0 64px
}

.experience-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px
}

.experience-heading h2 {
  margin: 0;
  font: 500 clamp(25px,2.7vw,32px)/1.15 var(--serif);
  letter-spacing: -.025em;
  color: var(--text-primary)
}

.experience-heading p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px
}

.experience-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1.1fr .55fr
}

.experience-group {
  padding-top: 13px;
  border-top: 1px solid var(--border);
  border-top-color: var(--accent)
}

.experience-group h3 {
  margin: 0 0 9px;
  font: 750 12px/1.35 var(--sans);
  color: var(--terracotta);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0
}

.experience-group ul {
  display: grid;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0
}

.experience-group li {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.65;
  display: block
}

.experience-group li+li::before {
  content: none;
  margin-right: 8px;
  color: #9c492f
}

.breadcrumbs {
  margin: 0 0 22px
}

.breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--text-secondary)
}

.breadcrumbs li+li::before {
  content: "/";
  color: #899098;
  margin-right: 10px
}

.breadcrumbs a {
  color: var(--blue);
  text-underline-offset: 3px
}

.work-page-head {
  padding-top: 36px
}

.work-page-head h1 {
  font-size: clamp(42px,5vw,62px);
  max-width: 17ch
}

.work-page-head .intro {
  max-width: 68ch
}

.work-page-content {
  padding-top: 38px
}

.work-page-layout {
  display: grid;
  grid-template-columns: minmax(180px,220px) minmax(0,760px);
  gap: clamp(48px,7vw,100px);
  align-items: start
}

.service-sidebar {
  position: sticky;
  top: 100px;
  padding-top: 6px
}

.sidebar-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary)
}

.service-sidebar nav {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border)
}

.service-sidebar nav a {
  margin-left: -1px;
  padding: 10px 12px 10px 16px;
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 15px;
  text-decoration: none;
  line-height: 1.35
}

.service-sidebar nav a:hover {
  border-left-color: var(--accent);
  color: var(--text-primary)
}

.service-sidebar nav a:focus-visible {
  border-left-color: var(--accent);
  color: var(--text-primary)
}

.service-content {
  min-width: 0;
  max-width: 760px
}

.service-section {
  scroll-margin-top: 100px;
  padding: 0 0 36px;
  margin: 0 0 34px;
  border-bottom: 1px solid var(--border)
}

.service-audience {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9c492f
}

.service-section h2 {
  margin: 0 0 12px;
  font: 500 clamp(30px,3vw,36px)/1.12 var(--serif);
  letter-spacing: -.03em;
  color: var(--text-primary)
}

.service-section p {
  max-width: 68ch;
  margin: 0;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.65
}

.service-details {
  margin-top: 18px;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--border);
  padding: 8px 0 8px 22px
}

.service-details summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary)
}

.service-details summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px
}

.service-details ol {
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6
}

.service-details li {
  padding: 2px 0
}

.home-hero>.wrap {
  width: min(1200px,calc(100% - 48px));
  margin-inline: auto
}

.home-hero .hero-grid {
  min-width: 0
}

.home-hero .hero-copy {
  min-width: 0
}

.home-hero .hero-art {
  min-width: 0
}

.home-hero .hero-copy .lead {
  max-width: min(62ch,100%)
}

.service-enquiry {
  scroll-margin-top: 100px;
  margin-top: 44px;
  border-top-color: var(--terracotta);
  background: transparent;
  border: 0;
  border-top: 2px solid var(--terracotta);
  padding: 32px 0
}

.service-enquiry h2 {
  margin: 0 0 9px;
  font: 500 clamp(30px,3vw,36px)/1.12 var(--serif)
}

.service-enquiry-intro {
  max-width: 68ch;
  color: var(--text-secondary);
  font-size: 16px
}

.service-form {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff
}

.service-form iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0
}

.about-photo {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  align-self: start
}

.about-copy .bio-story {
  margin: 18px 0;
  padding: 16px 18px;
  background: var(--surface-muted);
  border-left: 3px solid var(--accent);
  color: var(--text-primary)
}

.hero-actions .role-line {
  align-self: center
}

.tools-line {
  padding-top: 10px;
  border-top: 1px solid var(--border)
}

.personal-hero .hero-copy .lead {
  line-height: 1.65;
  max-width: 51ch;
  font-size: 18px
}

.personal-hero .hero-actions .button {
  padding: 13px 20px;
  border-radius: 6px;
  font-size: 14px
}

.portrait-panel {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 64px 0 0;
  max-width: 340px;
  justify-self: end
}

.portrait-panel img {
  width: 100%;
  height: auto;
  border-color: #c6d5ee;
  border: 0;
  box-shadow: none;
  object-fit: contain;
  aspect-ratio: auto;
  border-radius: 2px
}

.portrait-panel figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 0;
  margin-top: 16px;
  border-top: 1px solid var(--terracotta)
}

.portrait-panel figcaption strong {
  font: 600 21px/1.2 var(--serif);
  font-size: 18px
}

.portrait-panel figcaption span {
  line-height: 1.5;
  color: var(--text-secondary);
  font-size: 14px
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(32px,6vw,80px)
}

.project-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  max-width: 1000px
}

.story-grid h2 {
  font: 500 clamp(34px,4vw,48px)/1.12 var(--serif);
  letter-spacing: -.035em;
  margin: 12px 0 22px
}

.project-panel h2 {
  font: 500 clamp(34px,4vw,48px)/1.12 var(--serif);
  letter-spacing: -.035em;
  margin: 12px 0 0;
  font-size: clamp(40px,5vw,64px)
}

.personal-principle {
  margin: 32px 0 0;
  padding: 24px 0;
  border-top: 2px solid #355f61;
  border-top-color: var(--accent)
}

.personal-principle p {
  font: 500 25px/1.4 var(--serif);
  margin: 0 0 15px
}

.personal-principle cite {
  font: 600 12px/1.5 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent)
}

.story-grid .about-copy p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.75
}

.story-grid .about-copy h2 {
  margin-top: 32px;
  font-size: 28px
}

.project-location {
  color: var(--text-secondary);
  align-self: end;
  max-width: 28ch;
  font-size: 16px
}

.project-intro {
  font: 500 25px/1.35 var(--serif);
  max-width: 55ch;
  margin: 0;
  font-size: 24px
}

.project-details {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 28px;
  margin: 28px 0
}

.project-details dt {
  font-weight: 750;
  margin-bottom: 6px;
  color: var(--terracotta);
  text-transform: none;
  font-size: 15px;
  letter-spacing: 0
}

.project-details dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary)
}

.featured-workflow {
  display: grid;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  grid-template-columns: minmax(0,1.8fr) minmax(240px,.8fr);
  gap: 48px;
  margin: 0 0 48px;
  align-items: center
}

.featured-workflow img {
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 0;
  border-radius: 0
}

.featured-workflow h3 {
  font: 500 30px/1.15 var(--serif);
  margin: 12px 0;
  font-size: clamp(30px,3.4vw,44px);
  line-height: 1.12
}

.featured-workflow p {
  font-size: 16px;
  color: var(--text-secondary)
}

.callout .eyebrow {
  margin-bottom: 12px
}

.primary-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px
}

button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
  outline-color: var(--terracotta)
}

summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
  outline-color: var(--terracotta)
}

.workflow-card h2 {
  margin: 13px 0 9px;
  font: 500 27px/1.2 var(--serif)
}

.article-card h2 {
  margin: 0;
  font: 600 clamp(20px,2.1vw,25px)/1.18 var(--sans);
  grid-column: 2;
  grid-row: 1
}

.service-details h3 {
  font-size: 18px
}

html {
  scroll-behavior: auto
}

.button.secondary {
  border-radius: var(--radius-control);
  transition: background .15s ease,color .15s ease,border-color .15s ease;
  border-color: var(--accent);
  background: transparent;
  color: var(--accent)
}

.heading-accent {
  color: var(--accent)
}

.personal-hero .hero-grid {
  grid-template-columns: minmax(0,1.55fr) minmax(260px,.85fr);
  gap: clamp(32px,5vw,76px);
  align-items: start
}

.personal-hero .hero-copy h1 {
  font-size: clamp(52px,6vw,82px);
  line-height: 1.02;
  letter-spacing: -.055em;
  max-width: 14ch;
  margin: 24px 0 30px
}

.path-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-top: 1px solid var(--border);
  border-bottom: 0;
  gap: 36px
}

.path-card:last-child {
  border-right: 0
}

.path-card:hover {
  transform: none;
  border-color: var(--border);
  background: transparent;
  color: var(--accent)
}

.path-action {
  margin-top: auto;
  color: var(--accent);
  font-weight: 700;
  text-underline-offset: 4px;
  text-decoration: none;
  font-size: 14px
}

.project-section {
  background: var(--surface-muted)
}

.project-details>div {
  border-top: 1px solid var(--border);
  padding: 18px 0
}

.featured-workflow figcaption {
  padding: 6px 0
}

.workflow-card .card-bottom {
  border: 0;
  justify-content: flex-start;
  gap: 20px
}

.section-archive {
  background: var(--surface)
}

.archive-layout {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  gap: 36px
}

.newsletter-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  background: transparent;
  padding: 26px 0 0;
  border: 0;
  border-top: 1px solid var(--border)
}

.newsletter-panel h3 {
  font: 500 30px/1.12 var(--serif);
  font-size: 28px;
  margin: 0
}

.newsletter-panel p {
  font-size: 15px;
  color: var(--text-secondary);
  flex-basis: 100%;
  margin: 0;
  max-width: 65ch
}

.page-content {
  padding: 34px 0 72px
}

.detail-main {
  border-radius: 0;
  max-width: 72ch;
  background: transparent;
  border: 0;
  padding: 0
}

.site-footer {
  color: #dce6fa;
  background: #14213b;
  padding: 44px 0 28px
}

.site-footer a {
  color: #dce6fa
}

.static-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column
}

.static-header {
  background: #14213b;
  color: #fffefa;
  border-color: #2e4166
}

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

.static-header .static-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 72px
}

.static-footer .static-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px
}

.static-brand {
  color: #f8faff;
  text-decoration: none;
  font: 600 20px/1.1 var(--serif)
}

.static-brand span {
  display: block;
  margin-top: 3px;
  color: #c4d1ec;
  font: 500 12px/1.3 var(--sans)
}

.static-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px
}

.static-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px
}

.static-header nav a {
  color: #f8faff;
  font-size: 14px;
  text-decoration: none
}

.static-header nav a[aria-current=page] {
  text-decoration: underline;
  text-underline-offset: 6px
}

.static-main {
  width: min(900px,calc(100% - var(--page-gutter) * 2));
  margin: 0 auto;
  padding: clamp(48px,6vw,76px) 0;
  max-width: 900px
}

.static-main h1 {
  font: 500 clamp(42px,6vw,68px)/1.04 var(--serif);
  letter-spacing: -.045em;
  margin: 8px 0 18px
}

.static-kicker {
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--terracotta)
}

.static-intro {
  max-width: 66ch;
  color: var(--text-secondary);
  font-size: 18px
}

.static-search-label {
  display: block;
  margin-top: 32px;
  font-weight: 700;
  font-size: 14px
}

.static-search {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 8px 0 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font: inherit
}

.static-search:focus {
  outline: 3px solid #8ab1bd;
  outline-offset: 3px
}

.static-entries {
  border-top: 1px solid var(--border)
}

.static-entry {
  display: grid;
  grid-template-columns: 130px minmax(0,1fr);
  gap: 24px;
  padding: 23px 0;
  border-bottom: 1px solid var(--border)
}

.static-entry h2 {
  margin: 0;
  font: 600 clamp(20px,2.5vw,26px)/1.2 var(--sans)
}

.static-entry h2 a {
  color: var(--text-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration: none
}

.static-entry p {
  margin: 8px 0;
  color: var(--text-secondary);
  font-size: 15px
}

.static-entry-meta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 13px
}

.static-pill {
  padding: 2px 6px;
  background: var(--surface-muted);
  font-size: 12px
}

.static-entry-action a {
  color: var(--accent);
  font-weight: 700
}

.static-detail {
  max-width: 820px
}

.static-detail article {
  padding: 28px 0;
  background: transparent;
  border-top: 1px solid var(--border)
}

.static-preview {
  font: 20px/1.6 var(--serif);
  color: var(--text-secondary);
  margin: 24px 0
}

.static-detail article>a:last-child {
  display: inline-flex;
  padding: 12px 18px;
  background: var(--text-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border-radius: var(--radius-control)
}

.static-footer {
  margin-top: auto;
  padding: 30px 0;
  background: #14213b;
  color: #dce6fa
}

.static-footer strong {
  font: 600 20px var(--serif)
}

.static-footer p {
  margin: 5px 0 0;
  font-size: 14px
}

.static-footer a {
  color: #dce6fa;
  font-size: 14px
}

.teaching-video-grid {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: 64px
}

.teaching-video h2 {
  font: 500 clamp(30px,3.5vw,44px)/1.12 var(--serif);
  letter-spacing: -.03em;
  margin: 12px 0 16px
}

.teaching-video p {
  color: var(--text-secondary);
  max-width: 55ch
}

.teaching-video-player {
  overflow: hidden;
  border-radius: var(--radius-media);
  background: #202a36;
  min-width: 0;
  box-shadow: none;
  border: 0;
  aspect-ratio: 4/3
}

.teaching-video-preview {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #14213b;
  color: white;
  cursor: pointer
}

.teaching-video-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.teaching-video-play-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background: #14213b;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  border-radius: var(--radius-control)
}

.teaching-video-preview:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: -4px
}

.teaching-video-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0
}

.personal-hero {
  background: var(--page-bg);
  border-bottom: 0;
  padding: 88px 0 78px
}

.personal-hero .heading-accent {
  color: var(--accent)
}

.teaching-video {
  border-block-color: #d4def2;
  background: var(--surface);
  border: 0
}

.workflow-card h2 a {
  text-decoration: none
}

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

.article-card h2 a {
  text-decoration: none
}

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

.workflow-card h2 a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px
}

.workflow-card h3 a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px
}

.article-card h2 a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px
}

.article-card h3 a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px
}

.workflow-card .card-bottom a {
  color: var(--accent);
  font-weight: 700
}

.workflow-card .card-bottom button {
  color: var(--muted);
  font-weight: 500
}

.project-panel>div:first-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px
}

.project-panel .eyebrow {
  grid-column: 1 / -1
}

.proof-item:nth-child(2) {
  margin-top: 76px
}

.section-final {
  background: #17233e;
  color: #fff;
  padding: 64px 0
}

.section-final .callout h2 {
  font-size: clamp(38px,4.5vw,60px)
}

.section-final .callout p {
  font-size: 17px;
  color: #d2d9e5
}

.section-final .eyebrow {
  color: #e1b39d
}

.section-final .button {
  background: #fff;
  color: #17233e;
  border-color: #fff
}

input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px
}

.site-header a:focus-visible {
  outline-color: #e1b39d
}

.site-header button:focus-visible {
  outline-color: #e1b39d
}

.site-footer a:focus-visible {
  outline-color: #e1b39d
}

.section-final a:focus-visible {
  outline-color: #e1b39d
}

.proof-item::before {
  display: none
}

@media(max-width:900px) {

.primary-nav {
  gap: 13px
}

.hero-grid {
  gap: 30px;
  grid-template-columns: 1fr 1fr
}

.article-list,.card-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}

.detail-grid {
  grid-template-columns: minmax(0,1fr) 260px;
  gap: 28px
}
}

@media(max-width:700px) {

.wrap {
  width: min(100% - 30px,var(--max))
}

.header-inner {
  min-height: 66px
}

.brand {
  min-width: auto
}

.brand-role {
  display: none
}

.menu-toggle {
  display: block
}

.primary-nav {
  display: none;
  position: absolute;
  top: 65px;
  left: 0;
  right: 0;
  padding: 13px 20px 18px;
  border-bottom: 1px solid var(--line);
  flex-direction: column;
  align-items: stretch;
  gap: 0
}

.primary-nav.open {
  display: flex
}

.primary-nav a {
  padding: 10px 3px;
  border-bottom: 1px solid #dedfd8
}

.primary-nav .nav-cta {
  margin-top: 10px;
  justify-content: center;
  padding: 12px
}

.home-hero {
  padding: 37px 0 36px
}

.hero-grid {
  grid-template-columns: 1fr;
  gap: 27px
}

.hero-copy h1 {
  font-size: clamp(43px,13vw,64px);
  max-width: 560px
}

.hero-copy .lead {
  font-size: 17px
}

.hero-art {
  max-width: 600px
}

.section {
  padding: 42px 0
}

.section-head {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px
}

.card-grid,.article-list,.workflow-list,.proof-grid,.about-layout,.service-grid,.resource-links {
  grid-template-columns: 1fr
}

.workflow-card,.article-card,.plain-card {
  min-height: 0
}

.home-about {
  grid-template-columns: 1fr;
  gap: 17px
}

.callout {
  grid-template-columns: 1fr;
  padding: 22px
}

.callout h2 {
  font-size: 28px
}

.callout .button {
  justify-self: start
}

.page-head {
  padding: 40px 0 28px
}

.page-head .intro {
  font-size: 16px
}

.detail-grid {
  grid-template-columns: 1fr
}

.detail-aside {
  position: static;
  order: -1
}

.detail-main h1 {
  font-size: 42px
}

.detail-main h2 {
  font-size: 27px
}

.footer-top,.footer-bottom {
  flex-direction: column
}

.footer-links {
  gap: 12px 16px
}

.focus-list {
  grid-template-columns: 1fr
}

.toolbar {
  align-items: stretch
}

.search-wrap {
  flex-basis: 100%
}
}

@media(prefers-reduced-motion:reduce) {

*,*::before,*::after {
  scroll-behavior: auto!important;
  transition: none!important
}
}

@media(min-width:901px) and (max-width:1200px) {

:root {
  --page-gutter: 24px

}

.hero-grid {
  grid-template-columns: minmax(0,1fr) minmax(420px,.9fr);
  gap: 32px
}

.hero-art {
  width: 100%
}
}

@media(min-width:656px) and (max-width:900px) {

:root {
  --page-gutter: clamp(28px,5vw,44px);
  --space-section: 72px

}

.hero-grid {
  grid-template-columns: minmax(280px,1.05fr) minmax(280px,.95fr);
  gap: 24px
}

.hero-copy h1 {
  font-size: clamp(44px,6vw,58px)
}

.hero-art {
  width: 100%
}

.card-grid,.article-list {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
}

@media(max-width:655px) {

:root {
  --page-gutter: 24px;
  --space-section: 58px;
  --space-card: 24px

}

.wrap {
  width: calc(100% - 48px)
}

.home-hero {
  padding: 40px 0 44px
}

.hero-grid {
  grid-template-columns: minmax(0,1fr);
  gap: 30px
}

.hero-copy h1 {
  font-size: clamp(44px,12vw,52px);
  max-width: 12ch
}

.hero-copy .lead {
  font-size: 17px
}

.hero-art {
  justify-self: start;
  width: 100%;
  max-width: 540px
}

.section-head h2,.page-head h1 {
  font-size: clamp(36px,9vw,44px)
}

.card-grid,.article-list,.workflow-list,.proof-grid,.about-layout,.service-grid,.resource-links {
  grid-template-columns: minmax(0,1fr)
}

.workflow-card,.article-card,.plain-card {
  padding: 24px
}

.section-head {
  align-items: flex-start;
  flex-direction: column
}

.callout {
  grid-template-columns: minmax(0,1fr);
  padding: 28px
}

.site-footer {
  padding: 36px 0 24px
}
}

@media(prefers-reduced-motion:reduce) {

html {
  scroll-behavior: auto
}

*,*::before,*::after {
  transition: none!important;
  animation: none!important
}
}

@media(max-width:700px) {

.path-card {
  min-height: 0;
  padding: 24px
}

.section-paths {
  padding-top: 48px;
  padding-bottom: 48px
}

.workflow-preview {
  max-height: 88vh;
  padding: 24px
}
}

@media(prefers-reduced-motion:reduce) {

.path-card,.path-card:hover {
  transform: none!important;
  transition: none!important
}
}

@media(max-width:900px) {

.selected-experience {
  padding: 26px 0 30px
}

.experience-grid {
  gap: 22px 28px
}

.experience-heading {
  align-items: flex-start;
  flex-direction: column;
  gap: 5px
}
}

@media(max-width:600px) {

.experience-grid {
  gap: 16px
}

.experience-heading {
  margin-bottom: 12px
}
}

@media(max-width:900px) {

.work-page-layout {
  grid-template-columns: minmax(0,1fr);
  gap: 28px
}

.service-sidebar {
  position: static
}

.service-sidebar nav {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 16px;
  border-left: 0;
  border-top: 1px solid var(--border)
}

.service-sidebar nav a {
  margin: 0;
  padding: 11px 4px;
  border: 0;
  border-bottom: 1px solid var(--border)
}

.service-sidebar nav a:hover,.service-sidebar nav a:focus-visible {
  border-left: 0;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px
}

.work-page-content {
  padding-top: 26px
}
}

@media(max-width:600px) {

.work-page-head {
  padding-top: 30px
}

.work-page-head h1 {
  font-size: clamp(40px,10vw,48px)
}

.service-sidebar nav {
  grid-template-columns: minmax(0,1fr)
}

.service-section {
  padding-bottom: 28px;
  margin-bottom: 26px
}

.service-enquiry {
  grid-template-columns: minmax(0,1fr)
}
}

@media(max-width:700px) {

.service-enquiry {
  padding: 22px
}

.service-form iframe {
  height: 760px
}

.about-photo {
  max-width: 100%;
  aspect-ratio: 16/10
}
}

@media(max-width:900px) {

.personal-hero .hero-grid {
  gap: 28px
}

.personal-hero .hero-copy h1 {
  font-size: clamp(42px,5.8vw,56px)
}

.experience-grid {
  grid-template-columns: 1fr 1fr
}

.story-grid,.project-panel {
  gap: 32px
}
}

@media(max-width:700px) {

.personal-hero .hero-grid,.story-grid,.project-panel,.featured-workflow {
  grid-template-columns: minmax(0,1fr)
}

.personal-hero .hero-copy h1 {
  font-size: clamp(42px,11vw,56px)
}

.personal-hero .hero-copy .lead {
  font-size: 17px
}

.project-panel {
  padding: 26px;
  gap: 12px
}

.featured-workflow {
  padding: 20px;
  gap: 16px
}

.experience-heading {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px
}

.personal-principle {
  margin-top: 20px
}

.text-link {
  white-space: normal
}
}

@media(max-width:600px) {

.experience-grid {
  grid-template-columns: minmax(0,1fr)
}

.portrait-panel {
  max-width: 360px
}

.selected-experience {
  padding: 28px 0
}
}

@media(min-width:701px) {

.primary-nav {
  gap: 16px
}

.primary-nav a {
  font-size: 13px
}
}

@media(min-width:701px) and (max-width:1050px) {

.header-inner {
  flex-wrap: wrap;
  padding-block: 14px
}

.primary-nav {
  flex-wrap: wrap;
  gap: 12px 18px
}

.service-section,.service-enquiry {
  scroll-margin-top: 150px
}
}

@media(max-width:900px) {

.archive-layout {
  grid-template-columns: 1fr
}

.newsletter-panel {
  max-width: 640px
}

.personal-hero .hero-grid {
  grid-template-columns: minmax(0,1fr) minmax(230px,.65fr)
}

.path-card {
  padding: 22px
}

.article-card {
  grid-template-columns: 110px minmax(0,1fr);
  column-gap: 18px
}
}

@media(max-width:700px) {

.menu-toggle {
  color: #fffefa;
  border-color: #73818b
}

.personal-hero .hero-grid,.featured-workflow,.project-panel {
  grid-template-columns: 1fr
}

.portrait-panel {
  justify-self: start;
  max-width: 360px
}

.path-grid {
  grid-template-columns: 1fr
}

.path-card {
  border-right: 0;
  border-bottom: 1px solid var(--border)
}

.path-card:last-child {
  border-bottom: 0
}

.article-card {
  display: block;
  padding: 20px 0
}

.article-card h2,.article-card h3 {
  margin-top: 7px
}

.article-card .card-bottom {
  display: flex;
  margin-top: 8px
}

.section-head h2,.page-head h1 {
  font-size: clamp(34px,10vw,45px)
}

.static-header .static-wrap,.static-footer .static-wrap {
  align-items: flex-start;
  flex-direction: column;
  padding: 18px 0
}

.static-header nav,.static-footer nav {
  gap: 10px 16px
}

.static-entry {
  grid-template-columns: 1fr;
  gap: 7px
}

.static-main {
  padding-top: 40px
}
}

@media(prefers-reduced-motion:reduce) {

*,*::before,*::after {
  scroll-behavior: auto!important;
  transition: none!important;
  animation: none!important
}
}

@media(max-width:700px) {

.teaching-video-grid {
  grid-template-columns: minmax(0,1fr)
}
}

@media(max-width:700px) {

.primary-nav {
  background: #14213b;
  border-color: #34476b
}

.primary-nav a {
  border-color: #34476b
}
}

@media(max-width:1050px) {

.header-inner {
  flex-wrap: wrap;
  padding-block: 18px;
  gap: 18px
}

.primary-nav {
  flex-wrap: wrap
}

.personal-hero .hero-grid {
  grid-template-columns: minmax(0,1.2fr) minmax(230px,.8fr)
}

.personal-hero .hero-copy h1 {
  font-size: clamp(48px,6.4vw,70px)
}

.featured-workflow {
  gap: 28px
}

.section-head {
  align-items: start
}

.text-link {
  white-space: normal
}
}

@media(max-width:700px) {

.header-inner {
  min-height: 76px;
  flex-wrap: nowrap;
  padding-block: 12px
}

.primary-nav {
  top: 75px;
  background: #17233e
}

.personal-hero {
  padding: 48px 0 54px
}

.personal-hero .hero-grid {
  grid-template-columns: 1fr;
  gap: 28px
}

.personal-hero .hero-copy h1 {
  font-size: clamp(42px,11.5vw,60px);
  max-width: 14ch;
  margin: 20px 0 24px
}

.portrait-panel {
  max-width: 300px;
  margin: 12px 0 0;
  justify-self: end
}

.section {
  padding: 48px 0
}

.section-paths {
  padding-top: 8px
}

.path-grid {
  gap: 0
}

.path-card {
  padding: 24px 0
}

.featured-workflow {
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 0;
  margin-bottom: 36px
}

.card-grid {
  grid-template-columns: 1fr
}

.project-panel {
  padding: 0;
  gap: 24px
}

.project-panel>div:first-child {
  display: block
}

.project-panel h2 {
  font-size: 42px
}

.project-details {
  grid-template-columns: 1fr;
  gap: 0;
  margin: 20px 0
}

.project-details>div {
  padding: 18px 0
}

.project-location {
  max-width: none
}

.teaching-video-grid,.home-about,.proof-grid {
  grid-template-columns: 1fr;
  gap: 28px
}

.proof-item:nth-child(2) {
  margin-top: 20px
}

.video-thumb {
  max-width: 480px
}

.newsletter-panel {
  max-width: none;
  display: block
}

.newsletter-panel h3,.newsletter-panel p {
  margin: 12px 0
}

.detail-aside {
  order: 0
}

.footer-top {
  gap: 28px
}

.footer-links {
  gap: 16px 22px
}

.section-final .callout {
  padding: 0
}

.service-enquiry {
  padding: 28px 0
}

.section-head h2 {
  font-size: 36px
}

.text-link {
  font-size: 14px
}

.experience-grid {
  gap: 24px
}

.static-main h1 {
  font-size: 42px
}
}

@media(prefers-reduced-motion:reduce) {

*,*::before,*::after {
  scroll-behavior: auto!important;
  transition: none!important;
  animation: none!important
}
}