/* ARIV site stylesheet.
   Sections keep the original cascade order; later sections intentionally override earlier ones.
   Former files: styles, experience, story, about-method, laptop, navigation, motion, interaction. */

/* ==========================================================================
   Base, header, hero, ARIV Way, contact, dialog
   ========================================================================== */

/* DM Sans, self-hosted (SIL Open Font License). One variable file per script covers weights 400-700. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #f4f1eb;
  --ink: #0a0a0a;
  --burgundy: #681916;
  --muted: #87837c;
  --line: #dcdcd5;
  --dark: #151313;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  /* The page colour sits on the root too, so a page change never flashes white. */
  background: #f4f1eb;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
img {
  max-width: 100%;
  display: block;
}
::selection {
  background: var(--burgundy);
  color: white;
}
:focus-visible {
  outline: 2px solid #a44840;
  outline-offset: 6px;
}
/* Dialogs take focus themselves when they open (so no button shows a ring on touch); Tab reaches the controls. */
dialog:focus,
dialog:focus-visible {
  outline: none;
}
.wrap {
  width: min(1320px, calc(100% - 104px));
  margin-inline: auto;
}
.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  background: white;
  padding: 14px;
}
.skip:focus {
  top: 16px;
}
.header {
  left: 52px;
  right: 52px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.desktop-nav {
  display: flex;
  gap: 36px;
  margin-left: auto;
  margin-right: 32px;
  font-size: 15px;
}
.desktop-nav a {
  position: relative;
  padding-block: 10px;
}
.desktop-nav a:after {
  content: "";
  height: 2px;
  background: var(--burgundy);
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.desktop-nav a:hover:after,
.desktop-nav a:focus-visible:after {
  transform: scaleX(1);
}
.button {
  display: inline-flex;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border: 1px solid var(--burgundy);
  border-radius: 8px;
  padding: 8px 8px 8px 20px;
  min-height: 48px;
  color: var(--burgundy);
  font-size: 15px;
}
.button:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--burgundy);
  transform: translateX(101%);
  transition: transform 0.35s var(--ease);
}
.button-label {
  transition: color 0.2s;
}
.button-arrow {
  display: block;
  position: relative;
  background: var(--burgundy);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  font-size: 23px;
}
.button-arrow span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.35s var(--ease);
}
.button-arrow span + span {
  transform: translate(-100%, 100%);
}
.button:hover:before,
.button:focus-visible:before {
  transform: translateX(0);
}
.button:hover,
.button:focus-visible {
  color: white;
}
.button:hover .button-arrow span:first-child,
.button:focus-visible .button-arrow span:first-child {
  transform: translate(100%, -100%);
}
.button:hover .button-arrow span + span,
.button:focus-visible .button-arrow span + span {
  transform: translate(0, 0);
}
.menu-toggle {
  display: none;
}
.mobile-menu[hidden] {
  display: none;
}
.hero {
  padding-bottom: 32px;
}
.eyebrow,
.section-tag {
  font-size: 12px;
  letter-spacing: 0.055em;
  font-weight: 550;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.small-mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--burgundy);
}
.hero-grid {
  display: grid;
  gap: 65px;
  align-items: end;
}
h1 {
  font-size: clamp(64px, 7.9vw, 116px);
  line-height: 1.01;
  letter-spacing: -0.07em;
  margin: 0;
}
.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.075em;
  margin-bottom: -0.075em;
}
.line > span {
  display: block;
}
.hero-copy {
  margin: 0 0 22px auto;
}
.hero-copy p {
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.035em;
  margin: 0 0 30px;
}
.text-link {
  display: inline-flex;
  gap: 28px;
  align-items: center;
  font-size: 15px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.text-link > span[aria-hidden="true"] {
  font-size: 23px;
  transition: transform 0.25s var(--ease);
}
.text-link:hover {
  color: var(--burgundy);
  border-color: var(--burgundy);
}
.text-link:hover > span[aria-hidden="true"] {
  transform: translate(3px, -3px);
}
.hero-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #6d6d66;
}
.hero-bottom a {
  display: flex;
  gap: 22px;
}
.hero-bottom a span {
  font-size: 18px;
  line-height: 1;
}
.connection {
  color: var(--paper);
  margin: 0 16px;
  position: relative;
  display: grid;
  place-items: center;
}
.connection-top,
.connection-bottom {
  position: absolute;
  left: 38px;
  right: 38px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.05em;
  z-index: 2;
}
.connection-top {
  top: 32px;
}
.connection-bottom {
  bottom: 27px;
}
.connection-bottom > span:last-child {
  font-size: 22px;
}
.module-art {
  position: absolute;
  width: 420px;
  height: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  transform: rotate(-7deg);
  opacity: 0.9;
}
.module {
  border: 2px solid #83867b;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
}
.module-d {
  background: var(--burgundy);
}
.module-glow {
  position: absolute;
  inset: -60%;
  background: radial-gradient(ellipse, #d78b6380 0%, #93312e50 32%, transparent 60%);
  animation: drift 18s ease-in-out infinite alternate;
}
.connection-copy {
  position: relative;
  z-index: 1;
  text-align: center;
}
.connection-copy p {
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 450;
  margin: 0 0 24px;
}
.connection-copy em {
  font-style: normal;
}
.connection-copy > span {
  font-size: 14px;
  color: #b4b4ab;
}
.company {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}
.section-tag {
  display: block;
}
h2 {
  font-weight: 450;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.13;
  letter-spacing: -0.05em;
  margin: 0 0 32px;
}
.contact {
  position: relative;
  background: var(--burgundy);
  color: var(--paper);
  padding-top: 64px;
  overflow: hidden;
}
.contact > .wrap {
  position: relative;
  z-index: 2;
}
.contact-top {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 85px;
}
.contact h2 {
  font-size: clamp(58px, 8vw, 120px);
  line-height: 1.03;
  letter-spacing: -0.06em;
  margin: 0;
}
.contact h2 em {
  font-style: normal;
  color: #c89387;
}
.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 0;
  font-size: 13px;
}
.footer > a:first-child {
  font-size: 16px;
}
.contact-glow {
  pointer-events: none;
  position: absolute;
  width: 650px;
  height: 650px;
  top: 0;
  right: -200px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #af544c70, transparent 67%);
  transition: transform 0.8s ease-out;
}
@keyframes drift {
  to {
    transform: translate(18%, 20%) rotate(40deg);
  }
}
@media (min-width: 1600px) {
  .header {
    left: calc((100% - 1320px) / 2);
    right: calc((100% - 1320px) / 2);
  }
}
@media (max-width: 950px) {
  .wrap {
    width: calc(100% - 56px);
  }
  .header {
    left: 28px;
    right: 28px;
    gap: 20px;
  }
  .desktop-nav {
    gap: 20px;
    margin-right: 0;
  }
  .hero-grid {
    gap: 30px;
  }
  .hero-copy p {
    font-size: 18px;
  }
  h1 {
    font-size: 8.5vw;
  }
  .company {
    grid-template-columns: 1fr 2.6fr;
    gap: 30px;
  }
  .contact-top > span:last-child {
    max-width: 180px;
    text-align: right;
  }
}
@media (max-width: 700px) {
  .wrap {
    width: calc(100% - 40px);
  }
  .header {
    left: 20px;
    right: 20px;
  }
  .desktop-nav,
  .header-contact {
    display: none;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    background: none;
    border: 0;
    font-size: 15px;
    padding: 8px;
  }
  .menu-toggle span {
    font-size: 26px;
    line-height: 1;
  }
  .mobile-menu {
    inset: 85px 12px auto;
    background: var(--paper);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 20px 50px #0002;
    font-size: 26px;
    letter-spacing: -0.04em;
  }
  .hero {
    padding-bottom: 26px;
  }
  .hero-eyebrow {
    font-size: 12px;
    margin-bottom: 28px;
  }
  .hero-grid {
    display: block;
  }
  h1 {
    font-size: clamp(54px, 12vw, 83px);
    line-height: 1.06;
    letter-spacing: -0.06em;
  }
  .hero-copy {
    margin: 34px 0 0;
  }
  .hero-copy p {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .hero-bottom {
    justify-content: flex-end;
    font-size: 12px;
  }
  .hero-bottom > span {
    display: none;
  }
  .connection-top,
  .connection-bottom {
    left: 20px;
    right: 20px;
    font-size: 12px;
  }
  .module-art {
    width: 270px;
    height: 270px;
    gap: 16px;
  }
  .module {
    border-radius: 20px;
  }
  .connection-copy > span {
    font-size: 12px;
  }
  .company {
    display: block;
  }
  .company > .section-tag {
    margin-bottom: 32px;
  }
  h2 {
    font-size: 36px;
  }
  .contact {
    padding-top: 34px;
  }
  .contact-top {
    margin-bottom: 64px;
  }
  .contact-top > span:last-child {
    display: none;
  }
  .contact h2 {
    font-size: clamp(49px, 10.7vw, 75px);
  }
  .footer {
    flex-wrap: wrap;
    font-size: 12px;
    gap: 24px;
  }
  .footer > a:first-child {
    width: 100%;
    font-size: 17px;
  }
  .footer > a:last-child {
    margin-left: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .module-art {
    opacity: 0.15;
  }
}
.capabilities {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 9%;
  padding-block: 30px 70px;
  align-items: start;
}
.approach {
  margin: 0 16px;
}
.applications {
  padding-block: 140px;
}
.applications-heading {
  display: grid;
  gap: 35px;
  align-items: start;
  margin-bottom: 60px;
}
.applications-heading h2 {
  font-size: 46px;
  margin: 0;
}
.applications-heading p {
  margin: 5px 0 0;
  font-size: 17px;
  color: #64675a;
  max-width: 280px;
}
.application {
  border-top: 1px solid #d4d6cb;
}
.application:last-child {
  border-bottom: 1px solid #d4d6cb;
}
.application summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  align-items: center;
}
.application summary::-webkit-details-marker {
  display: none;
}
.application h3 {
  font-size: 36px;
  line-height: 1.2;
  font-weight: 450;
  letter-spacing: -0.045em;
  margin: 0;
  transition:
    color 0.2s,
    transform 0.35s var(--ease);
}
.application summary:hover h3 {
  color: var(--burgundy);
  transform: translateX(6px);
}
dialog {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  width: min(620px, calc(100% - 24px));
  max-height: 90dvh;
  padding: 44px;
  box-shadow: 0 40px 100px #0003;
}
dialog::backdrop {
  background: #11170e80;
  backdrop-filter: blur(8px);
}
dialog h2 {
  font-size: 43px;
  margin: 22px 0 18px;
}
.dialog-close {
  position: absolute;
  right: 19px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
}
.form-intro,
.form-note {
  font-size: 14px;
  color: #666b5a;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
form label {
  display: block;
  font-size: 13px;
  margin: 18px 0 0;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 10px 12px;
  background: #ebede4;
  border: 1px solid #d3d7c8;
  border-radius: 5px;
  color: var(--ink);
  font-size: 16px;
}
textarea {
  resize: vertical;
}
.optional {
  color: #787c6e;
}
.form-submit {
  background: none;
  margin-top: 23px;
  width: 100%;
}
.form-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#form-status {
  font-size: 14px;
  color: var(--burgundy);
}
#form-status:empty {
  display: none;
}
body.dialog-open {
  overflow: hidden;
}
@media (max-width: 950px) {
  .capabilities {
    gap: 5%;
    grid-template-columns: 1fr 1.7fr;
  }
  .applications-heading p {
    grid-column: 2;
    max-width: none;
  }
  .application h3 {
    font-size: 29px;
  }
}
@media (max-width: 700px) {
  .capabilities {
    display: block;
    padding-block: 0 20px;
  }
  .approach {
    margin: 0 8px;
  }
  .applications {
    padding-block: 85px;
  }
  .applications-heading {
    margin-bottom: 35px;
  }
  .applications-heading h2 {
    font-size: 37px;
    margin-top: 28px;
  }
  .applications-heading p {
    font-size: 16px;
    margin-top: 20px;
  }
  dialog {
    padding: 30px 24px;
  }
  dialog h2 {
    font-size: 35px;
  }
  .form-grid {
    display: block;
  }
}

.header {
  top: 22px;
}
.hero {
  padding-top: 188px;
}
.hero-grid {
  grid-template-columns: 1.6fr 1fr;
}
.hero-copy {
  max-width: 320px;
}
h1 {
  font-size: clamp(64px, 8.5vw, 126px);
  font-weight: 450;
}
.hero-bottom {
  margin-top: 65px;
  margin-bottom: 10px;
}
.connection {
  max-height: 920px;
  border-radius: 10px;
}
.connection:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.connection-copy {
  pointer-events: none;
  opacity: 0;
}
.connection-copy .section-tag {
  margin-bottom: 32px;
  color: #ccac9e;
}
.connection-copy p {
  font-size: clamp(50px, 8vw, 116px);
}
.company {
  padding-block: 160px;
}
@media (max-width: 700px) {
  .header {
    top: 16px;
  }
  .hero {
    padding-top: 142px;
  }
  .hero h1 {
    font-size: clamp(54px, 12vw, 83px);
  }
  .hero-copy {
    max-width: 350px;
  }
  .connection-copy p {
    font-size: 54px;
  }
  .connection-copy > span:last-child {
    display: block;
    max-width: 260px;
    margin: auto;
  }
  .company {
    padding-block: 90px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .connection-copy {
    opacity: 1;
  }
}

/* ==========================================================================
   Applications list, workflow lab, contact button
   ========================================================================== */
.desktop-nav a {
  transition: color 0.25s;
}
.desktop-nav a:hover {
  color: var(--burgundy);
}
/* Restored four-module scene. Explicit bounds prevent margin/pinning width drift. */
.connection {
  width: calc(100% - 32px);
  max-width: calc(100% - 32px);
  margin-inline: 16px;
  height: 730px;
  min-height: 0;
  background: var(--dark);
  overflow: hidden;
  isolation: isolate;
}
.connection:before {
  background: radial-gradient(ellipse at 70% 65%, #68191618, transparent 60%);
}
.connection-copy {
  max-width: calc(100% - 40px);
}
.connection-copy p {
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.13;
  letter-spacing: -0.055em;
}
.connection-top,
.connection-bottom {
  color: #a1a29a;
}
.module {
  border-width: 2px;
  box-shadow: inset 0 1px 0 #ffffff0c;
}
.module-d {
  border: 0;
  box-shadow: inset 0 0 50px #a4443130;
}
@media (max-width: 700px) {
  .connection {
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    margin-inline: 8px;
    height: 560px;
  }
  .connection-copy p {
    font-size: clamp(29px, 8.5vw, 37px);
  }
}

/* ==========================================================================
   Story chapters and system canvas
   ========================================================================== */
.story-chapter {
  min-height: 650px;
  padding-block: 80px 120px;
  scroll-margin-top: 105px;
}
.story-chapter h3 {
  font-size: clamp(40px, 4.1vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.055em;
  font-weight: 450;
  margin: 30px 0 25px;
}
.story-chapter p {
  font-size: 18px;
  color: #746b62;
  max-width: 370px;
}
.story-chapter ul {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  font-size: 14px;
  max-width: 340px;
}
.story-chapter li {
  padding: 11px 0;
  border-bottom: 1px solid #dcd5cb;
}
.story-chapter li:before {
  content: "+";
  color: var(--burgundy);
  margin-right: 15px;
}
.story-visual {
  position: sticky;
  top: 110px;
  min-width: 0;
  padding-top: 15px;
}
.story-controls {
  display: flex;
  gap: 25px;
  border-bottom: 1px solid #d8cfc3;
  margin-bottom: 18px;
}
.story-controls a {
  font-size: 13px;
  padding: 12px 0;
  color: #8b8073;
  position: relative;
}
.story-controls a:after {
  content: "";
  position: absolute;
  bottom: -1px;
  height: 2px;
  left: 0;
  right: 0;
  background: var(--burgundy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.story-controls a[aria-current="true"] {
  color: var(--burgundy);
}
.story-controls a[aria-current="true"]:after {
  transform: scaleX(1);
}
.system-canvas {
  height: auto;
  aspect-ratio: 1.15;
  position: relative;
  background: #e9e3d9;
  overflow: hidden;
  border-radius: 4px;
  isolation: isolate;
  --product: 0;
}
.map-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #ae9682;
  stroke-width: 1;
  stroke-dasharray: 4 5;
  opacity: calc(1 - var(--product));
}
.system-tile {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid #9b8270;
  border-radius: 14px;
  background: #eee9e1;
  box-shadow: 0 10px 25px #4e34240b;
  width: 30%;
  height: 27%;
  left: 12%;
  top: 11%;
  transform: rotate(-8deg);
  overflow: hidden;
}
.avatars {
  display: flex;
  margin-top: 12px;
  padding-left: 4px;
}
.avatars i {
  font-style: normal;
  font-size: 8px;
  width: 26px;
  height: 26px;
  border: 2px solid #f7f3ed;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ddc3b3;
  color: #6d3a29;
  margin-left: -4px;
}
.avatars i:nth-child(2) {
  background: #cfcab9;
}
.avatars i:nth-child(3) {
  background: #e4d0c6;
}
.task-line {
  font-size: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  width: 100%;
  color: #74655a;
}
.task-line i {
  width: 4px;
  height: 4px;
  background: #ae9380;
  border-radius: 50%;
}
.task-line b {
  margin-left: auto;
  color: var(--burgundy);
  font-weight: 400;
}
.mini-chart {
  display: flex;
  align-items: end;
  gap: 6px;
  flex: 1;
  min-height: 20px;
  width: 100%;
  margin-top: 12px;
}
.mini-chart i {
  height: 30%;
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: #b18d7a;
}
.mini-chart i:nth-child(2) {
  height: 55%;
}
.mini-chart i:nth-child(3) {
  height: 42%;
}
.mini-chart i:nth-child(4) {
  height: 72%;
}
.mini-chart i:nth-child(5) {
  height: 60%;
}
.mini-chart i:nth-child(6) {
  height: 90%;
  background: var(--burgundy);
}
.chapter-mobile-art {
  display: none;
}
.application summary {
  grid-template-columns: 1fr 40px;
  gap: 10px;
  padding: 32px 0;
}
.application h3 {
  font-size: clamp(26px, 3vw, 42px);
}
.preview-scene {
  min-height: 420px;
}
.preview-scene[hidden] {
  display: none;
}
.preview-scene p {
  font-size: clamp(28px, 3vw, 45px);
  line-height: 1.12;
  letter-spacing: -0.045em;
  margin: 0 30px 30px;
}
.preview-scene em {
  color: #9d7b67;
  font-style: normal;
}
.map-streets {
  stroke: #655043;
  stroke-width: 1;
  fill: none;
  opacity: 0.45;
}
.route-path {
  fill: none;
  stroke: #c79872;
  stroke-width: 3;
  stroke-dasharray: 600;
  stroke-dashoffset: 0;
}
.applications-heading {
  grid-template-columns: 1fr 1.3fr 1fr;
}
.application.active summary h3 {
  color: var(--burgundy);
}
@media (min-width: 701px) and (max-height: 760px) {
  .story-visual {
    top: 100px;
  }
  .system-canvas {
    aspect-ratio: 1.5;
  }
  .task-line {
    margin-top: 5px;
  }
  .avatars {
    margin-top: 6px;
  }
  .story-chapter {
    min-height: 600px;
  }
}
@media (max-width: 1000px) {
  .story-chapter h3 {
    font-size: 40px;
  }
  .story-chapter p {
    font-size: 16px;
  }
  .task-line {
    font-size: 7px;
    margin-top: 6px;
  }
  .preview-scene p {
    margin-inline: 22px;
  }
}
@media (max-width: 700px) {
  .story-visual {
    display: none;
  }
  .story-chapter {
    min-height: 0;
    padding: 35px 0 50px;
  }
  .story-chapter + .story-chapter {
    border-top: 1px solid var(--line);
  }
  .story-chapter h3 {
    font-size: 44px;
  }
  .story-chapter p {
    font-size: 17px;
  }
  .chapter-mobile-art {
    display: block;
    margin-top: 30px;
  }
  .chapter-mobile-art .system-canvas {
    aspect-ratio: 1.05;
  }
  .chapter-mobile-art .task-line {
    font-size: 8px;
  }
  .application h3 {
    font-size: 30px;
  }
  .preview-scene {
    min-height: 370px;
  }
  .preview-scene p {
    font-size: 34px;
  }
  .applications-heading {
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-chapter {
    min-height: 0;
    padding-block: 45px;
  }
  .story-visual {
    position: relative;
    top: 0;
  }
  .preview-scene {
    animation: none;
  }
}
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .story-chapter {
    min-height: max(650px, 85svh);
  }
}
@media (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .story-visual {
    display: none;
  }
  .story-chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 70px;
  }
  .story-chapter > h3,
  .story-chapter > p,
  .story-chapter > ul,
  .story-chapter > a {
    grid-column: 1;
  }
  .chapter-mobile-art {
    display: block;
    grid-column: 2;
    grid-row: 1/7;
    align-self: center;
  }
  .chapter-mobile-art .system-canvas {
    aspect-ratio: 1.1;
  }
}

/* ==========================================================================
   About cards and How we work
   ========================================================================== */
.about-intro {
  position: sticky;
  top: 135px;
}
.about-intro h2 {
  font-size: clamp(38px, 4.5vw, 66px);
  line-height: 1.05;
  margin: 30px 0;
  letter-spacing: -0.055em;
}
.about-intro em {
  font-style: normal;
  color: #8b8378;
}
.about-intro > p {
  font-size: 17px;
  line-height: 1.6;
  color: #746b60;
}
.about-card {
  position: sticky;
  top: 120px;
  min-height: 440px;
  padding: 32px 40px;
  background: #e7e1d6;
  border: 1px solid #cfc5b6;
  border-radius: 12px;
  margin-bottom: 30px;
  transform-origin: center top;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 25px #f4f1eb30;
}
.about-card:nth-child(2) {
  top: 143px;
  background: #d9c9bb;
  border-color: #c4ae9d;
}
.about-card:nth-child(3) {
  top: 166px;
  background: var(--burgundy);
  color: #f5ebe1;
  border-color: var(--burgundy);
  margin-bottom: 0;
}
.about-card h3 {
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  font-weight: 450;
  margin: 35px 0 23px;
}
.about-card > p {
  font-size: 18px;
  max-width: 440px;
  line-height: 1.55;
  color: #5e5347;
  margin: 0 0 35px;
}
.about-card:nth-child(3) > p {
  color: #d9b1a3;
}
.method {
  background: #e9e3d9;
  padding: 90px 0 45px;
  margin: 0;
  color: var(--ink);
}
.method-heading {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 25px 40px;
  padding-bottom: 70px;
  border-bottom: 1px solid #cfc3b4;
}
.method-heading > .section-tag {
  padding-top: 15px;
}
.method-heading h2 {
  font-size: clamp(52px, 7vw, 100px);
  line-height: 1.02;
  letter-spacing: -0.065em;
  margin: 0;
}
.method-heading h2 em {
  font-style: normal;
  color: var(--burgundy);
}
.method-heading > p {
  grid-column: 2;
  font-size: 17px;
  line-height: 1.55;
  color: #6e6155;
  margin: 0;
}
.method-copy {
  padding-top: 8px;
}
.method-copy > .section-tag {
  color: var(--burgundy);
}
.method-copy h3 {
  font-size: clamp(35px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.05em;
  font-weight: 450;
  margin: 25px 0;
}
.method-copy > p {
  max-width: 355px;
  font-size: 17px;
  line-height: 1.6;
  color: #6e6156;
}
.method-art {
  position: relative;
  min-height: 400px;
  padding: 20px 15px 45px;
  perspective: 1000px;
}
.brief-sheet,
.build-sheet {
  padding: 27px 30px;
  background: #f8f5ef;
  border: 1px solid #d1c5b6;
  box-shadow:
    12px 18px 0 #d7cbbd50,
    0 20px 30px #71503410;
  transform: rotate(3deg);
  transition: transform 0.6s var(--ease);
  border-radius: 3px;
}
.method-art h4 {
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.045em;
  font-weight: 450;
  margin: 28px 0;
}
.build-sheet {
  background: var(--burgundy);
  color: #f4dfce;
  border-color: #681916;
  transform: rotate(-3deg);
  box-shadow:
    12px 18px 0 #c4aa9450,
    0 20px 30px #71503410;
  min-height: 330px;
}
@media (max-width: 1000px) {
  .about-card {
    padding: 28px;
    min-height: 430px;
  }
  .about-card h3 {
    font-size: 39px;
  }
  .brief-sheet,
  .build-sheet {
    padding: 22px;
  }
  .method-art h4 {
    font-size: 29px;
  }
}
@media (min-width: 701px) and (max-height: 730px) {
  .about-card {
    min-height: 360px;
    padding: 25px 30px;
  }
  .about-card h3 {
    font-size: 39px;
    margin: 22px 0 17px;
  }
  .about-card > p {
    font-size: 16px;
    margin-bottom: 25px;
  }
  .about-intro {
    top: 110px;
  }
  .about-intro h2 {
    font-size: 43px;
  }
  .about-card {
    top: 100px;
  }
  .about-card:nth-child(2) {
    top: 118px;
  }
  .about-card:nth-child(3) {
    top: 136px;
  }
}
@media (max-width: 700px) {
  .about-intro {
    position: static;
  }
  .about-intro h2 {
    font-size: 46px;
  }
  .about-intro h2 br:nth-child(3) {
    display: none;
  }
  .about-intro > p {
    font-size: 16px;
  }
  .about-card,
  .about-card:nth-child(n) {
    position: relative;
    top: auto;
    min-height: 390px;
    margin-bottom: 18px;
    padding: 27px;
  }
  .about-card h3 {
    font-size: 39px;
  }
  .about-card > p {
    font-size: 17px;
  }
  .method {
    padding: 50px 0 35px;
  }
  .method-heading {
    display: block;
    padding-bottom: 40px;
  }
  .method-heading h2 {
    font-size: clamp(43px, 10.5vw, 68px);
    margin: 25px 0;
  }
  .method-heading > p {
    font-size: 16px;
  }
  .method-heading > p br {
    display: none;
  }
  .method-copy {
    padding: 0;
  }
  .method-copy h3 {
    font-size: 43px;
    margin-top: 20px;
  }
  .method-copy > p {
    max-width: none;
  }
  .method-art {
    padding: 10px 12px 15px;
    min-height: 0;
    max-width: 450px;
    width: 100%;
    margin: auto;
  }
  .method-art h4 {
    font-size: 34px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-intro {
    position: static;
  }
  .about-card,
  .about-card:nth-child(n) {
    position: relative;
    top: auto;
  }
  .brief-sheet,
  .build-sheet {
    transform: none;
  }
}

/* ==========================================================================
   Laptop proportions (701-1600px)
   ========================================================================== */

/* Laptop proportions: scale display elements, not the page or reading text. */
@media (min-width: 701px) and (max-width: 1600px) {
  .hero {
    padding-top: 145px;
    padding-bottom: 25px;
  }
  .hero h1 {
    font-size: clamp(3.5rem, 6.8vw, 6.25rem);
  }
  .hero-eyebrow {
    margin-bottom: 24px;
  }
  .hero-copy p {
    font-size: 1.125rem;
  }
  .hero-bottom {
    margin-top: 40px;
    margin-bottom: 0;
  }
  .header {
    top: 20px;
  }
  .connection {
    height: clamp(460px, 78svh, 620px);
  }
  .module-art {
    width: 340px;
    height: 340px;
    gap: 22px;
  }
  .connection-copy p {
    font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  }
  .about-intro {
    top: 105px;
  }
  .about-intro h2 {
    font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  }
  .about-card {
    min-height: 365px;
    padding: 26px 32px;
    top: 100px;
  }
  .about-card:nth-child(2) {
    top: 120px;
  }
  .about-card:nth-child(3) {
    top: 140px;
  }
  .about-card h3 {
    font-size: clamp(2rem, 3.1vw, 2.75rem);
    margin: 25px 0 18px;
  }
  .about-card > p {
    font-size: 1rem;
    margin-bottom: 25px;
  }
  .story-chapter {
    min-height: max(530px, 76svh);
    padding-block: 55px 80px;
  }
  .story-chapter h3 {
    font-size: clamp(2.125rem, 3.4vw, 3rem);
  }
  .story-visual {
    top: 95px;
  }
  .system-canvas {
    aspect-ratio: 1.4;
  }
  .method-heading {
    padding-bottom: 45px;
  }
  .method-heading h2 {
    font-size: clamp(2.75rem, 5.7vw, 5rem);
  }
  .method-copy h3 {
    font-size: clamp(2rem, 3.2vw, 2.875rem);
  }
  .method-art {
    min-height: 340px;
  }
  .contact h2 {
    font-size: clamp(3rem, 6.5vw, 6rem);
  }
}
@media (min-width: 701px) and (max-width: 1600px) and (prefers-reduced-motion: reduce) {
  .story-chapter {
    min-height: 0;
  }
  .about-card:nth-child(n) {
    top: auto;
  }
}

/* ==========================================================================
   Fixed full-width navigation and page headers
   ========================================================================== */

/* Shared, full-width navigation across every page. */
.header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  height: 88px;
  margin: 0;
  padding: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  z-index: 30;
  transition: box-shadow 0.25s;
}
.header.is-scrolled {
  box-shadow: 0 4px 20px #17171408;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 100%;
}
.header .desktop-nav {
  gap: 28px;
  margin-left: auto;
  margin-right: 0;
  font-size: 14px;
}
.desktop-nav a[aria-current="page"] {
  color: var(--burgundy);
}
.desktop-nav a[aria-current="page"]:after {
  transform: scaleX(1);
}
.header .header-contact {
  margin-left: 12px;
}
.mobile-menu {
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  border-radius: 0;
  z-index: 29;
  max-height: calc(100svh - 76px);
  overflow: auto;
}
.mobile-menu a[aria-current="page"] {
  color: var(--burgundy);
}
html {
  scroll-padding-top: 112px;
}
.about-intro h1 {
  font-size: clamp(38px, 4.5vw, 66px);
  line-height: 1.05;
  margin: 30px 0;
  letter-spacing: -0.055em;
}
.page-applications .applications {
  padding-top: 150px;
}
.applications-heading h1 {
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.13;
  letter-spacing: -0.05em;
  margin: 0 0 32px;
}
@media (min-width: 701px) and (max-width: 1600px) {
  .about-intro h1 {
    font-size: clamp(2.25rem, 3.6vw, 3.5rem);
  }
}
@media (min-width: 701px) and (max-width: 950px) {
  .header-inner {
    gap: 16px;
  }
  .header .desktop-nav {
    gap: 16px;
  }
  .header .header-contact {
    margin-left: 0;
    gap: 14px;
  }
}
@media (max-width: 700px) {
  .header {
    height: 76px;
  }
  .header-inner {
    justify-content: space-between;
  }
  .header .desktop-nav,
  .header .header-contact {
    display: none;
  }
  .menu-toggle {
    margin-left: auto;
  }
  .mobile-menu {
    padding: 25px 20px 30px;
  }
  .mobile-menu a {
    font-size: 24px;
    padding-block: 8px;
  }
  .about-intro h1 {
    font-size: 46px;
  }
  .about-intro h1 br:nth-child(3) {
    display: none;
  }
  .page-applications .applications {
    padding-top: 118px;
  }
  .applications-heading h1 {
    font-size: 42px;
  }
}
/* A modest spacing trim while retaining room for sticky scenes. */
@media (min-width: 701px) and (max-width: 1600px) {
  .method {
    padding-top: 55px;
  }
  .contact-top {
    margin-bottom: 45px;
  }
}

/* ==========================================================================
   Decode, word colour and link rollover effects
   ========================================================================== */

/* Text remains complete and legible without JavaScript. */
.motion-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.decode-letter {
  display: inline-grid;
  position: relative;
  white-space: pre;
}
.decode-width {
  visibility: hidden;
}
.decode-glyph {
  position: absolute;
  inset: 0;
  text-align: center;
}
.ink-word {
  --word-ink: var(--ink);
  display: inline-block;
  color: var(--word-ink);
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  overflow: visible;
}
.ink-word.is-pending {
  color: var(--muted);
}
.roll-label,
.text-link .roll-label {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  font: inherit;
  letter-spacing: inherit;
  line-height: 1.5;
  transform: none;
}
.roll-track,
.text-link .roll-track {
  display: block;
  position: relative;
  font: inherit;
  line-height: inherit;
  transform: none;
  transition: transform 0.35s var(--ease);
}
.roll-copy,
.text-link .roll-copy {
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  font: inherit;
  line-height: inherit;
  transform: none;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .roll-link:hover .roll-track,
  .text-link.roll-link:hover .roll-track {
    transform: translateY(-100%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .roll-link:focus-visible .roll-track,
  .text-link.roll-link:focus-visible .roll-track {
    transform: translateY(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ink-word,
  .ink-word.is-pending {
    color: var(--word-ink);
  }
  .roll-track,
  .text-link .roll-track {
    transform: none !important;
    transition: none;
  }
}
@media (forced-colors: active) {
  .ink-word,
  .ink-word.is-pending {
    color: CanvasText;
  }
}

/* ==========================================================================
   Workspace tiles and contact choices
   ========================================================================== */

.system-tile {
  transition:
    translate 0.3s var(--ease),
    border-color 0.3s,
    box-shadow 0.3s;
}
.system-tile.is-explored {
  border-color: var(--burgundy);
  box-shadow: 0 8px 20px #68191620;
  translate: 0 -4px;
  z-index: 3;
}
.tile-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: inherit;
  z-index: 5;
  cursor: pointer;
}
.tile-trigger:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: -4px;
}
.workspace-caption {
  font-size: 14px;
  line-height: 1.5;
  color: #766554;
  min-height: 3em;
  margin: 16px 0 0;
  max-width: 520px;
}
.workspace-caption strong {
  color: var(--burgundy);
  font-weight: 550;
}
.canvas-connected .system-tile:after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid #b78563;
  border-radius: inherit;
  pointer-events: none;
  animation: tile-signal 0.8s ease-out both;
}
@keyframes tile-signal {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.contact-invitation {
  padding-top: 54px;
}
.contact-invitation .contact-top {
  margin-bottom: 42px;
}
.contact-intro h2 {
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: 1.08;
}
.contact-intro > p {
  font-size: 17px;
  line-height: 1.6;
  color: #e1b9ad;
  margin: 28px 0 20px;
}
.contact-email {
  display: inline-block;
  font-size: 17px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e7bca67a;
}
.contact-email:hover {
  border-color: #fff;
}
.contact-footer {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 26px 0;
  border-top: 1px solid #ffffff30;
  font-size: 12px;
}
.contact-footer img {
  width: 88px;
  height: auto;
}
.contact-footer > span {
  margin-left: auto;
  color: #dfb9ac;
}
.contact-footer > a:last-child {
  padding-block: 12px;
}
@media (max-width: 1000px) {
  .contact-intro h2 {
    font-size: 46px;
  }
}
@media (max-width: 700px) {
  .contact-invitation {
    padding-top: 35px;
  }
  .contact-invitation .contact-top {
    margin-bottom: 30px;
  }
  .contact-intro h2 {
    font-size: clamp(42px, 10vw, 60px);
  }
  .contact-intro > p {
    margin: 20px 0 14px;
    font-size: 16px;
  }
  .contact-email {
    font-size: 16px;
  }
  .contact-footer {
    flex-wrap: wrap;
    gap: 20px;
  }
  .contact-footer img {
    width: 72px;
  }
  .contact-footer > span {
    margin-left: 0;
  }
  .contact-footer > a:last-child {
    margin-left: auto;
  }
  .workspace-caption {
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .system-tile {
    transition: none;
    translate: none !important;
  }
  .canvas-connected .system-tile:after {
    animation: none;
    opacity: 0;
  }
}

/* ==========================================================================
   Enquiry: copy email, booking link, sending and sent states
   ========================================================================== */

.copy-email {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.copy-button {
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: 99px;
  background: none;
  color: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  opacity: 0.8;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}
.copy-button:hover,
.copy-button:focus-visible,
.copy-button.is-copied {
  opacity: 1;
}
.form-note .copy-button {
  color: var(--burgundy);
}
.form-note .copy-button.is-copied {
  background: var(--burgundy);
  color: #fff;
}
.contact-routes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 28px;
}
.contact-routes .copy-button {
  color: #f6ede4;
}
.contact-routes .copy-button.is-copied {
  background: #f6ede4;
  color: var(--burgundy);
}
.contact-book,
.dialog-book {
  display: inline-flex;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-size: 17px;
}
.dialog-book {
  margin: 4px 0 6px;
  font-size: 15px;
  color: var(--burgundy);
}
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-submit:disabled {
  cursor: progress;
  opacity: 0.75;
}
.is-sending .form-submit .button-arrow span:first-child {
  animation: form-sending 0.9s var(--ease) infinite;
}
@keyframes form-sending {
  50% {
    transform: translate(100%, -100%);
  }
}
#form-status a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-done:not([hidden]) {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding-top: 26px;
  outline: none;
}
.is-sent .dialog-book,
.is-sent .form-intro {
  display: none;
}
.form-done h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 450;
  letter-spacing: -0.035em;
}
.form-done p {
  margin: 0;
  color: #5e5347;
}
.form-done .button {
  gap: 24px;
  background: none;
}
.form-done-mark {
  display: grid;
  grid-template-columns: repeat(2, 12px);
  gap: 4px;
}
.form-done-mark i {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--burgundy);
  border-radius: 3px;
}
.form-done-mark i:last-child {
  background: var(--burgundy);
}
@media (prefers-reduced-motion: no-preference) {
  .form-done:not([hidden]) .form-done-mark i {
    animation: form-done-in 0.5s var(--ease) both;
  }
  .form-done-mark i:nth-child(2) { animation-delay: 0.08s; }
  .form-done-mark i:nth-child(3) { animation-delay: 0.16s; }
  .form-done-mark i:nth-child(4) { animation-delay: 0.24s; }
}
@keyframes form-done-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-sending .form-submit .button-arrow span:first-child {
    animation: none;
  }
}

/* ==========================================================================
   Analytics consent (only present when partials/site.json has a GA4 ID)
   ========================================================================== */

.consent {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  width: min(420px, calc(100% - 32px));
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px #17171418;
  font-size: 14px;
  line-height: 1.5;
}
.consent p {
  margin: 0 0 14px;
}
.consent-actions {
  display: flex;
  gap: 10px;
}
.consent-actions button {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--burgundy);
  background: none;
  color: var(--burgundy);
  font-size: 14px;
}
.consent-actions button:first-child {
  background: var(--burgundy);
  color: #fff;
}
.cookie-settings {
  background: none;
  border: 0;
  padding: 12px 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Interaction polish (effects.js)
   ========================================================================== */

/* Header logo: inline so the squares can respond to scroll speed. */
.brand-logo {
  display: block;
  width: 76px;
  height: auto;
  overflow: visible;
}
.brand-square {
  transition: transform 0.5s var(--ease);
}
@media (max-width: 700px) {
  .brand-logo {
    width: 56px;
  }
}

/* Reading progress along the bottom edge of the header. */
.header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--burgundy);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

/* Headline line reveals reuse the hero's .line mask. */
.reveal-lines .line {
  display: block;
}

/* Magnetic buttons use the standalone translate property so existing hover transforms still apply. */
.is-magnetic {
  transition: translate 0.35s var(--ease);
}

/* Spotlight border that follows the pointer. */
.spotlight {
  isolation: isolate;
}
.spotlight::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--spot, #681916), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.spotlight.is-lit::after {
  opacity: 1;
}

/* Worksheets tilt toward the pointer on top of their existing straighten-on-hover. */
.method-art:hover .brief-sheet,
.method-art:hover .build-sheet {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

/* Label that follows the pointer over interactive illustrations. */
.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border-radius: 6px;
  background: var(--burgundy);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.05em;
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.2s, scale 0.25s var(--ease);
}
.cursor-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #fff;
}
.cursor-label.is-visible {
  opacity: 1;
  scale: 1;
}

/* Page transitions between Home, About and Applications (Chrome, Edge, Safari 18.2+). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  .header {
    view-transition-name: site-header;
  }
  ::view-transition-old(root) {
    animation: 0.25s var(--ease) both page-out;
  }
  ::view-transition-new(root) {
    animation: 0.45s var(--ease) both page-in;
  }
}
@keyframes page-out {
  to {
    opacity: 0;
  }
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-square,
  .is-magnetic {
    transition: none;
  }
  .header::after {
    display: none;
  }
}
.route-dot {
  fill: #f6ede4;
  stroke: #c79872;
  stroke-width: 3;
}

/* ==========================================================================
   "Where would we start?" diagnosis tool (diagnose.js)
   ========================================================================== */

.diagnose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: 60px;
  align-items: start;
  padding-block: 40px 120px;
}
.diagnose-intro h2 {
  margin: 26px 0 22px;
}
.diagnose-intro h2 em {
  font-style: normal;
  color: var(--burgundy);
}
.diagnose-intro p {
  max-width: 330px;
  margin: 0;
  font-size: 17px;
  color: #6e6156;
}
.diagnose-tool {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  padding: 36px;
  border-radius: 14px;
  min-height: 420px;
}
.diagnose-form,
.diagnose-result {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.diagnose-progress {
  display: none;
  height: 2px;
  margin-bottom: 28px;
  background: #d3c9bb;
}
.diagnose-progress span {
  display: block;
  height: 100%;
  background: var(--burgundy);
  transform: scaleX(var(--step, 0));
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.diagnose-step {
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  min-width: 0;
}
.diagnose-step legend {
  display: grid;
  gap: 8px;
  padding: 0;
  margin-bottom: 20px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.step-count {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #6e6156;
}
.diagnose-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.diagnose-options label {
  position: relative;
}
.diagnose-options input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.diagnose-options span {
  display: block;
  padding: 10px 16px;
  border: 1px solid #b9ad9e;
  border-radius: 99px;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
}
.diagnose-options-wide span {
  border-radius: 10px;
}
.diagnose-options label:hover span {
  border-color: var(--burgundy);
}
.diagnose-options input:checked + span {
  border-color: var(--burgundy);
}
.diagnose-options input:focus-visible + span {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
}
.diagnose-nav {
  display: none;
  gap: 12px;
  align-items: center;
}
.diagnose-nav button,
.diagnose-restart {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--burgundy);
  background: none;
  color: var(--burgundy);
  font-size: 15px;
}
.diagnose-nav .diagnose-next {
  background: var(--burgundy);
  color: #fff;
}
.diagnose-nav .diagnose-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.diagnose-fallback {
  margin: 22px 0 0;
  font-size: 14px;
  color: #6e6156;
}
.diagnose-fallback a {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.diagnose.is-enhanced .diagnose-progress {
  display: block;
}
.diagnose.is-enhanced .diagnose-nav {
  display: flex;
}
.diagnose.is-enhanced .diagnose-step {
  margin-bottom: 26px;
}

/* Four squares from the logo; the focus square takes the burgundy. */
.diagnose-visual {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
}
.diagnose-squares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 260px);
  aspect-ratio: 1;
  transition: gap 0.5s var(--ease), rotate 0.5s var(--ease);
}
.dq {
  display: grid;
  place-items: end start;
  padding: 12px;
  border: 2px solid #a99d8e;
  border-radius: 20px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #5e5347;
  transition: background-color 0.4s, border-color 0.4s, color 0.4s, opacity 0.4s, scale 0.5s var(--ease);
}
.dq b {
  font-weight: 500;
  transition: opacity 0.3s;
}
.dq:last-child {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
}
.diagnose[data-focus]:not([data-focus='']) .diagnose-squares {
  gap: 22px;
  rotate: 0deg;
}
.diagnose[data-focus]:not([data-focus='']) .dq b {
  opacity: 1;
}
.diagnose[data-focus]:not([data-focus='']) .dq:not(.is-focus) {
  background: transparent;
  border-color: #b9ad9e;
  color: #6e6156;
  opacity: 0.7;
}
.dq.is-focus {
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: #fff;
  scale: 1.08;
}

/* Result */
.diagnose-result {
  outline: none;
}
.diagnose-result h3 {
  margin: 14px 0 16px;
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 450;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.diagnose-result-tag {
  color: var(--burgundy);
}
.diagnose-result p {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.55;
  max-width: 460px;
}
.diagnose-result-size {
  color: #6e6156;
}
.diagnose-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 26px 0 18px;
}
.diagnose-discuss {
  background: none;
}
.diagnose-restart {
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.diagnose-result .diagnose-note {
  font-size: 13px;
  color: #6e6156;
}

@media (max-width: 1100px) {
  .diagnose {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .diagnose-intro p {
    max-width: 520px;
  }
}
@media (max-width: 700px) {
  .diagnose {
    padding-block: 20px 80px;
  }
  .diagnose-tool {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    min-height: 0;
  }
  .diagnose-visual {
    grid-column: 1;
    grid-row: 1;
  }
  .diagnose-form,
  .diagnose-result {
    grid-row: 2;
  }
  .diagnose-squares {
    width: 150px;
  }
  .diagnose[data-focus]:not([data-focus='']) .diagnose-squares {
    gap: 14px;
  }
  .dq {
    border-radius: 14px;
    padding: 8px;
    font-size: 11px;
  }
  .diagnose-step legend {
    font-size: 23px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .diagnose-squares,
  .dq,
  .dq b,
  .diagnose-progress span {
    transition: none;
  }
}

/* ==========================================================================
   Applications before/after comparison (applications.js)
   --split is how much of the "before" layer shows, from the left edge (0 to 100).
   ========================================================================== */



/* ==========================================================================
   Contact: heading on the left, a quiet text link and email on the right.
   On hover a hairline draws under the link and the arrow nudges.
   ========================================================================== */

/* At the bottom of the page the burgundy section fills the screen below the fixed header. */
.contact-invitation {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 88px);
  min-height: calc(100svh - 88px);
}
.contact-invitation > .wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.contact-body {
  margin-block: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px 80px;
  padding-bottom: 72px;
}
.contact .contact-title {
  margin: 0;
  font-size: clamp(44px, 5.4vw, 80px);
  line-height: 1.05;
}
.contact-actions {
  display: grid;
  gap: 18px;
  justify-items: start;
  padding-bottom: 10px;
}
.contact-start {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 0 10px;
  border: 0;
  background: none;
  color: #f6ede4;
  font-size: clamp(22px, 1.9vw, 28px);
  letter-spacing: -0.025em;
}
.contact-start::before,
.contact-start::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}
.contact-start::before {
  background: #f6ede440;
}
.contact-start::after {
  background: #f6ede4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.contact-start-arrow {
  font-size: 0.8em;
  transition: transform 0.45s var(--ease);
}
.contact-start:hover::after,
.contact-start:focus-visible::after {
  transform: scaleX(1);
}
.contact-start:hover .contact-start-arrow,
.contact-start:focus-visible .contact-start-arrow {
  transform: translate(3px, -3px);
}
.contact-start:focus-visible {
  outline: 2px solid #f6ede4;
  outline-offset: 6px;
}
.contact-routes {
  column-gap: 12px;
  font-size: 15px;
}
.contact-or {
  color: #e1b9ad;
}
.contact-routes .contact-email {
  font-size: 15px;
  padding-bottom: 2px;
}
@media (max-width: 700px) {
  .contact-invitation {
    min-height: calc(100vh - 76px);
    min-height: calc(100svh - 76px);
  }
}
@media (max-width: 800px) {
  .contact-body {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 48px;
  }
  .contact .contact-title {
    font-size: clamp(40px, 10vw, 56px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-start::after,
  .contact-start-arrow {
    transition: none;
  }
}

/* ==========================================================================
   Living backgrounds (shader.js) for the contact section and the ARIV Way.
   Each fades in over the flat colour; the contact pointer glow is hidden while it runs.
   ========================================================================== */

.liquid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.liquid-bg.is-ready {
  opacity: 1;
}
.contact.has-shader .contact-glow {
  display: none;
}

/* On-demand discovery-call booking. */
.booking-route {display:grid;gap:5px}
.booking-route .contact-book {font-size:17px;color:#f6ede4;text-decoration:none;border-bottom:1px solid #f6ede450;padding-bottom:5px}
.booking-route .contact-book:hover {border-color:#f6ede4}
.booking-route > span {font-size:14px;color:#e1b9ad}
[data-book-call]:focus-visible {outline:2px solid currentColor;outline-offset:5px}
body.booking-open {overflow:hidden}
#booking-dialog {width:min(1060px,calc(100% - 32px));height:min(850px,94dvh);max-height:94dvh;padding:0;overflow:hidden;background:#fff}
#booking-dialog[open] {display:flex;flex-direction:column}
.booking-header {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;border-bottom:1px solid #e5e1da;background:var(--paper)}
#booking-dialog h2 {font-size:22px;line-height:1.2;margin:0}
.booking-header p {font-size:14px;margin:5px 0 0;color:var(--muted)}
/* Cross drawn as SVG and centred by grid: iOS Safari pads buttons and sits a text "×" low in the circle. */
.booking-close {flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;padding:0;-webkit-appearance:none;appearance:none;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink)}
.booking-widget {flex:1;min-height:0;width:100%;overflow:auto}
.booking-widget iframe {width:100%;height:100%;min-height:100%;border:0}
.booking-status {font-size:14px;margin:0;padding:10px 24px;background:var(--paper)}
.booking-footer {display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 24px;font-size:14px;border-top:1px solid #e5e1da;background:var(--paper)}
.booking-footer a {margin-left:auto}
.booking-back {border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline}
.booking-back[hidden],.booking-status[hidden] {display:none}
@media(max-width:600px){#booking-dialog{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}.booking-header{padding:14px 16px}#booking-dialog h2{font-size:19px}.booking-footer{padding:12px 16px}.booking-status{padding:10px 16px}}
#booking-dialog.booking-delayed {height:auto}
.booking-delayed .booking-widget {flex:0;max-height:0;overflow:hidden}
.booking-delayed .booking-footer a {background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:6px}
.booking-delayed .booking-footer {align-items:center}

/* ==========================================================================
   Content update: home page sections, What we do page, stacked cards
   ========================================================================== */

.home-hero .hero-grid {
  grid-template-columns: 1.6fr 1fr;
  gap: 7%;
  align-items: end;
}
.home-hero h1 {
  font-size: clamp(46px, 5.3vw, 80px);
  line-height: 1.06;
  letter-spacing: -0.055em;
  max-width: 900px;
}
.home-hero h1 em {
  font-style: normal;
  color: var(--burgundy);
}
.home-hero .hero-copy {
  padding: 0;
  max-width: 440px;
}
.home-hero .hero-copy p {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 28px;
}
.hero-actions .text-link {
  font-size: 15px;
  margin: 0;
}
.connection-bottom a {
  color: inherit;
  text-underline-offset: 6px;
}
.services-intro em {
  font-style: normal;
  color: var(--burgundy);
}
.services-page {
  padding-top: 150px;
  padding-bottom: 70px;
}
.services-intro {
  padding: 25px 0 75px;
  border-bottom: 1px solid var(--line);
}
.services-intro h1 {
  font-size: clamp(43px, 5.4vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.05em;
  margin: 28px 0;
}
.services-intro > p {
  font-size: 18px;
  color: #5d5852;
}
.document-note {
  font-size: 14px;
  line-height: 1.5;
  color: #6e5c4c;
  margin: 20px 0 0;
}
@media (max-width: 1000px) {
  .home-hero .hero-grid {
    grid-template-columns: 1.3fr 1fr;
    gap: 5%;
  }
}
@media (max-width: 800px) {
  .home-hero .hero-grid {
    grid-template-columns: 1fr;
  }
  .home-hero h1 {
    max-width: 680px;
  }
  .home-hero .hero-copy {
    max-width: 620px;
    margin-top: 28px;
  }
  .services-page {
    padding-top: 110px;
  }
  .services-intro {
    padding-bottom: 40px;
  }
  .services-intro h1 {
    font-size: clamp(39px, 7.5vw, 62px);
  }
}
@media (max-width: 480px) {
  .home-hero h1 {
    font-size: 44px;
  }
  .connection-top span:last-child {
    display: none;
  }
  .hero-actions {
    gap: 18px;
  }
  .hero-actions .text-link {
    font-size: 14px;
  }
  .home-hero .hero-bottom > span {
    display: none;
  }
}
/* The content changes retain ARIV's expressive motion language. */
.home-hero h1 {
  font-size: clamp(50px, 6.2vw, 92px);
}
.connection-copy em {
  color: #d6b5ac;
}
.sector-section {
  padding-block: 95px 110px;
}
.sector-heading {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 50px;
}
.sector-heading h2 {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.055em;
  margin: 0;
}
.sector-heading h2 em {
  color: var(--burgundy);
  font-style: normal;
}
.sector-hint {
  grid-column: 2;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #75614e;
  display: flex;
  gap: 35px;
}
.sector-stack {
  position: relative;
  padding-bottom: 0;
}
.sector-card {
  position: sticky;
  top: calc(100px + var(--card) * 14px);
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4%;
  margin-bottom: 50px;
  background: #e9e2d8;
  border: 1px solid #cbbdad;
  border-radius: 14px;
  box-shadow: 0 -15px 40px #42301a0a;
  transform-origin: 50% 0;
  overflow: hidden;
}
.sector-1 {
  background: #e1e4dc;
}
.sector-2 {
  background: #dedbd6;
}
.sector-3 {
  background: #681916;
  color: #f5eee6;
  border-color: #681916;
}
.sector-copy {
  position: relative;
  z-index: 2;
}
.sector-copy h3 {
  font-size: clamp(28px, 3vw, 43px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.045em;
}
.sector-copy h3 em {
  color: #877561;
  font-style: normal;
}
.sector-3 h3 em {
  color: #cfa59b;
}
.sector-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: #625b53;
}
.sector-3 p {
  color: #e1c7bd;
}
.sector-art {
  height: 330px;
  position: relative;
}
.sector-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #90745f;
  stroke-width: 1;
  stroke-dasharray: 620;
  stroke-dashoffset: calc(620 * (1 - var(--joined)));
}
.scene-index {
  position: absolute;
  right: 0;
  top: -30px;
  font-size: 130px;
  line-height: 1;
  letter-spacing: -0.09em;
  opacity: 0.06;
}
.sector-node {
  position: absolute;
  width: 33%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #f8f5ef;
  border: 1px solid #c5b6a6;
  border-radius: 8px;
  color: #352a25;
  font-size: 13px;
  box-shadow: 0 15px 25px #3f24120c;
}
.sector-node i {
  font-size: 20px;
  font-style: normal;
  color: #681916;
}
.node-0 {
  left: 10%;
  top: 12%;
  transform: translate(-12px, -8px) rotate(-12deg);
}
.node-1 {
  right: 10%;
  top: 12%;
  transform: translate(12px, 15px) rotate(9deg);
}
.node-2 {
  left: 10%;
  bottom: 16%;
  transform: translate(-15px, 12px) rotate(6deg);
}
.node-3 {
  right: 10%;
  bottom: 16%;
  transform: translate(15px, -12px) rotate(-9deg);
}
.scene-outcome {
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  opacity: 0;
}
.process-scene {
  --scene-progress: 0;
  position: relative;
  min-height: 390px;
  padding: 22px;
  background: radial-gradient(ellipse at 80% 90%, #c7ab8f38, transparent 60%), #eee8df;
  border: 1px solid #d8c9b7;
  border-radius: 12px;
  overflow: hidden;
}
.services-intro {
  position: relative;
}
.services-intro:after {
  content: "\2198\FE0E";
  position: absolute;
  right: 0;
  bottom: 65px;
  font-size: 60px;
  color: var(--burgundy);
}
.scene-insight {
  font-size: 13px;
  line-height: 1.5;
  color: #705c4d;
  min-height: 39px;
  margin: 10px 0 0;
  border-top: 1px solid #cdbdaa;
  padding-top: 13px;
}
.process-scene button:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 5px;
}
@media (min-width: 801px) and (max-height: 740px) {
  .process-scene {
    min-height: 350px;
    padding: 18px;
  }
  .sector-art {
    height: 290px;
  }
}
@media (max-width: 800px) {
  .sector-heading {
    grid-template-columns: 1fr;
  }
  .sector-hint {
    grid-column: auto;
  }
  .sector-card {
    gap: 16px;
    grid-template-columns: 1fr;
    position: relative;
    top: auto;
    margin-bottom: 24px;
  }
  .sector-copy h3 {
    font-size: 32px;
  }
  .sector-art {
    max-width: 450px;
    margin: auto;
  }
  .sector-section {
    padding-block: 65px;
  }
  .sector-heading h2 {
    font-size: 46px;
  }
  .process-scene {
    --scene-progress: 1;
  }
  .services-intro:after {
    display: none;
  }
  .home-hero h1 {
    font-size: clamp(48px, 9vw, 72px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sector-card {
    position: relative;
    top: auto;
  }
  .sector-node,
  .sector-art svg,
  .scene-outcome {
    transition: none;
    transform: none;
  }
  .process-scene {
    --scene-progress: 1 !important;
  }
}
.sector-1 .sector-node {
  border-radius: 38px;
}
.sector-1 .sector-node i {
  font-size: 15px;
}
.sector-2 .sector-node:not(.node-3) {
  border-radius: 2px 15px 2px 2px;
}
.sector-2 .sector-node:not(.node-3):after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-left: 1px solid #c5b6a6;
  border-bottom: 1px solid #c5b6a6;
}
.sector-3 .sector-node {
  border-color: #e2c6b8;
}
.sector-3 .sector-art svg {
  stroke: #c8a394;
}
/* Focused exploration: concise cards, deliberate previews, clear selection. */
.sector-card {
  min-height: 410px;
  padding: 36px 42px;
}
.sector-copy h3 {
  font-size: clamp(29px, 3.2vw, 46px);
  margin: 24px 0 18px;
}
.sector-copy p {
  max-width: 350px;
}
.sector-art {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 12px;
  text-align: initial;
  perspective: 800px;
}
.art-content {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.25s ease;
}
.sector-art:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}
.sector-node {
  pointer-events: none;
}
.sector-card:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #681916;
  transform: scaleX(var(--read, 0));
  transform-origin: left;
}
.sector-3:after {
  background: #ddb5a5;
}
.diagnose-tool {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  gap: 20px 36px;
  border: 1px solid #d1c3b2;
  background: radial-gradient(ellipse at 95% 10%, #b48a6430, transparent 55%), #e9e3d9;
}
.diagnose-options span {
  transition:
    transform 0.2s,
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.diagnose-options label:hover span {
  background: #f9f6f0;
  transform: translateY(-3px);
  box-shadow: 0 7px 16px #5b301314;
}
.diagnose-options input:checked + span {
  background: var(--burgundy);
  color: #fff;
  box-shadow: 0 6px 16px #68191620;
}
.diagnose-options label:active span {
  transform: translateY(0);
}
.diagnose-visual {
  gap: 28px;
  align-self: center;
}
.diagnose-scene-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #806b56;
}
.diagnose-squares {
  rotate: 0deg;
  gap: 12px;
  transform: rotate(calc((1 - var(--diagnose-arrival, 1)) * -14deg)) scale(calc(0.9 + var(--diagnose-arrival, 1) * 0.1));
}
.dq {
  position: relative;
  min-width: 0;
}
.dq b {
  opacity: 1;
  font-size: 11px;
}
.dq:before {
  content: "+";
  position: absolute;
  left: 12px;
  top: 10px;
  font-size: 24px;
  font-weight: 300;
  opacity: 0.6;
  transition: transform 0.4s;
}
.dq.is-focus:before {
  transform: rotate(90deg);
}
.diagnose[data-question="2"] .diagnose-squares {
  gap: 22px;
}
.diagnose[data-question="3"] .dq {
  border-radius: 50%;
  padding: 20px 12px;
  place-items: center;
}
.diagnose.is-done .dq {
  border-radius: 20px;
}
.diagnose-preview {
  grid-column: 1/-1;
  grid-row: 2;
  border-top: 1px solid #cabbab;
  padding-top: 16px;
  margin: 0;
  color: #681916;
  font-size: 13px;
  line-height: 1.5;
  min-height: 38px;
}
.diagnose-nav button {
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.diagnose-nav button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #68191620;
}
.diagnose-nav button:focus-visible {
  outline: 2px solid #681916;
  outline-offset: 4px;
}
@media (max-width: 800px) {
  .sector-card {
    padding: 28px;
    min-height: 0;
  }
  .sector-copy p {
    max-width: none;
  }
  .sector-card:after {
    transform: none;
    opacity: 0.25;
  }
  .diagnose-tool {
    gap: 24px;
  }
  .diagnose-preview {
    grid-row: auto;
  }
  .diagnose-visual {
    gap: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .art-content,
  .sector-node i,
  .diagnose-options span,
  .dq:before,
  .diagnose-nav button {
    transition: none !important;
    transform: none !important;
  }
  .diagnose-squares {
    transform: none;
  }
  .sector-card:after {
    transform: none;
  }
}
@media (max-width: 800px) {
  /* Shorter pieces so the scattered layout never overlaps on narrow screens. */
  .sector-art {
    height: 260px;
  }
  .sector-node {
    height: 62px;
    gap: 8px;
    font-size: 12px;
  }
  .sector-node i {
    font-size: 16px;
  }
}
.sector-card:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Stacked cards: scroll connects the pieces (experience.js)
   --join runs from 0 (scattered) to 1 (connected). Scroll sets --scroll-join and the
   replay button sets --replay; without JS or with reduced motion the cards show connected.
   ========================================================================== */

.sector-card {
  --join: min(var(--scroll-join, 1), var(--replay, 1));
  --fill: clamp(0%, (var(--join) - 0.75) * 400%, 100%);
}
.sector-art {
  --joined: var(--join);
}
.sector-art svg {
  transition: none;
}
.node-0 {
  --dx: -34px;
  --dy: -18px;
  --rot: -13deg;
}
.node-1 {
  --dx: 30px;
  --dy: 22px;
  --rot: 10deg;
}
.node-2 {
  --dx: -30px;
  --dy: 20px;
  --rot: 8deg;
}
.node-3 {
  --dx: 34px;
  --dy: -20px;
  --rot: -11deg;
}
.sector-node {
  transform: translate(calc(var(--dx) * (1 - var(--join))), calc(var(--dy) * (1 - var(--join))))
    rotate(calc(var(--rot) * (1 - var(--join))));
  transition: none;
}
.sector-node i {
  transform: rotate(calc(var(--join) * 360deg));
  transition: none;
}
.sector-card .node-3 {
  background: color-mix(in srgb, #681916 var(--fill), #f8f5ef);
  color: color-mix(in srgb, #ffffff var(--fill), #352a25);
}
.sector-card .node-3 i {
  color: color-mix(in srgb, #ffffff var(--fill), #681916);
}
.sector-3 .node-3 {
  background: color-mix(in srgb, #d9b2a4 var(--fill), #f8f5ef);
  color: color-mix(in srgb, #681916 var(--fill), #352a25);
}
.scene-outcome {
  opacity: clamp(0, (var(--join) - 0.85) * 6.7, 1);
  transform: translateY(calc((1 - var(--join)) * 10px));
  transition: none;
}
/* The friction line warms to burgundy as the pieces connect. */
.sector-copy h3 em {
  color: color-mix(in srgb, var(--burgundy) calc(var(--join) * 100%), #877561);
}
.sector-3 h3 em {
  color: color-mix(in srgb, #f5eee6 calc(var(--join) * 100%), #cfa59b);
}

/* Progress rail at the page edge while the stack is on screen (wide screens only). */
.sector-rail {
  position: fixed;
  top: 50%;
  right: max(16px, calc((100vw - 1320px) / 2 - 44px));
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #75614e;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.4s;
  pointer-events: none;
}
.sector-rail.is-visible {
  opacity: 1;
}
.sector-rail-count {
  color: var(--burgundy);
}
.sector-rail-ticks {
  display: grid;
  gap: 6px;
  justify-items: center;
}
.sector-rail-ticks i {
  display: block;
  width: 2px;
  height: 18px;
  background: #cbbdad;
  transition: height 0.35s var(--ease), background-color 0.35s;
}
.sector-rail-ticks i.is-active {
  height: 34px;
  background: var(--burgundy);
}
@media (prefers-reduced-motion: reduce) {
  .sector-rail,
  .sector-rail-ticks i {
    transition: none;
  }
}

/* ==========================================================================
   In practice (applications.html): chapters with a pinned illustration whose
   data-state follows the scroll (applications.js).
   ========================================================================== */

.where-intro {
  padding-block: 150px 70px;
}
.where-intro h1 {
  margin: 28px 0 44px;
  font-size: clamp(46px, 6vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}
.where-intro h1 em,
.chapter-head h2 em {
  font-style: normal;
  color: var(--burgundy);
}
.where-intro-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 40px 8%;
  align-items: end;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.where-intro-foot p {
  margin: 0;
  max-width: 360px;
  font-size: 18px;
  line-height: 1.55;
  color: #5d5852;
}
.where-chapters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.where-chapters a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid #cec5b9;
  font-size: 18px;
  letter-spacing: -0.02em;
  transition: border-color 0.3s, color 0.3s;
}
.where-chapters a span {
  font-size: 12px;
  color: var(--burgundy);
}
.where-chapters a i {
  font-style: normal;
  transition: transform 0.35s var(--ease);
}
.where-chapters a:hover {
  color: var(--burgundy);
  border-color: var(--burgundy);
}
.where-chapters a:hover i {
  transform: translateY(4px);
}

/* Chapters */
.chapter {
  position: relative;
  padding-block: 90px 60px;
  scroll-margin-top: 90px;
}
.chapter-head {
  position: relative;
  display: grid;
  gap: 24px;
  margin-bottom: 20px;
}
.chapter-head .section-tag b {
  margin-right: 12px;
  font-weight: 500;
  color: var(--burgundy);
}
.chapter-log .chapter-head .section-tag b {
  color: #e2a797;
}
.chapter-head h2 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(38px, 4.9vw, 74px);
  line-height: 1.06;
  letter-spacing: -0.05em;
}
.chapter-log {
  margin-top: 40px;
  padding-block: 100px 70px;
  background: var(--dark);
  color: #efe7df;
  overflow: clip;
  isolation: isolate;
}
.chapter-log .chapter-head h2 em {
  color: #d9a99c;
}
.chapter-log .section-tag {
  color: #cdb8ab;
}

/* Scroll story: text steps on the left, pinned illustration on the right */
.step-label {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #75614e;
}
.step-label b {
  font-weight: 500;
  color: var(--burgundy);
}
.chapter-log .step-label {
  color: #cdb8ab;
}
.chapter-log .step-label b {
  color: #e2a797;
}

@keyframes tangle-flow {
  to { stroke-dashoffset: -100; }
}

@media (max-width: 900px) {
  .where-intro {
    padding-block: 120px 40px;
  }
  .where-intro-foot,
  .where-chapters {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   About: four principle cards and "Working with us"
   ========================================================================== */

.about-intro > p {
  max-width: 420px;
}
/* The fourth principle card: near-black, echoing the ARIV Way section. */
.about-card:nth-child(4) {
  top: 189px;
  background: var(--dark);
  color: #efe7df;
  border-color: var(--dark);
}
.about-card:nth-child(4) > p {
  color: #cdb8ab;
}
@media (min-width: 701px) and (max-width: 1600px) {
  .about-card:nth-child(4) {
    top: 160px;
  }
}
@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  .about-card:nth-child(4) {
    top: auto;
  }
}

.working {
  padding-block: 110px 120px;
  background: #e9e3d9;
}
@media (max-width: 900px) {
  .working {
    padding-block: 70px 80px;
  }
}

/* ==========================================================================
   What we do: the engagements table
   ========================================================================== */
.eng-no {
  display: block;
  margin-bottom: 10px;
}
.eng-note {
  margin-top: 16px;
}
.eng-note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #f5eee6;
}
/* A burgundy rule draws along the row you point at. */

/* Engagements now sit between the What we do intro and the How we work steps. */
.services-page .engagements {
  padding-block: 70px 90px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) {
  .services-page .engagements {
    padding-block: 40px 60px;
  }
}

/* What we do: one headline at the top; the engagements and steps get small labels instead. */

/* ==========================================================================
   About: the four squares of the mark are the four principles (about-method.js). They
   work as tabs; the chosen principle opens in a card beside the mark.
   ========================================================================== */

.principles-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 30px 8%;
  align-items: end;
  padding-block: 150px 90px;
}
.principles-copy h1 {
  margin: 26px 0 0;
  font-size: clamp(44px, 5.2vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}
.principles-copy h1 em {
  font-style: normal;
  color: #8b8378;
}
.principles-intro > p {
  max-width: 440px;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #5d5852;
}
.principles-board {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 6%;
  align-items: stretch;
  padding-bottom: 130px;
}
.principles-mark {
  display: grid;
  align-content: start;
  gap: 24px;
}
.principles-mark h2 {
  margin: 0;
}
.mark-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 24px);
  width: min(100%, 460px);
  aspect-ratio: 1;
}
.mark-square {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: clamp(14px, 1.6vw, 22px);
  border: 2px solid var(--ink);
  border-radius: clamp(18px, 2.4vw, 32px);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.45s var(--ease), background-color 0.3s, border-color 0.3s, color 0.3s;
}
.mark-square.is-accent {
  border-color: var(--burgundy);
  color: var(--burgundy);
}
.mark-square:hover {
  transform: translateY(-5px);
}
/* The chosen square takes its card's colour: light, warm, dark, burgundy. */
.mark-square[aria-selected="true"] {
  background: #e3d9cc;
}
#principle-tab-1[aria-selected="true"] {
  background: #d2bfae;
}
#principle-tab-2[aria-selected="true"] {
  background: var(--dark);
  color: #efe7df;
}
.mark-square.is-accent[aria-selected="true"] {
  background: var(--burgundy);
  color: #f5eee6;
}
.mark-square:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 4px;
}
.mark-no {
  font-size: 12px;
  letter-spacing: 0.08em;
}
.mark-name {
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Progress under the mark: shown only while scrolling steps through the principles */
.mark-progress {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(100%, 460px);
}
.mark-progress i {
  position: relative;
  height: 2px;
  background: #dcd2c5;
  overflow: hidden;
}
.mark-progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--burgundy);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
}

/* Desktop: the board stays on screen for a short stretch while scrolling steps through it */
.principles.is-live .principles-scroll {
  height: calc(100vh - var(--board-top, 88px) + 180vh);
}
.principles.is-live .principles-board {
  position: sticky;
  top: var(--board-top, 88px);
  height: calc(100vh - var(--board-top, 88px));
  align-content: center;
  padding-block: 40px;
}
.principles.is-live .principle-panel {
  min-height: 0;
}
.principles.is-live .mark-progress {
  display: grid;
}

/* The open principle: a card in the colour of its square */
.principle-panels {
  display: grid;
}
.principle-panel {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 100%;
  padding: clamp(30px, 4vw, 60px);
  border-radius: clamp(18px, 2.4vw, 32px);
  background: #e3d9cc;
  color: var(--ink);
  overflow: hidden;
  animation: panel-in 0.6s var(--ease);
}
#principle-1 {
  background: #d2bfae;
}
#principle-2 {
  background: var(--dark);
  color: #efe7df;
}
.principle-panel[hidden] {
  display: none;
}
.principle-panel.is-accent {
  background: var(--burgundy);
  color: #f5eee6;
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
.panel-no {
  position: absolute;
  top: clamp(20px, 3vw, 40px);
  right: clamp(24px, 3.4vw, 50px);
  font-size: clamp(110px, 13vw, 220px);
  line-height: 0.8;
  letter-spacing: -0.08em;
  opacity: 0.12;
}
.panel-copy {
  position: relative;
  display: grid;
  gap: 22px;
  padding-top: 90px;
}
.panel-copy .section-tag {
  color: inherit;
  opacity: 0.75;
}
.panel-copy h3 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 60px);
  font-weight: 450;
  line-height: 1.06;
  letter-spacing: -0.05em;
}
.panel-copy p {
  max-width: 520px;
  margin: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  opacity: 0.85;
}

/* Working with us: a plain statement, its three commitments underlined */
.statement {
  display: grid;
  gap: 28px;
  padding-bottom: 80px;
  border-bottom: 1px solid #cdbfae;
}
.statement h2 {
  margin: 0;
}
.fill-text {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(28px, 3.3vw, 50px);
  line-height: 1.25;
  letter-spacing: -0.035em;
}
.fill-text mark {
  background: linear-gradient(var(--burgundy), var(--burgundy)) 0 100% / 100% 2px no-repeat;
  color: inherit;
  padding-bottom: 2px;
}

/* Ownership: legend beside a layered diagram */

@media (max-width: 900px) {
  .principles-intro {
    grid-template-columns: 1fr;
    padding-block: 120px 50px;
  }
  .principles-board {
    grid-template-columns: 1fr;
    padding-bottom: 90px;
  }
  .mark-grid {
    width: min(100%, 360px);
  }
  .principle-panel {
    min-height: 0;
  }
  .panel-copy {
    padding-top: 70px;
  }
  /* Phones and tablets: the board holds too, so the mark becomes a small 2x2 beside the title and
     progress, and the card fills the rest of the screen. svh keeps the height steady while the
     iOS address bar shows and hides. */
  .principles.is-live .principles-scroll {
    height: calc(100svh - var(--board-top, 76px) + 200svh);
  }
  .principles.is-live .principles-board {
    height: calc(100svh - var(--board-top, 76px));
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 16px;
    padding-block: 16px 20px;
  }
  .principles.is-live .principles-mark {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "grid tag" "grid progress";
    align-content: center;
    gap: 12px 18px;
  }
  .principles.is-live .principles-mark h2 {
    grid-area: tag;
    align-self: end;
  }
  .principles.is-live .mark-grid {
    grid-area: grid;
    width: 104px;
    gap: 8px;
  }
  .principles.is-live .mark-square {
    padding: 7px 8px;
    border-radius: 12px;
  }
  .principles.is-live .mark-name {
    display: none;
  }
  .principles.is-live .mark-no {
    font-size: 10px;
  }
  .principles.is-live .mark-progress {
    grid-area: progress;
    align-self: start;
  }
  .principles.is-live .principle-panels,
  .principles.is-live .principle-panel {
    min-height: 0;
  }
  .principles.is-live .panel-copy {
    padding-top: 0;
    gap: 16px;
  }
}
/* Short phone screens (iPhone SE and smaller): tighter card so the longest principle still fits. */
@media (max-width: 900px) and (max-height: 700px) {
  .principles.is-live .principle-panel {
    padding: 24px;
  }
  .principles.is-live .panel-copy h3 {
    font-size: 28px;
  }
  .principles.is-live .panel-copy p {
    font-size: 15px;
    line-height: 1.55;
  }
  .principles.is-live .panel-no {
    font-size: 90px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .principle-panel {
    animation: none;
  }
  .mark-square {
    transition: none;
  }
  .mark-square:hover,
  .mark-square:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   What we do: focus headline, engagements index, horizontal How we work track (services.js)
   ========================================================================== */

.focus-line {
  will-change: filter;
}

/* Engagements index */
.engagements {
  position: relative;
  padding-block: 70px 30px;
}
.eng-index {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #cec5b9;
}
.eng-row {
  border-bottom: 1px solid #cec5b9;
}
/* The other rows step back in colour only, and stay readable. */
.eng-index.has-hover .eng-row:not(.is-hover):not(.is-open) .eng-name {
  color: #8f8378;
}
.eng-toggle {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 44px;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 28px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.eng-no {
  font-size: 13px;
  color: var(--burgundy);
}
.eng-name {
  font-size: clamp(34px, 4.6vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  transition: transform 0.5s var(--ease), color 0.3s;
}
.eng-row.is-hover .eng-name,
.eng-toggle:focus-visible .eng-name {
  transform: translateX(14px);
  color: var(--burgundy);
}
.eng-plus {
  position: relative;
  justify-self: end;
  width: 20px;
  height: 20px;
}
.eng-plus::before,
.eng-plus::after {
  content: "";
  position: absolute;
  inset: 9px 0;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}
.eng-plus::after {
  transform: rotate(90deg);
}
.eng-row.is-open .eng-plus::after {
  transform: rotate(0deg);
}
.eng-toggle:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 4px;
}
/* Open and close by animating the row's height with a grid track. */
.eng-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}
.eng-row.is-open .eng-detail {
  grid-template-rows: 1fr;
}
.eng-detail-inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 8%;
  align-items: start;
  padding-left: 72px;
}
.eng-row.is-open .eng-detail-inner {
  padding-bottom: 34px;
}
.eng-detail-inner > p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #5d5852;
}
.eng-get {
  display: grid;
  gap: 8px;
}
.eng-get span {
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #75614e;
}
.eng-get p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
}
.eng-note {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 13px;
  background: var(--burgundy);
  color: #fff;
}
.eng-start {
  justify-self: start;
  grid-column: 1 / -1;
}
.eng-hint {
  margin: 30px 0 0;
  font-size: 17px;
  color: #5d5852;
}
.eng-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 280px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--dark);
  color: #efe7df;
  box-shadow: 0 18px 40px #0003;
  opacity: 0;
  scale: 0.85;
  pointer-events: none;
  transition: opacity 0.25s, scale 0.3s var(--ease);
}
.eng-cursor.is-visible {
  opacity: 1;
  scale: 1;
}
.eng-cursor span {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cdb8ab;
}
.eng-cursor p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

/* How we work track: default is a vertical list of stations along a line */
.track {
  position: relative;
  padding-block: 40px 100px;
}
.track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 30px;
  padding-bottom: 30px;
}
.track-head h2 {
  margin: 0;
}
.track-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  font-size: 15px;
}
.track-nav a {
  display: flex;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  color: #6e6156;
  transition: color 0.3s, border-color 0.3s;
}
.track-nav a span {
  font-size: 12px;
}
.track-nav a[aria-current] {
  color: var(--burgundy);
  border-color: var(--burgundy);
}
.track-morph {
  display: none;
}
.track-rail {
  position: relative;
  width: min(1320px, calc(100% - 104px));
  margin-inline: auto;
  display: grid;
  gap: 20px;
  padding-left: 40px;
}
.track-line {
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #dcd2c5;
}
.line-draw {
  position: absolute;
  inset: 0;
  background: var(--burgundy);
  transform-origin: top;
}
.track-rider {
  display: none;
}
.station {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 20px 40px;
  align-items: center;
  padding-block: 50px;
}
.station::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 64px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--burgundy);
  border-radius: 3px;
  background: var(--paper);
}
.station.is-active::before {
  background: var(--burgundy);
}
.station-no {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: clamp(100px, 14vw, 200px);
  line-height: 1;
  letter-spacing: -0.08em;
  color: var(--burgundy);
  opacity: 0.08;
  pointer-events: none;
}
.station-copy {
  position: relative;
  display: grid;
  gap: 18px;
}
.station-copy h3 {
  margin: 0;
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.055em;
}
.station-copy p {
  max-width: 520px;
  margin: 0;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: #4e4943;
}
/* How we work: one process map that changes with each stage (data-stage, set by services.js on
   desktop; fixed per station on phones).
   0 Understand: the parts, tangled together, with an eye looking them over.
   1 Decide: Process is what to fix first; only its tangled lines stay.
   2 Build: the tangle clears and one system connects everything.
   3 Stay: work keeps moving along the connections. */
.process-map {
  overflow: visible;
  font-family: "DM Sans", Arial, sans-serif;
}
.pm-tangle path {
  fill: none;
  stroke: #9d8e80;
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  animation: pm-flow 5s linear infinite;
  transition: opacity 0.6s, stroke 0.4s;
}
@keyframes pm-flow {
  to {
    stroke-dashoffset: -88;
  }
}
.pm-clean path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1s var(--ease);
}
.pm-clean path:nth-child(2) { transition-delay: 0.08s; }
.pm-clean path:nth-child(3) { transition-delay: 0.16s; }
.pm-clean path:nth-child(4) { transition-delay: 0.24s; }
.pm-clean path:nth-child(5) { transition-delay: 0.32s; }
.pm-node rect {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  transition: fill 0.4s, stroke 0.4s;
}
.pm-node text {
  font-size: 15px;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 0.4s;
}
.pm-hub {
  opacity: 0;
  transform: translate(330px, 240px) scale(0.4);
  transition: opacity 0.5s, transform 0.8s var(--ease);
}
.pm-hub rect {
  fill: var(--burgundy);
}
.pm-hub text {
  fill: #fff;
  font-size: 14px;
  text-anchor: middle;
  dominant-baseline: central;
}
.pm-fix {
  opacity: 0;
  transition: opacity 0.4s;
}
.pm-fix rect {
  fill: var(--burgundy);
}
.pm-fix text {
  fill: #fff;
  font-size: 13px;
}
.pm-pulses {
  opacity: 0;
  transition: opacity 0.5s;
}
.pm-pulses circle {
  fill: var(--burgundy);
}
.pm-eye {
  transition: opacity 0.5s;
}
.pm-eye path {
  fill: #68191608;
  stroke: var(--burgundy);
  stroke-width: 2;
}
.pm-eye circle {
  fill: var(--burgundy);
}
.process-map[data-stage="1"] .pm-tangle path {
  opacity: 0.18;
}
.process-map[data-stage="1"] .pm-tangle path.hot {
  opacity: 1;
  stroke: var(--burgundy);
}
.process-map[data-stage="1"] .pm-process rect {
  fill: var(--burgundy);
  stroke: var(--burgundy);
}
.process-map[data-stage="1"] .pm-process text {
  fill: #fff;
}
.process-map[data-stage="1"] .pm-fix {
  opacity: 1;
}
.process-map:not([data-stage="0"]) .pm-eye {
  opacity: 0;
}
.process-map[data-stage="2"] .pm-tangle path,
.process-map[data-stage="3"] .pm-tangle path {
  opacity: 0;
}
.process-map[data-stage="2"] .pm-clean path,
.process-map[data-stage="3"] .pm-clean path {
  stroke-dashoffset: 0;
}
.process-map[data-stage="2"] .pm-hub,
.process-map[data-stage="3"] .pm-hub {
  opacity: 1;
  transform: translate(330px, 240px) scale(1);
}
.process-map[data-stage="3"] .pm-pulses {
  opacity: 1;
}
.station-shape {
  width: 100%;
  height: auto;
}
/* Phones show the map small, so its labels are set larger to stay readable. */
@media (max-width: 900px) {
  .station-shape .pm-node text {
    font-size: 22px;
  }
  .station-shape .pm-hub text {
    font-size: 19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pm-tangle path {
    animation: none;
  }
  .pm-tangle path,
  .pm-clean path,
  .pm-node rect,
  .pm-node text,
  .pm-hub,
  .pm-fix,
  .pm-eye {
    transition: none;
  }
  /* Moving dots can't be paused, so the connections stay still. */
  .pm-pulses {
    display: none;
  }
}

/* Desktop: pinned, horizontal */
.track.is-live {
  padding-block: 0;
}
.track.is-live .track-viewport {
  position: relative;
  height: calc(100vh - 88px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-top: 40px;
  background: #ece6dc;
}
.track.is-live .track-rail {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  gap: 0;
  height: 100%;
}
.track.is-live .station {
  width: 100vw;
  height: 100%;
  padding: 0 max(52px, calc((100vw - 1320px) / 2));
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-content: center;
  opacity: 0.35;
  transition: opacity 0.5s;
}
.track.is-live .station.is-active {
  opacity: 1;
}
.track.is-live .station::before {
  display: none;
}
.track.is-live .station-shape {
  display: none;
}
.track.is-live .station-no {
  right: auto;
  left: max(52px, calc((100vw - 1320px) / 2));
  font-size: clamp(160px, 22vw, 320px);
  opacity: 0.07;
}
.track.is-live .track-line {
  top: auto;
  bottom: 56px;
  left: 0;
  right: 0;
  width: auto;
  height: 2px;
}
.track.is-live .line-draw {
  transform-origin: left;
}
.track.is-live .track-rider {
  display: block;
  position: absolute;
  bottom: 50px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 3px;
  background: var(--burgundy);
}
.track.is-live .track-morph {
  display: block;
  position: absolute;
  right: max(52px, calc((100vw - 1320px) / 2 + 60px));
  top: 50%;
  width: min(36vw, 600px);
  height: auto;
  transform: translateY(-42%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .eng-toggle {
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    padding: 22px 0;
  }
  .eng-plus {
    grid-column: 3;
    grid-row: 1;
  }
  .eng-detail-inner {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
  .track-rail {
    width: calc(100% - 40px);
    padding-left: 34px;
  }
  .station {
    grid-template-columns: 1fr;
    padding-block: 36px;
  }
  .station::before {
    left: -30px;
    top: 50px;
  }
  .station-shape {
    max-width: 400px;
    order: -1;
  }
  .station-no {
    font-size: 110px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .eng-name,
  .eng-detail,
  .eng-plus::before,
  .eng-plus::after,
  .eng-cursor {
    transition: none;
  }
  .eng-row.is-hover .eng-name {
    transform: none;
  }
}

/* Track fixes: the grid column stays screen-wide (the rail overflows it); text sits above the
   process map; the station number sits above the heading instead of behind the text. */
.track.is-live .track-viewport {
  grid-template-columns: minmax(0, 1fr);
}
.track.is-live .track-morph {
  z-index: 0;
}
.track.is-live .station-copy {
  z-index: 1;
}
.track.is-live .station-no {
  bottom: auto;
  top: 7%;
  font-size: clamp(120px, 16vw, 240px);
}

/* ==========================================================================
   In practice: full-bleed scenes (applications.js). .is-live on desktop pins the
   scene and shows the active step in a panel over it.
   ========================================================================== */

.typed.is-typing::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 6px;
  vertical-align: -0.05em;
  background: currentColor;
  animation: caret 0.8s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}

.scene-wrap {
  position: relative;
}
.stage {
  position: sticky;
  top: 84px;
  z-index: 1;
  height: 50vh;
  min-height: 320px;
  overflow: hidden;
}
.steps {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 40px));
  margin-inline: auto;
}
.step {
  min-height: 60vh;
  padding-block: 30px;
  display: grid;
  align-content: start;
  gap: 16px;
}
.step p {
  max-width: 520px;
  margin: 0;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.55;
}
.step-note {
  font-size: 14px;
  opacity: 0.75;
}

/* Desktop: pinned full-screen scene, text in a panel on the left */
/* --edge is the page margin, --panel the text panel's width, --scene-left where the
   illustration may start so nothing important sits under the panel. */
.scene-wrap.is-live {
  --edge: max(28px, calc((100vw - 1320px) / 2));
  --panel: min(420px, 32vw);
  --scene-left: calc(var(--edge) + var(--panel) + clamp(32px, 5vw, 90px));
  height: calc(100vh - 88px);
}
.scene-wrap.is-live .stage {
  position: absolute;
  inset: 0;
  height: auto;
}
.scene-wrap.is-live .steps {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--edge);
  width: var(--panel);
  margin: 0;
  /* The column itself lets clicks through to the heading and step bars; the active step takes them. */
  pointer-events: none;
}
/* The current step sits in the lower part of the left column, under the chapter heading. */
.scene-wrap.is-live .step {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(40px, 9vh, 100px);
  min-height: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.scene-wrap.is-live .step.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Desktop: the chapter heading sits at the top of the left column, inside the pinned scene, so
   the label, heading, current step and illustration read as one screen. */
.chapter:has(.scene-wrap.is-live) {
  padding-top: 0;
}
.scene-wrap.is-live .chapter-head {
  position: absolute;
  z-index: 3;
  top: clamp(36px, 7vh, 80px);
  left: var(--edge);
  width: calc(var(--scene-left) - var(--edge) + 170px);
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 18px;
}
.scene-wrap.is-live .chapter-head h2 {
  font-size: clamp(30px, min(3.1vw, 5.4vh), 54px);
}
/* The map sits to the right of the panel; its street grid runs on underneath it. */
.scene-wrap.is-live .map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--scene-left);
  right: max(28px, calc(var(--edge) / 2));
  width: auto;
  height: auto;
  overflow: visible;
}

/* The paperwork sits to the right of the panel, centred on the screen's height. */
.scene-wrap.is-live .po-main,
.scene-wrap.is-live .po-back {
  left: var(--scene-left);
  top: max(30px, calc(50% - 215px));
  width: min(400px, 28vw);
}
.scene-wrap.is-live .po-notes {
  left: calc(var(--scene-left) + min(400px, 28vw) + 28px);
  top: calc(50% - 110px);
}
.scene-wrap.is-live .clean {
  left: auto;
  right: var(--edge);
  top: max(50px, calc(50% - 190px));
  width: min(340px, calc(100vw - var(--scene-left) - var(--edge) - min(400px, 28vw) - 28px));
}
.scene-wrap.is-live .mfg-outcome {
  left: var(--scene-left);
  right: var(--edge);
  top: 50%;
  translate: 0 -50%;
}

/* Logistics scene: dark map */
/* The map fades out behind the step text so the text reads on a clean dark ground. */
.scene-wrap.is-live .stage-log::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: calc(var(--edge) + var(--panel) + 70px);
  background: linear-gradient(90deg, #151313f0 60%, #15131300);
  pointer-events: none;
}
.stage-log {
  background: #151313;
}
.map {
  width: 100%;
  height: 100%;
  display: block;
  font-family: "DM Sans", Arial, sans-serif;
}
.map-streets path {
  fill: none;
  stroke: #312a26;
  stroke-width: 1.5;
}
.map-tangle path {
  fill: none;
  stroke: #b08878;
  stroke-width: 1.6;
  stroke-dasharray: 5 7;
  animation: tangle-flow 6s linear infinite;
}
.chan rect {
  fill: #2f2724;
  stroke: #5b4a41;
}
.chan text {
  fill: #e0cdc0;
  font-size: 20px;
  text-anchor: middle;
}
.map-route-base {
  fill: none;
  stroke: #3a2e29;
  stroke-width: 4;
}
.map-route {
  fill: none;
  stroke: #b7473b;
  stroke-width: 5;
  stroke-linejoin: round;
}
.node circle {
  fill: #efe7df;
  stroke: #151313;
  stroke-width: 3;
}
.node text {
  fill: #efe7df;
  font-size: 26px;
}
.call rect {
  fill: #f5eee6;
}
.call text {
  fill: #2c221d;
  font-size: 21px;
}
.map-truck rect {
  fill: var(--burgundy);
  stroke: #f5eee6;
  stroke-width: 3;
}
.v-dot {
  fill: #b7473b;
  stroke: #f5eee6;
  stroke-width: 3;
}
.v-label rect {
  fill: #f5eee6;
  transition: fill 0.3s;
}
.v-text {
  fill: var(--burgundy);
  font-size: 20px;
}
.vehicle:hover .v-label rect {
  fill: #fff;
}
.vehicle.is-updated .v-label rect {
  animation: v-pulse 0.9s;
}
@keyframes v-pulse {
  0% {
    fill: #e8c6bd;
  }
}
.map-live circle {
  fill: #3f8f5a;
}
.map-live text,
.map-record text {
  fill: #e0cdc0;
  font-size: 20px;
  letter-spacing: 0.04em;
}
.map-record rect {
  fill: #1f1b19;
  stroke: #3a302b;
}

/* Manufacturing scene: paper */
.stage-mfg {
  background: #ece6dc;
}
.po {
  position: absolute;
  left: 38%;
  top: 12%;
  width: min(30%, 440px);
  padding: 26px 28px;
  border: 1px solid #d9ccbd;
  border-radius: 6px;
  background: #fdfbf7;
  box-shadow: 0 24px 60px #3d25121a;
}
.po-back {
  display: grid;
  gap: 10px;
  height: 60%;
}
.po-back b {
  font-weight: 500;
  font-size: 15px;
}
.po-back i {
  height: 8px;
  border-radius: 4px;
  background: #e7ddd1;
}
.po-sheet {
  transform: translate(8%, 7%) rotate(4deg);
}
.po-email {
  transform: translate(15%, 13%) rotate(-3deg);
}
.po-kind {
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--burgundy);
}
.po-main {
  z-index: 2;
}
.po-head {
  display: grid;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e3d8cb;
}
.po-head b {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.po-head span:last-child {
  font-size: 14px;
  color: #6e6156;
}
.po-lines {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.po-lines li {
  display: flex;
  justify-content: space-between;
  padding: 12px 8px;
  border-bottom: 1px dashed #e3d8cb;
  font-size: 16px;
}
.po-lines b {
  font-weight: 500;
}
.po-hand {
  margin: 16px 0 0;
  font-style: italic;
  font-size: 16px;
  color: #7a5a48;
  transform: rotate(-2deg);
}
.po-caret {
  position: absolute;
  right: 22px;
  width: 2px;
  height: 22px;
  margin-top: -11px;
  background: var(--burgundy);
  animation: caret 0.8s steps(1) infinite;
}
.po-scan {
  position: absolute;
  left: -16px;
  right: -16px;
  height: 2px;
  background: var(--burgundy);
  box-shadow: 0 0 18px 4px #68191633;
}
.po-circle {
  position: absolute;
  left: 4%;
  width: 92%;
  height: 58px;
  overflow: visible;
  pointer-events: none;
}
.po-circle ellipse {
  fill: none;
  stroke: var(--burgundy);
  stroke-width: 2.5;
}
.po-flag {
  position: absolute;
  right: -14px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 13px;
  background: var(--burgundy);
  color: #fff;
}
.po-notes {
  position: absolute;
  left: calc(38% + min(30%, 440px) + 24px);
  top: 26%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 22px;
}
.po-notes li {
  padding-left: 16px;
  border-left: 2px solid var(--burgundy);
  font-size: 15px;
  color: #6e6156;
}
.clean {
  position: absolute;
  left: 71%;
  top: 16%;
  width: min(25%, 380px);
  display: grid;
  gap: 8px;
  padding: 20px;
  border-radius: 14px;
  background: var(--burgundy);
  color: #fff;
  box-shadow: 0 24px 50px #68191633;
}
.clean-title {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e7c2b6;
}
.clean-rows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.clean-rows li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 7px;
  background: #ffffff12;
  font-size: 14px;
}
.clean-rows i {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-style: normal;
  background: #f5eee6;
  color: var(--burgundy);
}
.clean-rows .is-exception i:last-child {
  background: #e8b24c;
  color: #3a2508;
}
.clean-out {
  display: grid;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
}
.clean-out span {
  padding: 8px 10px;
  border-radius: 7px;
}
.clean-out span:first-child {
  background: #f5eee6;
  color: var(--burgundy);
}
.clean-out span:last-child {
  border: 1px dashed #ffffff55;
}
.mfg-outcome {
  position: absolute;
  left: 38%;
  right: max(28px, calc((100vw - 1320px) / 2));
  top: 14%;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}
.oc-big,
.oc-month {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid #d0c1b0;
  border-radius: 14px;
  background: #fbf9f4;
}
.oc-big span,
.oc-month span {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #75614e;
}
.oc-big strong {
  font-size: clamp(34px, 3.4vw, 56px);
  font-weight: 450;
  letter-spacing: -0.045em;
  line-height: 1;
}
.oc-big s {
  --strike: 1;
  color: #a8998b;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 55% / calc(var(--strike) * 100%) 3px no-repeat;
}
.oc-big em,
.oc-stop {
  font-style: normal;
  color: var(--burgundy);
}
.oc-month {
  grid-column: 1 / -1;
}
/* The month of delays is a slim strip under the two results: label, then the bars. */
.oc-month {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px;
}
.oc-month span {
  flex: none;
  max-width: 170px;
  line-height: 1.4;
}
.days {
  flex: 1;
  display: flex;
  align-items: end;
  gap: 4px;
  height: 44px;
}
.days i {
  flex: 1;
  height: 32%;
  border-radius: 2px;
  background: #d9ccbd;
}
.days i:nth-child(3n) {
  height: 46%;
}
.days i.hot {
  height: 96%;
  background: var(--burgundy);
}

/* Phones: scene sticks to the top at half height, scaled down */
@media (max-width: 900px) {
  .po {
    left: 5%;
    top: 8%;
    width: 52%;
    padding: 14px 16px;
  }
  .po-head b {
    font-size: 18px;
  }
  .po-lines li,
  .po-hand,
  .po-head span:last-child {
    font-size: 12px;
  }
  /* Tighter on phones so the whole card fits in the scene above the step bars. */
  .po-head {
    padding-bottom: 10px;
  }
  .po-lines {
    margin-top: 6px;
  }
  .po-lines li {
    padding-block: 6px;
  }
  .po-hand {
    margin-top: 10px;
  }
  .po-notes {
    left: 60%;
    top: 18%;
    gap: 12px;
  }
  .po-notes li {
    font-size: 12px;
  }
  .clean {
    left: 60%;
    top: 8%;
    width: 36%;
    padding: 10px;
  }
  .clean-rows li {
    grid-template-columns: 1fr;
    font-size: 11px;
    padding: 6px;
  }
  .clean-rows i {
    display: none;
  }
  .clean-out {
    font-size: 11px;
  }
  .mfg-outcome {
    left: 5%;
    right: 5%;
    top: 6%;
    gap: 8px;
  }
  .oc-big,
  .oc-month {
    padding: 12px;
    gap: 8px;
  }
  .oc-big strong {
    font-size: 26px;
  }
  /* The month stacks here, label over a taller chart, so the outcome fills the scene. */
  .oc-month {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .days {
    flex: none;
    height: clamp(110px, 17vh, 150px);
  }
  .chapter-log .steps,
  .chapter-mfg .steps {
    padding-top: 10px;
  }
  /* The text passes under the stuck scene and is read in the space below it. The shadow fills the
     small gap between the header and the scene so no text shows through it. The paper scene takes
     the page colour here so it does not read as a separate band. */
  .stage-log {
    box-shadow: 0 -14px 0 #151313;
  }
  .stage-mfg {
    min-height: 370px;
    background: var(--paper);
    box-shadow: 0 -14px 0 var(--paper);
  }
  /* The scene sits tight under the cards here, so smaller shadows keep them from being cut off. */
  .po {
    box-shadow: 0 8px 20px #3d251214;
  }
  .clean {
    box-shadow: 0 8px 20px #68191626;
  }
  .stage {
    z-index: 2;
  }
  .steps {
    z-index: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .map-tangle path,
  .po-caret,
  .typed.is-typing::after,
  .vehicle.is-updated .v-label rect {
    animation: none;
  }
  .scene-wrap.is-live .step {
    transition: none;
  }
}

/* Step indicator under the chapter heading (desktop, applications.js): one bar per step. */
.step-progress {
  display: none;
}
.scene-wrap.is-live .step-progress {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.step-progress button {
  width: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.step-progress i {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  background: #d0c4b6;
}
.chapter-log .step-progress i {
  background: #3a302b;
}
.step-progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--burgundy);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
}
.chapter-log .step-progress i::after {
  background: #e2a797;
}
.step-progress button:hover i {
  background: #b8a898;
}
.chapter-log .step-progress button:hover i {
  background: #5b4a41;
}
.step-progress button:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 2px;
}

/* "Sound familiar?" closes each chapter. */
.chapter-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 30px;
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid #cec5b9;
  font-size: 18px;
}
.chapter-cta span {
  color: #6e6156;
}
.chapter-cta a {
  display: inline-flex;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -0.03em;
  color: var(--burgundy);
  transition: gap 0.35s var(--ease);
}
.chapter-cta a:hover {
  gap: 20px;
}
.chapter-log .chapter-cta {
  border-color: #3a302b;
}
.chapter-log .chapter-cta span {
  color: #a8998b;
}
.chapter-log .chapter-cta a {
  color: #e2a797;
}

/* The third order, a photo from the driver, lands at an angle. */
.po-photo {
  transform: translate(-6%, 16%) rotate(-7deg);
}

/* ==========================================================================
   Responsive fixes (phones, tablets, small laptops)
   ========================================================================== */

/* Phones and tablets: no faint stage numbers behind the small process maps; slightly larger
   labels in the manufacturing scene. */
@media (max-width: 900px) {
  .station-no {
    display: none;
  }
  .clean-rows li,
  .clean-out {
    font-size: 12px;
  }
}

/* In practice, phones and tablets: the whole map shows (fitted, not cropped) at a height that
   suits it, with its labels set larger so they stay readable when scaled down. applications.js
   sizes each label background to its text. */
@media (max-width: 900px) {
  .stage-log {
    height: min(50vh, 78vw);
    min-height: 0;
  }
  .node text {
    font-size: 30px;
  }
  .chan text,
  .call text {
    font-size: 26px;
  }
  .v-text,
  .map-live text,
  .map-record text {
    font-size: 24px;
  }
}
@media (max-width: 600px) {
  .node text {
    font-size: 42px;
  }
  .chan text,
  .call text {
    font-size: 32px;
  }
  .v-text {
    font-size: 38px;
  }
  .map-live text,
  .map-record text {
    font-size: 32px;
  }
  /* Manufacturing: the order layer is a narrow column here. Tighter spacing and one line per row
     keep it inside the scene; with each row wrapping, it ran past the bottom on smaller phones. */
  .clean {
    left: 59%;
    top: 6%;
    width: 38%;
    gap: 5px;
    padding: 8px;
  }
  .clean-title {
    font-size: 9px;
  }
  .clean-rows {
    gap: 4px;
  }
  .clean-rows li {
    padding: 5px 6px;
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
  }
  .clean-rows li span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .clean-out {
    gap: 4px;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
  }
  .clean-out span {
    padding: 5px 6px;
  }
}

/* ==========================================================================
   Phone menu (app.js): a full-screen dark panel under the header. The toggle is four outlined
   lines, one per page in menu order; the current page's line is filled burgundy. While the menu
   is open the middle two fold into a cross and the outer two fade.
   ========================================================================== */

.menu-toggle {
  gap: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.3s;
}
/* The word stays for screen readers (app.js swaps it to "Close"); the lines carry it visually. */
.menu-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.menu-mark {
  position: relative;
  width: 17px;
  height: 18.5px;
}
.menu-mark i {
  position: absolute;
  left: 0;
  width: 17px;
  height: 3.5px;
  border: 1.25px solid currentColor;
  border-radius: 1.75px;
  transition: transform 0.4s var(--ease), opacity 0.25s, height 0.4s var(--ease), top 0.4s var(--ease), background-color 0.3s, border-color 0.3s;
}
.menu-mark i:nth-child(1) { top: 0; }
.menu-mark i:nth-child(2) { top: 5px; }
.menu-mark i:nth-child(3) { top: 10px; }
.menu-mark i:nth-child(4) { top: 15px; }
.menu-mark i[aria-current] {
  border-color: var(--burgundy);
  background: var(--burgundy);
}
/* Open: the middle lines become the two strokes of a cross; the outer ones fade. */
.menu-open .menu-mark i:nth-child(2),
.menu-open .menu-mark i:nth-child(3) {
  top: 8.25px;
  height: 2px;
  border: 0;
  border-radius: 1px;
  background: currentColor;
}
.menu-open .menu-mark i:nth-child(2) {
  transform: rotate(45deg);
}
.menu-open .menu-mark i:nth-child(3) {
  transform: rotate(-45deg);
}
.menu-open .menu-mark i:nth-child(1),
.menu-open .menu-mark i:nth-child(4) {
  opacity: 0;
  transform: scaleX(0.4);
}


/* While open: the page stays still and the header turns dark with the panel. */
html.menu-open {
  overflow: hidden;
}
.menu-open .header {
  background: #151313;
  border-color: #2a2421;
  transition: background-color 0.35s, border-color 0.35s;
}
.menu-open .header .menu-toggle {
  color: #f4f1eb;
}
.menu-open .header .brand-icon,
.menu-open .header .brand-word {
  fill: #f4f1eb;
}

nav.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 29;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  max-height: none;
  margin: 0;
  padding: 116px 24px calc(28px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  background: #151313;
  color: #f4f1eb;
  font-size: inherit;
  letter-spacing: normal;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s var(--ease);
}
.menu-open nav.mobile-menu {
  clip-path: inset(0 0 0 0);
}
.mm-links {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #2f2825;
}
.mm-links li {
  border-bottom: 1px solid #2f2825;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s, transform 0.55s var(--ease);
}
.menu-open .mm-links li {
  opacity: 1;
  transform: none;
}
.menu-open .mm-links li:nth-child(1) { transition-delay: 0.12s; }
.menu-open .mm-links li:nth-child(2) { transition-delay: 0.17s; }
.menu-open .mm-links li:nth-child(3) { transition-delay: 0.22s; }
.menu-open .mm-links li:nth-child(4) { transition-delay: 0.27s; }
.mm-links a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  font-size: clamp(30px, 9vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #f4f1eb;
}
.mm-links a span {
  min-width: 24px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #8f8378;
}
/* The current page: burgundy text and the accent square of the mark. */
.mm-links a[aria-current="page"] {
  color: #e2a797;
}
.mm-links a[aria-current="page"]::after {
  content: "";
  align-self: center;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-radius: 2px;
  background: var(--burgundy);
}
.mm-foot {
  display: grid;
  gap: 18px;
  opacity: 0;
  transition: opacity 0.4s 0.3s;
}
.menu-open .mm-foot {
  opacity: 1;
}
.mm-faq {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  justify-self: start;
  gap: 18px;
  min-width: 94px;
  padding-bottom: 5px;
  border-bottom: 1px solid #5b4a41;
  color: #e0cdc0;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mm-faq[aria-current="page"] {
  border-color: #e2a797;
  color: #e2a797;
}
.mm-talk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-radius: 12px;
  background: var(--burgundy);
  color: #fff;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.mm-routes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  font-size: 15px;
}
.mm-routes a {
  padding-bottom: 3px;
  border-bottom: 1px solid #5b4a41;
  color: #e0cdc0;
}
@media (prefers-reduced-motion: reduce) {
  nav.mobile-menu,
  .mm-links li,
  .mm-foot,
  .menu-mark i {
    transition: none;
  }
}
/* Older phone-menu rules sized every span and link in the menu; these keep the new parts at their own sizes. */
nav.mobile-menu .mm-talk {
  padding: 18px 22px;
  font-size: 20px;
}
nav.mobile-menu .mm-faq {
  padding: 0 0 5px;
  font-size: 13px;
  letter-spacing: 0.08em;
}
nav.mobile-menu .mm-routes a {
  padding: 0 0 3px;
  font-size: 15px;
  letter-spacing: 0;
}

/* Page changes: browsers that support cross-document view transitions fade softly from one page
   to the next (from the dark menu panel, on phones) instead of cutting. Others are unaffected. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
}
/* Only a fade: the default also resizes between the two pages, which flashes a shrunken copy. */
::view-transition-group(root) {
  animation: none;
}
/* While leaving from the menu, its links settle back so the tap feels acknowledged. */
.menu-leaving .mm-links a:not(:hover) {
  opacity: 0.45;
  transition: opacity 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ==========================================================================
   Touch screens: tap equivalents of the desktop hover effects
   ========================================================================== */

/* In practice, phones and tablets: the step bars sit on the scene that sticks to the top. */
.stage > .step-progress {
  position: absolute;
  z-index: 3;
  left: 20px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  margin: 0;
}
.stage > .step-progress button {
  width: 32px;
}
.vehicle {
  cursor: pointer;
}

/* Tap feedback: buttons, links styled as buttons and cards press in slightly while touched,
   in place of the hover effects a mouse would get. Uses the separate scale property so it never
   conflicts with animated transforms. */
@media (hover: none) {
  a,
  button,
  label {
    -webkit-tap-highlight-color: transparent;
  }
  .button,
  .contact-start,
  .contact-book,
  .mm-talk,
  .mm-links a,
  .menu-toggle,
  .eng-toggle,
  .mark-square,
  .chapter-cta a,
  .where-chapters a,
  .track-nav a,
  .diagnose-options label,
  .diagnose-next,
  .diagnose-back,
  .copy-button {
    transition: scale 0.15s ease, background-color 0.3s, color 0.3s, border-color 0.3s;
  }
  .button:active,
  .contact-start:active,
  .contact-book:active,
  .mm-talk:active,
  .mm-links a:active,
  .menu-toggle:active,
  .eng-toggle:active,
  .mark-square:active,
  .chapter-cta a:active,
  .where-chapters a:active,
  .track-nav a:active,
  .diagnose-options label:active,
  .diagnose-next:active,
  .diagnose-back:active,
  .copy-button:active {
    scale: 0.97;
  }
}
@media (prefers-reduced-motion: reduce) {
  .button:active,
  .contact-start:active,
  .mm-talk:active,
  .eng-toggle:active,
  .mark-square:active {
    scale: none;
  }
}

/* In practice, phones: each step is shorter, so the next step's text follows soon after the
   last one slides under the scene instead of leaving a long empty stretch. */
@media (max-width: 900px) {
  .scene-wrap:not(.is-live) .step {
    min-height: 40vh;
  }
}

/* How we work, Build: the "One system" block breathes, a slow swell with a soft glow pulsing out,
   so the stage has life once the connections are drawn. */
.process-map[data-stage="2"] .pm-hub rect {
  transform-box: fill-box;
  transform-origin: center;
  stroke: var(--burgundy);
  animation: pm-breathe 2.6s ease-in-out 0.9s infinite;
}
@keyframes pm-breathe {
  0%,
  100% {
    transform: scale(1);
    stroke-width: 0;
    stroke-opacity: 0.55;
  }
  50% {
    transform: scale(1.05);
    stroke-width: 14px;
    stroke-opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .process-map[data-stage="2"] .pm-hub rect {
    animation: none;
  }
}

/* ==========================================================================
   Not found (404.html): shown by the server for unknown addresses (ErrorDocument in .htaccess)
   ========================================================================== */

.not-found {
  padding-block: 170px 130px;
}
.not-found h1 {
  margin: 26px 0 0;
  font-size: clamp(44px, 5.2vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}
.not-found h1 em {
  font-style: normal;
  color: #8b8378;
}
.not-found p {
  max-width: 440px;
  margin: 28px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: #5d5852;
}
.not-found-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .not-found {
    padding-block: 130px 80px;
  }
  .not-found-links {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ==========================================================================
   Intro: the first page of a visit opens on the ARIV mark on near-black. The four squares assemble,
   A-R-I-V follows letter by letter, then the mark settles briefly before its burgundy square dives forward.
   The block does the zooming so the logo itself is never scaled and stays sharp.
   Only shown when the inline script in partials/head.html adds .has-intro (never with reduced motion);
   About 3.3 seconds.
   ========================================================================== */

.intro {
  display: none;
}
.has-intro .intro {
  --size: clamp(130px, 28vmin, 230px);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  color: var(--paper);
  animation: intro-out 0.32s 2.98s ease-in forwards;
}
.has-intro.intro-skip .intro {
  animation: intro-skip 0.25s ease-out forwards;
}
.has-intro.intro-done .intro {
  display: none;
}
.intro-mark {
  position: relative;
  width: var(--size);
}
.intro-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: currentColor;
  animation: intro-fade 0.18s 2.36s ease forwards;
}
/* Sits exactly over the filled square (its place in the logo viewBox), hidden until the dive. */
.intro-dive {
  position: absolute;
  left: 52.05%;
  top: 37.73%;
  width: 25.68%;
  height: 30.25%;
  border-radius: calc(var(--size) * 0.0447);
  background: var(--burgundy);
  opacity: 0;
  /* Burgundy until it fills the screen, then a quick change to the page colour (no pink in between). */
  animation:
    intro-dive 0.52s 2.36s cubic-bezier(0.7, 0, 0.84, 0) forwards,
    intro-dive-light 0.12s 2.8s linear forwards;
  will-change: transform;
}
.intro-square {
  transform-box: fill-box;
  transform-origin: center;
  animation: intro-square 0.58s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.intro-icon .intro-square:nth-child(1) {
  animation-delay: 0.08s;
}
.intro-icon .intro-square:nth-child(2) {
  animation-delay: 0.32s;
}
.intro-icon .intro-square:nth-child(3) {
  animation-delay: 0.56s;
}
.intro-square.is-accent {
  fill: var(--burgundy);
  animation-delay: 0.8s;
}
.intro-word > path {
  transform-box: fill-box;
  transform-origin: center;
  animation: intro-letter 0.52s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.intro-word > path:nth-child(1) {
  animation-delay: 1.06s;
}
.intro-word > path:nth-child(2) {
  animation-delay: 1.18s;
}
.intro-word > path:nth-child(3) {
  animation-delay: 1.3s;
}
.intro-word > path:nth-child(4) {
  animation-delay: 1.42s;
}
@keyframes intro-square {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.72);
  }
}
@keyframes intro-letter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}
@keyframes intro-fade {
  to {
    opacity: 0;
  }
}
@keyframes intro-dive {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(70);
  }
}
@keyframes intro-dive-light {
  to {
    background-color: var(--paper);
  }
}
@keyframes intro-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes intro-skip {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-intro .intro {
    display: none;
  }
}

/* ==========================================================================
   FAQ — crawlable editorial answers with a quiet, responsive interaction layer
   ========================================================================== */

.page-faq {
  --faq-accent: var(--burgundy);
}
.faq-hero {
  padding-top: 172px;
  padding-bottom: 76px;
  border-bottom: 1px solid var(--line);
}
.faq-hero-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 38px;
  font-size: 12px;
  letter-spacing: 0.055em;
  font-weight: 550;
}
.faq-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.72fr);
  align-items: end;
  gap: 8%;
}
.faq-hero h1 {
  font-size: clamp(52px, 6.6vw, 96px);
  line-height: 1.03;
  letter-spacing: -0.065em;
}
.faq-hero h1 em {
  color: var(--burgundy);
  font-style: normal;
}
.faq-hero-copy {
  max-width: 440px;
  padding-bottom: 8px;
}
.faq-hero-copy p {
  margin: 0 0 34px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.025em;
}
.faq-hero-copy a {
  display: inline-flex;
  gap: 26px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--burgundy);
  font-size: 14px;
}
.faq-hero-copy a span {
  transition: translate 0.25s var(--ease);
}
.faq-hero-copy a:hover span,
.faq-hero-copy a:focus-visible span {
  translate: 0 4px;
}
.faq-hero-meta {
  display: flex;
  gap: 26px;
  margin-top: 66px;
  color: #68645f;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.faq-layout {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: clamp(54px, 8vw, 132px);
  padding-top: 94px;
  padding-bottom: 130px;
}
.faq-index {
  position: sticky;
  top: 116px;
  align-self: start;
}
.faq-index nav {
  display: grid;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.faq-index nav a {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  color: #68645f;
  font-size: 14px;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.faq-index nav a span {
  font-size: 11px;
  letter-spacing: 0.08em;
}
.faq-index nav a[aria-current="true"] {
  padding-left: 8px;
  color: var(--burgundy);
}
.faq-index-mark {
  display: grid;
  grid-template-columns: repeat(2, 22px);
  gap: 5px;
  margin-top: 30px;
}
.faq-index-mark i {
  width: 22px;
  aspect-ratio: 1;
  border: 1px solid #9f9a92;
  border-radius: 5px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.faq-index-mark i.is-active {
  border-color: var(--burgundy);
  background: var(--burgundy);
}
.faq-groups {
  min-width: 0;
}
.faq-group {
  scroll-margin-top: 110px;
}
.faq-group + .faq-group {
  margin-top: 122px;
}
.faq-group-head {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 44px;
}
.faq-group-head > span {
  color: var(--burgundy);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding-top: 8px;
}
.faq-group-head p {
  margin: 0 0 15px;
}
.faq-group-head h2 {
  margin: 0;
  font-size: clamp(35px, 4.4vw, 61px);
  line-height: 1.05;
  letter-spacing: -0.055em;
  font-weight: 450;
}
.faq-list {
  border-top: 1px solid #bdb9b2;
}
.faq-item {
  border-bottom: 1px solid #cfcac3;
}
.faq-item summary {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 30px;
  gap: 22px;
  align-items: start;
  padding: 27px 2px 28px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-no {
  padding-top: 6px;
  color: #68645f;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.faq-item h3 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.035em;
  font-weight: 480;
  transition: color 0.25s var(--ease);
}
.faq-plus {
  position: relative;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border: 1px solid #aaa59e;
  border-radius: 50%;
  transition: rotate 0.35s var(--ease), border-color 0.25s, background 0.25s;
}
.faq-plus:before,
.faq-plus:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  translate: -50% -50%;
}
.faq-plus:after {
  rotate: 90deg;
}
.faq-item[open] summary h3 {
  color: var(--burgundy);
}
.faq-item[open] .faq-plus {
  rotate: 45deg;
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: white;
}
.faq-answer {
  max-width: 760px;
  margin: -2px 46px 32px 94px;
  padding-left: 20px;
  border-left: 3px solid var(--burgundy);
  overflow: hidden;
}
.faq-answer p,
.faq-answer li {
  font-size: 16px;
  line-height: 1.7;
}
.faq-answer p {
  margin: 0 0 14px;
}
.faq-answer p:last-child {
  margin-bottom: 0;
}
.faq-answer ul,
.faq-answer ol {
  margin: 2px 0 18px;
  padding-left: 24px;
}
.faq-answer li + li {
  margin-top: 7px;
}
.faq-answer a {
  color: var(--burgundy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.faq-midpoint,
.faq-unanswered {
  margin: 112px 0;
  border-radius: 12px;
}
.faq-midpoint {
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 5vw, 68px);
  background: var(--dark);
  color: white;
}
.faq-midpoint:after {
  content: "";
  position: absolute;
  right: -52px;
  bottom: -68px;
  width: 180px;
  aspect-ratio: 1;
  border: 1px solid #ffffff38;
  border-radius: 34px;
  rotate: 14deg;
}
.faq-midpoint p {
  max-width: 590px;
  margin: 25px 0 32px;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.045em;
}
.faq-midpoint .text-link {
  color: #e8b7ac;
}
.faq-unanswered {
  margin-bottom: 0;
  padding: 54px 0 10px 114px;
  border-top: 1px solid var(--line);
}
.faq-unanswered h2 {
  margin: 16px 0;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: -0.055em;
  font-weight: 450;
}
.faq-unanswered p {
  max-width: 610px;
  margin: 0 0 28px;
  color: #5f5b55;
  font-size: 16px;
}
.faq-unanswered button.text-link {
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid var(--burgundy);
  background: transparent;
  color: var(--burgundy);
}
.faq-route {
  display: grid;
  grid-template-columns: minmax(145px, 0.45fr) minmax(260px, 1fr) auto;
  gap: 36px;
  align-items: center;
  margin-bottom: 90px;
  padding-top: 34px;
  padding-bottom: 34px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.faq-route p {
  margin: 0;
  font-size: 18px;
}
.faq-route .text-link {
  white-space: nowrap;
  color: var(--burgundy);
}
.contact-footer-faq {
  padding-block: 12px;
}
.contact-footer-faq:hover,
.contact-footer-faq:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media (hover: hover) {
  .faq-item summary:hover h3 {
    color: var(--burgundy);
  }
  .faq-item summary:hover .faq-plus {
    border-color: var(--burgundy);
  }
}
@media (max-width: 900px) {
  .faq-hero {
    padding-top: 132px;
  }
  .faq-hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .faq-hero-copy {
    max-width: 620px;
  }
  .faq-hero-meta {
    margin-top: 46px;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 76px;
    padding-top: 58px;
  }
  .faq-index {
    position: static;
  }
  .faq-index nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .faq-index nav a:nth-child(odd) {
    border-right: 1px solid var(--line);
    padding-right: 16px;
  }
  .faq-index nav a:nth-child(even) {
    padding-left: 16px;
  }
  .faq-index nav a[aria-current="true"] {
    color: var(--burgundy);
  }
  .faq-index-mark {
    display: none;
  }
  .faq-route {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .faq-route .text-link {
    white-space: normal;
  }
}
@media (max-width: 600px) {
  .faq-hero {
    padding-top: 112px;
    padding-bottom: 48px;
  }
  .faq-hero-label {
    margin-bottom: 26px;
  }
  .faq-hero h1 {
    font-size: clamp(43px, 13vw, 61px);
  }
  .faq-hero-copy p {
    font-size: 17px;
  }
  .faq-layout {
    padding-bottom: 90px;
  }
  .faq-index nav {
    grid-template-columns: 1fr;
  }
  .faq-index nav a:nth-child(odd) {
    border-right: 0;
  }
  .faq-index nav a:nth-child(n) {
    padding-inline: 2px;
  }
  .faq-group + .faq-group {
    margin-top: 90px;
  }
  .faq-group-head {
    grid-template-columns: 42px 1fr;
    gap: 10px;
    margin-bottom: 32px;
  }
  .faq-group-head h2 {
    font-size: 36px;
  }
  .faq-item summary {
    grid-template-columns: 44px minmax(0, 1fr) 27px;
    gap: 9px;
    padding: 23px 0;
  }
  .faq-item h3 {
    font-size: 19px;
  }
  .faq-plus {
    width: 24px;
    height: 24px;
  }
  .faq-answer {
    margin: 0 0 28px 52px;
    padding-left: 14px;
  }
  .faq-answer p,
  .faq-answer li {
    font-size: 15px;
  }
  .faq-midpoint,
  .faq-unanswered {
    margin-top: 84px;
    margin-bottom: 84px;
  }
  .faq-midpoint {
    padding: 34px 28px 38px;
  }
  .faq-unanswered {
    padding: 42px 0 0 52px;
  }
  .faq-unanswered h2 {
    font-size: 41px;
  }
  .contact-footer-faq {
    margin-left: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq-index nav a,
  .faq-index-mark i,
  .faq-plus,
  .faq-item h3,
  .faq-hero-copy a span {
    transition: none;
  }
}