/* Mobile first: base rules are the phone layout, min-width queries add to them.
   One motif: the logo ribbon is the page's single large shape and its small marker.
   Sections meet on a diagonal cut into their padding. On Home, with room and motion allowed, each one
   holds once it has been shown in full and the next wipes over it (html.wipes, set in main.js). */
:root {
  --amber: #f2a516;
  --indigo: #2b2a72;
  --silver: #c5c9cd;
  --black: #0c0d0d;
  --charleston: #232b2b;
  --off-white: #f4f4f0;
  --ink: var(--off-white);
  --bar: 72px;
  --margin: clamp(16px, 8vw - 20px, 125px);
  --pad: clamp(64px, 7vw, 112px);
  --gap: clamp(32px, 5vw, 80px);
  --cut: min(5vw, 72px);
  --foot: min(5vw, 72px);
  --hold: 40svh;
  --t-small: 1rem;
  --t-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --t-lead: clamp(1.25rem, 1.05rem + .7vw, 1.75rem);
  --t-h2: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem);
  --t-h1: calc((100vw - 2 * var(--margin)) / 9.4);
  --display: 'Saira Semi Condensed', 'Arial Narrow', Arial, sans-serif;
  --text: Urbanist, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px); }
/* Smooth only once the page has settled, so arriving on an anchor jumps there instead of racing down the page */
html.settled { scroll-behavior: smooth; }
html.menu-open { overflow: hidden; }
html.wipes { --cut: 0px; }
body { margin: 0; background: var(--black); color: var(--off-white); font: 400 var(--t-body)/1.55 var(--text); overflow-x: clip; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
figure img, figure video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.06); }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
h1, h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-family: var(--display); font-size: var(--t-lead); font-weight: 700; text-transform: uppercase; line-height: 1.1; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
::selection { background: var(--amber); color: var(--black); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: -999px; top: 8px; z-index: 60; background: var(--amber); color: var(--black); padding: 12px 18px; font-weight: 700; }
.skip:focus { left: 8px; }
.lead { font-size: var(--t-lead); font-weight: 500; line-height: 1.28; text-wrap: pretty; }
.stack > * + * { margin-top: 1em; }
.note { font-size: var(--t-small); }
.head { margin-bottom: clamp(28px, 4vw, 56px); }
.head > p { margin-top: 18px; max-width: 40em; }
.after { margin-top: clamp(28px, 4vw, 48px); }

/* Buttons and links: one square shape, amber for the main action */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; background: var(--off-white); color: var(--black); border: 0; font: 700 var(--t-small)/1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background .25s, color .25s, transform .25s var(--ease); }
.btn:hover { background: var(--amber); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--amber); }
.btn.solid:hover { background: var(--off-white); }
.btn.dark { background: var(--black); color: var(--off-white); }
.btn.dark:hover { background: var(--indigo); }
.arrow { display: inline-block; padding-block: 8px; font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--amber); transition: text-underline-offset .2s; }
.arrow:hover { text-underline-offset: 8px; }
.go { flex: none; width: 0; height: 0; border-block: 5px solid transparent; border-left: 7px solid currentColor; transition: transform .3s var(--ease); }
a:hover > .go { transform: translateX(6px); }

/* Header: a solid bar with its own space, so nothing shows through or starts beneath it */
.site-header { position: sticky; top: 0; z-index: 20; color: var(--off-white); background: var(--black); }
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; min-height: var(--bar); padding-inline: var(--margin); }
.brand { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; font: 800 1.4rem/1 var(--display); text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.brand img { width: 24px; height: 44px; object-fit: contain; transition: transform .35s var(--ease); }
.brand:hover img { transform: translateY(-2px) rotate(-4deg); }
.head-contact { display: none; min-height: 44px; padding: 10px 18px; }
.menu { grid-column: 3; grid-row: 1; justify-self: end; width: 48px; height: 48px; }
.menu summary { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin-right: -11px; list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.lines { position: relative; display: block; width: 26px; height: 12px; }
.lines::before, .lines::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transform: translateY(-4px); transition: transform .3s var(--ease); }
.lines::after { transform: translateY(4px); }
.menu:not([open]) summary:hover .lines::before { transform: translateY(-5px); }
.menu:not([open]) summary:hover .lines::after { transform: translateY(5px); }
.menu[open] .lines::before { transform: rotate(45deg); }
.menu[open] .lines::after { transform: rotate(-45deg); }

/* Full-screen menu */
.menu:not([open]) .sheet { display: none; }
.sheet { position: fixed; inset: 0; z-index: -1; display: grid; align-content: start; gap: 28px; padding: calc(var(--bar) + 20px) var(--margin) 32px; overflow-y: auto; background: var(--charleston); animation: fade .4s var(--ease); }
.sheet-nav a { display: block; padding-block: 5px; font: 800 var(--t-h2)/1.04 var(--display); text-transform: uppercase; text-decoration: none; transition: color .2s, translate .3s var(--ease); animation: lift .6s var(--ease) both; }
.sheet-nav a:nth-child(2) { animation-delay: 50ms; }
.sheet-nav a:nth-child(3) { animation-delay: 100ms; }
.sheet-nav a:nth-child(4) { animation-delay: 150ms; }
.sheet-nav a:nth-child(5) { animation-delay: 200ms; }
.sheet-nav a:hover { color: var(--amber); translate: 8px 0; }
.sheet-nav a[aria-current] { color: var(--amber); }
.sheet-side { display: grid; gap: 12px; align-content: start; animation: lift .6s var(--ease) .25s both; }
.sheet-side a:not(.btn) { display: block; padding-block: 4px; overflow-wrap: anywhere; text-underline-offset: 4px; transition: color .2s; }
.sheet-side a:not(.btn):hover { color: var(--amber); }
.sheet-side address { margin-top: 8px; }
@keyframes fade { from { opacity: 0; } }
@keyframes lift { from { opacity: 0; transform: translateY(24px); } }

/* Bands: every section of the page */
.anchor { display: block; scroll-margin-top: calc(var(--pad) * -.5 - 16px); }
html.wipes .anchor { scroll-margin-top: -16px; }
.band { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; margin-top: calc(var(--cut) * -1); padding: calc(var(--pad) + var(--cut)) var(--margin) var(--pad); background: var(--black); clip-path: polygon(0 0, 100% var(--c, var(--cut)), 100% 100%, 0 100%); }
main > .band:first-of-type { margin-top: 0; padding-top: clamp(32px, 5vw, 56px); clip-path: none; }
.ground-indigo { background: var(--indigo); }
.ground-charleston { background: var(--charleston); }
/* --hold keeps a finished section on screen for a stretch of scrolling before the next one reaches it */
html.wipes .band { position: sticky; top: var(--stick, var(--bar)); min-height: calc(100svh - var(--bar)); margin-bottom: var(--hold); }
html.wipes main > .band:last-of-type { margin-bottom: 0; }
html.wipes .band:not(.pair):not(.route):not(.wide) { padding-block: clamp(24px, 5svh, 56px); }
html.wipes .band.contact:not(.pair):not(.route):not(.wide) { padding-bottom: calc(var(--foot) + 32px); }
/* A section's text leaves as the next one arrives, so nothing ever lies on top of a headline */
html.wipes .band.leaving :is(h1, h2, h3, p, ul, ol, dl, form, span) { opacity: 0; transition: opacity .18s linear; }

/* Headings: hollow until they arrive, hollow again as the next section covers them; the cursor turns letters hollow */
.ol { position: relative; }
.face, .ghost { display: block; }
.ol .w { display: inline-block; line-height: 1; }
.ghost { position: absolute; inset: 0; opacity: 0; color: transparent; -webkit-text-stroke: 1px var(--ink); pointer-events: none; }
.face .w { color: transparent; -webkit-text-stroke: 1px var(--ink); transition: color .7s var(--ease) calc(var(--i, 0) * 45ms), -webkit-text-stroke-color .7s var(--ease) calc(var(--i, 0) * 45ms); }
.ol.lit .face .w { color: var(--ink); -webkit-text-stroke-color: transparent; }
.ol.near .face { -webkit-mask: radial-gradient(circle 120px at var(--mx) var(--my), transparent 52%, #000 100%); mask: radial-gradient(circle 120px at var(--mx) var(--my), transparent 52%, #000 100%); } /* taste-skill-ignore: a cursor mask, not a colour fill */
.ol.near .ghost { opacity: 1; -webkit-mask: radial-gradient(circle 120px at var(--mx) var(--my), #000 48%, transparent 100%); mask: radial-gradient(circle 120px at var(--mx) var(--my), #000 48%, transparent 100%); } /* taste-skill-ignore: a cursor mask, not a colour fill */

/* The motif: threads along the logo ribbon */
.strand { display: none; }
html.strands .strand { display: block; }
.ribbon { width: 100px; height: 200px; margin-bottom: 28px; }
.ribbon path { fill: none; stroke: var(--amber); stroke-width: 74; }
html.strands .ribbon { display: none; }
/* The same ribbon, small, marks the points in a list */
.points li, .seq li { position: relative; padding-left: 32px; }
.points li::before, .seq li::before { content: ""; position: absolute; left: 0; top: .1em; width: 16px; height: 30px; background: var(--amber); -webkit-mask: url(../assets/logo-white.png) center / contain no-repeat; mask: url(../assets/logo-white.png) center / contain no-repeat; }
.points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 56px); }
.points h3 { margin-bottom: 8px; }

/* Hero */
.hero { justify-content: flex-start; min-height: calc(100svh - var(--bar)); padding-bottom: var(--pad); text-align: center; }
.hero-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: blur(6px) saturate(.7); transform: scale(1.04); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: rgb(12 13 13 / .6); }
.hero-strand { width: 100%; height: clamp(190px, 30svh, 300px); margin-bottom: 16px; }
.hero h1 span:not(.w):not(.face):not(.ghost) { display: block; white-space: nowrap; }
.hero-sub { margin-top: 24px; font-size: var(--t-lead); font-weight: 500; line-height: 1.25; text-wrap: balance; }
.hero-sub span { display: inline-block; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; }

/* Interior page openers */
.page-head { justify-content: flex-end; min-height: calc(100svh - var(--bar)); padding-bottom: clamp(48px, 7vw, 96px); }
.page-head figure { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.page-head figure::after { content: ""; position: absolute; inset: 0; background: rgb(12 13 13 / .62); }
.page-head .sub { margin-top: 20px; max-width: 30em; font-size: var(--t-lead); font-weight: 500; line-height: 1.25; }
.page-head .more { margin-top: 10px; max-width: 34em; }
.page-head.plain { min-height: 44svh; }
.head-strand { display: none !important; }

/* Split: text beside a picture */
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-content: stretch; }
.pair figure { aspect-ratio: 3 / 2; overflow: hidden; }
.pair .copy h2 { margin-bottom: 20px; }

/* Wide: one long picture, then a title and text in two columns */
.wide { display: block; padding: 0; }
.wide figure { height: clamp(170px, 42vw, 300px); overflow: hidden; }
.wide-body { display: grid; gap: 20px; padding: clamp(24px, 3vw, 44px) var(--margin) var(--pad); }
.wide h2 { margin-bottom: 16px; }

/* Duo: two services side by side */
.duo { display: grid; gap: 56px var(--gap); }
.duo figure { aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 20px; }
.duo h2 { margin-bottom: 16px; }
.duo .anchor { scroll-margin-top: 0; }

/* Field: a colour field with the picture small */
.field-band { display: grid; gap: 24px; }
.field-band h2 { margin-bottom: 16px; }
.field-band figure { aspect-ratio: 3 / 2; overflow: hidden; }

/* Statement: a title with its text beside it */
.statement { display: grid; gap: 16px; }

/* Services list: each row keeps its picture beside the text */
.routes li + li { margin-top: 18px; }
.routes a { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; text-decoration: none; }
.routes figure { grid-row: span 2; height: 76px; overflow: hidden; }
.routes h3 { grid-column: 2; transition: color .2s; }
.routes p { grid-column: 2; margin-top: 4px; font-size: var(--t-small); line-height: 1.35; }
.routes .go { grid-column: 3; grid-row: 1 / span 2; }
.routes a:hover h3 { color: var(--amber); }

/* Three columns, each with its own picture */
.trio .cols { display: grid; gap: 28px var(--gap); }
.trio figure { aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 14px; }
.trio h3 { margin-bottom: 6px; }

/* Reasons: all five stay on screen, with a picture beside them from small laptops up */
.seq-bg { display: none; }
.seq li { padding-block: 12px; transition: opacity .35s, transform .35s var(--ease); }
.seq li::before { top: 14px; }
.seq p { margin-top: 6px; max-width: 34em; }

/* Service page contents */
.intro { display: grid; align-content: center; gap: 36px; }
.jump a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding-block: 8px; font: 700 var(--t-lead)/1.1 var(--display); text-transform: uppercase; text-decoration: none; transition: color .2s; }
.jump a:hover { color: var(--amber); }

/* Process */
.route { padding: 0; }
.route-stage { padding: calc(var(--pad) + var(--cut)) var(--margin) var(--pad); }
.route-strand { width: 100%; height: 300px; margin-bottom: 16px; }
.route h2 { margin-bottom: 20px; }
.stops li { max-width: 42em; padding-block: 11px; transition: opacity .35s, transform .35s var(--ease); }
.stops p { margin-top: 4px; }
.route .note { max-width: 42em; margin-top: 12px; font-size: var(--t-small); }

/* Industries page: a calm light page, the same layout for each industry and space between them */
.sector { --ink: var(--black); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 0; background: var(--off-white); color: var(--black); }
.sector.follow { margin-top: 0; padding-top: var(--pad); clip-path: none; }
.sector.end { padding-bottom: var(--pad); }
.sector h2 { margin-bottom: 20px; }
.sector figure { order: -1; aspect-ratio: 3 / 2; overflow: hidden; }
.sector-links { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 8px; }
.sector-links a { display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; font-weight: 700; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--amber); transition: color .2s; }
.sector-links a:hover { color: var(--indigo); }
.need-rows { display: grid; gap: 8px; }
.need-rows a { display: grid; gap: 4px 28px; padding: 18px 20px; background: var(--charleston); text-decoration: none; transition: background .25s, color .25s; }
.need-rows .go { display: none; }
.need-rows a:hover { background: var(--amber); color: var(--black); }

/* Closing call to action */
.closing { --ink: var(--black); background: var(--amber); color: var(--black); }
.closing h2 { font-size: clamp(1.5rem, 6.2vw, 3.5rem); }
.closing .sub { margin-top: 16px; font-size: var(--t-lead); font-weight: 700; line-height: 1.2; }
.closing p:not(.sub) { max-width: 38em; margin-top: 12px; }
.closing .btn { margin-top: 14px; }

/* Contact */
.contact { display: grid; align-content: center; gap: 36px; }
.contact .sub { margin-top: 14px; font-size: var(--t-lead); font-weight: 700; line-height: 1.2; }
.contact .intro-text { margin-top: 16px; }
.details { display: grid; gap: 14px; margin-top: 28px; }
.details dt { color: var(--silver); font-weight: 700; }
.details a { display: inline-block; padding-block: 3px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.details a:hover { color: var(--amber); }
.quote-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; color: var(--off-white); font: inherit; font-size: max(16px, 1em); background: var(--black); border: 1px solid var(--silver); border-radius: 0; transition: border-color .2s; }
.field select option { color: var(--black); background: var(--off-white); }
.field textarea { resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--off-white); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--amber); outline: 1px solid var(--amber); outline-offset: 0; }
.form-foot { display: grid; gap: 14px; }
.form-foot .btn { width: 100%; }
.form-foot a:hover { color: var(--amber); }
.status { font-weight: 700; }
.status:empty { display: none; }

/* The live thing: pick a need and the form picks the service. Hidden without script, the dropdown still works */
.need-pick { display: none; }
.js .need-pick { display: block; }
.need-pick legend { margin-bottom: 8px; font-weight: 700; }
.need-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.need-options button { min-height: 52px; padding: 10px 12px; background: var(--black); color: var(--off-white); border: 0; font: 700 var(--t-small)/1.15 var(--display); text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.need-options button:hover { background: var(--indigo); }
.need-options button[aria-pressed="true"] { background: var(--amber); color: var(--black); }
.need-line { min-height: 1.55em; margin-top: 10px; }

/* Legal */
.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; justify-content: stretch; }
.legal .toc a { display: flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; transition: color .2s; }
.legal .toc a:hover { color: var(--amber); }
.legal .doc section + section { margin-top: 64px; }
.legal h2 { margin-bottom: 20px; }
.legal h3 { margin: 28px 0 8px; }
.legal .doc p + p { margin-top: .8em; }
.legal .doc li { position: relative; padding: 4px 0 4px 18px; }
.legal .doc li::before { content: ""; position: absolute; left: 0; top: .9em; width: 8px; height: 4px; background: var(--silver); }
.legal .doc ul { margin-top: 10px; }
.legal .credits li { overflow-wrap: anywhere; }
.legal .doc address { margin-top: 10px; }

/* Footer: the mark, built large */
.site-footer { position: relative; z-index: 1; margin-top: calc(var(--foot) * -1); padding: calc(var(--pad) + var(--foot) + 32px) var(--margin) 24px; background: var(--black); clip-path: polygon(0 0, 100% var(--foot), 100% 100%, 0 100%); overflow: hidden; }
.foot-name { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 28px); margin-bottom: clamp(32px, 5vw, 64px); }
.foot-name img { width: auto; height: clamp(52px, 12vw, 190px); flex: none; }
.foot-name span { font: 800 clamp(2.5rem, 15vw, 15rem)/.84 var(--display); text-transform: uppercase; white-space: nowrap; }
.foot-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.foot-cols > p { font-size: var(--t-lead); font-weight: 500; line-height: 1.25; }
.foot-cols a { text-underline-offset: 4px; }
.foot-cols a:hover { color: var(--amber); }
.foot-cols li { padding: 3px 0; }
.foot-cols li a { display: inline-block; padding-block: 4px; text-decoration: none; overflow-wrap: anywhere; }
.foot-cols h2 { margin-bottom: 8px; color: var(--silver); font: 700 var(--t-body)/1.4 var(--text); text-transform: none; letter-spacing: 0; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 44px; color: var(--silver); font-size: var(--t-small); }
.foot-base a { color: var(--off-white); text-underline-offset: 4px; }
.foot-base a:hover { color: var(--amber); }

/* Entrances: only hidden once script has confirmed it can reveal them */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .legal .rv { transform: none; }

/* Large phones */
@media (min-width: 480px) {
  .hero-actions { flex-direction: row; justify-content: center; gap: 16px; }
}

/* Tablets */
@media (min-width: 768px) {
  .bar { grid-template-columns: auto 1fr auto auto; }
  .brand { grid-column: 1; }
  .head-contact { display: inline-flex; grid-column: 3; grid-row: 1; }
  .menu { grid-column: 4; }
  .sheet { grid-template-columns: 7fr 4fr; align-content: center; column-gap: clamp(32px, 6vw, 96px); }
  .head-strand { position: absolute; top: 0; right: var(--margin); display: block !important; width: 28%; height: 60%; }
  html:not(.strands) .head-strand { display: none !important; }
  .routes a { grid-template-columns: 112px minmax(0, 1fr) auto; column-gap: 20px; }
  .routes figure { height: 84px; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .statement { grid-template-columns: 4fr 8fr; column-gap: var(--gap); align-items: start; }
  .route-strand { height: 340px; }
  .quote-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field.full, .form-foot, .status, .need-pick { grid-column: 1 / -1; }
  .need-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form-foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; }
  .form-foot .btn { width: auto; }
  .details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-cols > p { grid-column: 1 / -1; max-width: 26em; }
  .legal { grid-template-columns: 4fr 8fr; }
  .legal .toc { position: sticky; top: calc(var(--bar) + 24px); align-self: start; }
}

/* Small laptops: pictures, the ribbon and the text each get their own column */
@media (min-width: 960px) {
  :root { --t-h1: min(calc((100vw - 2 * var(--margin)) * .76 / 9.4), 20svh); }
  .hero { justify-content: center; text-align: left; }
  .hero-body { width: 78%; }
  .hero-strand { position: absolute; top: 0; bottom: 0; right: 0; width: 30%; height: 100%; margin: 0; }
  .hero-actions { justify-content: flex-start; margin-top: 32px; }
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .pair figure { position: relative; grid-column: 2; grid-row: 1; align-self: stretch; aspect-ratio: auto; min-height: min(62svh, 560px); }
  .pair figure img { position: absolute; inset: 0; }
  .pair .copy { grid-column: 1; grid-row: 1; }
  .pair.flip figure { grid-column: 1; }
  .pair.flip .copy { grid-column: 2; }
  .wide-body { grid-template-columns: 5fr 6fr; column-gap: var(--gap); }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-band { grid-template-columns: 5fr 4fr 3fr; column-gap: var(--gap); align-items: start; }
  .field-band figure { aspect-ratio: 3 / 4; }
  .seq-stage { display: grid; flex: 1; grid-template-columns: 5fr 6fr; grid-template-rows: auto minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
  .seq-stage .head { grid-column: 1; grid-row: 1; margin-bottom: 24px; }
  .seq-bg { position: relative; display: block; grid-column: 1; grid-row: 2; align-self: stretch; min-height: 170px; overflow: hidden; }
  .seq-bg img { position: absolute; inset: 0; }
  .seq-band { justify-content: stretch; }
  .seq li { padding-block: clamp(6px, 1.4svh, 14px); }
  .seq { grid-column: 2; grid-row: 1 / span 2; }
  .seq li:first-child { padding-top: 0; }
  .seq li:first-child::before { top: .1em; }
  .sector { grid-template-columns: 7fr 5fr; column-gap: var(--gap); align-items: start; }
  .sector figure { order: 0; aspect-ratio: 4 / 3; }
  .need-rows a { grid-template-columns: 5fr 6fr auto; align-items: center; }
  .need-rows .go { display: block; }
  .intro { grid-template-columns: 7fr 5fr; column-gap: var(--gap); align-items: center; }
  .contact { grid-template-columns: 5fr 6fr; column-gap: var(--gap); align-items: start; }
  .details { grid-template-columns: minmax(0, 1fr); }
  .closing { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--gap); align-content: center; }
  .closing h2 { grid-column: 1 / -1; margin-bottom: 20px; }
  .closing > :not(h2) { grid-column: 1; }
  .closing .sub { margin-top: 0; }
  .closing > p:last-child { grid-column: 2; grid-row: 2 / span 3; align-self: end; justify-self: end; }
}

/* Laptops */
@media (min-width: 1080px) {
  .solutions { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-content: center; }
  .solutions .head { margin-bottom: clamp(16px, 3svh, 32px); }
  .solutions .after { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 clamp(16px, 3svh, 32px); }
  .routes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2.2svh, 22px) var(--gap); }
  .routes li + li { margin-top: 0; }
  .routes a { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .routes figure { height: 72px; }
  .route-stage { display: grid; grid-template-columns: 4fr 8fr; align-items: center; gap: var(--gap); }
  .ribbon { width: 100%; height: min(70svh, 560px); margin: 0; }
  .route-strand { height: min(72svh, 620px); margin: 0; }
  .route h2 { margin-bottom: clamp(10px, 2svh, 24px); }
  html.wipes .seq li:not(.on), html.wipes .stops li:not(.on) { opacity: .45; transform: translateX(-10px); }
  html.wipes .route-stage { padding-block: clamp(16px, 3svh, 40px); }
  html.wipes .stops li { padding-block: clamp(3px, .9svh, 11px); }
  html.wipes .route .note { margin-top: clamp(4px, 1svh, 12px); }
  .wide figure { height: clamp(220px, 34svh, 340px); }
  .points.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-cols { grid-template-columns: 4fr 2fr 3fr 3fr; }
  .foot-cols > p { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html, html.settled { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js .rv { opacity: 1; transform: none; }
}