/* Design tokens. The only place colours, fonts and sizes are defined. */

:root {
  /* Colour (PLAN.md section 2) */
  --paper: #F7F6F3;
  --paper-2: #EFEDE8;
  --ink: #111111;
  --ink-2: #5C5A55;
  --line: #DAD7D0;
  --vermilion: #D9381E;
  --night: #0B0B0B;

  /* Derived colour, kept to what accessibility needs */
  --vermilion-ink: #C4321B;    /* vermilion text on light backgrounds (AA) */
  --vermilion-press: #B42D16;  /* button hover/active */
  --vermilion-night: #EC5233;  /* vermilion small text on --night (AA) */
  --on-accent: #FFFFFF;        /* text on vermilion (AA) */
  --night-ink: #F7F6F3;        /* main text on --night */
  --night-ink-2: #A3A09A;      /* secondary text on --night (AA) */
  --ink-3: #8C8A85;            /* light grey, large text only (3:1): story words not yet inked */
  --night-line: #2A2927;       /* borders on --night */
  --night-2: #161615;          /* panels on --night */
  --link-hover: var(--vermilion-ink);

  /* Fonts */
  --font-serif: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-jp: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Fluid type scale, 360px → 1440px */
  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --step-1: clamp(1.1875rem, 1.1rem + 0.37vw, 1.4375rem);
  --step-2: clamp(1.375rem, 1.21rem + 0.74vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.56vw, 2.8125rem);
  --step-4: clamp(2.25rem, 1.65rem + 2.67vw, 4.0625rem);
  --step-5: clamp(2.5rem, 1.45rem + 4.67vw, 5.625rem);

  --large-text: 1.5rem; /* 24px: the smallest WCAG large text, where the grey story words (3:1) pass AA */

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-label: 0.08em;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: clamp(4.5rem, 3rem + 6.5vw, 9rem);

  /* Layout */
  --container: 80rem;
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --header-h: 4rem;
  --radius: 4px;
  --border: 1px solid var(--line);
  --shadow: 0 0.75rem 2rem rgb(17 17 17 / 0.08);
  --scrim: rgb(17 17 17 / 0.72);              /* behind the lightbox */

  /* Motion (PLAN.md section 2): only transform, opacity, clip-path (and stroke drawing for 匠) */
  --dur-press: 180ms;
  --dur-ink: 250ms;
  --dur-ink-out: 400ms;
  --dur-page: 250ms;
  --dur-fast: 300ms;
  --dur-wipe: 400ms;
  --dur-zoom: 400ms;
  --dur: 500ms;
  --dur-rise: 600ms;
  --dur-slow: 700ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* page wipe only */

  /* Focus */
  --focus: var(--ink);

  /* Layers */
  --z-header: 50;
  --z-skip: 100;

  /* Concept site (Web Development demo only): a fictional client's website shown inside a browser
     frame, in three styles that should look like three different studios. Not our UI. Text pairs meet
     AA. Sizes follow the frame's width (cqi), like a real responsive site. */
  --demo-text: 0.9375rem;
  --demo-text-serif: 1.0625rem;      /* the serif's small x-height needs a little more */
  --demo-small: 0.8125rem;
  --demo-logo: 1.125rem;
  --demo-heading: clamp(1.25rem, 3.2cqi, 1.875rem);
  --demo-heading-serif: clamp(1.625rem, 4cqi, 2.375rem);
  --demo-display: clamp(2.125rem, 6.4cqi, 4.25rem);
  --demo-display-heavy: clamp(1.875rem, 5.2cqi, 3.5rem);
  --demo-display-serif: clamp(2.5rem, 7.2cqi, 4.75rem);
  --demo-font-bold: "Archivo Black", "Arial Black", Impact, sans-serif;
  --demo-font-lux: "Cormorant Garamond", Garamond, Georgia, serif;

  --demo-min-bg: #FBFAF7;
  --demo-min-ink: #1A1A1A;
  --demo-min-muted: #5F5B55;
  --demo-min-line: #E4DFD6;
  --demo-min-panel: #F2EEE7;
  --demo-min-kraft: #E6D9C3;

  --demo-bold-bg: #FFF3D9;
  --demo-bold-ink: #141414;
  --demo-bold-muted: #4D4339;
  --demo-bold-coral: #FF6B4A;
  --demo-bold-sky: #4DA3FF;
  --demo-bold-sun: #FFC93C;
  --demo-bold-leaf: #2F9E5B;
  --demo-bold-bean: #5B3A29;

  --demo-lux-bg: #17110D;
  --demo-lux-panel: #211812;
  --demo-lux-ink: #F3EADB;
  --demo-lux-muted: #B7A994;
  --demo-lux-line: #3A2C21;
  --demo-lux-gold: #C9A45C;
}

@media (min-width: 900px) {
  :root {
    --header-h: 4.5rem;
  }
}

/* Reset, typography and layout primitives. */

/* Local fonts sized to match Fraunces and Inter, so text barely moves when the web fonts arrive. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 94%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Arimo");
  size-adjust: 103.6%;
  ascent-override: 93.6%;
  descent-override: 23.2%;
  line-gap-override: 0%;
}

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-s));
}

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

[lang="ja"] {
  font-family: var(--font-jp);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* Layout */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: var(--z-skip);
  padding: var(--space-2xs) var(--space-s);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Makes a whole card or row clickable from one link inside it. */

.stretched-link {
  text-decoration: none;
}

.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.stretched-link:focus-visible {
  outline: none;
}

.stretched-link:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* Section content fades and slides up 16px as it enters the screen (main.js adds .is-in). */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}

/* Section headings rise line by line from a mask. main.js wraps each line in .rise-line while it runs,
   then puts the heading back as it was. */

.rise-pending {
  opacity: 0;
}

.rise-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.rise-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-rise) var(--ease-out) var(--delay, 0ms);
}

.is-rising .rise-line > span {
  transform: none;
}

/* Page transition (View Transitions API): the old page fades out, then the new one fades in rising 8px,
   250 ms in all. The two are never on screen together. The header has its own layer and simply stays.
   Back and Forward skip it (inline script in <head>, and main.js). Browsers without it change page. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition {
  background: var(--paper);
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: page-out calc(var(--dur-page) * 0.4) var(--ease-out) both;
}

::view-transition-new(root) {
  animation: page-in calc(var(--dur-page) * 0.6) var(--ease-out) calc(var(--dur-page) * 0.4) both;
}

::view-transition-old(site-header) {
  display: none;
}

::view-transition-new(site-header) {
  animation: none;
}

@keyframes page-out {
  to {
    opacity: 0;
  }
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Shared components: buttons, arrows, header, rows, footer. */

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
}

.btn--primary {
  background: var(--vermilion);
  color: var(--on-accent);
}

.btn--primary:hover {
  background: var(--vermilion-press);
}

.btn--secondary {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--large {
  min-height: 3.25rem;
  padding: 1rem 1.75rem;
  font-size: var(--step-0);
}

.btn:disabled {
  border-color: currentColor;
  background: none;
  cursor: default;
}

/* Arrows: vermilion by default, inherit text colour inside buttons. */

.arrow {
  flex: none;
  width: 1em;
  height: 1em;
  color: var(--vermilion);
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn .arrow {
  color: inherit;
}

.btn:hover .arrow,
.link-arrow:hover .arrow {
  transform: translateX(4px);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
}

.link-arrow:hover {
  color: var(--link-hover);
}

/* Labels and section heads */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}

.section-head h2 {
  font-size: var(--step-4);
}

.section-head__note {
  max-width: 34ch;
  color: var(--ink-2);
}

/* Quiet index label above a section, "01 — Try it" (home and service pages). */
.index {
  margin-bottom: var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.index__num {
  color: var(--vermilion-ink);
  font-variant-numeric: tabular-nums;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  view-transition-name: site-header;
}

.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.site-header.is-scrolled::after,
.site-header.is-open::after {
  opacity: 1;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  color: var(--ink);
  text-decoration: none;
}

.brand svg {
  width: auto;
  height: 2.25rem;
  color: inherit;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.625rem;
}

.menu-toggle__icon {
  position: relative;
  width: 1.375rem;
  height: 0.5rem;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out);
}

.menu-toggle__icon::before {
  top: 0;
}

.menu-toggle__icon::after {
  bottom: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  transform: translateY(3.25px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Navigation: full-screen menu below 900px */

.menu-open {
  overflow: hidden;
}

.site-nav {
  display: none;
  position: fixed;
  font-family: var(--font-sans);
  inset: var(--header-h) 0 0;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-s) var(--gutter) var(--space-l);
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-toggle[aria-expanded="true"] + .site-nav {
  display: flex;
}

.site-nav__item {
  border-bottom: var(--border);
}

.site-nav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  padding-block: var(--space-s);
  font-family: var(--font-serif);
  font-size: var(--step-3);
  text-align: left;
}

.site-nav__trigger svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.site-nav__trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.site-nav__trigger[aria-expanded="false"] + .site-nav__panel {
  display: none;
}

.site-nav__panel {
  padding-bottom: var(--space-s);
}

.site-nav__links a {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  text-decoration: none;
}

.site-nav__links a:hover {
  color: var(--link-hover);
}

.site-nav__num,
.site-nav__note {
  font-size: var(--step--1);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.site-nav__num {
  min-width: 1.75rem;
}

/* Services mega-menu: below 900px it stays a simple list. */

.mega__list .arrow,
.mega__preview,
.mega__start {
  display: none;
}

.mega__foot {
  margin-top: var(--space-2xs);
}

.mega__foot a {
  padding-block: var(--space-2xs);
}

.site-nav__cta {
  margin-top: auto;
}

/* Navigation: top bar with dropdowns from 900px */

@media (min-width: 900px) {
  .menu-toggle {
    display: none;
  }

  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .site-nav {
    display: grid;
    grid-column: 2 / 4;
    grid-template-columns: auto 1fr;
    grid-template-columns: subgrid;
    align-items: center;
    position: static;
    padding: 0;
    background: none;
    overflow: visible;
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-xs);
  }

  .site-nav__item {
    position: relative;
    border: 0;
  }

  .site-nav__trigger {
    gap: var(--space-2xs);
    width: auto;
    padding: var(--space-2xs) var(--space-xs);
    font-family: var(--font-sans);
    font-size: var(--step--1);
    font-weight: 500;
  }

  .site-nav__trigger:hover {
    color: var(--link-hover);
  }

  .site-nav__trigger svg {
    width: 0.625rem;
    height: 0.625rem;
  }

  .site-nav__panel {
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 50%;
    translate: -50% 0;
    min-width: 20rem;
    padding: var(--space-xs);
    background: var(--paper);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: var(--step--1);
    animation: panel-in var(--dur-fast) var(--ease-out);
  }

  .site-nav__links a {
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius);
  }

  .site-nav__links a:hover {
    background: var(--paper-2);
  }

  .site-nav__note {
    margin-left: auto;
    padding-left: var(--space-s);
  }

  .site-nav__cta {
    justify-self: end;
    margin: 0;
  }

  /* Services mega-menu: the list on the left, a preview of the hovered or focused service on the right
     (main.js marks both with .is-active), shortcuts along the bottom. */

  .site-header__inner {
    position: relative;
  }

  .site-nav__item--mega {
    position: static;
  }

  .mega {
    top: calc(100% - var(--space-2xs));
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-xs);
    width: min(56rem, 100% - 2 * var(--gutter));
  }

  .mega__list {
    display: grid;
    grid-auto-rows: 1fr;
  }

  .mega__list a {
    align-items: center;
    height: 100%;
    padding-block: 0.625rem;
    font-size: var(--step-0);
  }

  .mega__list a.is-active {
    background: var(--paper-2);
  }

  .mega__list .site-nav__num {
    min-width: 2.25rem;
  }

  .mega__list .arrow {
    display: block;
    margin-left: auto;
    opacity: 0;
    transform: translateX(-4px);
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }

  .mega__list a.is-active .arrow {
    opacity: 1;
    transform: none;
  }

  .mega__preview {
    display: block;
    padding: var(--space-m);
    background: var(--paper-2);
    border-radius: var(--radius);
  }

  .mega__card:not(.is-active) {
    display: none;
  }

  /* A new preview rises into place without fading, so moving down the list never blinks. */
  .mega__card {
    display: grid;
    justify-items: start;
    gap: var(--space-2xs);
    animation: rise-in var(--dur-fast) var(--ease-out);
  }

  .mega__art {
    justify-self: stretch;
    height: 9.5rem;
    margin-bottom: var(--space-xs);
    padding: var(--space-s);
    background: var(--paper);
    border: var(--border);
    border-radius: var(--radius);
  }

  .mega__art .art {
    margin-inline: auto;
  }

  .mega__name {
    font-family: var(--font-serif);
    font-size: var(--step-2);
    line-height: var(--leading-tight);
  }

  .mega__text {
    color: var(--ink-2);
  }

  .mega__card .link-arrow {
    margin-top: var(--space-2xs);
  }

  .mega__foot {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: var(--space-xs) var(--space-xs) var(--space-3xs);
    border-top: var(--border);
  }

  .mega__foot a {
    padding: 0;
  }

  .mega__start {
    display: inline-flex;
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes rise-in {
  from {
    transform: translateY(4px);
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* Service art: one tiny looping drawing per service (src/partials/service-art). Each part builds in after
   its own delay (--d), holds, then fades before the loop starts again. Without motion it shows complete. */

.art {
  width: auto;
  height: 100%;
  overflow: visible;
}

.art .ink {
  fill: var(--ink);
}

.art .ink-2 {
  fill: var(--ink-2);
}

.art .soft {
  fill: var(--line);
}

.art .on-ink {
  fill: var(--paper);
}

.art .frame,
.art .edge {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.25;
}

.art .guide {
  fill: none;
  stroke: var(--line);
}

.art .handles rect {
  fill: var(--paper);
  stroke: var(--ink-2);
}

.art .ring {
  fill: none;
  stroke: var(--ink);
  opacity: 0;
}

.art .dots {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .art :is(.draw, .grow, .pop) {
    transform-box: fill-box;
    animation: art-draw 4.8s var(--ease-out) var(--d, 0ms) infinite both;
  }

  .art .draw {
    transform-origin: var(--o, 0 50%);
  }

  .art .grow {
    transform-origin: var(--o, 50% 100%);
    animation-name: art-grow;
  }

  .art .pop {
    transform-origin: 50% 50%;
    animation-name: art-pop;
  }

  .art .dots {
    animation: art-dots 4.8s linear infinite;
  }

  .art .blink {
    animation: art-blink 0.9s var(--ease-out) var(--b, 0ms) infinite;
  }

  .art .slide {
    animation: art-slide 4.8s var(--ease-out) infinite;
  }

  .art .step {
    animation: art-step 4.8s var(--ease-out) infinite;
  }

  .art .ring {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: art-ring 2.4s var(--ease-out) var(--d, 0ms) infinite both;
  }
}

@keyframes art-draw {
  0% {
    transform: scaleX(0);
  }

  10%, 64% {
    transform: none;
    opacity: 1;
  }

  72%, 100% {
    transform: none;
    opacity: 0;
  }
}

@keyframes art-grow {
  0% {
    transform: scaleY(0);
  }

  10%, 64% {
    transform: none;
    opacity: 1;
  }

  72%, 100% {
    transform: none;
    opacity: 0;
  }
}

@keyframes art-pop {
  0% {
    transform: translateY(4px);
    opacity: 0;
  }

  8%, 64% {
    transform: none;
    opacity: 1;
  }

  72%, 100% {
    transform: none;
    opacity: 0;
  }
}

@keyframes art-dots {
  0%, 8% {
    opacity: 0;
  }

  12%, 22% {
    opacity: 1;
  }

  25%, 100% {
    opacity: 0;
  }
}

@keyframes art-blink {
  0%, 100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

@keyframes art-slide {
  0%, 20% {
    transform: none;
  }

  26%, 46% {
    transform: translateX(-44px);
  }

  52%, 72% {
    transform: translateX(-88px);
  }

  78%, 100% {
    transform: translateX(-132px);
  }
}

@keyframes art-step {
  0%, 20%, 78%, 100% {
    transform: none;
  }

  26%, 46% {
    transform: translateX(5px);
  }

  52%, 72% {
    transform: translateX(10px);
  }
}

@keyframes art-ring {
  from {
    transform: scale(1);
    opacity: 0.6;
  }

  to {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* Numbered rows (services). Hover, focus or a tap fills the row with ink and turns the number into a
   vermilion seal. With a mouse, main.js adds a copy of the row in ink (.row__body--ink) that spreads
   as a circle from the cursor and fades out slowly; otherwise the fill is instant. */

.rows {
  border-top: var(--border);
}

.row {
  --row-bg: transparent;
  --row-text: var(--ink);
  --row-muted: var(--ink-2);
  --row-seal: transparent;
  --row-seal-text: var(--ink-2);
  position: relative;
  border-bottom: var(--border);
}

.row:focus-within,
.row:active,
.row:not(.has-ink):hover,
.row__body--ink {
  --focus: var(--paper);
  --row-bg: var(--ink);
  --row-text: var(--paper);
  --row-muted: var(--night-ink-2);
  --row-seal: var(--vermilion);
  --row-seal-text: var(--on-accent);
}

.row__body {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  column-gap: var(--space-s);
  padding: var(--space-m) var(--space-2xs);
  background: var(--row-bg);
  color: var(--row-text);
}

.row__body--ink {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: circle(0 at 50% 50%);
}

.row__num {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  background: var(--row-seal);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--row-seal-text);
}

.row__title {
  font-size: var(--step-2);
}

.row .arrow {
  width: 1.5rem;
  height: 1.5rem;
}

.row:hover .arrow,
.row:focus-within .arrow {
  transform: translateX(6px);
}

.row__subs,
.row__text {
  grid-column: 2;
  padding-top: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--row-muted);
}

.row__text {
  max-width: 60ch;
}

.row__subs li {
  display: inline;
}

/* The dot stays with the item before it, so a wrapped line never starts with one. */
.row__subs li + li::before {
  content: "\a0\b7\20";
}

@media (min-width: 600px) {
  .row__body {
    grid-template-columns: 4rem 1fr auto;
    padding-inline: var(--space-s);
  }

  .row__title {
    font-size: var(--step-3);
  }
}

/* Steps: Discover, Design, Build, Support (home and service pages) */

.steps {
  display: grid;
  gap: var(--space-xl) var(--space-l);
  counter-reset: step;
}

.step {
  padding-top: var(--space-s);
  border-top: 1px solid var(--ink);
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.step h3 {
  margin-top: var(--space-l);
  font-size: var(--step-2);
}

.step p {
  margin-top: var(--space-xs);
  color: var(--ink-2);
}

@media (min-width: 600px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* FAQ (service pages, services overview, FAQ page): native <details>; the answer fades in, nothing
   changes height with animation. */

.faq__grid {
  display: grid;
  gap: var(--space-xl);
}

.faq h2 {
  font-size: var(--step-4);
}

@media (min-width: 1024px) {
  .faq__grid {
    grid-template-columns: 1fr 2fr;
  }
}


.faq {
  background: var(--paper-2);
}

.faq__list {
  border-top: var(--border);
}

.faq__item {
  border-bottom: var(--border);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary:hover {
  color: var(--link-hover);
}

.faq__item summary svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.faq__item[open] summary svg {
  transform: rotate(180deg);
}

.faq__answer {
  max-width: 60ch;
  padding-bottom: var(--space-m);
  color: var(--ink-2);
}

.faq__item[open] .faq__answer {
  animation: card-in var(--dur-fast) var(--ease-out);
}

/* Call to action band */

.cta {
  background: var(--paper-2);
  text-align: center;
}

.cta__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
}

.cta img {
  width: 3.5rem;
  height: 3.5rem;
}

.cta h2 {
  font-size: var(--step-4);
}

.cta p:not(.index) {
  font-size: var(--step-1);
  color: var(--ink-2);
}

.cta .btn {
  margin-top: var(--space-s);
}

/* Footer */

.site-footer {
  --focus: var(--night-ink);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-2xl) var(--space-l);
  background: var(--night);
  color: var(--night-ink);
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

/* Large, faint 匠 behind the footer. main.js draws it once when the footer comes into view;
   without JavaScript or with reduced motion it is simply there. */
.footer__mark {
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: clamp(16rem, 42vw, 34rem);
  height: auto;
  color: var(--night-ink);
  opacity: 0.07;
  pointer-events: none;
}

.footer__mark path {
  stroke-width: 1.2;
}

.footer__mark rect {
  stroke-width: 0.6;
}

/* Element selectors, not [pathLength]: Chrome does not restyle SVG elements matched by a camelCase
   attribute selector when an ancestor's class changes. */
.footer__mark :is(path, rect) {
  stroke-dasharray: 1 2;
}

.footer__mark.is-pending :is(path, rect) {
  stroke-dashoffset: 1;
}

.footer__mark.is-drawing :is(path, rect) {
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out) calc(var(--i) * 220ms);
}

.site-footer a {
  color: var(--night-ink-2);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--night-ink);
  text-decoration: underline;
}

.footer__top {
  display: grid;
  gap: var(--space-xl);
}

.footer__brand .brand {
  color: var(--night-ink);
}

.footer__brand p {
  max-width: 20rem;
  margin-top: var(--space-s);
  color: var(--night-ink-2);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--space-m);
}

.footer__heading {
  margin-bottom: var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--night-ink);
}

.footer__links li + li {
  margin-top: var(--space-2xs);
}

.footer__links a {
  display: inline-block;
  padding-block: var(--space-3xs);
  overflow-wrap: anywhere;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--night-line);
  color: var(--night-ink-2);
}

.footer__bottom img {
  width: 1.75rem;
  height: 1.75rem;
}

/* Connect holds the email address, so it gets the room to keep it on one line. */
.footer__nav > :last-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__nav > :last-child {
    grid-column: auto;
  }
}

@media (min-width: 1100px) {
  .footer__top {
    grid-template-columns: 1fr 3.5fr;
  }

  .footer__nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  }
}