/* Bundled. Tokens and decisions are documented in brand/DESIGN.md. */

/* Fonts: Sofia Sans by Lettersoup, SIL OFL 1.1 (see /assets/fonts/OFL.txt) */
@font-face {
  font-family: "Sofia Sans EC";
  src: url("../fonts/sofia-sans-extra-condensed-latin.woff2") format("woff2");
  font-weight: 760 860;
  font-display: swap;
  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: "Sofia Sans EC";
  src: url("../fonts/sofia-sans-extra-condensed-latin-ext.woff2") format("woff2");
  font-weight: 760 860;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: "Sofia Sans Cond";
  src: url("../fonts/sofia-sans-condensed-latin.woff2") format("woff2");
  font-weight: 500 760;
  font-display: swap;
  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: "Sofia Sans Cond";
  src: url("../fonts/sofia-sans-condensed-latin-ext.woff2") format("woff2");
  font-weight: 500 760;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
@font-face {
  font-family: "Sofia Sans";
  src: url("../fonts/sofia-sans-latin.woff2") format("woff2");
  font-weight: 380 700;
  font-display: swap;
  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: "Sofia Sans";
  src: url("../fonts/sofia-sans-latin-ext.woff2") format("woff2");
  font-weight: 380 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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 {
  color-scheme: light;

  --ink: #22201E;
  --ink-2: #5A5550;
  --paper: #FFFFFF;
  --shade: #F3F2F0;
  --rule: #D6D2CD;
  --red: #C8282E;
  --sheet: #FFFFFF;
  --foot-bg: #22201E;
  --foot-ink: #EDEBE8;
  --btn-hover: #45413D;
  --mark-red: #C8282E;
  --edge: rgb(34 32 30 / 0.3);
  --edge-soft: rgb(34 32 30 / 0.1);
  --sheet-line: rgb(34 32 30 / 0.06);
  --pad-shadow-1: rgb(34 32 30 / 0.16);
  --pad-shadow-2: rgb(34 32 30 / 0.08);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2322201E' stroke-width='1.6'/%3E%3C/svg%3E");
  /* Load sequence: the logo draws first; the hero copies start dealing out
     as the logo settles (70% of the way through its ease-out) */
  --logo-delay: 150ms;
  --logo-duration: 700ms;
  --content-start: calc(var(--logo-delay) + var(--logo-duration) * 0.05);
  /* wm-travel */ --wm-travel: 209.835px; /* /wm-travel */

  --t-blue: #C9D9EC;
  --t-goldenrod: #E9B949;
  --t-canary: #F7EAA6;
  --t-pink: #F2CDD3;
  --t-grey: #CFD3D8;
  --t-green: #D2E4C9;

  --f-display: "Sofia Sans EC", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --f-head: "Sofia Sans Cond", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-text: "Sofia Sans", "Segoe UI", "Helvetica Neue", sans-serif;

  --max: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);
  --sheet-pad: clamp(1.25rem, 5vw, 4.5rem);
  --step: 1.875rem;
}

/* Dark mode follows the device setting. The data-theme hooks are there so a
   manual switch can be added later without touching the tokens. The paper
   tints become deep versions of the same hues, under light text. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #ECE9E4;
    --ink-2: #ADA69E;
    --paper: #1B1A18;
    --sheet: #262422;
    --shade: #302E2B;
    --rule: #3E3B37;
    --red: #F2716B;
    --mark-red: #DC3A3F;
    --foot-bg: #121110;
    --foot-ink: #DDD8D2;
    --btn-hover: #CFCAC3;
    --edge: rgb(0 0 0 / 0.55);
    --edge-soft: rgb(0 0 0 / 0.35);
    --sheet-line: rgb(255 255 255 / 0.06);
    --pad-shadow-1: rgb(0 0 0 / 0.5);
    --pad-shadow-2: rgb(0 0 0 / 0.35);
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ECE9E4' stroke-width='1.6'/%3E%3C/svg%3E");
    --t-blue: #2F3D50;
    --t-goldenrod: #6B5220;
    --t-canary: #595126;
    --t-pink: #5B343B;
    --t-grey: #3C4046;
    --t-green: #354A30;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ECE9E4;
  --ink-2: #ADA69E;
  --paper: #1B1A18;
  --sheet: #262422;
  --shade: #302E2B;
  --rule: #3E3B37;
  --red: #F2716B;
  --mark-red: #DC3A3F;
  --foot-bg: #121110;
  --foot-ink: #DDD8D2;
  --btn-hover: #CFCAC3;
  --edge: rgb(0 0 0 / 0.55);
  --edge-soft: rgb(0 0 0 / 0.35);
  --sheet-line: rgb(255 255 255 / 0.06);
  --pad-shadow-1: rgb(0 0 0 / 0.5);
  --pad-shadow-2: rgb(0 0 0 / 0.35);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ECE9E4' stroke-width='1.6'/%3E%3C/svg%3E");
  --t-blue: #2F3D50;
  --t-goldenrod: #6B5220;
  --t-canary: #595126;
  --t-pink: #5B343B;
  --t-grey: #3C4046;
  --t-green: #354A30;
}

/* Base ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
  scrollbar-color: var(--ink-2) var(--shade);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--f-text);
  font-variant-numeric: proportional-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  /* keep the footer at the bottom of short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

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

[hidden] { display: none !important; }

/* A hovered underline turns red: the cursor square flies into it (site.js) */
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color 150ms ease-out; }
a:hover { text-decoration-thickness: 2px; text-decoration-color: var(--mark-red); }

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

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

h1, h2, h3, h4 { text-wrap: balance; }

p, li, dd { text-wrap: pretty; }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -3rem;
  z-index: 10;
  padding: 0.5rem 0.875rem;
  background: var(--ink);
  color: var(--paper);
  font: 600 0.9375rem var(--f-head);
  border-radius: 3px;
}
.skip:focus { top: 0.75rem; }

/* Tints: paper colours of a multi-part form, one per service group */
.t-blue { --tint: var(--t-blue); }
.t-goldenrod { --tint: var(--t-goldenrod); }
.t-canary { --tint: var(--t-canary); }
.t-pink { --tint: var(--t-pink); }
.t-grey { --tint: var(--t-grey); }
.t-green { --tint: var(--t-green); }

.tab {
  display: inline-block;
  background: var(--tint);
  color: var(--ink);
  border-radius: 1px;
}

/* Controls --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.875rem;
  padding: 0.625rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font: 650 1.0625rem/1.2 var(--f-head);
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 1rem; }

.link {
  font: 600 1.0625rem/1.3 var(--f-head);
  color: var(--ink);
}

/* Header ------------------------------------------------------------------ */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem) 0.5rem;
  position: relative;
  z-index: 30;
}
/* Two columns: the logo on the left spans both rows on the right (menu and
   Contact us, then the Detailed / Dark switches), so it is exactly as tall
   as the two rows together. */
.site-head {
  --menu-h: 2.5rem;
  --switch-h: 2.375rem;
  --head-gap: 0.5rem;
  --head-h: calc(var(--menu-h) + var(--head-gap) + var(--switch-h));
}
.brand { flex: none; }
.brand .wm { display: block; height: var(--head-h); width: calc(var(--head-h) * 2.0558); }
.wm-b, .wm-rest { fill: var(--ink); }
.wm-dot { fill: var(--mark-red); }
.wm-bar { fill: var(--ink); }
.wm-bar-text { fill: var(--sheet); }

/* Every page load: the logo draws itself left to right. It starts as "b."
   alone; as the red dot slides right uncovering "undled", the "consulting"
   bar grows from the left edge, faster than the dot, and they finish
   together. It uses the same 700ms ease-out as the hero copies, which
   start as the logo settles (see --content-start). Distances are in the SVG's own
   units, written by tools/build_logo.py. */
.brand .wm-dot { animation: head-dot var(--logo-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--logo-delay) both; }
.brand .wm-rest { animation: head-rest var(--logo-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--logo-delay) both; }
.brand .wm-sub { animation: head-sub var(--logo-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--logo-delay) both; }
@keyframes head-dot { from { transform: translateX(calc(var(--wm-travel) * -1)); } }
@keyframes head-rest {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes head-sub {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.site-head ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-head .nav-extra a {
  font: 600 1rem/1 var(--f-head);
  text-decoration: none;
}
.site-head .nav-extra a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--mark-red); }

@media (max-width: 52rem) {
  .site-head .nav-extra { display: none; }
}
@media (max-width: 40rem) {
  .site-head { --menu-h: 2.25rem; --switch-h: 2.125rem; --head-gap: 0.375rem; gap: 0.75rem; }
}
/* very narrow screens (down to 320px): a compact header so nothing scrolls sideways */
@media (max-width: 24rem) {
  .site-head { --menu-h: 1.875rem; --switch-h: 1.625rem; --head-gap: 0.25rem; gap: 0.625rem; }
  .site-head .head-cta { padding: 0.25rem 0.75rem; font-size: 0.9375rem; }
  .site-head .switches { gap: 0.75rem; padding: 0 0.5rem; }
  .site-head .switch { gap: 0.375rem; font-size: 0.9375rem; }
  .site-head .switch input { width: 0.875rem; height: 0.875rem; }
}

/* Header tools and the simple / detailed switch ------------------------- */

.site-head__right {
  display: grid;
  grid-template-rows: var(--menu-h) var(--switch-h);
  row-gap: var(--head-gap);
  justify-items: end;
  align-items: center;
}
.site-head__menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  height: var(--menu-h);
}
.site-head .head-cta { min-height: var(--menu-h); }

/* Page switches: "Detailed" and "Dark" tick boxes on a small printed strip,
   in the second row of the header */
html:not([data-view]) .switches { display: none; }

.switches {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--switch-h);
  padding: 0 1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--sheet);
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 600 1rem/1 var(--f-head);
  cursor: pointer;
  white-space: nowrap;
}
.switch input {
  appearance: none;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--sheet);
  cursor: pointer;
}
.switch input:checked { background: var(--ink); }
.switch input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Tooltips under the switches. Shown on hover and on keyboard focus, readable
   by screen readers (aria-describedby), dismissable with Escape, and the
   pointer can move onto them without them disappearing (WCAG 1.4.13). */
.switch-wrap { position: relative; display: inline-flex; }
.tip {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: -0.75rem;
  z-index: 40;
  width: max-content;
  max-width: min(16rem, 80vw);
  padding: 0.5rem 0.75rem;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font: 500 0.875rem/1.4 var(--f-text);
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease-out, visibility 0s linear 120ms;
}
/* invisible bridge across the gap, so moving onto the tooltip keeps it open */
.tip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 0.875rem; }
/* small pointer up to the switch */
.tip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 1.25rem;
  border: 0.375rem solid transparent;
  border-bottom-color: var(--ink);
}
/* Shown on hover only where there is a real pointer, on keyboard focus only
   (not when a tap or click focuses the box), and briefly after a tap on
   touch screens (.tip-flash, added by site.js). */
@media (hover: hover) {
  .switch-wrap:hover .tip { opacity: 1; visibility: visible; transition-delay: 0s; }
}
.switch-wrap:has(:focus-visible) .tip,
.switch-wrap.tip-flash .tip {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.switch-wrap.tip-dismissed .tip { opacity: 0; visibility: hidden; }

/* Simple view: the same page condensed to an overview ------------------- */

.s-only { display: none; }
[data-view="simple"] .s-only { display: block; }

[data-view="simple"] .d-only,
[data-view="simple"] .practice__detail,
[data-view="simple"] .xo__note,
[data-view="simple"] .terms dd,
[data-view="simple"] .faq p { display: none; }

/* Section spacing is the same in both views, so headings never move when
   the view changes; only the content under each heading grows or shrinks. */
[data-view="simple"] .section h2 { margin-bottom: 1.5rem; }

[data-view="simple"] .xo tbody th { padding-block: 0.875rem; }
[data-view="simple"] .xo tbody th strong { margin-bottom: 0; }

[data-view="simple"] .practice-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 3rem;
}
[data-view="simple"] .practice {
  grid-template-columns: minmax(0, 1fr);
  padding-block: 1.5rem 1.75rem;
}

[data-view="simple"] .terms {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 1.5rem;
  margin-top: 0;
}
[data-view="simple"] .terms dt { padding: 1rem 0 0; }

[data-view="simple"] .faq {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2.5rem;
  margin-top: 0;
}
[data-view="simple"] .faq > div {
  padding-block: 1rem;
  border-top: 1px solid var(--rule);
}
[data-view="simple"] .faq h3 { margin: 0; }

@media (max-width: 60rem) {
  [data-view="simple"] .practice-list,
  [data-view="simple"] .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-view="simple"] .terms { grid-template-columns: minmax(0, 1fr); }
  [data-view="simple"] .terms dt { padding-block: 0.875rem; }
}
@media (max-width: 40rem) {
  [data-view="simple"] .practice-list,
  [data-view="simple"] .faq { grid-template-columns: minmax(0, 1fr); }
}

.more-wrap { margin: 1.75rem 0 0; }
.more {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 1.0625rem/1.3 var(--f-head);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: text-decoration-color 150ms ease-out;
}
.more:hover { text-decoration-thickness: 2px; text-decoration-color: var(--mark-red); }

/* The switch between views animates with the View Transitions API: each
   block below morphs from its old size and place to its new one. */
.site-head { view-transition-name: head; }
.hero { view-transition-name: hero; }
#crossover { view-transition-name: crossover; }
#services { view-transition-name: services; }
.practice-list > .practice:nth-child(1) { view-transition-name: practice-1; }
.practice-list > .practice:nth-child(2) { view-transition-name: practice-2; }
.practice-list > .practice:nth-child(3) { view-transition-name: practice-3; }
.practice-list > .practice:nth-child(4) { view-transition-name: practice-4; }
.practice-list > .practice:nth-child(5) { view-transition-name: practice-5; }
.practice-list > .practice:nth-child(6) { view-transition-name: practice-6; }
.nudge { view-transition-name: nudge; }
#how { view-transition-name: how; }
#fit { view-transition-name: fit; }
#questions { view-transition-name: questions; }
#contact { view-transition-name: contact; }
.site-foot { view-transition-name: foot; }

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 460ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* First-visit loading screen. view.js adds .first-visit to <html> once per
   browser session, before first paint, so the sheet covers the page while it
   loads. site.js adds .splash-go when everything has loaded: the red dot
   slides right and spells "bundled.", then the sheet lifts off like the top
   sheet of a pad. If scripts fail, the sheet still lifts after 4.2 seconds. */
.splash { display: none; }
.first-visit .splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--paper);
  border-top: 0.5rem solid var(--mark-red);
  animation: splash-lift-late 600ms cubic-bezier(0.7, 0, 0.3, 1) 4200ms forwards;
}
.splash-go .splash { animation: splash-lift 620ms cubic-bezier(0.7, 0, 0.3, 1) 1250ms forwards; }
.splash__wm { width: min(64vw, 24rem); height: auto; overflow: visible; }
.splash .wm-b, .splash .wm-rest { fill: var(--ink); }
.splash .wm-dot { fill: var(--mark-red); }
/* at rest: "b." in the middle, the rest of the word hidden */
.splash .splash__word { transform: translateX(calc(var(--wm-travel) / 2)); }
.splash .wm-dot { transform: translateX(calc(var(--wm-travel) * -1)); }
.splash .wm-rest { clip-path: inset(0 100% 0 0); }
.splash-go .splash .splash__word,
.splash-go .splash .wm-dot { animation: wm-settle 950ms cubic-bezier(0.65, 0, 0.35, 1) 150ms forwards; }
.splash-go .splash .wm-rest { animation: wm-open 950ms cubic-bezier(0.65, 0, 0.35, 1) 150ms forwards; }
@keyframes wm-settle { to { transform: none; } }
@keyframes wm-open { to { clip-path: inset(0 0 0 0); } }
@keyframes splash-lift { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes splash-lift-late { to { transform: translateY(-100%); visibility: hidden; } }
/* the hero's copies deal out as the sheet lifts, not while it hides them */
.first-visit .copy { animation-delay: calc(2150ms + var(--i) * 60ms); }

/* Hero: a padded form set. Glue edge on top, copies stepping out below --- */

.hero { padding-block: clamp(0.5rem, 1.5vw, 1rem) 0; }

.pad {
  filter: drop-shadow(0 1px 1px var(--pad-shadow-1)) drop-shadow(0 8px 12px var(--pad-shadow-2));
}

.pad__sheet {
  position: relative;
  z-index: 7;
  background: var(--sheet);
  border-top: 0.5rem solid var(--mark-red);
  border-radius: 2px 2px 0 0;
  padding: clamp(2rem, 6vw, 4.75rem) var(--sheet-pad) clamp(2rem, 5vw, 3.75rem);
  box-shadow: inset 0 0 0 1px var(--sheet-line);
}

.pad__sheet h1 {
  margin: 0 0 1.5rem;
  max-width: 11.5em;
  font: 800 clamp(3rem, 7vw, 5.5rem)/0.94 var(--f-display);
  letter-spacing: -0.005em;
}

.lead {
  margin: 0 0 2rem;
  max-width: 36em;
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin: 0;
}

/* The copies are links: each scrolls to its full service section (switching
   to the detailed view if needed). Two down chevrons mark them as jumps. */
.copy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--step);
  padding-inline: var(--sheet-pad);
  background: var(--tint);
  color: var(--ink);
  font: 600 0.875rem/1 var(--f-head);
  letter-spacing: 0.01em;
  text-decoration: none;
  /* shadow cast by the sheet above, plus the paper's own bottom edge */
  box-shadow: inset 0 6px 5px -5px var(--edge), inset 0 -1px 0 var(--edge-soft);
  animation: deal 700ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.copy:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; text-decoration-color: var(--mark-red); }
.copy:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.copy__arrow {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 160ms ease-out;
}
.copy:hover .copy__arrow,
.copy:focus-visible .copy__arrow { transform: translateY(2px); }
.copy:nth-child(1) { z-index: 6; --i: 1; }
.copy:nth-child(2) { z-index: 5; --i: 2; }
.copy:nth-child(3) { z-index: 4; --i: 3; }
.copy:nth-child(4) { z-index: 3; --i: 4; }
.copy:nth-child(5) { z-index: 2; --i: 5; }
.copy:nth-child(6) { z-index: 1; --i: 6; border-radius: 0 0 2px 2px; }
.copy { animation-delay: calc(var(--content-start) + var(--i) * 60ms); }

@keyframes deal {
  from { transform: translateY(calc(var(--i) * var(--step) * -1)); }
}

@media (max-width: 40rem) {
  :root { --step: 2.25rem; }
  .pad__sheet h1 { font-size: clamp(2.5rem, 11.5vw, 3.25rem); }
}

/* Sections --------------------------------------------------------------- */

.section { padding-block: var(--section) 0; }
/* the first section sits closer to the hero pad than sections sit to each other */
#crossover { padding-top: clamp(2.5rem, 5vw, 4rem); }

.section h2 {
  margin: 0 0 1rem;
  max-width: 20em;
  font: 700 clamp(2rem, 3.8vw, 3rem)/1.02 var(--f-head);
  letter-spacing: -0.005em;
}

.intro {
  margin: 0 0 2.75rem;
  max-width: 38em;
  color: var(--ink-2);
  font-size: 1.1875rem;
  line-height: 1.5;
}

/* Crossover table -------------------------------------------------------- */

.xo-scroll { overflow-x: auto; }

.xo {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.xo thead th {
  padding: 0 0.25rem 0.875rem;
  font: 600 0.875rem/1 var(--f-head);
  text-align: center;
  vertical-align: bottom;
  white-space: nowrap;
}
.xo thead .tab { padding: 0.375rem 0.5rem; }
.xo .xo__decision-head {
  width: 46%;
  padding-left: 0;
  color: var(--ink-2);
  text-align: left;
}
.xo tbody th,
.xo td { border-top: 1px solid var(--rule); }
.xo tbody tr:last-child th,
.xo tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.xo tbody th {
  padding: 1.375rem 2rem 1.375rem 0;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}
.xo tbody th strong {
  display: block;
  margin-bottom: 0.375rem;
  font: 700 1.3125rem/1.2 var(--f-head);
}
.xo__note {
  display: block;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
}
.xo__who { display: none; }
.xo td {
  text-align: center;
  vertical-align: middle;
}
.xo .mark {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  background: var(--ink);
  vertical-align: middle;
}

@media (max-width: 48rem) {
  .xo, .xo tbody, .xo tr, .xo tbody th { display: block; width: 100%; }
  .xo thead, .xo td { display: none; }
  .xo tbody th { padding: 1.25rem 0; }
  .xo tbody tr:last-child th { border-bottom: 1px solid var(--rule); }
  .xo__who {
    display: block;
    margin-top: 0.625rem;
    font: 600 0.9375rem/1.3 var(--f-head);
  }
}

/* Practices -------------------------------------------------------------- */

.practice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem 3rem;
  padding-block: 2.25rem 2.5rem;
  border-top: 1px solid var(--rule);
}
.practice h3 { margin: 0; }
.practice h3 .tab {
  padding: 0.25rem 0.625rem 0.3125rem;
  font: 700 1.625rem/1.1 var(--f-head);
}
.practice__name p {
  margin: 0.875rem 0 0;
  max-width: 24em;
  font-size: 1.125rem;
  line-height: 1.45;
}
.practice h4 {
  margin: 0.375rem 0 0.625rem;
  color: var(--ink-2);
  font: 600 0.9375rem/1.2 var(--f-head);
  letter-spacing: 0.01em;
}
.practice ul { margin: 0; padding-left: 1.125em; }
.practice li + li { margin-top: 0.375rem; }
.practice li::marker { color: var(--ink-2); }
.practice__aside {
  margin: 1rem 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

@media (max-width: 60rem) {
  .practice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .practice__name { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .practice { grid-template-columns: minmax(0, 1fr); }
}

.nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: 2rem 0;
  border-top: 1px solid var(--rule);
}
.nudge p {
  margin: 0;
  max-width: 34em;
  font: 600 1.25rem/1.35 var(--f-head);
}

/* How we work ------------------------------------------------------------ */

.terms {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  margin: 2rem 0 0;
}
.terms dt,
.terms dd {
  padding-block: 1.375rem;
  border-top: 1px solid var(--rule);
}
.terms dt {
  padding-right: 2rem;
  font: 700 1.3125rem/1.25 var(--f-head);
}
.terms dd { margin: 0; max-width: 38em; }
.terms dd p { margin: 0 0 0.75rem; }
.terms dd p:last-child { margin-bottom: 0; }

@media (max-width: 44rem) {
  .terms { grid-template-columns: minmax(0, 1fr); }
  .terms dt { padding-bottom: 0.375rem; }
  .terms dd { padding-top: 0; border-top: 0; }
}

/* Fit -------------------------------------------------------------------- */

.fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 4rem;
  margin-top: 2rem;
}
.fit h3 {
  margin: 0 0 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--rule);
  font: 700 1.3125rem/1.25 var(--f-head);
}
.fit ul { margin: 0; padding-left: 1.25em; }
.fit li { padding-left: 0.25em; }
.fit li + li { margin-top: 0.5rem; }
.fit__yes { list-style-type: "+"; }
.fit__no { list-style-type: "\2013"; }
.fit li::marker { font-weight: 700; color: var(--ink-2); }

@media (max-width: 44rem) {
  .fit { grid-template-columns: minmax(0, 1fr); }
}

/* Questions -------------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.25rem 4rem;
  margin-top: 2rem;
}
.faq h3 {
  margin: 0 0 0.5rem;
  font: 700 1.25rem/1.25 var(--f-head);
}
.faq p { margin: 0; max-width: 36em; }

@media (max-width: 44rem) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}

/* Inquiry form: a printed form, labels at the top-left of ruled boxes --- */

.enquiry {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .enquiry { grid-template-columns: minmax(0, 1fr); }
}

.sheet {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-top: 0.5rem solid var(--mark-red);
  border-radius: 2px;
}
.sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.sheet__head p { margin: 0; }
.sheet__title { font: 700 1.5rem/1.1 var(--f-head); }
.sheet__no {
  color: var(--red);
  font: 600 0.9375rem/1.2 var(--f-head);
  font-variant-numeric: tabular-nums;
}

.fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.field {
  position: relative;
  padding: 0.5rem 1rem 0.5rem;
  border-bottom: 1px solid var(--rule);
}
.field:nth-child(odd):not(.field--full) { border-right: 1px solid var(--rule); }
.field--full { grid-column: 1 / -1; }
.field:focus-within {
  background: var(--shade);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.field label {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--ink-2);
  font: 600 0.8125rem/1.3 var(--f-head);
  letter-spacing: 0.01em;
}
.req { color: var(--red); }
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.25rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--f-text);
  caret-color: var(--red);
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; }
.field textarea { min-height: 9rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 1.5rem;
  background: var(--select-arrow) no-repeat right 0.125rem center / 0.75rem;
  cursor: pointer;
}
.field input:user-invalid,
.field textarea:user-invalid { color: var(--red); }

@media (max-width: 34rem) {
  .fields { grid-template-columns: minmax(0, 1fr); }
  .field:nth-child(odd):not(.field--full) { border-right: 0; }
}

.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1rem;
}
.small { margin: 0; max-width: 30em; color: var(--ink-2); font-size: 0.9375rem; }

.form-status {
  margin: 0;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--t-canary);
  font-weight: 500;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.next h3 {
  margin: 0.25rem 0 1rem;
  font: 700 1.3125rem/1.25 var(--f-head);
}
.next ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.next li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  padding-block: 0.875rem;
  border-top: 1px solid var(--rule);
  counter-increment: step;
}
.next li::before {
  content: counter(step);
  font: 700 1.25rem/1.2 var(--f-head);
  font-variant-numeric: tabular-nums;
}
.next__email {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-weight: 500;
}
.next__email a { font-weight: 650; word-break: break-word; }

/* Footer ----------------------------------------------------------------- */

.site-foot {
  margin-top: var(--section);
  padding-block: 3rem calc(3rem + env(safe-area-inset-bottom, 0px));
  background: var(--foot-bg);
  color: var(--foot-ink);
}
.site-foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 2rem;
  font-size: 0.9375rem;
}
.site-foot img { width: 8.5rem; max-width: 100%; height: auto; margin-bottom: 1rem; }
.site-foot p { margin: 0 0 0.375rem; }
.site-foot :focus-visible { outline-color: var(--foot-ink); }
@media (max-width: 44rem) {
  .site-foot__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Simple pages (thanks, 404, privacy) ------------------------------------ */

.page { padding-block: clamp(1.25rem, 3vw, 2.5rem) 0; }
.page h1 {
  margin: 0 0 1.25rem;
  max-width: 14em;
  font: 800 clamp(2.75rem, 7vw, 5rem)/0.95 var(--f-display);
}
.page .lead { max-width: 34em; }
.page .ref {
  display: inline-block;
  margin: 0.5rem 0 1.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--rule);
  color: var(--red);
  font: 700 1.5rem/1 var(--f-head);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.prose { max-width: 40em; }
.prose h2 {
  margin: 2.5rem 0 0.625rem;
  font: 700 1.5rem/1.2 var(--f-head);
}
.prose p, .prose ul { margin: 0 0 1rem; }
.prose li + li { margin-top: 0.375rem; }

/* Cursor accent: a small red square (the logo's dot) that follows the mouse,
   sitting just past the end of the arrow's stem (offset set in site.js).
   Created by site.js only on devices with a fine pointer that can hover.
   The real cursor stays visible; the dot never takes clicks. It is the
   header logo's period: it stays in the logo while that is on screen, flies
   out to the pointer once the logo scrolls away, and flies home when it
   returns. Hovering an underlined link flies it into the underline with the
   Web Animations API; it reappears at the pointer on leaving. */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 0.625rem;
  height: 0.625rem;
  margin: -0.3125rem 0 0 -0.3125rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out, width 120ms cubic-bezier(0.23, 1, 0.32, 1), height 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.cursor-dot.is-visible { opacity: 1; }
/* A minute without input: slowly grow to 14px, as on applist.info and crowdsourced.tech.
   The margin stays put, so it grows down and right, away from the arrow; any input
   shrinks it back in 120ms. Size, not scale: the transform is the dot's position. */
.cursor-dot.is-idle {
  width: 0.875rem;
  height: 0.875rem;
  transition: opacity 200ms ease-out, width 600ms cubic-bezier(0.23, 1, 0.32, 1), height 600ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* landing back in the logo: vanish at once, so no copy is left behind while the page scrolls */
.cursor-dot.is-instant { transition: none; }
/* the header logo's period while the cursor square is out with the pointer */
.site-head .wm-dot.is-away { opacity: 0; }
.cursor-dot__mark {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--mark-red);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease-out;
}
/* over buttons, switches and other controls without an underline: swell into a soft highlight */
.cursor-dot.is-active .cursor-dot__mark { transform: scale(2.2); opacity: 0.35; }
/* while pressing */
.cursor-dot.is-pressed .cursor-dot__mark { transform: scale(0.7); }
.cursor-dot.is-active.is-pressed .cursor-dot__mark { transform: scale(1.8); }
/* over text fields: get out of the way of the caret */
.cursor-dot.is-typing .cursor-dot__mark { opacity: 0; transform: scale(0.4); }

/* Brand page ------------------------------------------------------------- */

.brand-section { padding-top: clamp(3rem, 6vw, 4.5rem); }
.brand-section h2 { margin: 0 0 0.75rem; font: 700 clamp(1.75rem, 3vw, 2.25rem)/1.1 var(--f-head); }
.brand-section h3 { margin: 2rem 0 0.75rem; font: 700 1.25rem/1.25 var(--f-head); }
.brand-intro { margin: 0 0 1.5rem; max-width: 40em; color: var(--ink-2); }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
}
.logo-card { margin: 0; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; background: var(--sheet); }
.logo-card__art { display: grid; place-items: center; min-height: 11rem; padding: 2rem; }
/* fixed backgrounds: these show the logo as it should be used, whatever the page theme */
.logo-card__art--light { background: #FFFFFF; }
.logo-card__art--dark { background: #1B1A18; }
.logo-card__art img { width: min(13rem, 70%); height: auto; }
.logo-card__art img[src*="monogram"] { width: auto; height: 5.5rem; }
.logo-card__art img[src*="wordmark"] { width: min(14rem, 75%); }
.logo-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--rule);
}
.logo-card__name { display: block; font: 700 1.0625rem/1.2 var(--f-head); }
.logo-card__use { display: block; margin-top: 0.125rem; color: var(--ink-2); font-size: 0.9375rem; }
.logo-card__files { display: flex; gap: 0.875rem; font: 600 0.9375rem/1 var(--f-head); }

.usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 3rem; }
.usage h3 { margin-top: 0.5rem; }
.usage ul { margin: 0; padding-left: 1.2em; }
.usage li + li { margin-top: 0.375rem; }

.swatches {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.swatch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.125rem 0.75rem;
  align-content: start;
  padding-bottom: 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  background: var(--sheet);
}
.swatch__chip { grid-column: 1 / -1; display: block; height: 4.5rem; margin-bottom: 0.625rem; box-shadow: inset 0 0 0 1px var(--rule); }
/* rows that always fill: 4 core colours, 6 service colours */
.swatches--core { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.swatches--tints { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 64rem) {
  .swatches--tints { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
  .swatches--core, .swatches--tints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.swatch__name, .swatch__hex, .swatch__use { grid-column: 1; padding-left: 0.875rem; }
.swatch__name { font: 700 1rem/1.25 var(--f-head); }
.swatch__hex { font: 600 0.9375rem/1.3 var(--f-head); font-variant-numeric: tabular-nums; user-select: all; }
.swatch__use { color: var(--ink-2); font-size: 0.875rem; line-height: 1.4; }
.swatch__copy {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: start;
  margin-right: 0.875rem;
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: 600 0.875rem/1 var(--f-head);
  cursor: pointer;
}
.swatch__copy:hover { border-color: var(--ink); }
[data-chip="#22201E"] { background: #22201E; }
[data-chip="#FFFFFF"] { background: #FFFFFF; }
[data-chip="#1B1A18"] { background: #1B1A18; }
[data-chip="#C8282E"] { background: #C8282E; }
[data-chip="#C9D9EC"] { background: #C9D9EC; }
[data-chip="#E9B949"] { background: #E9B949; }
[data-chip="#F7EAA6"] { background: #F7EAA6; }
[data-chip="#F2CDD3"] { background: #F2CDD3; }
[data-chip="#CFD3D8"] { background: #CFD3D8; }
[data-chip="#D2E4C9"] { background: #D2E4C9; }

.type-specimens { margin: 0; }
.type-specimens dt { margin: 1.75rem 0 0.375rem; }
.type-specimens dt:first-child { margin-top: 0.5rem; }
.type-specimens dd { margin: 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.type-specimens dd strong { color: var(--ink); font-weight: 600; }
.type-sample--display { font: 800 clamp(2.25rem, 5vw, 3.5rem)/0.98 var(--f-display); }
.type-sample--head { font: 700 clamp(1.5rem, 3vw, 2rem)/1.1 var(--f-head); }
.type-sample--text { max-width: 38em; font-size: 1.125rem; line-height: 1.55; }

/* Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tip { transition: none; }
  .cursor-dot, .cursor-dot__mark { transition: none; }
  .first-visit .splash { display: none; }
  .brand .wm-dot, .brand .wm-rest, .brand .wm-sub { animation: none; }
  .first-visit .copy { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .copy { animation: none; }
  .copy__arrow { transition: none; }
  .btn:active { transform: none; }
}