/* Timbuktu Consulting — landing page styles.
   Order matters: base rules, then the page (body[data-concept=dune]) rules block by block, then the shared layers;
   later rules win at equal specificity. Colours are oklch(), sides are logical, hovers wait for a fine pointer,
   and anything that moves waits for a no-preference motion setting.

   Outfit: one variable file for every weight. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('assets/outfit-0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Base: tokens, element defaults and the shared section frame. */
:root {
  --paper: oklch(96.5% 0.0114 84.58);
  --ink: oklch(26.64% 0.041 307.8);
  --muted: oklch(48.45% 0.0214 323.09);
  --sand: oklch(84.15% 0.0624 82.98);
  --line: oklch(80.29% 0.0306 80.63);
  --accent: oklch(48.72% 0.0693 72);
  --gutter: clamp(24px,5vw,80px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-block-start: 125px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 200 18px/1.65 Outfit,sans-serif;
  -webkit-font-smoothing: antialiased;
  scrollbar-color: oklch(64.98% 0.0568 76.85) var(--paper);
}
h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
button,
input,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
  text-underline-offset: 5px;
}
img {
  display: block;
  max-inline-size: 100%;
}
svg {
  inline-size: 22px;
  block-size: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
::selection {
  background: var(--sand);
  color: var(--ink);
}
:focus-visible {
  outline: 3px solid oklch(51.41% 0.124 42.95);
  outline-offset: 5px;
}
.skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: 20px;
  z-index: 90;
  padding-block: 12px;
  padding-inline: 20px;
  background: var(--ink);
  color: oklch(100% 0 none);
}
.skip-link:focus {
  inset-block-start: 10px;
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding-block: 25px;
  padding-inline: var(--gutter);
  background: var(--paper);
  border-block-end: 1px solid var(--line);
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
}
.wordmark {
  inline-size: 178px;
  flex: none;
}
.wordmark img {
  inline-size: 100%;
  block-size: auto;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(17px,2vw,32px);
  font-size: 15px;
  font-weight: 300;
}
.site-nav a {
  text-decoration: none;
  padding-block: 8px;
  padding-inline: 0;
}
.site-nav a:last-child {
  border-block-end: 1px solid var(--ink);
}
.menu-toggle {
  display: none;
  border: 0;
  background: none;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
  padding-inline: 0;
  color: var(--ink);
  font-size: 14px;
}
.landing-hero {
  position: relative;
  padding-block: 65px 80px;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 30px 70px;
  min-block-size: 810px;
  align-items: start;
}
.hero-content {
  grid-column: 1;
  grid-row: 1;
  padding-block-start: 15px;
}
.hero-discipline {
  font-weight: 200;
  font-size: 20px;
  line-height: 1.35;
  max-inline-size: 350px;
  margin-block-end: 35px;
}
.landing-hero h1 {
  font-size: clamp(38px,3.8vw,61px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.03em;
}
.hero-visual {
  grid-column: 2;
  grid-row: 1/3;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 625px;
  overflow: clip;
}
.hero-visual img {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 625px;
  object-fit: cover;
  object-position: center;
  animation: desert-enter 1.2s cubic-bezier(.16,1,.3,1) both;
}
.hero-intro {
  grid-column: 1;
  grid-row: 2;
  font-size: 17px;
  line-height: 1.7;
  max-inline-size: 650px;
  color: var(--muted);
  padding-block-start: 10px;
}
.content-section {
  padding-block: 100px;
  padding-inline: var(--gutter);
  border-block-start: 1px solid var(--line);
}
.content-section h2 {
  font-size: clamp(35px,4.3vw,64px);
}
.content-section h3 {
  font-size: 25px;
  letter-spacing: -.02em;
  font-weight: 400;
}
.section-intro {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  margin-block-end: 50px;
  align-items: start;
}
.section-body {
  max-inline-size: 900px;
}
.section-body p+p {
  margin-block-start: 24px;
}
.section-body p {
  line-height: 1.75;
}
.content-section ul {
  padding-inline-start: 20px;
  margin-block: 22px;
  margin-inline: 0;
  line-height: 1.75;
}
.content-section li+li {
  margin-block-start: 12px;
}
#why {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 70px;
}
#why .section-intro {
  display: block;
  margin: 0;
}
#what {
  background: var(--sand);
}
figcaption {
  font-size: 14px;
  line-height: 1.5;
  margin-block-start: 16px;
}
figcaption strong {
  font-weight: 400;
}
figcaption span {
  display: block;
  color: var(--muted);
  margin-block-start: 3px;
}
.career-list {
  padding: 0!important;
  margin-block: 65px 0 !important;
  margin-inline: 0 !important;
  list-style: none;
}
.career-list li {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 55px;
  border-block-start: 1px solid var(--line);
  padding-block: 28px;
  padding-inline: 0;
  margin: 0!important;
  font-size: 17px;
  line-height: 1.7;
  align-items: center;
}
.career-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 65px;
}
.career-logo img {
  max-inline-size: 130px;
  max-block-size: 65px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.career-list li:last-child {
  border-block-end: 1px solid var(--line);
}
#clients {
  background: oklch(99.42% 0.0069 88.64);
}
.client-logos {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.client-logo {
  block-size: 74px;
  display: grid;
  place-items: center;
}
.client-logo img {
  max-inline-size: 145px;
  max-block-size: 74px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
#process {
  background: oklch(91.53% 0.0207 81.78);
}
.workshop-heading {
  margin-block-start: 60px!important;
  margin-block-end: 30px!important;
  font-size: 30px!important;
}
.workshop-list {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  padding: 0;
  list-style: none;
  gap: 0 36px;
  margin-block: 0 35px;
  margin-inline: 0;
}
.workshop-list li {
  margin: 0!important;
  padding-block: 27px 36px;
  padding-inline: 0;
  border-block-start: 1px solid oklch(67.54% 0.0336 79.83);
}
.workshop-list span {
  display: block;
  font-size: 13px;
  color: oklch(45.33% 0.047 77.25);
  margin-block-end: 20px;
}
#fees {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 70px;
}
.contact-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.contact-form label {
  font-size: 15px;
  font-weight: 400;
  margin-block-start: 15px;
}
.contact-form label:first-child {
  margin-block-start: 0;
}
.contact-form input,
.contact-form textarea {
  border: 1px solid oklch(69.78% 0.0304 79.4);
  background: oklch(99.17% 0.0085 84.57);
  color: var(--ink);
  padding-block: 12px;
  padding-inline: 15px;
  border-radius: 0;
  inline-size: 100%;
  font-size: 17px;
  caret-color: var(--accent);
}
.contact-form textarea {
  resize: vertical;
  min-block-size: 145px;
}
.contact-form button {
  margin-block-start: 10px;
  border: 0;
  border-radius: 0;
  padding-block: 15px;
  padding-inline: 24px;
  background: var(--ink);
  color: oklch(100% 0 none);
  font-size: 16px;
  align-self: flex-start;
  min-block-size: 50px;
}
.site-footer {
  padding-block: 45px 125px;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 35px;
  justify-content: space-between;
  border-block-start: 1px solid var(--line);
}
.site-footer .wordmark {
  inline-size: 150px;
}
.site-footer p {
  font-size: 13px;
}
.site-footer small {
  font-size: 12px;
  color: var(--muted);
}
body[data-concept=dune] {
  --paper: oklch(96.8% 0.0114 84.58);
  --sand: oklch(86.98% 0.0545 84.51);
  --ink: oklch(28.45% 0.034 313.43);
  --accent: oklch(54.63% 0.0711 76.81);
}
body[data-concept=dune] .landing-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-block-size: 840px;
  padding-block-start: 65px;
  padding-block-end: 70px;
  color: oklch(98.38% 0.0159 82.79);
  isolation: isolate;
  background: oklch(35.72% 0.0356 67.99);
  gap: 35px;
}
body[data-concept=dune] .hero-visual {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: -2;
}
body[data-concept=dune] .hero-visual img {
  block-size: 100%;
  object-position: center 58%;
  filter: brightness(.5) saturate(.65);
}
body[data-concept=dune] .hero-content {
  max-inline-size: 930px;
  padding-block-start: 0;
}
body[data-concept=dune] .hero-discipline {
  font-size: 21px;
  max-inline-size: none;
  margin-block-end: 35px;
}
body[data-concept=dune] .landing-hero h1 {
  font-size: clamp(40px,4.5vw,66px);
  line-height: 1.16;
}
body[data-concept=dune] .hero-intro {
  max-inline-size: 615px;
  color: oklch(98.38% 0.0159 82.79);
  margin-inline-start: auto;
  font-size: 17px;
}
body[data-concept=dune] #contact {
  background: oklch(89.97% 0.0343 80.3);
}
@keyframes desert-enter {
  from{transform:scale(1.035)}
  to{transform:scale(1)}
}
@media(min-width:1700px) {
  :root {
    --gutter: max(80px,calc((100vw - 1440px)/2));
  }
}
@media(max-width:1100px) {
  .site-nav {
    gap: 17px;
    font-size: 14px;
  }
  .wordmark {
    inline-size: 150px;
  }
  .landing-hero {
    gap: 25px 40px;
    min-block-size: 0;
  }
  .landing-hero h1 {
    font-size: 44px;
  }
  .hero-discipline {
    font-size: 18px;
  }
  .hero-intro {
    font-size: 16px;
  }
  .content-section {
    padding-block: 75px;
  }
  .section-intro {
    gap: 40px;
  }
  .workshop-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .site-footer {
    flex-wrap: wrap;
  }
  .career-list li {
    gap: 35px;
    grid-template-columns: 140px 1fr;
  }
}
@media(max-width:900px) {
  html {
    scroll-padding-block-start: 100px;
  }
  .site-header {
    padding-block: 18px;
  }
  .menu-toggle {
    display: flex;
  }
  .site-nav {
    display: none;
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--paper);
    padding-block: 20px;
    padding-inline: var(--gutter);
    border-block-end: 1px solid var(--line);
    grid-template-columns: repeat(4,1fr);
    gap: 12px 20px;
  }
  .site-nav.is-open {
    display: grid;
  }
  .site-nav a:last-child {
    border: 0;
  }
  .landing-hero {
    padding-block: 40px 50px;
    gap: 30px;
  }
  .landing-hero h1 {
    font-size: 39px;
  }
  .hero-content {
    padding-block-start: 0;
  }
  .hero-visual {
    min-block-size: 650px;
  }
  .hero-visual img {
    min-block-size: 650px;
  }
  .hero-discipline {
    margin-block-end: 25px!important;
  }
  .hero-intro {
    padding-block-start: 0;
  }
  .section-intro {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  #why,
  #fees {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .client-logo img {
    max-inline-size: 115px;
  }
}
@media(max-width:600px) {
  body {
    font-size: 17px;
    line-height: 1.7;
  }
  .site-header {
    gap: 20px;
  }
  .wordmark {
    inline-size: 155px;
  }
  .site-nav {
    grid-template-columns: repeat(2,1fr);
    font-size: 16px;
  }
  .landing-hero {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-block-start: 36px;
  }
  .landing-hero h1 {
    font-size: 39px;
    line-height: 1.16;
  }
  .hero-discipline,
  body[data-concept=dune] .hero-discipline {
    font-size: 17px;
    margin-block-end: 26px!important;
    max-inline-size: 280px;
  }
  .hero-intro {
    font-size: 16px;
  }
  .hero-visual {
    block-size: 340px;
    min-block-size: 340px;
    order: 2;
  }
  .hero-visual img {
    block-size: 340px;
    min-block-size: 340px;
  }
  .hero-intro {
    order: 3;
  }
  body[data-concept=dune] .landing-hero {
    min-block-size: 0;
    padding-block: 38px 55px;
    gap: 35px;
  }
  body[data-concept=dune] .landing-hero h1 {
    font-size: 40px;
  }
  body[data-concept=dune] .hero-visual,
  body[data-concept=dune] .hero-visual img {
    block-size: 100%;
    min-block-size: 100%;
  }
  body[data-concept=dune] .hero-intro {
    font-size: 16px;
    margin-inline-start: 0;
  }
  body[data-concept=dune] .hero-visual img {
    object-position: 45% center;
  }
  .content-section {
    padding-block: 60px;
  }
  .content-section h2 {
    font-size: 37px;
  }
  .section-intro {
    display: block;
    margin-block-end: 32px;
  }
  .section-body p+p {
    margin-block-start: 20px;
  }
  #why,
  #fees {
    gap: 25px;
  }
  .career-list {
    margin-block-start: 45px!important;
  }
  .career-list li {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 27px;
    padding-inline: 0;
    font-size: 16px;
  }
  .career-logo {
    justify-content: flex-start;
    min-block-size: 45px;
  }
  .career-logo img {
    max-block-size: 55px;
    max-inline-size: 130px;
  }
  .client-logos {
    gap: 27px;
  }
  .client-logo {
    block-size: 60px;
  }
  .client-logo img {
    max-inline-size: 120px;
    max-block-size: 60px;
  }
  .workshop-heading {
    margin-block-start: 38px!important;
    font-size: 26px!important;
  }
  .workshop-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .workshop-list li {
    padding-block: 22px 27px;
    padding-inline: 0;
  }
  .workshop-list span {
    margin-block-end: 10px;
  }
  .contact-form input,
  .contact-form textarea {
    font-size: 17px;
  }
  .site-footer {
    padding-block: 35px 110px;
    gap: 20px;
  }
  .site-footer p,
  .site-footer small {
    inline-size: 100%;
  }
  .site-footer p {
    font-size: 14px;
  }
}
/* Hero headline: phrase-based line breaks on wide screens; phones wrap naturally. */
body[data-concept=dune] .hero-br {
  display: none;
}
@media (min-width: 1100px) {
  body[data-concept=dune] .hero-br {
    display: inline;
  }
}
/* Navigation: a white floating panel with rounded controls; below 1100px a disclosure panel. */
body[data-concept=dune] .site-header {
  --nav-surface: oklch(100% 0 none);
  --nav-ink: oklch(28.45% 0.034 313.43);
  --nav-hover: oklch(90.95% 0.0195 80.11);
  --nav-pressed: oklch(86.22% 0.0289 79.46);
  --nav-action: oklch(28.45% 0.034 313.43);
  --nav-action-ink: oklch(98.38% 0.0159 82.79);
  --nav-action-hover: oklch(39.63% 0.0371 324.47);
  --nav-action-pressed: oklch(22.91% 0.0272 312.12);
  --nav-focus: oklch(48.72% 0.0693 72);
  --nav-logo-filter: none;
  position: fixed;
  z-index: 60;
  inset-block-start: 16px;
  inset-inline: calc(var(--gutter) - 28px);
  max-inline-size: none;
  margin-inline: auto;
  min-block-size: 64px;
  padding-block: 10px;
  padding-inline: 28px;
  gap: 32px;
  border: 0;
  border-radius: 12px;
  background: var(--nav-surface);
  color: var(--nav-ink);
  outline: .5px solid oklch(28.45% 0.034 313.43 / 0.039);
  outline-offset: -.5px;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-concept=dune] .site-header,
  body[data-concept=dune] .site-nav,
  body[data-concept=dune] .menu-toggle {
    transition: background-color 360ms ease;
  }
}
body[data-concept=dune] .site-header .wordmark {
  inline-size: 168px;
}
body[data-concept=dune] .site-header .wordmark img {
  filter: var(--nav-logo-filter);
}
body[data-concept=dune] .site-header :is(a, button):focus-visible {
  outline-color: var(--nav-focus);
}
body[data-concept=dune] .menu-toggle {
  color: var(--nav-ink);
}
body[data-concept=dune] .site-nav {
  flex: 1;
  gap: 4px;
  font-size: 15px;
  font-weight: 400;
}
body[data-concept=dune] .site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding-block: 8px;
  padding-inline: 16px;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  body[data-concept=dune] .site-nav a:hover {
    background: var(--nav-hover);
  }
  body[data-concept=dune] .site-nav a:last-child:hover {
    background: var(--nav-action-hover);
  }
}
body[data-concept=dune] .site-nav a:active {
  background: var(--nav-pressed);
}
body[data-concept=dune] .site-nav a:last-child {
  margin-inline-start: auto;
  padding-inline: 25px;
  background: var(--nav-action);
  color: var(--nav-action-ink);
}
body[data-concept=dune] .site-nav a:last-child:active {
  background: var(--nav-action-pressed);
}
body[data-concept=dune] .landing-hero {
  padding-block-start: 156px;
  min-block-size: 932px;
}
@media (max-width: 1100px) {
  body[data-concept=dune] .site-header {
    inset-inline: calc(var(--gutter) - 24px);
    padding-block: 10px;
    padding-inline: 24px;
    gap: 20px;
  }
  body[data-concept=dune] .site-header .wordmark {
    inline-size: 155px;
  }
  body[data-concept=dune] .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    flex: none;
    padding: 0;
    gap: 0;
    border-radius: 8px;
    background: var(--nav-hover);
    font-size: 0;
  }
  body[data-concept=dune] .menu-toggle[aria-expanded=true] {
    background: var(--nav-pressed);
  }
  @media (hover: hover) and (pointer: fine) {
    body[data-concept=dune] .menu-toggle:hover {
      background: var(--nav-pressed);
    }
  }
  body[data-concept=dune] .site-nav {
    display: none;
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline: 0;
    max-block-size: calc(100dvh - 104px);
    overflow-y: auto;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: var(--nav-surface);
    font-size: 17px;
    gap: 0;
  }
  body[data-concept=dune] .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  body[data-concept=dune] .site-nav a {
    justify-content: flex-start;
    min-block-size: 48px;
    padding-block: 10px;
    padding-inline: 18px;
  }
  body[data-concept=dune] .site-nav a:last-child {
    margin-block: 8px 0;
    margin-inline: 0;
    justify-content: center;
  }
}
@media (max-width: 600px) {
  body[data-concept=dune] .site-header {
    inset-inline: 16px;
    min-block-size: 64px;
    padding-block: 10px;
    padding-inline: 20px 10px;
  }
  body[data-concept=dune] .site-header .wordmark {
    inline-size: 148px;
  }
  body[data-concept=dune] .landing-hero {
    padding-block-start: 128px;
    min-block-size: 0;
  }
}
/* Hero: the abstract gradient sand (site.js) over the static dune plate. The first paint already matches the
   scene's layout: the plate sits full-width at the bottom and the hero reserves its height. */
body[data-concept=dune][data-scene=paper] .landing-hero {
  --art-h: clamp(260px, 32vw, 580px);
  min-block-size: 0;
  padding-block-end: calc(var(--art-h) + 16px);
}
.hero-shader {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  transition: opacity .7s ease-out;
}
.landing-hero[data-shader=ready] .hero-shader {
  opacity: 1;
}
.landing-hero[data-shader=ready] .hero-visual img {
  visibility: hidden;
}
body[data-concept=dune][data-scene=paper] .landing-hero {
  background: oklch(91.91% 0.0344 84.59);
  color: var(--ink);
}
body[data-concept=dune][data-scene=paper] .hero-visual img {
  position: absolute;
  inset-block-start: auto;
  inset-inline-end: auto;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: var(--art-h);
  max-inline-size: none;
  min-block-size: 0;
  object-fit: fill;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  animation: none;
  transform: none;
}
body[data-concept=dune][data-scene=paper] :is(.hero-intro, .hero-explore) {
  color: var(--ink);
}
/* The live scene and its static plate share one layout. */
body[data-concept=dune][data-scene=paper] .landing-hero {
  background: oklch(92.98% 0.0323 87.29);
}
body[data-concept=dune][data-scene=paper] .hero-visual .paper-art-fallback {
  position: absolute;
  inset-block-start: var(--paper-art-top, 0px);
  inset-inline-start: var(--paper-art-left, -9%);
  inset-inline-end: auto;
  inset-block-end: auto;
  inline-size: var(--paper-art-width, 118%);
  block-size: var(--paper-art-height, auto);
  max-inline-size: none;
  min-block-size: 0;
  object-fit: fill;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  animation: none;
  transform: none;
}
@media (max-width: 900px) {
  body[data-concept=dune][data-scene=paper] .hero-intro {
    margin-block-start: calc(var(--paper-art-height, 75vw) + 48px);
  }
  body[data-concept=dune][data-scene=paper] .hero-visual .paper-art-fallback {
    inset-block-start: var(--paper-art-top, 500px);
    block-size: var(--paper-art-height, 75vw);
    inset-inline-start: var(--paper-art-left, 0px);
    inline-size: var(--paper-art-width, 100%);
    mask-image: linear-gradient(transparent, oklch(0% 0 none) 5%, oklch(0% 0 none) 95%, transparent);
  }
}
@media (max-width: 1100px) {
  body[data-concept=dune][data-scene=paper] .landing-hero[data-illustrated] .hero-intro {
    margin-block-start: calc(var(--paper-art-height, 67vw) + 48px);
  }
}
/* Hero copy: the discipline, headline and introduction above the landscape. */
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] {
  padding-block-start: 144px;
}
.hero-copy {
  display: contents;
}
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] .hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
}
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] .hero-content {
  min-inline-size: 0;
  max-inline-size: none;
}
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] .hero-discipline {
  font-size: 17px;
  line-height: 1.4;
  margin-block-end: 24px;
}
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] h1 {
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.03em;
  text-wrap: balance;
}
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] .hero-intro {
  max-inline-size: var(--t-measure);
  margin-block: clamp(20px, 2.2vw, 32px) 0;
  margin-inline: 0;
  padding: 0;
  font-weight: 300;
  line-height: 1.45;
  text-wrap: pretty;
}
/* Hero copy, stacked, in the page's headline and body sizes (client final revisions). */
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] {
  --hero-h1: var(--t-head);
  --hero-intro: var(--t-body);
}
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] .hero-copy {
  grid-template-rows: auto auto auto;
  row-gap: 0;
  padding-block-start: 15px;
}
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] .hero-content {
  display: contents;
}
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] .hero-discipline {
  grid-column: 1;
  grid-row: 1;
}
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] h1 {
  grid-column: 1;
  grid-row: 2;
  min-inline-size: 0;
  font-size: var(--hero-h1);
}
body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] .hero-intro {
  grid-column: 1;
  grid-row: 3;
  font-size: var(--hero-intro);
}
@media (max-width: 600px) {
  body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] {
    padding-block-start: 112px;
  }
  body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] .hero-discipline {
    font-size: 16px;
    margin-block-end: 20px;
  }
  body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] {
    --hero-h1: 36px;
  }
  body[data-concept=dune][data-scene=paper] .landing-hero[data-engraved] h1 {
    line-height: 1.1;
  }
}
/* Why: the title, then two paragraphs of body copy, one column. */
body[data-concept=dune] #why {
  display: block;
  position: relative;
  isolation: isolate;
  border-block-start: 0;
  padding-block: clamp(80px, 7vw, 112px) clamp(88px, 8vw, 128px);
}
body[data-concept=dune] #why .section-intro {
  margin-block-end: 28px;
}
body[data-concept=dune] #why .section-body {
  max-inline-size: none;
}
body[data-concept=dune] #why .section-body p {
  max-inline-size: var(--t-measure);
  margin: 0;
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.45;
  text-wrap: pretty;
}
body[data-concept=dune] #why .section-body p + p {
  margin-block-start: 1em;
}
@media (max-width: 600px) {
  body[data-concept=dune] #why {
    padding-block: 64px 72px;
  }
  body[data-concept=dune] #why .section-intro {
    margin-block-end: 22px;
  }
}
/* Hero entrance: one camera pullback, then a quiet reading state. */
@media (prefers-reduced-motion: no-preference) {
  body[data-concept=dune] .hero-visual img {
    transform-origin: 62% 58%;
    animation: dune-camera 4.6s cubic-bezier(.2,.65,.3,1) both;
  }
  body[data-concept=dune] .hero-discipline {
    animation: dune-copy 600ms cubic-bezier(.16,1,.3,1) both;
  }
  body[data-concept=dune] .landing-hero h1 {
    animation: dune-focus 800ms cubic-bezier(.16,1,.3,1) 80ms both;
  }
  body[data-concept=dune] .hero-intro {
    animation: dune-copy 700ms cubic-bezier(.16,1,.3,1) 240ms both;
  }
}
@keyframes dune-camera {
  from { transform: scale(1.085) translateX(-.6%); }
  to { transform: scale(1) translateX(0); }
}
@keyframes dune-focus {
  from { opacity: .65; filter: blur(2px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes dune-copy {
  from { opacity: .7; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Reduced motion: no animation and no smooth scrolling; colour and opacity feedback stays,
and every transition that moves something sits in a no-preference block. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
  }
}
/* Expertise: section frame. */
body[data-concept=dune] #expertise {
  position: relative;
  padding-block: clamp(76px, 8vw, 116px) clamp(84px, 8vw, 124px);
  border-block: 0;
  background: oklch(93.04% 0.0166 79.35);
}
body[data-concept=dune] #expertise h2 {
  font-size: clamp(30px, 3vw, 42px);
  letter-spacing: -.035em;
}
body[data-concept=dune] #expertise .career-list {
  margin-block-start: 0 !important;
}
body[data-concept=dune] #expertise .career-list li {
  grid-template-columns: minmax(145px, .34fr) minmax(0, 1fr);
  gap: clamp(32px, 7vw, 100px);
  padding-block: 27px;
  border-color: oklch(36.28% 0.0282 53.6 / 0.188);
  font-size: 16px;
  line-height: 1.65;
}
body[data-concept=dune] #expertise .career-logo {
  justify-content: flex-start;
}
body[data-concept=dune] #expertise .career-logo img {
  max-inline-size: 142px;
  max-block-size: 58px;
}
@media (max-width: 600px) {
  body[data-concept=dune] #expertise {
    padding-block: 64px 76px;
  }
  body[data-concept=dune] #expertise .career-list li {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 23px;
  }
  body[data-concept=dune] #expertise .career-logo {
    min-block-size: 44px;
  }
  body[data-concept=dune] #expertise .career-logo img {
    max-inline-size: 132px;
    max-block-size: 48px;
  }
}
/* What: one column — title, introduction, the three areas numbered at sub-head size (each links to its How folio),
   then the note. */
body[data-concept=dune] #what {
  display: block;
  border: 0;
  background: oklch(93.68% 0.0194 80.12);
  color: var(--ink);
}
body[data-concept=dune] #what :is(.what-overview p, .what-note) {
  max-inline-size: var(--t-measure);
  margin: 0;
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.45;
  text-wrap: pretty;
}
body[data-concept=dune] #what .what-services {
  margin-block: clamp(28px, 3vw, 44px);
  margin-inline: 0;
  padding: 0;
  list-style: none;
  counter-reset: service;
}
body[data-concept=dune] #what .what-services li {
  margin: 0;
  counter-increment: service;
}
body[data-concept=dune] #what .what-services li + li {
  margin-block-start: 12px;
}
body[data-concept=dune] #what .what-services a {
  display: inline-block;
  text-decoration: none;
}
body[data-concept=dune] #what .what-services h3 {
  /* hanging number: a title that wraps continues under its first letter, not under the number */
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  font-size: var(--t-sub);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.025em;
}
body[data-concept=dune] #what .what-services h3::before {
  content: counter(service) ".";
  padding-inline-end: .28em;
  font-variant-numeric: tabular-nums;
}
body[data-concept=dune] #what .what-services a:focus-visible h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}
@media (hover: hover) and (pointer: fine) {
  body[data-concept=dune] #what .what-services a:hover h3 {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .16em;
  }
}
body[data-concept=dune] #what .what-services a:active h3,
body[data-concept=dune] .wordmark:active {
  opacity: .72;
}
body[data-concept=dune] #what .what-services a:focus-visible {
  outline-color: oklch(52.17% 0.0454 75.2);
  outline-offset: 6px;
}
/* How: a horizontally browsed set of paper folios. */
body[data-concept=dune] #how {
  position: relative;
  padding-block: 72px 80px;
  padding-inline: 0;
  background: oklch(96.8% 0.0114 84.58);
  border: 0;
}
#how .folio-anchor {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  pointer-events: none;
}
#how .folio-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--gutter);
  margin-block-end: 34px;
}
body[data-concept=dune] #how h2 {
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 300;
  letter-spacing: -.04em;
}
#how .folio-nav {
  display: flex;
  gap: 12px;
}
#how .folio-nav a {
  display: grid;
  place-content: center;
  inline-size: 48px;
  block-size: 48px;
  color: oklch(54.43% 0.017 44.05);
  font: 300 18px/1 Outfit, sans-serif;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color 180ms, border-color 180ms;
}
#how .folio-nav a[aria-current=true] {
  color: oklch(28.45% 0.034 313.43);
  border-color: currentColor;
}
@media (hover: hover) and (pointer: fine) {
  #how .folio-nav a:hover {
    color: oklch(28.45% 0.034 313.43);
  }
}
#how .folio-track {
  display: flex;
  gap: 20px;
  padding-block: 0 12px;
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
#how .folio-track::-webkit-scrollbar {
  display: none;
}
#how .how-folio {
  position: relative;
  flex: 0 0 calc(100% - 64px);
  min-inline-size: 0;
  min-block-size: 600px;
  padding: clamp(30px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  scroll-snap-align: start;
  background: oklch(88.69% 0.0328 80.98);
}
#how .how-folio:nth-child(2) {
  background: oklch(92.52% 0.0211 79.09);
}
#how .how-folio:nth-child(3) {
  background: oklch(82.45% 0.0401 78.52);
}
#how .folio-title {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
#how .folio-number {
  font-size: clamp(80px, 9.5vw, 144px);
  font-weight: 200;
  line-height: .9;
  letter-spacing: -.07em;
  color: oklch(56.74% 0.0454 73.96);
}
body[data-concept=dune] #how h3 {
  font-size: clamp(42px, 4.3vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.045em;
  text-wrap: initial;
}
#how .folio-copy {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 300;
  line-height: 1.5;
}
#how .folio-copy p + p {
  margin-block-start: 26px;
}
#how .folio-copy ul {
  margin-block: 22px 0;
  margin-inline: 0;
  padding-inline-start: 20px;
  line-height: inherit;
}
#how .folio-copy li {
  padding-inline-start: 5px;
}
#how .folio-copy li + li {
  margin-block-start: 18px;
}
@media (max-width: 1000px) {
  #how .how-folio {
    flex-basis: calc(100% - 28px);
    min-block-size: 560px;
    gap: 32px;
  }
  body[data-concept=dune] #how h3 {
    font-size: 42px;
  }
  #how .folio-number {
    font-size: 90px;
  }
}
@media (max-width: 700px) {
  body[data-concept=dune] #how {
    padding-block: 46px 42px;
  }
  #how .folio-intro {
    align-items: flex-start;
    gap: 18px;
    flex-direction: column;
    margin-block-end: 24px;
  }
  #how .folio-nav {
    gap: 18px;
  }
  #how .folio-nav a {
    block-size: 38px;
    inline-size: 36px;
    font-size: 16px;
  }
  #how .folio-track {
    gap: 12px;
  }
  #how .how-folio {
    flex-basis: calc(100% - 18px);
    min-block-size: 0;
    padding-block: 28px 32px;
    padding-inline: 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    gap: 36px;
  }
  #how .folio-title {
    gap: 28px;
  }
  #how .folio-number {
    font-size: 64px;
  }
  body[data-concept=dune] #how h3 {
    font-size: clamp(30px, 8.5vw, 46px);
  }
  #how .folio-copy {
    font-size: 18px;
    line-height: 1.5;
  }
  #how .folio-copy li + li {
    margin-block-start: 16px;
  }
}
/* Each paper slide carries a different, gently offset sand-line drawing. */
#how .how-folio {
  isolation: isolate;
  overflow: clip;
}
#how .how-folio::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset-block: 17% auto;
  inset-inline: -8% auto;
  inline-size: 63%;
  block-size: 64%;
  background: var(--folio-pattern) center / 100% 100% no-repeat;
  transform: translateX(var(--contour-x, 0px));
  opacity: .76;
}
#how .how-folio:nth-child(1) {
  --folio-pattern: url('./assets/how-folio-positioning.svg');
}
#how .how-folio:nth-child(2) {
  --folio-pattern: url('./assets/how-folio-platform.svg');
}
#how .how-folio:nth-child(3) {
  --folio-pattern: url('./assets/how-folio-capability.svg');
}
#how .folio-track {
  cursor: grab;
}
#how .folio-copy {
  cursor: text;
}
#how .folio-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
@media (max-width: 700px) {
  #how .how-folio::before {
    inset-block: -20px auto;
    inset-inline: -20% auto;
    inline-size: 130%;
    block-size: 280px;
    opacity: .48;
  }
  #how .folio-nav a {
    inline-size: 44px;
    block-size: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #how .how-folio::before {
    transform: none;
  }
}
/* Expertise: the title and the source introduction stacked. */
body[data-concept=dune] #expertise {
  --exp-rule: oklch(28.45% 0.034 313.43 / 0.149);
  --exp-muted: oklch(44.4% 0.0215 59.05);
  border: 0;
}
body[data-concept=dune] #expertise .exp-passion {
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: -.02em;
  text-wrap: pretty;
}
body[data-concept=dune] #expertise .exp-network {
  max-inline-size: 58ch;
  color: var(--exp-muted);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}
body[data-concept=dune] #expertise .career-logo {
  justify-content: flex-start;
  min-block-size: 0;
}
body[data-concept=dune] #expertise h3 {
  font-size: clamp(25px, 2.7vw, 36px);
  font-weight: 300;
  letter-spacing: -.03em;
}
/* Expertise: the portrait runs to the page edge; the founder's name leads the copy. */
body[data-concept=dune] #expertise {
  --exp-sand: oklch(54.63% 0.0711 76.81);
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(48px, 6vw, 96px);
  row-gap: clamp(64px, 7vw, 104px);
  padding-block: 0 clamp(84px, 8vw, 124px);
  padding-inline: 0 var(--gutter);
  background: oklch(93.04% 0.0166 79.35);
}
body[data-concept=dune] #expertise .exp-bleed {
  grid-column: 1;
  grid-row: 1;
  overflow: clip;
  background: oklch(41.33% 0.0067 274.83);
}
body[data-concept=dune] #expertise .exp-bleed img {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 640px;
  object-fit: cover;
  object-position: 56% 18%;
  filter: saturate(.78) sepia(.22);
}
body[data-concept=dune] #expertise .exp-profile {
  grid-column: 2;
  grid-row: 1;
  max-inline-size: 720px;
  padding-block-start: clamp(72px, 8vw, 112px);
}
body[data-concept=dune] #expertise .exp-profile h2 {
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--exp-sand);
}
body[data-concept=dune] #expertise .exp-name {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block: 18px 34px;
  margin-inline: 0;
}
body[data-concept=dune] #expertise .exp-name strong {
  font-size: clamp(48px, 5.4vw, 84px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05em;
  text-wrap: balance;
}
body[data-concept=dune] #expertise .exp-name span {
  color: var(--exp-muted);
  font-size: 16px;
}
body[data-concept=dune] #expertise .exp-intro {
  max-inline-size: 56ch;
  color: var(--exp-muted);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}
/* The three biography paragraphs share the body size. */
body[data-concept=dune] #expertise .exp-intro,
body[data-concept=dune] #expertise .exp-passion,
body[data-concept=dune] #expertise .exp-network {
  max-inline-size: none;
  margin: 0;
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0;
  text-wrap: pretty;
}
body[data-concept=dune] #expertise .exp-passion,
body[data-concept=dune] #expertise .exp-network {
  margin-block-start: .8em;
}
body[data-concept=dune] #expertise .exp-career {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-inline-start: var(--gutter);
}
body[data-concept=dune] #expertise .exp-career h3 {
  padding-block-end: 24px;
  border-block-end: 1px solid var(--exp-rule);
}
body[data-concept=dune] #expertise .career-list {
  margin: 0 !important;
}
body[data-concept=dune] #expertise .career-list li {
  grid-template-columns: minmax(160px, .28fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  padding-block: 26px;
  border-color: var(--exp-rule);
  font-size: 16px;
  line-height: 1.65;
}
body[data-concept=dune] #expertise .career-list li p {
  max-inline-size: 62ch;
  text-wrap: pretty;
}
/* Career logos: per-mark widths so the five marks carry a similar visual weight. */
body[data-concept=dune] #expertise .career-logo img {
  max-inline-size: 100%;
  max-block-size: none;
}
body[data-concept=dune] #expertise .career-logo img[src$="ogilvy.png"] {
  inline-size: min(124px, 100%);
}
body[data-concept=dune] #expertise .career-logo img[src$="vml.png"] {
  inline-size: min(116px, 100%);
}
body[data-concept=dune] #expertise .career-logo img[src$="letsbuyit.png"] {
  inline-size: min(256px, 100%);
}
body[data-concept=dune] #expertise .career-logo img[src$="yum-career.png"] {
  inline-size: min(74px, 100%);
}
body[data-concept=dune] #expertise .career-logo img[src$="pizza-hut-career.png"] {
  inline-size: min(104px, 100%);
  margin-inline-start: -20px;
}
@media (max-width: 1100px) {
  body[data-concept=dune] #expertise {
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
    column-gap: 40px;
  }
  body[data-concept=dune] #expertise .exp-bleed img {
    min-block-size: 560px;
  }
}
@media (max-width: 900px) {
  body[data-concept=dune] #expertise {
    display: block;
    padding-block: 0 72px;
    padding-inline: 0;
  }
  body[data-concept=dune] #expertise .exp-bleed {
    block-size: 460px;
  }
  body[data-concept=dune] #expertise .exp-bleed img {
    min-block-size: 0;
    object-position: 50% 26%;
  }
  body[data-concept=dune] #expertise .exp-profile {
    max-inline-size: none;
    padding-block: 44px 0;
    padding-inline: var(--gutter);
  }
  body[data-concept=dune] #expertise .exp-career {
    padding-block: 64px 0;
    padding-inline: var(--gutter);
  }
}
@media (max-width: 600px) {
  body[data-concept=dune] #expertise .exp-bleed {
    block-size: 400px;
  }
  body[data-concept=dune] #expertise .exp-profile {
    padding-block-start: 36px;
  }
  body[data-concept=dune] #expertise .exp-name {
    margin-block-end: 28px;
  }
  body[data-concept=dune] #expertise .exp-name strong {
    font-size: clamp(40px, 12vw, 52px);
  }
  body[data-concept=dune] #expertise .exp-intro,
  body[data-concept=dune] #expertise .exp-passion,
  body[data-concept=dune] #expertise .exp-network {
    font-size: 18px;
  }
  body[data-concept=dune] #expertise .exp-career {
    padding-block-start: 52px;
  }
  body[data-concept=dune] #expertise .career-list li {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-block: 22px;
  }
}
/* Page rhythm: one section-title scale, one sub-heading scale and one top rhythm for every block. */
/* Three type sizes throughout — headline, sub-head, body copy — measured from the client's mockups
   (58 / 38 / 28px at 1440). Running copy shares one wide measure. */
body[data-concept=dune] {
  --t-head: clamp(38px, 4vw, 58px);
  --t-sub: clamp(26px, 2.65vw, 38px);
  --t-body: clamp(19px, 1.95vw, 28px);
  --t-measure: 1240px;
}
body[data-concept=dune] .content-section h2,
body[data-concept=dune] #why h2,
body[data-concept=dune] #what h2,
body[data-concept=dune] #how h2,
body[data-concept=dune] #expertise .exp-profile h2 {
  max-inline-size: none;
  margin: 0;
  font-size: var(--t-head);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--ink);
}
body[data-concept=dune] #what h2 {
  margin-block-end: 28px;
}
/* Every section title starts 100px below the section edge (Expertise: below the bleed portrait's top). */
body[data-concept=dune] #why {
  padding-block-start: 100px;
}
body[data-concept=dune] #what {
  padding-block: 100px 88px;
}
body[data-concept=dune] #how {
  padding-block: 100px 96px;
}
body[data-concept=dune] #expertise .exp-profile {
  padding-block-start: 100px;
}
/* The founder's name sits under the section title as a strong line, not a second display line. */
body[data-concept=dune] #expertise .exp-name {
  gap: 10px;
  margin-block: 22px 30px;
  margin-inline: 0;
}
body[data-concept=dune] #expertise .exp-name strong {
  font-size: var(--t-sub);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.03em;
}
/* Sub-section headings share one scale. */
body[data-concept=dune] #expertise .exp-career h3 {
  font-size: var(--t-sub);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.03em;
}
body[data-concept=dune] #process .workshop-heading {
  font-size: var(--t-sub) !important;
  /* the base rule is !important */
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.03em;
}
@media (max-width: 600px) {
  body[data-concept=dune] .content-section h2,
  body[data-concept=dune] #why h2,
  body[data-concept=dune] #what h2,
  body[data-concept=dune] #how h2,
  body[data-concept=dune] #expertise .exp-profile h2 {
    font-size: 36px;
  }
  body[data-concept=dune] #what h2 {
    margin-block-end: 22px;
  }
  body[data-concept=dune] #why {
    padding-block-start: 60px;
  }
  body[data-concept=dune] #what {
    padding-block: 60px 52px;
  }
  body[data-concept=dune] #how {
    padding-block: 60px 56px;
  }
  body[data-concept=dune] #expertise .exp-profile {
    padding-block-start: 44px;
  }
}
/* Section grounds alternate paper and sand down the page:
hero sand, Why paper, What sand, How paper, Expertise sand, Clients paper, Testimonials sand, Process deeper sand, Fees paper, Contact sand. */
body[data-concept=dune] #process {
  background: oklch(88.69% 0.0328 80.98);
}
/* Footer: a narrow strip in the colour at the foot of the dune plate, so the closing landscape runs straight into it. */
body[data-concept=dune] .site-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 32px;
  padding-block: 13px;
  padding-inline: var(--gutter);
  border: 0;
  background: oklch(82.04% 0.0593 81.36);
  color: var(--ink);
}
body[data-concept=dune] .site-footer .wordmark {
  inline-size: 92px;
}
body[data-concept=dune] .site-footer p {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  white-space: nowrap;
}
body[data-concept=dune] .site-footer small {
  color: oklch(37.75% 0.0175 45.93);
  font-size: 12px;
  font-weight: 300;
  text-align: end;
}
/* Footer below 900px: one left edge. The mark with the discipline under it, then the legal line in two lines. */
@media (max-width: 900px) {
  body[data-concept=dune] .site-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 6px;
    padding-block: 20px 22px;
  }
  body[data-concept=dune] .site-footer p {
    inline-size: auto;
    text-align: start;
  }
  body[data-concept=dune] .site-footer small {
    inline-size: auto;
    margin-block-start: 8px;
    text-align: start;
  }
  body[data-concept=dune] .site-footer small span {
    display: block;
  }
}
/* Interaction: one strong ease-out for every response; pressables answer the press (movement only without a
   reduced-motion preference); hovers stay under 200ms. */
body[data-concept=dune] {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
body[data-concept=dune] .site-nav a,
body[data-concept=dune] .menu-toggle,
body[data-concept=dune] #contact .contact-form button {
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
body[data-concept=dune] #how .folio-nav a {
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
body[data-concept=dune] #contact .contact-form input,
body[data-concept=dune] #contact .contact-form textarea {
  transition: border-color 160ms var(--ease-out), outline-color 160ms var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  body[data-concept=dune] .site-nav a,
  body[data-concept=dune] .menu-toggle,
  body[data-concept=dune] #contact .contact-form button {
    transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 140ms var(--ease-out);
  }
  body[data-concept=dune] #how .folio-nav a {
    transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 140ms var(--ease-out);
  }
  body[data-concept=dune] .site-nav a:active,
  body[data-concept=dune] .menu-toggle:active,
  body[data-concept=dune] #contact .contact-form button:active {
    transform: scale(.97);
  }
  body[data-concept=dune] #how .folio-nav a:active {
    transform: scale(.94);
  }
}
/* Process wheel: the hover link is seen often, so it answers fast; the number changes colour only (no weight jump). */
body[data-concept=dune] #process .pr-ring::after {
  transition: opacity 180ms ease;
}
body[data-concept=dune] #process .workshop-list li {
  transition: opacity 180ms ease;
}
body[data-concept=dune] #process .workshop-list h4,
body[data-concept=dune] #process .workshop-list li > span:first-child,
body[data-concept=dune] #process .pr-n {
  transition: color 180ms ease;
}
body[data-concept=dune] #process .pr-ring[data-hi] .pr-n {
  font-weight: 300;
}
/* Clients: the lead stacked; the marks at even weights, centred in their cells. */
body[data-concept=dune] #clients {
  --cl-rule: oklch(28.45% 0.034 313.43 / 0.149);
  --cl-muted: oklch(44.4% 0.0215 59.05);
  border: 0;
}
body[data-concept=dune] #clients .cl-lead h2 {
  margin-block-end: 28px;
}
body[data-concept=dune] #clients .cl-lead p {
  max-inline-size: var(--t-measure);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.45;
  text-wrap: pretty;
}
body[data-concept=dune] #clients .cl-lead p + p {
  margin-block-start: .8em;
}
body[data-concept=dune] #clients .client-logo {
  block-size: auto;
  min-block-size: 72px;
  place-items: center;
}
body[data-concept=dune] #clients .client-logo img {
  max-inline-size: 100%;
  max-block-size: none;
  object-fit: contain;
}
/* Per-mark widths so the twelve marks read at a similar size (small sources stay at or below native size). */
body[data-concept=dune] #clients img[src$="kfc.png"] {
  inline-size: 66px;
}
body[data-concept=dune] #clients img[src$="pizza-hut.png"] {
  inline-size: 120px;
}
body[data-concept=dune] #clients img[src$="yum.png"] {
  inline-size: 84px;
}
body[data-concept=dune] #clients img[src$="nestle.png"] {
  inline-size: 66px;
}
body[data-concept=dune] #clients img[src$="danone.png"] {
  inline-size: 116px;
}
body[data-concept=dune] #clients img[src$="mondelez.png"] {
  inline-size: 172px;
}
body[data-concept=dune] #clients img[src$="diageo.png"] {
  inline-size: 122px;
}
body[data-concept=dune] #clients img[src$="sabeco.png"] {
  inline-size: 112px;
}
body[data-concept=dune] #clients img[src$="coca-cola.png"] {
  inline-size: 136px;
}
body[data-concept=dune] #clients img[src$="unilever.png"] {
  inline-size: 86px;
}
body[data-concept=dune] #clients img[src$="kimberly-clark.png"] {
  inline-size: 92px;
}
body[data-concept=dune] #clients img[src$="pg.png"] {
  inline-size: 72px;
  border-radius: 50%;
}
body[data-concept=dune] #clients h3 {
  margin: 0;
  color: var(--cl-muted);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: start;
}
/* Clients: one row per category, the category label, then its three marks. */
body[data-concept=dune] #clients {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: 100px 108px;
  background: oklch(96.8% 0.0114 84.58);
}
body[data-concept=dune] #clients .cl-lead {
  margin-block-end: clamp(44px, 5vw, 72px);
}
body[data-concept=dune] #clients .cl-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--cl-rule);
}
body[data-concept=dune] #clients .cl-ledger li {
  display: grid;
  grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: center;
  margin: 0;
  padding-block: 26px;
  border-block-end: 1px solid var(--cl-rule);
}
body[data-concept=dune] #clients .cl-ledger h3 {
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 300;
  letter-spacing: -.03em;
}
body[data-concept=dune] #clients .client-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}
@media (max-width: 700px) {
  body[data-concept=dune] #clients {
    padding-block: 64px 80px;
  }
  body[data-concept=dune] #clients .cl-ledger li {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-block: 22px 24px;
  }
  body[data-concept=dune] #clients .client-logos {
    gap: 16px;
  }
  body[data-concept=dune] #clients .client-logo {
    min-block-size: 60px;
  }
}
/* Testimonials: the title, 56px black-and-white portraits, one quote voice. */
body[data-concept=dune] #testimonials {
  --t-rule: oklch(28.45% 0.034 313.43 / 0.149);
  --t-muted: oklch(44.4% 0.0215 59.05);
  border: 0;
  padding-block: 100px 108px;
}
body[data-concept=dune] #testimonials .t-lead {
  max-inline-size: 760px;
  margin-block-end: clamp(44px, 5vw, 72px);
}
body[data-concept=dune] #testimonials .t-lead h2 {
  margin: 0;
}
body[data-concept=dune] #testimonials figure {
  margin: 0;
}
body[data-concept=dune] #testimonials figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}
body[data-concept=dune] #testimonials .t-avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  overflow: clip;
  background: oklch(86.98% 0.0545 84.51);
}
body[data-concept=dune] #testimonials .t-avatar img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
body[data-concept=dune] #testimonials .t-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
body[data-concept=dune] #testimonials .t-who strong {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
}
body[data-concept=dune] #testimonials .t-who span {
  display: block;
  margin: 0;
  color: var(--t-muted);
  font-size: 14px;
  line-height: 1.4;
}
body[data-concept=dune] #testimonials blockquote p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  text-wrap: pretty;
}
/* Testimonials: all eight voices, three to a row in the client's order, read top left to right. */
body[data-concept=dune] #testimonials {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: oklch(93.68% 0.0194 80.12);
}
body[data-concept=dune] #testimonials .t-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  align-items: start;
}
body[data-concept=dune] #testimonials .t-wall figure {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body[data-concept=dune] #testimonials .t-wall blockquote p {
  font-size: 17px;
}
@media (max-width: 1100px) {
  body[data-concept=dune] #testimonials .t-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 44px;
  }
}
@media (max-width: 700px) {
  body[data-concept=dune] #testimonials {
    padding-block: 64px 72px;
  }
  body[data-concept=dune] #testimonials .t-wall {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
/* Contact: the founder named in text; form controls on the nav's 8px radius. */
body[data-concept=dune] #contact {
  --ct-rule: oklch(28.45% 0.034 313.43 / 0.149);
  --ct-muted: oklch(44.4% 0.0215 59.05);
  position: relative;
  isolation: isolate;
  overflow: clip;
  border: 0;
  padding-block: 100px 108px;
}
body[data-concept=dune] #contact .ct-lead h2 {
  margin-block-end: 28px;
}
body[data-concept=dune] #contact .ct-lead > p:not(.ct-who) {
  max-inline-size: 30ch;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.45;
  text-wrap: pretty;
}
body[data-concept=dune] #contact .ct-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: 32px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--ct-rule);
  max-inline-size: 30ch;
}
body[data-concept=dune] #contact .ct-who strong {
  font-size: 18px;
  font-weight: 400;
}
body[data-concept=dune] #contact .ct-who span {
  color: var(--ct-muted);
  font-size: 15px;
}
body[data-concept=dune] #contact .contact-form label {
  margin-block-start: 18px;
  font-size: 15px;
  font-weight: 400;
}
body[data-concept=dune] #contact .contact-form label:first-child {
  margin-block-start: 0;
}
body[data-concept=dune] #contact .contact-form input,
body[data-concept=dune] #contact .contact-form textarea {
  border: 1px solid oklch(28.45% 0.034 313.43 / 0.2);
  border-radius: 8px;
  background: oklch(99.17% 0.0085 84.57);
  padding-block: 13px;
  padding-inline: 16px;
  font-size: 17px;
  font-weight: 300;
}
@media (hover: hover) and (pointer: fine) {
  body[data-concept=dune] #contact .contact-form input:hover,
  body[data-concept=dune] #contact .contact-form textarea:hover {
    border-color: oklch(28.45% 0.034 313.43 / 0.4);
  }
}
body[data-concept=dune] #contact .contact-form input:focus-visible,
body[data-concept=dune] #contact .contact-form textarea:focus-visible {
  border-color: var(--ink);
  outline: 3px solid oklch(54.63% 0.0711 76.81 / 0.2);
  outline-offset: 0;
}
body[data-concept=dune] #contact .contact-form button {
  margin-block-start: 14px;
  padding-block: 14px;
  padding-inline: 26px;
  border-radius: 8px;
  background: var(--ink);
  color: oklch(98.38% 0.0159 82.79);
  font-size: 16px;
  font-weight: 400;
}
@media (hover: hover) and (pointer: fine) {
  body[data-concept=dune] #contact .contact-form button:hover {
    background: oklch(39.63% 0.0371 324.47);
  }
}
/* Contact: lead left, form right; the hero's dune plate returns as a full-bleed band, closing the page as it opened. */
body[data-concept=dune] #contact {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 48px clamp(64px, 8vw, 128px);
  align-items: start;
  padding-block-end: 0;
  background: oklch(92.98% 0.0323 87.29);
}
body[data-concept=dune] #contact .ct-form {
  max-inline-size: 620px;
}
body[data-concept=dune] #contact .ct-horizon {
  grid-column: 1 / -1;
  margin-inline: calc(-1 * var(--gutter));
  margin-block-start: clamp(40px, 5vw, 72px);
  block-size: clamp(220px, 26vw, 400px);
  background: url('./assets/keynote-dunes.webp?v=32a') center 78% / cover no-repeat;
  -webkit-mask: linear-gradient(transparent, oklch(0% 0 none) 38%);
  mask: linear-gradient(transparent, oklch(0% 0 none) 38%);
}
@media (max-width: 900px) {
  body[data-concept=dune] #contact {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media (max-width: 600px) {
  body[data-concept=dune] #contact {
    padding-block-start: 64px;
  }
  body[data-concept=dune] #contact .ct-lead > p:not(.ct-who) {
    font-size: 20px;
  }
  body[data-concept=dune] #contact .ct-horizon {
    block-size: 200px;
  }
}
/* Form states: fields stack with their own error line; invalid fields and errors use one warm red; one status line under the button. */
body[data-concept=dune] #contact .contact-form {
  gap: 18px;
}
body[data-concept=dune] #contact .cf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-concept=dune] #contact .contact-form label {
  margin: 0;
}
body[data-concept=dune] #contact .cf-error {
  margin: 0;
  color: oklch(48.01% 0.1338 36.77);
  font-size: 14px;
  line-height: 1.4;
}
body[data-concept=dune] #contact .contact-form [aria-invalid] {
  border-color: oklch(48.01% 0.1338 36.77);
}
body[data-concept=dune] #contact .contact-form [aria-invalid]:focus-visible {
  outline-color: oklch(48.01% 0.1338 36.77 / 0.149);
}
body[data-concept=dune] #contact .contact-form button {
  margin-block-start: 4px;
  align-self: flex-start;
}
body[data-concept=dune] #contact .cf-status {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
body[data-concept=dune] #contact .cf-status:empty {
  display: none;
}
body[data-concept=dune] #contact .cf-status[data-state=error] {
  color: oklch(48.01% 0.1338 36.77);
}
/* Fees: on paper, between Process sand and Contact sand. */
body[data-concept=dune] #fees {
  --fe-rule: oklch(28.45% 0.034 313.43 / 0.149);
  --fe-muted: oklch(44.4% 0.0215 59.05);
  border: 0;
  padding-block: 100px 108px;
  background: oklch(96.8% 0.0114 84.58);
}
body[data-concept=dune] #fees p {
  text-wrap: pretty;
}
/* Fees: the title, then basis, value and details as three paragraphs of body copy. */
body[data-concept=dune] #fees {
  display: block;
}
body[data-concept=dune] #fees h2 {
  margin-block-end: 28px;
}
body[data-concept=dune] #fees :is(.fe-basis, .fe-value, .fe-details) {
  max-inline-size: var(--t-measure);
  margin: 0;
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.45;
}
body[data-concept=dune] #fees :is(.fe-value, .fe-details) {
  margin-block-start: 1em;
}
@media (max-width: 600px) {
  body[data-concept=dune] #fees {
    padding-block: 64px 72px;
  }
  body[data-concept=dune] #fees h2 {
    margin-block-end: 22px;
  }
}
/* Process: the stacked lead and one module voice. */
body[data-concept=dune] #process {
  --pr-rule: oklch(28.45% 0.034 313.43 / 0.149);
  --pr-muted: oklch(44.4% 0.0215 59.05);
  --pr-sand: oklch(52.17% 0.0454 75.2);
  border: 0;
  padding-block: 100px 108px;
  background: oklch(88.69% 0.0328 80.98);
}
body[data-concept=dune] #process .pr-lead {
  max-inline-size: var(--t-measure);
}
body[data-concept=dune] #process .pr-lead h2 {
  margin-block-end: 28px;
}
body[data-concept=dune] #process .pr-lead p {
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.45;
  text-wrap: pretty;
}
body[data-concept=dune] #process .pr-lead p + p {
  margin-block-start: .8em;
}
body[data-concept=dune] #process .workshop-heading {
  margin: 0 !important;
  font-size: clamp(26px, 2.5vw, 34px) !important;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.03em;
}
body[data-concept=dune] #process .workshop-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-concept=dune] #process .workshop-list li {
  margin: 0 !important;
  border: 0;
  padding: 0;
}
body[data-concept=dune] #process .workshop-list h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
body[data-concept=dune] #process .workshop-list > li > span:first-child:not(.pr-num) {
  display: block;
  margin-block: 0 8px;
  margin-inline: 0;
  color: var(--pr-muted);
  font-size: 13px;
}
/* Process: the slide's circle, rebuilt. Eight sand sectors around a paper hub; the modules stand on two rails
   beside the wheel, four a side, each at the height of its sector (8-5 down the left, 1-4 down the right). */
body[data-concept=dune] #process .pr-wheel {
  --ring: 520px;
  --rail: 300px;
  display: grid;
  grid-template-columns: var(--rail) var(--ring) var(--rail);
  grid-template-rows: repeat(4, minmax(calc(var(--ring) / 4), auto));
  gap: 14px 48px;
  align-items: center;
  inline-size: max-content;
  max-inline-size: 100%;
  margin-block: clamp(48px, 6vw, 72px) 0;
  margin-inline: auto;
}
body[data-concept=dune] #process .pr-wheel .workshop-heading {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: clip;
  clip-path: inset(50%);
}
body[data-concept=dune] #process .pr-ring {
  --sweep: 360deg;
  --hi: 0;
  position: relative;
  grid-column: 2;
  grid-row: 1 / 5;
  inline-size: var(--ring);
  block-size: var(--ring);
  border-radius: 50%;
}
/* The sectors live on a layer that the entrance sweep reveals clockwise from the top. */
body[data-concept=dune] #process .pr-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -90deg, oklch(96.8% 0.0114 84.58) 0 .5deg, transparent .5deg 45deg), radial-gradient(circle at 50% 40%, oklch(97.54% 0.0256 84.59) 0, transparent 60%), conic-gradient(from -90deg, oklch(86.62% 0.0426 82.46) 0 45deg, oklch(82.97% 0.0499 83.31) 0 90deg, oklch(86.62% 0.0426 82.46) 0 135deg, oklch(82.97% 0.0499 83.31) 0 180deg, oklch(86.62% 0.0426 82.46) 0 225deg, oklch(82.97% 0.0499 83.31) 0 270deg, oklch(86.62% 0.0426 82.46) 0 315deg, oklch(82.97% 0.0499 83.31) 0 360deg);
  -webkit-mask: conic-gradient(from 0deg, oklch(0% 0 none) var(--sweep), transparent 0);
  mask: conic-gradient(from 0deg, oklch(0% 0 none) var(--sweep), transparent 0);
}
/* Hover: the sector of the module under the pointer lifts a shade. */
body[data-concept=dune] #process .pr-ring[data-hi="1"] {
  --hi: 1;
}
body[data-concept=dune] #process .pr-ring[data-hi="2"] {
  --hi: 2;
}
body[data-concept=dune] #process .pr-ring[data-hi="3"] {
  --hi: 3;
}
body[data-concept=dune] #process .pr-ring[data-hi="4"] {
  --hi: 4;
}
body[data-concept=dune] #process .pr-ring[data-hi="5"] {
  --hi: 5;
}
body[data-concept=dune] #process .pr-ring[data-hi="6"] {
  --hi: 6;
}
body[data-concept=dune] #process .pr-ring[data-hi="7"] {
  --hi: 7;
}
body[data-concept=dune] #process .pr-ring[data-hi="8"] {
  --hi: 8;
}
body[data-concept=dune] #process .pr-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from calc((var(--hi) - 1) * 45deg), oklch(98.38% 0.0159 82.79) 0 45deg, transparent 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
body[data-concept=dune] #process .pr-ring[data-hi="1"]::after,
body[data-concept=dune] #process .pr-ring[data-hi="2"]::after,
body[data-concept=dune] #process .pr-ring[data-hi="3"]::after,
body[data-concept=dune] #process .pr-ring[data-hi="4"]::after,
body[data-concept=dune] #process .pr-ring[data-hi="5"]::after,
body[data-concept=dune] #process .pr-ring[data-hi="6"]::after,
body[data-concept=dune] #process .pr-ring[data-hi="7"]::after,
body[data-concept=dune] #process .pr-ring[data-hi="8"]::after {
  opacity: .7;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-concept=dune] #process .pr-wheel.is-armed .pr-ring {
    opacity: 0;
    transform: scale(.88);
  }
  body[data-concept=dune] #process .pr-wheel.is-drawing .pr-ring,
  body[data-concept=dune] #process .pr-wheel.is-live .pr-ring {
    opacity: 1;
    transform: none;
    transition: opacity 500ms cubic-bezier(.16,1,.3,1), transform 1200ms cubic-bezier(.16,1,.3,1);
  }
}
body[data-concept=dune] #process .pr-hub {
  z-index: 1;
}
body[data-concept=dune] #process .pr-n {
  z-index: 1;
  pointer-events: none;
}
body[data-concept=dune] #process .pr-ring {
  cursor: default;
}
/* While a sector is lit, its module reads in the accent and the other seven step back. */
body[data-concept=dune] #process .workshop-list li {
  transition: opacity 180ms ease;
}
body[data-concept=dune] #process .pr-wheel[data-active] .workshop-list li:not(.is-hi),
body[data-concept=dune] #process .pr-wheel[data-active] .workshop-list li.is-on:not(.is-hi) {
  opacity: .42;
}
body[data-concept=dune] #process .workshop-list li.is-hi h4 {
  color: var(--accent);
}
body[data-concept=dune] #process .workshop-list li.is-hi > span:first-child {
  color: var(--accent);
}
body[data-concept=dune] #process .workshop-list h4,
body[data-concept=dune] #process .workshop-list li > span:first-child {
  transition: color 180ms ease;
}
body[data-concept=dune] #process .pr-n {
  transition: color 180ms ease;
}
body[data-concept=dune] #process .pr-ring[data-hi="1"] .pr-n[data-n="1"],
body[data-concept=dune] #process .pr-ring[data-hi="2"] .pr-n[data-n="2"],
body[data-concept=dune] #process .pr-ring[data-hi="3"] .pr-n[data-n="3"],
body[data-concept=dune] #process .pr-ring[data-hi="4"] .pr-n[data-n="4"],
body[data-concept=dune] #process .pr-ring[data-hi="5"] .pr-n[data-n="5"],
body[data-concept=dune] #process .pr-ring[data-hi="6"] .pr-n[data-n="6"],
body[data-concept=dune] #process .pr-ring[data-hi="7"] .pr-n[data-n="7"],
body[data-concept=dune] #process .pr-ring[data-hi="8"] .pr-n[data-n="8"] {
  color: var(--accent);
}
/* Before the sweep plays, numbers and labels wait; each arrives as the sweep reaches its sector. */
@media (prefers-reduced-motion: no-preference) {
  body[data-concept=dune] #process .pr-wheel.is-armed .pr-n,
  body[data-concept=dune] #process .pr-wheel.is-armed .workshop-list li {
    opacity: 0;
    transform: translateY(6px);
  }
  body[data-concept=dune] #process .pr-wheel.is-armed .pr-hub {
    opacity: 0;
    transform: scale(.92);
  }
  body[data-concept=dune] #process .pr-wheel.is-armed .pr-n.is-on,
  body[data-concept=dune] #process .pr-wheel.is-armed .workshop-list li.is-on,
  body[data-concept=dune] #process .pr-wheel.is-live .pr-n,
  body[data-concept=dune] #process .pr-wheel.is-live .workshop-list li {
    opacity: 1;
    transform: none;
    transition: opacity 420ms cubic-bezier(.16,1,.3,1), transform 420ms cubic-bezier(.16,1,.3,1);
  }
  body[data-concept=dune] #process .pr-wheel.is-armed .pr-n.is-on {
    transform: translate(-50%, -50%);
  }
  body[data-concept=dune] #process .pr-wheel.is-armed .pr-n {
    translate: 0;
    transform: translate(-50%, calc(-50% + 6px));
  }
  body[data-concept=dune] #process .pr-wheel.is-live .pr-n {
    transform: translate(-50%, -50%);
    translate: 0;
  }
  body[data-concept=dune] #process .pr-wheel.is-drawing .pr-hub,
  body[data-concept=dune] #process .pr-wheel.is-live .pr-hub {
    opacity: 1;
    transform: none;
    transition: opacity 600ms cubic-bezier(.16,1,.3,1) 200ms, transform 600ms cubic-bezier(.16,1,.3,1) 200ms;
  }
}
body[data-concept=dune] #process .pr-hub {
  position: absolute;
  inset: 31%;
  display: grid;
  place-content: center;
  gap: 8px;
  border-radius: 50%;
  background: oklch(96.8% 0.0114 84.58);
  text-align: center;
}
body[data-concept=dune] #process .pr-hub img {
  display: block;
  margin-block: 0;
  margin-inline: auto;
  inline-size: 120px;
  block-size: auto;
}
body[data-concept=dune] #process .pr-hub span {
  display: block;
  max-inline-size: 18ch;
  margin-block: 0;
  margin-inline: auto;
  color: var(--pr-muted);
  font-size: 14px;
  line-height: 1.3;
  text-wrap: balance;
}
body[data-concept=dune] #process .pr-n {
  position: absolute;
  translate: -50% -50%;
  color: var(--ink);
  font-size: 22px;
  font-weight: 300;
}
body[data-concept=dune] #process .pr-n[data-n="1"] {
  inset-inline-start: 64.6%;
  inset-block-start: 14.9%;
}
body[data-concept=dune] #process .pr-n[data-n="2"] {
  inset-inline-start: 85.1%;
  inset-block-start: 35.4%;
}
body[data-concept=dune] #process .pr-n[data-n="3"] {
  inset-inline-start: 85.1%;
  inset-block-start: 64.6%;
}
body[data-concept=dune] #process .pr-n[data-n="4"] {
  inset-inline-start: 64.6%;
  inset-block-start: 85.1%;
}
body[data-concept=dune] #process .pr-n[data-n="5"] {
  inset-inline-start: 35.4%;
  inset-block-start: 85.1%;
}
body[data-concept=dune] #process .pr-n[data-n="6"] {
  inset-inline-start: 14.9%;
  inset-block-start: 64.6%;
}
body[data-concept=dune] #process .pr-n[data-n="7"] {
  inset-inline-start: 14.9%;
  inset-block-start: 35.4%;
}
body[data-concept=dune] #process .pr-n[data-n="8"] {
  inset-inline-start: 35.4%;
  inset-block-start: 14.9%;
}
body[data-concept=dune] #process .workshop-list {
  display: contents;
}
body[data-concept=dune] #process .workshop-list li {
  max-inline-size: var(--rail);
}
body[data-concept=dune] #process .workshop-list h4 {
  font-size: 17px;
  line-height: 1.4;
}
body[data-concept=dune] #process .workshop-list li > span:first-child {
  margin-block-end: 6px;
  font-size: 13px;
}
body[data-concept=dune] #process li[data-slot="1"] {
  grid-column: 3;
  grid-row: 1;
}
body[data-concept=dune] #process li[data-slot="2"] {
  grid-column: 3;
  grid-row: 2;
}
body[data-concept=dune] #process li[data-slot="3"] {
  grid-column: 3;
  grid-row: 3;
}
body[data-concept=dune] #process li[data-slot="4"] {
  grid-column: 3;
  grid-row: 4;
}
body[data-concept=dune] #process li[data-slot="8"] {
  grid-column: 1;
  grid-row: 1;
}
body[data-concept=dune] #process li[data-slot="7"] {
  grid-column: 1;
  grid-row: 2;
}
body[data-concept=dune] #process li[data-slot="6"] {
  grid-column: 1;
  grid-row: 3;
}
body[data-concept=dune] #process li[data-slot="5"] {
  grid-column: 1;
  grid-row: 4;
}
body[data-concept=dune] #process li[data-slot="5"],
body[data-concept=dune] #process li[data-slot="6"],
body[data-concept=dune] #process li[data-slot="7"],
body[data-concept=dune] #process li[data-slot="8"] {
  text-align: end;
  justify-self: end;
}
@media (max-width: 1340px) {
  body[data-concept=dune] #process .pr-wheel {
    --ring: 460px;
    --rail: 250px;
    column-gap: 36px;
  }
  body[data-concept=dune] #process .workshop-list h4 {
    font-size: 16px;
  }
}
@media (max-width: 1100px) {
  body[data-concept=dune] #process .pr-wheel {
    --ring: 400px;
    --rail: 236px;
    column-gap: 32px;
  }
  body[data-concept=dune] #process .pr-hub img {
    inline-size: 96px;
  }
  body[data-concept=dune] #process .pr-hub span {
    font-size: 12px;
  }
  body[data-concept=dune] #process .pr-n {
    font-size: 18px;
  }
  body[data-concept=dune] #process .workshop-list h4 {
    font-size: 16px;
  }
}
@media (max-width: 900px) {
  body[data-concept=dune] #process .pr-wheel {
    display: block;
    inline-size: auto;
    margin-block-start: 48px;
  }
  body[data-concept=dune] #process .pr-wheel .workshop-heading {
    position: static;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
    margin-block-end: 28px !important;
  }
  body[data-concept=dune] #process .pr-ring {
    inline-size: min(360px, 100%);
    block-size: auto;
    aspect-ratio: 1;
    margin-block: 0 40px;
    margin-inline: auto;
  }
  body[data-concept=dune] #process .pr-hub img {
    inline-size: 88px;
  }
  body[data-concept=dune] #process .pr-hub span {
    font-size: 12px;
  }
  body[data-concept=dune] #process .pr-n {
    font-size: 17px;
  }
  body[data-concept=dune] #process .workshop-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    border-block-start: 1px solid var(--pr-rule);
  }
  body[data-concept=dune] #process .workshop-list li {
    max-inline-size: none;
    padding-block: 18px 20px;
    border-block-end: 1px solid var(--pr-rule);
    text-align: start !important;
    justify-self: stretch !important;
  }
  body[data-concept=dune] #process .workshop-list li[data-slot] {
    grid-column: auto;
    grid-row: auto;
  }
  body[data-concept=dune] #process .workshop-list li[data-slot="1"] {
    order: 1;
  }
  body[data-concept=dune] #process .workshop-list li[data-slot="2"] {
    order: 2;
  }
  body[data-concept=dune] #process .workshop-list li[data-slot="3"] {
    order: 3;
  }
  body[data-concept=dune] #process .workshop-list li[data-slot="4"] {
    order: 4;
  }
  body[data-concept=dune] #process .workshop-list li[data-slot="5"] {
    order: 5;
  }
  body[data-concept=dune] #process .workshop-list li[data-slot="6"] {
    order: 6;
  }
  body[data-concept=dune] #process .workshop-list li[data-slot="7"] {
    order: 7;
  }
  body[data-concept=dune] #process .workshop-list li[data-slot="8"] {
    order: 8;
  }
  body[data-concept=dune] #process .workshop-list h4 {
    font-size: 17px;
  }
}
@media (max-width: 760px) {
  body[data-concept=dune] #process {
    padding-block: 64px 72px;
  }
  body[data-concept=dune] #process .pr-wheel {
    display: block;
    inline-size: auto;
    margin-block-start: 40px;
  }
  body[data-concept=dune] #process .pr-wheel .workshop-heading {
    position: static;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
    margin-block-end: 24px !important;
  }
  body[data-concept=dune] #process .pr-ring {
    inline-size: 260px;
    block-size: 260px;
    margin-block: 0 32px;
    margin-inline: auto;
  }
  body[data-concept=dune] #process .pr-hub img {
    inline-size: 72px;
  }
  body[data-concept=dune] #process .pr-hub span {
    font-size: 10px;
  }
  body[data-concept=dune] #process .pr-n {
    font-size: 15px;
  }
  body[data-concept=dune] #process .workshop-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-block-start: 1px solid var(--pr-rule);
  }
  body[data-concept=dune] #process .workshop-list li {
    max-inline-size: none;
    padding-block: 18px 20px;
    border-block-end: 1px solid var(--pr-rule);
    text-align: start !important;
    justify-self: stretch !important;
  }
  body[data-concept=dune] #process .workshop-list li[data-slot] {
    grid-column: 1;
    grid-row: auto;
  }
  body[data-concept=dune] #process .workshop-list h4 {
    font-size: 17px;
  }
}
/* Sand drift: one contour drawing in one ink for every block between the two dune plates, in the block's open
   corner and bleeding off its edge, never behind the copy; How carries its own drawings inside the folios. */
body[data-concept=dune] :is(#why, #what, #expertise, #clients, #testimonials, #process, #fees) {
  --drift-ink: oklch(61.53% 0.0658 77.49);
  position: relative;
  isolation: isolate;
  overflow: clip;
}
body[data-concept=dune] :is(#why, #what, #expertise, #clients, #testimonials, #process, #fees)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: var(--drift-w, 44%);
  block-size: var(--drift-h, 280px);
  background: var(--drift-ink);
  -webkit-mask: url('./assets/what-sand-contours.svg') left bottom / 100% auto no-repeat;
  mask: url('./assets/what-sand-contours.svg') left bottom / 100% auto no-repeat;
  /* the drawing is made for the lower-left corner; other corners mirror it */
  transform: scale(var(--drift-x, 1), var(--drift-y, 1));
  pointer-events: none;
}
/* upper right, beside the title of every one-column block */
body[data-concept=dune] :is(#why, #what, #clients, #process, #fees)::before {
  inset-block: 0 auto;
  inset-inline: auto 0;
  --drift-x: -1;
  --drift-y: -1;
}
/* lower right */
body[data-concept=dune] :is(#expertise, #testimonials)::before {
  inset-block: auto 0;
  inset-inline: auto 0;
  --drift-x: -1;
}
/* Per block: fit the drawing to the open space it fills. */
body[data-concept=dune] :is(#why, #what, #clients, #process, #fees) {
  --drift-h: 200px;
}
body[data-concept=dune] #expertise {
  --drift-w: 40%;
  --drift-h: 340px;
}
body[data-concept=dune] #testimonials {
  --drift-w: 40%;
  --drift-h: 320px;
}
body[data-concept=dune] #process {
  --drift-ink: oklch(53.98% 0.0692 75.66);
}
/* Narrow screens: the open corners shrink, so the drawing widens across the block and steps back. */
@media (max-width: 900px) {
  body[data-concept=dune] :is(#why, #what, #expertise, #clients, #testimonials, #process, #fees) {
    --drift-w: 75%;
    --drift-h: 200px;
  }
  body[data-concept=dune] :is(#why, #what, #expertise, #clients, #testimonials, #process, #fees)::before {
    opacity: .65;
  }
}
@media (max-width: 600px) {
  body[data-concept=dune] :is(#why, #what, #expertise, #clients, #testimonials, #process, #fees) {
    --drift-w: 100%;
    --drift-h: 160px;
  }
  body[data-concept=dune] :is(#why, #what, #expertise, #clients, #testimonials, #process, #fees)::before {
    opacity: .55;
  }
}