/* DASON · Graphite Hairline
   A soft graphite ground, warm off-white type at quiet sizes, and red only as hairlines, small marks and one button. */

/* Google Fonts' latin files (SIL OFL 1.1), served from this site so no third party sits on the first paint. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/jost-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: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-serif-4-italic-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;
}

/* Metric-matched fallbacks so the swap to the web fonts does not move the layout. */
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Roboto");
  size-adjust: 95.5%;
  ascent-override: 112%;
  descent-override: 40%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Serif Fallback";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Times New Roman Italic");
  size-adjust: 84.5%;
  ascent-override: 123%;
  descent-override: 40%;
  line-gap-override: 0%;
}

/* Contrast on --ground / --raised: head 13.9 / 12.5, body 12.0 / 10.8, muted 8.1 / 7.3, dim 6.5 / 5.8.
   #ff0000 is 4.3:1 on graphite, so it never sets text: it draws lines and marks only. */
:root {
  --ground: #242527;
  --raised: #2b2d31;
  --lift: #323437;
  --rule: #55565c;
  --line: #48484e;
  /* under the pointer: a card a hair lighter, an outline a step brighter */
  --lift-hi: #37393d;
  --line-hi: #606167;
  --head: #f7f3eb;
  --body: #e8e3d9;
  --muted: #c0bcb2;
  --dim: #ada8a0;
  --red: #ff0000;
  --fill: #d10000;
  --fill-hover: #b30000;

  --sans: "Jost", "Jost Fallback", sans-serif;
  --serif: "Source Serif 4", "Serif Fallback", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --max: 1360px;
  --gutter: 20px;
  --gap: 16px;
  --header-h: 60px;
  --section-y: clamp(84px, 3rem + 6vw, 152px);

  --fs-body: clamp(16px, 15.6px + .12vw, 17px);
  --fs-lead: clamp(17px, 16.2px + .25vw, 19px);
  --fs-h1: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
  --fs-row: clamp(1.25rem, 1.1rem + .45vw, 1.625rem);
  --fs-fig: clamp(1.5rem, 1.3rem + .6vw, 2rem);

  /* arrows drawn as 1.2px strokes, used as masks so they take currentColor */
  --ar-e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M1 8h13.5M9.5 3 14.5 8l-5 5'/%3E%3C/svg%3E");
  --ar-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M15 8H1.5M6.5 3 1.5 8l5 5'/%3E%3C/svg%3E");
  --ar-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M3 13 13 3M5 3h8v8'/%3E%3C/svg%3E");
  --ar-s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M8 1v13.5M3 9.5l5 5 5-5'/%3E%3C/svg%3E");
  --ar-n: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M8 15V1.5M3 6.5l5-5 5 5'/%3E%3C/svg%3E");
  /* the logo's chevron, as a mask */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 138'%3E%3Cpath d='M0 138 54 0h5l51 138H89L56.5 37 21 138z'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
  :root { --gutter: 40px; --gap: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: clamp(48px, 6vw - 12px, 80px); --header-h: 72px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ground);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 300; color: var(--head); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .28em; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
p, li, dd { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--head); outline-offset: 4px; }
/* a control scrolled into view (Shift+Tab) stops 8px clear of the sticky header, so its focus ring shows whole */
a[href], button, summary { scroll-margin-block: 8px; }
::selection { background: var(--fill); color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* keeps a short name or number on one line where a space or hyphen would let it break (Suite 02-01) */
.nowrap { white-space: nowrap; }
.skip {
  position: absolute;
  z-index: 100;
  left: 16px;
  top: -80px;
  padding: 12px 18px;
  background: var(--head);
  color: var(--ground);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

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

/* ---------- Arrows ---------- */
.ar {
  display: inline-block;
  flex: none;
  width: .75em;
  height: .75em;
  margin-left: .45em;
  vertical-align: -.04em;
  background: currentColor;
  -webkit-mask: var(--ar) center / contain no-repeat;
  mask: var(--ar) center / contain no-repeat;
  transition: transform .2s var(--ease);
}
.ar-e { --ar: var(--ar-e); }
.ar-w { --ar: var(--ar-w); margin: 0 .5em 0 0; }
.ar-ne { --ar: var(--ar-ne); }
.ar-s { --ar: var(--ar-s); vertical-align: -.1em; }
.ar-n { --ar: var(--ar-n); }
a:hover .ar-e { transform: translateX(3px); }
a:hover .ar-w { transform: translateX(-3px); }
a:hover .ar-ne { transform: translate(2px, -2px); }
a:hover .ar-s { transform: translateY(3px); }
a:hover .ar-n { transform: translateY(-3px); }

/* ---------- Shared type ---------- */
/* The eyebrow opens every section: a 24px red hairline, the section's number and its name in small tracked caps. */
.eyebrow {
  position: relative;
  padding-left: 40px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(.8em - 1px);
  width: 24px;
  height: 1px;
  background: var(--red);
  transform-origin: 0 50%;
}
.eyebrow .num { margin-right: .7em; color: var(--dim); }

h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.lead {
  max-width: 32em;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--ground);
  transition: background-color .25s, box-shadow .25s;
}
.js .site-header { background: rgba(36, 37, 39, 0); }
.js .site-header.is-scrolled {
  background: rgba(36, 37, 39, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 var(--line);
}
.js .site-header.is-open {
  background: var(--ground);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 0 -1px 0 var(--line);
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}
.brand { display: block; flex: none; padding-block: 4px; }
.brand img { width: 96px; }

.menu-btn { display: none; }
.js .menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 64px;
  min-height: 44px;
  margin-right: -4px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--head);
  font-size: 14px;
  letter-spacing: .06em;
  cursor: pointer;
}
.menu-btn .menu-close,
.menu-btn[aria-expanded="true"] .menu-open { display: none; }
.menu-btn[aria-expanded="true"] .menu-close { display: inline; }

.site-nav a { text-decoration: none; }

@media (max-width: 1023.98px) {
  .js .site-nav { display: none; }
  .js .site-header.is-open .site-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px var(--gutter) 32px;
    background: var(--ground);
  }
  .js .site-nav ul,
  .js .nav-tel { width: min(100%, var(--max)); margin-inline: auto; }
  .js .site-nav a {
    display: flex;
    align-items: baseline;
    min-height: 60px;
    padding-block: 16px;
    border-bottom: 1px solid var(--line);
    color: var(--head);
    font-size: 21px;
    font-weight: 300;
    line-height: 1.3;
  }
  .js .nav-num {
    flex: none;
    width: 40px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    color: var(--dim);
    transform: translateY(-.2em);
  }
  /* the section in view: a red hairline down the row's left edge */
  .js .site-nav a[aria-current] { box-shadow: inset 1px 0 0 var(--red); padding-left: 14px; }
  /* Log in has no number, so it starts where the names do */
  .js .site-nav .nav-login a { padding-left: 40px; border-bottom: 0; color: var(--muted); }
  .js .nav-tel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 40px;
  }
  .nav-tel-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .js .site-nav .nav-tel a {
    align-self: flex-start;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    font-size: 24px;
    letter-spacing: .01em;
  }
  html.menu-open { overflow: hidden; }
  /* short phones (320x568): the whole sheet, number included, fits without scrolling */
  @media (max-height: 640px) {
    .js .site-nav a { min-height: 52px; padding-block: 11px; }
    .js .nav-tel { padding-top: 20px; }
  }

  /* Without JavaScript the anchors simply wrap under the logo. */
  html:not(.js) .has-nav { position: static; height: auto; }
  html:not(.js) .has-nav .bar { flex-wrap: wrap; gap: 4px 24px; padding-block: 10px; }
  html:not(.js) .site-nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
  html:not(.js) .site-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 14px; color: var(--body); }
  html:not(.js) .nav-num,
  html:not(.js) .nav-tel { display: none; }
}

@media (min-width: 1024px) {
  .js .menu-btn { display: none; }
  .nav-num, .nav-tel { display: none; }
  .brand img { width: 108px; }
  .site-nav ul { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 36px); }
  .site-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: .04em;
    transition: color .2s;
  }
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9px;
    height: 1px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .25s var(--ease);
  }
  .site-nav a:hover,
  .site-nav a[aria-current] { color: var(--head); }
  .site-nav a:hover::after,
  .site-nav a[aria-current]::after { transform: scaleX(1); }
  .nav-login { display: flex; align-items: center; }
  .nav-login::before {
    content: "";
    width: 1px;
    height: 16px;
    margin-right: clamp(20px, 2.2vw, 36px);
    background: var(--line);
  }
  /* the hit area is padded to 44px and more without moving the word */
  .site-nav .nav-login a { min-width: 44px; padding-inline: 6px; margin-inline: -6px; color: var(--body); }
  .site-nav .nav-login a::after { left: 6px; right: 6px; }
}

/* ---------- Hero ---------- */
/* Phones: the copy, then the actions with the A standing beside them on the figures' rule.
   From 768px: the copy on the left, the A on the right, its feet on the same rule. */
.hero { padding-top: clamp(28px, 7vh, 64px); }
/* room under the figures, so the first section rule and its chevron sit clear of them */
.hero { padding-bottom: clamp(64px, 11vh, 120px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy copy" "actions window";
  column-gap: 16px;
}
.hero-copy { grid-area: copy; }
.eyebrow--hero .sep { display: none; }
.eyebrow--hero span:last-child { display: block; }
.hero h1 {
  margin-top: 18px;
  max-width: 16em;
  font-size: var(--fs-h1);
  line-height: 1.16;
  letter-spacing: -.014em;
  text-wrap: balance;
}
.hero-intro {
  margin-top: 18px;
  max-width: 34em;
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--muted);
}
.hero-actions {
  grid-area: actions;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 26px;
  padding-bottom: 36px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  /* invisible here; contrast themes draw it, so the button keeps its edge */
  border: 1px solid transparent;
  background: var(--fill);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s;
}
.btn:hover { background: var(--fill-hover); }
.textlink {
  display: inline-block;
  padding-block: 10px;
  line-height: 24px;
  color: var(--body);
  font-size: 15px;
  letter-spacing: .03em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--dim);
  text-underline-offset: 7px;
  transition: color .2s, text-decoration-color .2s;
}
.textlink:hover { color: var(--head); text-decoration-color: var(--red); }

/* The A of DASON as a window onto The Dason Nexus: the letter solid in the logo's red,
   the building in its counter, softened into the ground. */
/* Below 360px there is room beside the Call button only for a smaller A: its apex lines up with the top of
   'Our services' (44 + 36px tall). From 360px it is as tall as both actions and the air under them
   (46 + 4 + 44 + 36px), so its apex lines up with the top of the Call button. */
.hero-window {
  grid-area: window;
  align-self: end;
  width: calc(80px * 110 / 138);
  margin-top: 26px;
}
@media (min-width: 360px) {
  .hero-window { width: calc(130px * 110 / 138); }
}
.window {
  position: relative;
  width: 100%;
  aspect-ratio: 110 / 138;
}
.window-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* exactly the counter, M21 138 56.5 37 89 138z: its edges sit under the hairline */
  clip-path: polygon(19.091% 100%, 51.364% 26.812%, 80.909% 100%);
}
.window-pan {
  position: absolute;
  inset: 0;
  transform-origin: 50.97% 70.27%;
}
/* The photo is drawn at 252.5 x 127.8 units of the 110 x 138 letter, its left edge at x -75 and its top at y 43.3.
   The img box covers only the counter's width, and the file is exactly that slice of the 1600 x 810 frame
   (x 599-1049, all 810 rows), so it fills the box and nothing spills sideways. */
.window-photo img {
  position: absolute;
  left: 17.727%;
  top: 31.377%;
  width: 64.545%;
  height: 92.609%;
  max-width: none;
  object-fit: cover;
  object-position: 52.07% 0;
}
/* The photo's top edge (y 43.3) sits below the counter's apex (y 37). A mirrored copy of the same file,
   flipped about its 8th row of pixels, carries the sky up into the very tip. */
.window-sky img {
  top: -59.403%;
  transform: scaleY(-1);
  clip-path: inset(.988% 0 0 0);
}
/* the street and its signals sink into the ground */
.window-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 72%;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgba(36, 37, 39, 0), rgba(36, 37, 39, .85) 55%, var(--ground) 82%);
}
.window-chevron {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--red);
}

/* The figures: a quiet row on a hairline. */
.stats {
  padding-block: 24px 0;
  border-top: 1px solid var(--line);
}
.stats-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px var(--gap);
}
.stats-list div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.stats-list dd {
  font-size: var(--fs-fig);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--head);
  font-variant-numeric: lining-nums;
}
.stats-list dt {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--muted);
}
.stats-note {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--dim);
}

/* 320x568: the Call button sits fully in the first screen */
@media (max-width: 479.98px) and (max-height: 600px) {
  .hero { padding-top: 22px; }
  .hero h1 { margin-top: 12px; }
  .hero-intro { margin-top: 12px; line-height: 1.6; }
  .hero-actions, .hero-window { margin-top: 18px; }
}
@media (max-width: 359.98px) {
  .hero-intro { font-size: 16px; }
}
/* the eyebrow takes one line once it fits whole (about 490px of it) */
@media (min-width: 560px) {
  .eyebrow--hero .sep,
  .eyebrow--hero span:last-child { display: inline; }
}

@media (min-width: 768px) {
  .hero { padding-top: clamp(56px, 11vh, 140px); }
  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: none;
    column-gap: var(--gap);
  }
  .hero-copy { grid-column: 1 / 10; grid-row: 1; }
  .hero h1 { margin-top: 24px; }
  .hero-intro { margin-top: 24px; }
  .hero-actions {
    grid-column: 1 / 10;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 32px;
    margin-top: 36px;
    padding-bottom: clamp(56px, 8vh, 96px);
  }
  .hero-window {
    grid-column: 10 / 13;
    grid-row: 1 / 3;
    justify-self: end;
    width: min(clamp(150px, 21vw, 216px), 100%);
    margin: 0;
  }
  .stats { padding-top: 28px; }
  .stats-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hero-copy, .hero-actions { grid-column: 1 / 9; }
  .hero-window {
    grid-column: 9 / 13;
    /* sized by the screen's height as well, so on a short laptop it stays a mark beside the copy */
    width: min(calc(clamp(280px, 44vh, 420px) * 110 / 138), 100%);
  }
  .stats-list { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .stats-list div { grid-column: span 3; }
}
@supports (height: 1svh) {
  @media (min-width: 1024px) {
    .hero-window { width: min(calc(clamp(280px, 44svh, 420px) * 110 / 138), 100%); }
  }
}
/* Short laptops (1280x720, 1366x768): less air above the copy, so the figures and their note make the first screen */
@media (min-width: 768px) and (max-height: 820px) {
  .hero { padding-top: clamp(40px, 7vh, 64px); }
  .hero-actions { padding-bottom: 48px; }
}
/* Phones on their side (667x375, 844x390): the eyebrow on one line and the spacing tightened,
   so the Call button still makes the first screen */
@media (max-width: 1023.98px) and (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: 16px; }
  .eyebrow--hero .sep,
  .eyebrow--hero span:last-child { display: inline; }
  .hero h1 { margin-top: 10px; max-width: none; font-size: clamp(1.75rem, 8vh, 2.25rem); }
  .hero-intro { margin-top: 10px; max-width: 40em; font-size: 16px; line-height: 1.55; }
  .hero-actions { margin-top: 18px; padding-bottom: 28px; }
  /* as tall as the actions and the air under them (46 + 4 + 44 + 28px) */
  .hero-window { width: calc(122px * 110 / 138); margin-top: 18px; }
}

/* ---------- Sections ---------- */
.section {
  padding-block: var(--section-y);
  /* jumps from the nav land with the eyebrow 24px under the sticky header, not a section's padding below it */
  scroll-margin-top: calc(24px - var(--section-y));
}
.band { background: var(--raised); }
/* Every section after the hero opens on a full-width rule with the logo's chevron standing on it at the content
   edge, so a new section is unmistakable. The footer opens on the rule alone. */
.section,
.site-footer { position: relative; }
.section::before,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
}
.section::after {
  content: "";
  position: absolute;
  top: -16px;
  left: max(var(--gutter), (100% - var(--max)) / 2);
  width: 13.5px;
  height: 17px;
  background: var(--red);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
}
.sec-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.sec-head h2 { margin-top: 4px; }
/* The heading stays under its eyebrow and the lead sits beside it, sharing its first baseline. */
@media (min-width: 1024px) {
  .sec-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: 26px;
    align-items: baseline;
  }
  .sec-head .eyebrow { grid-column: 1 / -1; }
  .sec-head h2 { grid-column: 1 / 7; margin: 0; }
  .sec-head .lead { grid-column: 8 / 13; }
}

/* List bullets: a short grey hairline */
.finlist li {
  position: relative;
  padding: 0 0 10px 22px;
  break-inside: avoid;
}
.finlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 10px;
  height: 1px;
  background: var(--dim);
}

/* ---------- 01 Services ---------- */
/* Six cards on one line. Below 1280px the line is a track that swipes sideways and snaps each card to the
   content edge. It runs out to the screen edges, so a card slides off the side instead of being cut at the
   gutter, and the next card always peeks in. */
.svc-list {
  --svc-w: min(78vw, 320px);
  --svc-gap: 12px;
  --svc-lift: var(--lift);
  display: grid;
  grid-template-columns: repeat(6, var(--svc-w));
  gap: var(--svc-gap);
  align-items: start;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.svc-list::-webkit-scrollbar { display: none; }
/* The card is its summary: number, title and one line on the raised ground */
.svc > summary {
  position: relative;
  display: flex;
  flex-direction: column;
  /* closed cards share the tallest face's height (site.js) */
  min-height: var(--svc-face, 0);
  padding: 22px 20px 26px;
  background: var(--raised);
  scroll-snap-align: start;
  list-style: none;
  cursor: pointer;
}
/* the card's red mark: 24px of hairline on its top edge, the full width while the card is open */
.svc > summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 1px;
  background: var(--red);
}
.svc[open] > summary::before { width: 100%; }
/* inside the card: the track would clip a ring drawn outside it */
.svc > summary:focus-visible { outline-offset: -2px; }
.svc > summary::-webkit-details-marker { display: none; }
.svc > summary::marker { content: ""; }
.svc-num {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .14em;
  color: var(--dim);
}
.svc-title {
  margin-top: 32px;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.svc-sum {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.svc-toggle {
  position: absolute;
  top: 9px;
  right: 6px;
  width: 44px;
  height: 44px;
}
.svc-toggle::before,
.svc-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1px;
  margin: -.5px 0 0 -6.5px;
  background: var(--muted);
}
.svc-toggle::after { transform: rotate(90deg); }
.svc[open] .svc-toggle::after { transform: rotate(0deg); }
.svc-body { padding: 0 20px 24px; background: var(--raised); }
.svc-body .finlist {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
}
@media (hover: hover) {
  .svc > summary:hover { background: var(--svc-lift); }
  .svc > summary:hover::before { width: 48px; }
  .svc[open] > summary:hover::before { width: 100%; }
  .svc > summary:hover .svc-toggle::before,
  .svc > summary:hover .svc-toggle::after { background: var(--red); }
}

/* Where the row swipes: a hairline showing where you are along it and, for a mouse, two steps */
.svc-ctrl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.svc-ctrl[hidden] { display: none; }
.svc-bar {
  position: relative;
  flex: 1;
  height: 1px;
  margin-right: 16px;
  background: var(--line);
}
.svc-bar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--muted);
}
.svc-step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--head);
  cursor: pointer;
}
.svc-step .ar { margin: 0; }
.svc-step:disabled { color: var(--dim); cursor: default; }
@media (hover: hover) {
  .svc-step:not(:disabled):hover { border-color: var(--muted); }
  .svc-step:not(:disabled):hover .ar-e { transform: translateX(3px); }
  .svc-step:not(:disabled):hover .ar-w { transform: translateX(-3px); }
}
@media (pointer: coarse) {
  .svc-step { display: none; }
  .svc-bar { margin-right: 0; }
}

@media (min-width: 768px) {
  .svc-list { --svc-w: 296px; --svc-gap: 16px; }
  .svc > summary { padding: 26px 24px 30px; }
  .svc-body { padding: 0 24px 28px; }
  .svc-toggle { top: 13px; right: 10px; }
  .svc-title { margin-top: 40px; }
}
/* All six fit: one plain row, no track */
@media (min-width: 1280px) {
  .svc-list {
    --svc-w: minmax(0, 1fr);
    --svc-gap: 12px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .svc > summary { padding: 24px 20px 28px; }
  .svc-body { padding: 0 20px 26px; }
  .svc-toggle { top: 11px; right: 6px; }
  .svc-title { font-size: clamp(1.0625rem, .3rem + 1vw, 1.1875rem); }
}

/* An open card reaches down into a panel as wide as the row: an L under the first card, a T under a middle
   one, a reversed L under the last. The card's contents leave the card for the row's second line, so this
   needs ::details-content; without it the card simply grows downwards. */
@supports selector(::details-content) {
  .svc-list { container-type: inline-size; }
  .svc { display: contents; }
  .svc > summary { grid-row: 1; }
  .svc[open] > summary { background: var(--svc-lift); }
  /* the open card's ground runs on through the gap into the panel */
  .svc[open] > summary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--svc-gap);
    background: inherit;
  }
  .svc::details-content {
    grid-row: 2;
    grid-column: 1 / -1;
    /* in the track the panel stays in view, as wide as the visible row (sticky insets count from inside the
       track's padding, so 0 is the content edge) */
    position: sticky;
    left: 0;
    justify-self: start;
    width: 100cqi;
  }
  .svc-list .svc-body { padding: 24px 20px 14px; background: var(--svc-lift); }
  .svc-list .svc-body .finlist { padding-top: 0; border-top: 0; }
  @media (min-width: 768px) {
    .svc-list .svc-body { padding: 30px 32px 20px; }
    .svc-list .svc-body .finlist { columns: 2; column-gap: 48px; }
  }
  @media (min-width: 1280px) {
    .svc::details-content { position: static; justify-self: stretch; width: auto; }
    .svc-list .svc-body { padding: 34px 36px 24px; }
    .svc-list .svc-body .finlist { columns: 3; }
  }
}

/* ---------- 02 Approach ---------- */
.tagline {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: .3em;
  text-transform: uppercase;
}
/* Four principles, each on a hairline that starts with a short red mark. From 768px they rise a step at a
   time, left to right: kaizen, improvement that never stops. */
.kaizen { display: grid; gap: 0 var(--gap); counter-reset: kaizen; }
.kaizen li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-block: 20px 36px;
  border-top: 1px solid var(--line);
  counter-increment: kaizen;
}
.kaizen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 24px;
  height: 1px;
  background: var(--red);
  transform-origin: 0 50%;
}
/* the principle's number, small, above its name */
.kaizen h3::before {
  content: counter(kaizen, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font: 500 12px/1.6 var(--sans);
  letter-spacing: .14em;
  color: var(--dim);
}
.kaizen h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 1.15rem + .7vw, 1.875rem);
  line-height: 1.25;
  color: var(--head);
}
.kaizen p { max-width: 22em; color: var(--muted); }
@media (min-width: 768px) {
  .kaizen { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .kaizen li:nth-child(odd) { margin-top: 40px; }
}
@media (min-width: 1024px) {
  .sec-head .tagline { grid-column: 1 / -1; }
  #about .sec-head .lead { grid-column: 1 / 8; }
  .kaizen { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
  .kaizen li { padding-right: clamp(8px, 1.5vw, 24px); }
  .kaizen li:nth-child(1) { margin-top: 120px; }
  .kaizen li:nth-child(2) { margin-top: 80px; }
  .kaizen li:nth-child(3) { margin-top: 40px; }
}

/* ---------- 03 People ---------- */
/* Each partner: a portrait beside a few lines */
.partners { display: grid; }
.partner {
  display: grid;
  grid-template-columns: clamp(96px, 27vw, 140px) minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
}
.partner + .partner {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
/* 4:5 frame on the raised ground, with the cards' red mark. Until a photo is in place it shows the initials. */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  background: var(--raised);
}
.portrait::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 24px;
  height: 1px;
  background: var(--red);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  font-weight: 300;
  letter-spacing: .08em;
  color: var(--dim);
}
.partner-name {
  font-size: clamp(1.375rem, 1.2rem + .8vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.008em;
}
.partner-post {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.partner-role {
  margin-top: 14px;
  font-size: clamp(16px, 15.6px + .2vw, 18px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--head);
}
.partner-text > p:not([class]) { margin-top: 8px; max-width: 30em; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* Department heads: a round portrait and three short lines each, alternating sides, so they zig-zag down */
.heads { margin-top: clamp(64px, 7vw, 112px); }
.heads-title { margin-bottom: 28px; }
.heads-list { display: grid; gap: 32px; }
.heads-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
}
.heads-list li:nth-child(even) { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.heads-list li:nth-child(even) .head-photo { order: 1; }
/* initials on the raised ground until a photo is in place */
.head-photo {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(72px, 20vw, 112px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--raised);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: clamp(1.125rem, .9rem + 1vw, 1.625rem);
  font-weight: 300;
  letter-spacing: .08em;
  color: var(--dim);
}
.head-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hd-name {
  font-size: clamp(18px, 17px + .25vw, 20px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--head);
}
.hd-role { margin-top: 2px; color: var(--body); }
.hd-bg { font-size: 15px; color: var(--muted); }
/* From 768px each head keeps to its own width, alternately at the far left and the far right of the row */
@media (min-width: 768px) {
  .heads-title { margin-bottom: 36px; }
  .heads-list { gap: 24px; }
  .heads-list li { column-gap: 24px; justify-self: start; }
  .heads-list li:nth-child(even) { justify-self: end; }
}
@media (min-width: 1024px) {
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner {
    grid-template-columns: clamp(140px, 13vw, 200px) minmax(0, 1fr);
    column-gap: clamp(20px, 2vw, 32px);
    padding-right: clamp(32px, 4vw, 72px);
  }
  .partner + .partner {
    margin: 0;
    padding: 0 0 0 clamp(32px, 4vw, 72px);
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

/* ---------- 04 Sectors ---------- */
/* Six data cards, a shade lighter than the band: the sector's number and name, and its kinds of client as tags */
.sectors { display: grid; gap: 12px; }
.sector {
  --i: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 24px;
  background: var(--lift);
}
/* the red mark on the top edge runs the full width under the pointer */
.sector::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 1px;
  background: var(--red);
}
.sector-num {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .14em;
  color: var(--dim);
}
.sector h3 {
  margin-top: 36px;
  font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -.005em;
  text-wrap: balance;
}
/* each sector's icon, top right: drawn in as the card arrives, and alive under the pointer */
.sector-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 54px;
  height: 54px;
  overflow: visible;
  fill: none;
  stroke: var(--head);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sector-icon * { vector-effect: non-scaling-stroke; }
.sector-icon g { transform-box: fill-box; transform-origin: center; }
.sector-icon .i-red { stroke: var(--red); }
.sector-icon .i-trace { stroke-dasharray: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chips li {
  padding: 3px 10px 4px;
  border: 1px solid var(--line);
  background: var(--raised);
  font-size: 13px;
  line-height: 1.5;
  color: var(--body);
}
@media (hover: hover) {
  .sector:hover { background: var(--lift-hi); }
  .sector:hover::before { width: 100%; }
  .sector:hover .chips li { border-color: var(--line-hi); }
}
@media (min-width: 768px) {
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .sector { padding: 26px 24px 28px; }
  .sector:nth-child(even) { --i: 1; }
}
@media (min-width: 1024px) {
  #clients .sec-head .lead { grid-column: 1 / 8; }
  .sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sector:nth-child(3n + 1) { --i: 0; }
  .sector:nth-child(3n + 2) { --i: 1; }
  .sector:nth-child(3n) { --i: 2; }
}

/* ---------- 05 History ---------- */
/* A rail with a node at each year: down the left on phones and tablets, across from 1024px. The red fill runs along
   it as the timeline scrolls through (--p, 0 to 1, from site.js) and each year lights up as the fill reaches it.
   Without JavaScript, or with reduced motion, the line is full and every year lit. */
.tl-wrap { position: relative; }
.tl-rail {
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 0;
  width: 2px;
  background: var(--rule);
}
.tl-fill {
  position: absolute;
  left: -.5px;
  top: 0;
  width: 3px;
  height: calc(var(--p, 1) * 100%);
  background: var(--red);
}
/* the fill's leading point */
.tl-fill::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(255, 0, 0, .18);
}
.tl {
  position: relative;
  padding: 0 0 44px 44px;
}
.tl:last-child { padding-bottom: 0; }
/* the node: a ring on the rail, solid red once the line has reached it */
.tl::before,
.tl::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.tl::before {
  z-index: 1;
  border: 2px solid var(--red);
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(255, 0, 0, .14);
}
.js .tl:not(.is-on)::before { border-color: var(--rule); background: var(--ground); box-shadow: none; }
/* the ripple that leaves a node as it lights */
.tl::after { border: 1px solid var(--red); opacity: 0; }
.tl-year {
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  margin-top: -10px;
}
.tl p { margin-top: 12px; max-width: 30em; color: var(--muted); }
@media (min-width: 1024px) {
  .tl-rail {
    left: 0;
    right: 0;
    top: 7px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .tl-fill {
    left: 0;
    top: -.5px;
    width: calc(var(--p, 1) * 100%);
    height: 3px;
  }
  .tl-fill::after { left: auto; right: -5px; top: 50%; bottom: auto; margin: -5px 0 0; }
  .timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .tl,
  .tl:last-child { padding: 44px clamp(8px, 1.5vw, 24px) 0 0; }
  .tl-year { margin-top: 0; }
  .tl p { margin-top: 16px; }
}

/* ---------- 06 Contact, with the group ---------- */
.contact { display: grid; }
.contact h2 { margin-top: 22px; }
.phone {
  margin-top: clamp(24px, 3vw, 40px);
  font-size: clamp(1.75rem, 1.45rem + 1vw, 2.375rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .005em;
}
/* The number keeps one line at every width, and wraps only when a reader's own text spacing needs the room. */
.phone a {
  display: inline-block;
  padding-block: 4px 8px;
  color: var(--head);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  text-underline-offset: .22em;
  overflow-wrap: anywhere;
  transition: text-decoration-color .2s;
}
.phone a:hover { text-decoration-color: var(--red); }
.contact-address {
  margin-top: 20px;
  line-height: 1.65;
  color: var(--body);
}
.contact-email { margin-top: 6px; }
/* Email, Facebook, Google Maps and Waze as a row of icon buttons; each names itself to screen readers and in a tooltip */
.contact-icons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.contact-icons a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  color: var(--head);
}
.contact-icons svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-icons .solid { fill: currentColor; stroke: none; }
@media (hover: hover) {
  .contact-icons a:hover { border-color: var(--fill); background: var(--fill); color: #fff; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .contact-icons a { transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
}
.contact-email a,
.already a {
  display: inline-block;
  padding-block: 10px;
  line-height: 24px;
  color: var(--body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--dim);
  text-underline-offset: .3em;
  transition: color .2s, text-decoration-color .2s;
}
.map-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--body);
  font-size: 15px;
  letter-spacing: .03em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--dim);
  text-underline-offset: .3em;
  cursor: pointer;
  transition: color .2s, text-decoration-color .2s;
}
.contact-email a:hover,
.already a:hover,
.map-btn:hover { color: var(--head); text-decoration-color: var(--red); }
/* arrows sit outside the underline, in the muted grey */
.already .ar { margin-left: .45em; color: var(--muted); }
.already { margin-top: 28px; color: var(--muted); }
.contact-side { margin-top: 56px; }
/* the one colour photograph, graded down a little so it sits in the graphite */
.contact-photo img { width: 100%; filter: brightness(.9) saturate(.85); }
.photo-box { position: relative; }
/* A 1px leader pins the red THE DASON NEXUS sign at the kerb (source x 627-880, y 658-708 of 1600 x 810)
   on the red panel just left of its lettering, and drops out of the photo to its label. */
.kerb-pin {
  position: absolute;
  left: 40.3%;
  top: 85.2%;
  bottom: 0;
  width: 1px;
  background: var(--head);
}
.kerb-pin::before {
  content: "";
  position: absolute;
  left: -2.5px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--head);
  box-shadow: 0 0 0 2px var(--ground);
}
.kerb-label {
  position: relative;
  display: block;
  width: fit-content;
  max-width: calc(59.7% - 1px);
  margin-left: 40.3%;
  padding: 14px 0 0 18px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--body);
  text-wrap: balance;
}
/* the leader carries on below the photo and turns to the label */
.kerb-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: calc(14px + .75em);
  border-left: 1px solid var(--head);
  border-bottom: 1px solid var(--head);
}
.contact-photo figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dim);
  text-wrap: pretty;
}
.map-slot { margin-top: 6px; }
.map-btn[hidden] { display: none; }
.map { margin-top: 12px; aspect-ratio: 4 / 3; background: var(--raised); }
.map[hidden] { display: none; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) {
  .map { aspect-ratio: 16 / 10; }
}
@media (min-width: 1024px) {
  .contact {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  .contact-main { grid-column: 1 / 6; }
  .contact-side { grid-column: 7 / 13; margin-top: 0; padding-top: 4px; }
}

/* The DASON group under the contact details: five entities as a numbered list of cards, a shade lighter than the
   band, each with its registration number as a tag */
.group { margin-top: clamp(72px, 8vw, 128px); }
.group-title { margin-bottom: 16px; }
.group-lead { max-width: 34em; margin-bottom: 28px; color: var(--muted); }
.entities { display: grid; gap: 8px; }
.entity {
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-areas: "num main" ". reg";
  gap: 10px 12px;
  padding: 20px 20px 22px;
  background: var(--lift);
}
.entity::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 1px;
  background: var(--red);
}
.ent-num {
  grid-area: num;
  padding-top: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .14em;
  color: var(--dim);
}
.ent-main { grid-area: main; }
.ent-name {
  margin: 0;
  font-size: clamp(17px, 16px + .3vw, 20px);
  font-weight: 300;
  line-height: 1.35;
  color: var(--head);
}
.ent-role { margin-top: 6px; max-width: 40em; font-size: 15px; line-height: 1.55; color: var(--muted); }
.ent-reg {
  grid-area: reg;
  justify-self: start;
  padding: 4px 10px 5px;
  border: 1px solid var(--line);
  background: var(--raised);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .08em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--body);
}
@media (hover: hover) {
  .entity:hover { background: var(--lift-hi); }
  .entity:hover::before { width: 100%; }
  .entity:hover .ent-reg { border-color: var(--line-hi); }
}
@media (min-width: 768px) {
  .entity {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: "num main reg";
    align-items: center;
    column-gap: 24px;
    padding: 22px 28px 24px;
  }
  .ent-reg { justify-self: end; }
  .entity:nth-child(2) { --i: 1; }
  .entity:nth-child(3) { --i: 2; }
  .entity:nth-child(4) { --i: 3; }
  .entity:nth-child(5) { --i: 4; }
}

/* ---------- Footer ---------- */
/* The copyright line alone, centred, so the back-to-top button in the corner never covers it */
.site-footer {
  padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--raised);
  color: var(--dim);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* ---------- Back to top ---------- */
/* In the bottom-left corner once the hero has scrolled away (site.js). Its outline fills in red as the page is
   read, and it turns red under the pointer. Without JavaScript it stays out of the way: the logo does the same job. */
.to-top { display: none; }
.js .to-top {
  position: fixed;
  z-index: 40;
  left: calc(env(safe-area-inset-left, 0px) + clamp(16px, 2vw, 32px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 2vw, 32px));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: rgba(43, 45, 49, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--head);
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.92);
}
.js .to-top.is-shown { visibility: visible; opacity: 1; transform: none; }
/* never over the open Menu sheet */
.js.menu-open .to-top { visibility: hidden; opacity: 0; }
.to-top-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-width: 1.5px;
}
.to-top-ring path { vector-effect: non-scaling-stroke; }
.ring-track { stroke: var(--rule); }
/* --read is how far down the page is, 0 to 1 (site.js) */
.ring-fill {
  stroke: var(--red);
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--read, 0) * 100);
}
.to-top .ar { position: relative; width: 15px; height: 15px; margin: 0; }
@media (hover: hover) {
  .to-top:hover { background: var(--fill); color: #fff; }
  .to-top:hover .ring-track { stroke: var(--fill); }
}
@media (min-width: 768px) {
  .js .to-top { width: 52px; height: 52px; }
}

/* ---------- Motion: one quiet entrance, then still ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .window-chevron { animation: fade 1.2s var(--ease) .15s both; }
  .window-pan { animation: settle 1.8s var(--ease) .3s both; }

  /* site.js marks only the blocks that start below the viewport, so nothing on screen blinks out */
  .js .reveal { transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .js .reveal.rv-off { opacity: 0; transform: translateY(8px); }
  .js .eyebrow::before,
  .js .kaizen li::before { transition: transform .5s var(--ease) .1s; }
  .js .eyebrow.rv-off::before { transform: scaleX(0); }
  .js .kaizen li.rv-off::before { transform: scaleX(0); }

  .svc-toggle::after { transition: transform .2s var(--ease); }
  .svc > summary { transition: background-color .2s var(--ease); }
  .svc > summary::before { transition: width .35s var(--ease); }
  .svc-list { scroll-behavior: smooth; }
  /* the panel unfolds downwards where the browser can animate to height: auto, and simply opens elsewhere */
  .svc { interpolate-size: allow-keywords; }
  .svc::details-content {
    height: 0;
    overflow: clip;
    transition: height .3s var(--ease), content-visibility .3s allow-discrete;
  }
  .svc[open]::details-content { height: auto; }
  .svc[open] .svc-body { animation: fade .3s linear both; }
  /* the arrow rises into place with a little overshoot, and nudges upwards once each time it appears */
  .js .to-top {
    transition: opacity .35s var(--ease), transform .5s cubic-bezier(.2, 1.4, .4, 1), visibility .35s,
      background-color .2s var(--ease);
  }
  .js .to-top.is-shown .ar { animation: nudge 1s var(--ease) .3s; }
  /* History, on a grand scale: unlit years sit low and faint; as the line reaches one, its node pops and sends out a
     ripple, the year springs up into place and its words follow. The newest year keeps pulsing. */
  .tl-fill::after { animation: glow 1.4s ease-in-out infinite; }
  .tl-year { transition: opacity .6s var(--ease), transform 1s cubic-bezier(.34, 1.56, .64, 1); }
  .tl p { transition: opacity .6s var(--ease) .18s, transform .9s var(--ease) .18s; }
  .js .tl:not(.is-on) .tl-year { opacity: .14; transform: translateY(28px); }
  .js .tl:not(.is-on) p { opacity: 0; transform: translateY(18px); }
  .js .tl.is-on::before { animation: pop .75s cubic-bezier(.34, 1.56, .64, 1); }
  .js .tl.is-on::after { animation: ripple 1.3s var(--ease); }
  .js .tl.is-on:last-child::after { animation: ripple 2.2s var(--ease) infinite; }
  .ring-fill { transition: stroke-dashoffset .2s linear; }
  /* the section rule draws in from the left as the section's eyebrow comes into view, then the chevron stands up on it */
  .section::before { transition: transform 1.1s var(--ease); }
  .section::after { transition: opacity .4s var(--ease) .6s, transform .5s var(--ease) .6s; }
  .js .section:has(.eyebrow.rv-off:not(.heads-title, .group-title))::before { transform: scaleX(0); }
  .js .section:has(.eyebrow.rv-off:not(.heads-title, .group-title))::after { opacity: 0; transform: translateY(6px); }
  /* Sectors: the cards rise in turn along each row, then each card's tags follow one by one */
  .sector { transition: background-color .25s var(--ease); }
  .sector::before { transition: width .45s var(--ease); }
  .js .sectors .reveal {
    transition: opacity .6s var(--ease) calc(var(--i) * 90ms), transform .7s var(--ease) calc(var(--i) * 90ms),
      background-color .25s var(--ease);
  }
  .js .sectors .reveal.rv-off { opacity: 0; transform: translateY(18px); }
  .js .sectors .chips li {
    transition: opacity .4s var(--ease), transform .4s var(--ease), border-color .25s var(--ease);
    transition-delay: calc(var(--i) * 90ms + 300ms);
    transition-delay: calc(var(--i) * 90ms + 300ms + (sibling-index() - 1) * 45ms), calc(var(--i) * 90ms + 300ms + (sibling-index() - 1) * 45ms), 0s;
  }
  .js .sectors .rv-off .chips li { opacity: 0; transform: translateY(6px); }
  /* the group's entities slide in from the left, one after another */
  .entity { transition: background-color .25s var(--ease); }
  .entity::before { transition: width .45s var(--ease); }
  .js .entities .reveal {
    transition: opacity .6s var(--ease) calc(var(--i) * 80ms), transform .7s var(--ease) calc(var(--i) * 80ms),
      background-color .25s var(--ease);
  }
  .js .entities .reveal.rv-off { opacity: 0; transform: translateX(-28px); }
  /* the icons draw themselves in with their card; under the pointer the gear turns, the pulse runs, the windows
     light up, the ship rides the swell, the chip's core beats and the briefcase lifts */
  .js .sectors .reveal .sector-icon :is(path, rect, circle) {
    stroke-dasharray: 1;
    transition: stroke-dashoffset 1.4s var(--ease) calc(var(--i) * 90ms + 250ms), fill .25s var(--ease), stroke .25s var(--ease);
  }
  .js .sectors .reveal.rv-off .sector-icon :is(path, rect, circle) { stroke-dashoffset: 1; }
  .sector-icon g { transition: transform .5s var(--ease); }
  .sector-icon .i-win { transition: fill .2s var(--ease), stroke .2s var(--ease); transition-delay: calc(sibling-index() * 60ms); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .sector:hover .i-spin { animation: spin 5s linear infinite; }
  .sector:hover .i-trace { animation: trace 1.6s var(--ease) infinite; }
  .sector:hover .i-win { fill: var(--red); stroke: var(--red); }
  .sector:hover .i-bob { animation: bob 1.8s ease-in-out infinite; }
  .sector:hover .i-wave { animation: swell 1.8s ease-in-out infinite; }
  .sector:hover .i-core { animation: beat 1s ease-in-out infinite alternate; }
  .sector:hover .i-lift { transform: translateY(-3px); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.7); }
  100% { transform: scale(1); }
}
@keyframes ripple {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.4); }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 0, 0, .22); }
  50% { box-shadow: 0 0 0 10px rgba(255, 0, 0, .08); }
}
@keyframes trace {
  0% { stroke-dashoffset: 1; }
  60%, 100% { stroke-dashoffset: 0; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2px) rotate(-2deg); }
}
@keyframes swell {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}
@keyframes beat { to { fill: var(--red); } }
@keyframes nudge {
  0%, 100% { transform: none; }
  35% { transform: translateY(-6px); }
  65% { transform: translateY(1px); }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes settle {
  0% { opacity: 0; transform: scale(1.04); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- Login ---------- */
.login-bar .back {
  display: inline-block;
  padding-block: 10px;
  line-height: 24px;
  color: var(--body);
  font-size: 14px;
  letter-spacing: .03em;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: .3em;
  transition: color .2s, text-decoration-color .2s;
}
.login-bar .back:hover { color: var(--head); text-decoration-color: var(--red); }
/* under 400px only 'Back' shows; the rest stays in the link's name, so it still says where it goes */
@media (max-width: 399.98px) {
  .back-long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
.login {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  padding-block: 32px 72px;
}
.login-grid { display: grid; gap: 28px; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
/* The home page's A, the building in its counter (.window): small above the form on phones, beside it from 1024px */
.door-mark { width: calc(clamp(72px, 14vh, 120px) * 110 / 138); }
@supports (height: 1svh) {
  .door-mark { width: calc(clamp(72px, 14svh, 120px) * 110 / 138); }
}
.login h1 {
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.625rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.login-form { max-width: 400px; margin-top: 36px; }
.field + .field { margin-top: 26px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  padding: 8px 0 9px;
  border: 0;
  border-bottom: 1px solid var(--dim);
  border-radius: 0;
  background: transparent;
  color: var(--head);
  font: inherit;
  font-size: 18px;
  letter-spacing: .01em;
  caret-color: var(--red);
  transition: border-color .2s, box-shadow .2s;
}
.field input:hover { border-bottom-color: var(--muted); }
/* focus: the hairline turns into a 2px off-white line */
.field input:focus { outline: none; border-bottom-color: var(--head); box-shadow: 0 1px 0 0 var(--head); }
/* the browser's autofill keeps the graphite ground */
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--head);
  box-shadow: 0 0 0 1000px var(--ground) inset;
  transition: background-color 9999s;
}
.field input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--ground) inset, 0 1px 0 0 var(--head); }
/* compact at every width: the one red on the page stays small */
.login-submit {
  min-width: 160px;
  margin-top: 36px;
  border-radius: 0;
  font-family: var(--sans);
  cursor: pointer;
}
.login-submit:disabled { cursor: default; opacity: .55; }
.login-status { min-height: 1.6em; margin-top: 14px; color: var(--muted); font-size: 15px; }
/* Phones on their side: the mark and the spacing give way, so the form makes the first screen */
@media (max-width: 1023.98px) and (max-height: 520px) and (orientation: landscape) {
  .login { padding-top: 16px; }
  .login-grid { gap: 14px; }
  .door-mark { width: calc(56px * 110 / 138); }
  .login-form { margin-top: 18px; }
  .field + .field { margin-top: 14px; }
  .login-submit { margin-top: 22px; }
}
@media (min-width: 1024px) {
  .login-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: center;
  }
  /* as tall as the home page's A: up to 420px, capped at its columns */
  .door-mark { grid-column: 2 / 6; justify-self: center; width: min(calc(clamp(280px, 44vh, 420px) * 110 / 138), 100%); }
  @supports (height: 1svh) {
    .door-mark { width: min(calc(clamp(280px, 44svh, 420px) * 110 / 138), 100%); }
  }
  .login-body { grid-column: 7 / 12; }
}

/* ---------- Contrast themes ----------
   Forced colours repaint backgrounds as Canvas, which would erase every mark drawn as a background.
   The ones that carry meaning are redrawn in the text colour: the services' +/−, the list bullets, the kerb pin
   and the marker on the current section's anchor. The letter's outline takes the text colour too. */
@media (forced-colors: active) {
  .svc-toggle::before,
  .svc-toggle::after,
  .finlist li::before,
  .svc-bar span,
  .kerb-pin,
  .kerb-pin::before,
  .site-nav a::after { background: CanvasText; }
  .window-chevron { stroke: CanvasText; }
  /* the arrows are masks over a background, so they take the link colour explicitly */
  .ar { forced-color-adjust: none; background: LinkText; }
  /* the section rules and their chevrons, and the arrow's outline */
  .section::before,
  .site-footer::before { background: CanvasText; }
  .section::after { forced-color-adjust: none; background: CanvasText; }
  .tl-rail,
  .tl-fill,
  .tl-fill::after { background: CanvasText; }
  .tl::before { border-color: CanvasText; }
  .ring-track,
  .sector-icon,
  .sector-icon .i-red { stroke: CanvasText; }
  .ring-fill { stroke: LinkText; }
  /* the cards' raised ground is painted over, so each card and its panel are drawn as frames */
  .svc > summary,
  .svc-body { border: 1px solid CanvasText; }
  .portrait,
  .head-photo,
  .sector,
  .entity { border: 1px solid CanvasText; }
  /* the gradient that sinks the street is painted over, so the photo stops above the street instead */
  .window-photo { clip-path: polygon(27.91% 80%, 51.364% 26.812%, 72.835% 80%); }
}
@media (forced-colors: active) and (max-width: 1023.98px) {
  .js .site-nav a[aria-current] { box-shadow: none; border-left: 2px solid CanvasText; padding-left: 14px; }
}

/* ---------- Print ---------- */
@media print {
  :root { --head: #000; --body: #111; --muted: #333; --dim: #444; --line: #bbb; }
  html, body, .band, .site-footer { background: #fff !important; color: #000; }
  .site-header, .skip, .map-slot, .hero-window { display: none !important; }
  .rv-off { opacity: 1 !important; transform: none !important; }
  .svc-list { display: block; margin: 0; padding: 0; overflow: visible; }
  .svc { display: block !important; margin-bottom: 12px; border: 1px solid var(--line); break-inside: avoid; }
  .svc > summary, .svc-body { background: none !important; }
  .svc > summary { min-height: 0; }
  .svc > summary::after { display: none; }
  .svc::details-content { position: static !important; width: auto !important; }
  .svc-ctrl, .to-top, .section::after { display: none !important; }
  .section { padding-block: 32px; }
  .site-footer, .site-footer a { color: #000; }
}