/* Beta to Delta · Statement
   Shared by every page. Sizes run fluid between the 390 px and 1440 px
   artboards; the layout switches from one column to the desktop grid at 900 px.
   Spacing tokens are named by their two artboard values: --sp-14-24 is 14 px
   at 390 and 24 px at 1440. Type sizes are in rem so they follow the
   browser's default font size; at the default 16 px they equal the artboards. */

/* Fonts, served from /fonts (SIL Open Font License, see fonts/OFL.txt) */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-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: 'Alexandria';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/alexandria-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}

@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/alexandria-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;
}

/* Until the fonts arrive, the system face stands in scaled to their widths and
   line metrics, so lines break in the same places and nothing jumps on swap */

@font-face { font-family: 'Archivo Fallback'; font-weight: 100 449; font-stretch: 100%; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Helvetica'); size-adjust: 97.03%; ascent-override: 90.49%; descent-override: 21.64%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; font-weight: 450 549; font-stretch: 100%; src: local('Helvetica Neue Medium'), local('HelveticaNeue-Medium'), local('Helvetica'); size-adjust: 95.8%; ascent-override: 91.65%; descent-override: 21.92%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; font-weight: 550 649; font-stretch: 100%; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Helvetica Bold'), local('Helvetica-Bold'); size-adjust: 94.94%; ascent-override: 92.48%; descent-override: 22.12%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; font-weight: 650 900; font-stretch: 100%; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Helvetica Bold'), local('Helvetica-Bold'); size-adjust: 97.82%; ascent-override: 89.76%; descent-override: 21.47%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; font-weight: 100 900; font-stretch: 101% 112%; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Helvetica Bold'), local('Helvetica-Bold'); size-adjust: 109.21%; ascent-override: 80.4%; descent-override: 19.23%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; font-weight: 100 900; font-stretch: 113% 117%; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Helvetica Bold'), local('Helvetica-Bold'); size-adjust: 118.3%; ascent-override: 74.22%; descent-override: 17.75%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; font-weight: 100 900; font-stretch: 118% 122%; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Helvetica Bold'), local('Helvetica-Bold'); size-adjust: 123.16%; ascent-override: 71.29%; descent-override: 17.05%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; font-weight: 100 900; font-stretch: 123% 125%; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Helvetica Bold'), local('Helvetica-Bold'); size-adjust: 128.43%; ascent-override: 68.36%; descent-override: 16.35%; line-gap-override: 0%; }

@font-face { font-family: 'Alexandria Fallback'; font-weight: 100 449; src: local('Geeza Pro'), local('GeezaPro'); size-adjust: 126.81%; ascent-override: 76.33%; descent-override: 19.79%; line-gap-override: 0%; }
@font-face { font-family: 'Alexandria Fallback'; font-weight: 450 549; src: local('Geeza Pro'), local('GeezaPro'); size-adjust: 129.14%; ascent-override: 74.96%; descent-override: 19.44%; line-gap-override: 0%; }
@font-face { font-family: 'Alexandria Fallback'; font-weight: 550 900; src: local('Geeza Pro Bold'), local('GeezaPro-Bold'); size-adjust: 120.27%; ascent-override: 80.49%; descent-override: 20.87%; line-gap-override: 0%; }

/* Tokens */

:root {
  --bond: #FBFAF7;
  --press: #111111;
  --lead: #4A4A48;
  --highlighter: #FFE35A;
  --svcrew-ground: #0A0E17;

  --font: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Helvetica, sans-serif;
  --font-ar: 'Alexandria', 'Alexandria Fallback', 'Geeza Pro', 'Noto Sans Arabic', sans-serif;

  --rule: 2px solid var(--press);
  --frame: 1440px;

  /* page frame */
  --gutter: clamp(20px, -8.229px + 7.2382vw, 96px);
  --header-top: clamp(16px, 10.0564px + 1.524vw, 32px);
  --hero-top: clamp(44px, 30.628px + 3.4287vw, 80px);
  --section-gap: clamp(96px, 75.1993px + 5.3335vw, 152px);
  --footer-bottom: clamp(40px, 28.1135px + 3.0478vw, 72px);
  --brand-h: clamp(40px, 35.5423px + 1.143vw, 52px);
  --brand-w: clamp(164px, 145.4279px + 4.7626vw, 214px);

  /* type scale */
  --fs-h1: clamp(3.375rem, 2.028525rem + 5.524vw, 7rem);
  --ls-h1: clamp(-1.8px, -0.7024px - 0.0763vw, -1px);
  --fs-h2: clamp(2.5rem, 1.38566875rem + 4.5716vw, 5.5rem);
  --ls-h2: clamp(-1px, -0.3135px - 0.0478vw, -0.5px);
  --fs-name: clamp(2.375rem, 1.9571125rem + 1.7144vw, 3.5rem);
  --ls-name: clamp(-0.5px, -0.2251px - 0.0192vw, -0.3px);
  --fs-focus: clamp(2.125rem, 1.61424375rem + 2.0954vw, 3.5rem);
  --ls-focus: clamp(-0.8px, -0.251px - 0.0382vw, -0.4px);
  --fs-group: clamp(1.75rem, 1.65710625rem + 0.3811vw, 2rem);
  --ls-group: clamp(-0.4px, -0.2621px - 0.0097vw, -0.3px);
  --fs-principle: clamp(1.375rem, 1.23566875rem + 0.5716vw, 1.75rem);
  --fs-lede: clamp(1.3125rem, 1.1499625rem + 0.6668vw, 1.75rem);
  --fs-focus-text: clamp(1.1875rem, 0.97853125rem + 0.8573vw, 1.75rem);
  --fs-num: clamp(1.0625rem, 0.8999625rem + 0.6668vw, 1.5rem);
  --fs-svc: clamp(1.1875rem, 1.11780625rem + 0.2859vw, 1.375rem);
  --fs-descriptor: clamp(1.125rem, 1.0785375rem + 0.1906vw, 1.25rem);
  --fs-body: clamp(1.0625rem, 1.0160375rem + 0.1906vw, 1.1875rem);
  --fs-label: clamp(0.9375rem, 0.8910375rem + 0.1906vw, 1.0625rem);
  --fs-nav: clamp(1rem, 0.97674375rem + 0.0954vw, 1.0625rem);
  --fs-plate-nav: clamp(0.9375rem, 0.8910375rem + 0.1906vw, 1.0625rem);
  --fs-copyright: clamp(0.875rem, 0.85174375rem + 0.0954vw, 0.9375rem);

  /* spacing */
  --sp-2-4: clamp(2px, 1.2566px + 0.1906vw, 4px);
  --sp-6-10: clamp(6px, 4.5137px + 0.3811vw, 10px);
  --sp-8-12: clamp(8px, 6.5137px + 0.3811vw, 12px);
  --sp-8-14: clamp(8px, 5.7707px + 0.5716vw, 14px);
  --sp-12-16: clamp(12px, 10.5137px + 0.3811vw, 16px);
  --sp-12-20: clamp(12px, 9.0278px + 0.7621vw, 20px);
  --sp-14-24: clamp(14px, 10.2852px + 0.9525vw, 24px);
  --sp-16-24: clamp(16px, 13.0278px + 0.7621vw, 24px);
  --sp-18-24: clamp(18px, 15.7707px + 0.5716vw, 24px);
  --sp-20-28: clamp(20px, 17.0278px + 0.7621vw, 28px);
  --sp-20-32: clamp(20px, 15.5423px + 1.143vw, 32px);
  --sp-24-36: clamp(24px, 19.5423px + 1.143vw, 36px);
  --sp-28-40: clamp(28px, 23.5423px + 1.143vw, 40px);
  --sp-32-44: clamp(32px, 27.5423px + 1.143vw, 44px);
  --sp-32-48: clamp(32px, 26.0564px + 1.524vw, 48px);
  --sp-32-64: clamp(32px, 20.1135px + 3.0478vw, 64px);
  --sp-36-64: clamp(36px, 25.5994px + 2.6668vw, 64px);

  --plate-h: clamp(52px, 50.5137px + 0.3811vw, 56px);
  --plate-pad: clamp(20px, 16.2852px + 0.9525vw, 30px);
  --plate-nav-pad: clamp(14px, 11.7707px + 0.5716vw, 20px);
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bond);
  color: var(--press);
  font-family: var(--font);
  font-stretch: 100%;
  font-size: var(--fs-body);
  line-height: 1.5;
  caret-color: var(--press);
  accent-color: var(--press);
}

::selection { background: var(--press); color: var(--bond); }

h1, h2, h3, h4, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
p, li { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }

:lang(ar) { font-family: var(--font-ar); }

a { color: var(--press); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
a[href]:hover { color: var(--lead); text-decoration-thickness: 3px; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--press);
  outline-offset: 3px;
}

/* Links inside running text: set in reverse instead of ringed, so the letters
   and punctuation beside them stay readable. The transparent outline shows in
   forced colours. */
p a:not([class]):focus-visible,
li a:not([class]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
  background: var(--press);
  color: var(--bond);
}

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

/* Page frame: content centred, 1440 px at most including the gutters */

.site-header,
.site-main,
.site-footer {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-main {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-top: var(--hero-top);
}

/* Header: lockup and plate on one row, the nav links beneath on phones */

.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand cta" "nav nav";
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  padding-top: var(--header-top);
}

.brand {
  display: flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;
}

.site-header .brand { grid-area: brand; }
.site-header .brand img { width: var(--brand-w); height: var(--brand-h); }
.site-header > .plate { grid-area: cta; }

.site-nav { grid-area: nav; }
.site-nav ul { display: flex; align-items: center; gap: 28px; }
.site-nav li { display: flex; }

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}

.nav-link[href]:hover {
  color: var(--press);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Yellow plate: Request a quote and the form submit, nothing else */

.plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--plate-h);
  margin: 0;
  padding: 0 var(--plate-pad);
  border: 0;
  border-radius: 0;
  background: var(--highlighter);
  color: var(--press);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.plate:hover,
.plate[href]:hover {
  color: var(--press);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.plate--nav {
  min-height: 44px;
  padding: 0 var(--plate-nav-pad);
  font-size: var(--fs-plate-nav);
}

/* Text links, with the square-capped arrow where they leave the section */

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 500;
  line-height: normal;
}

.textlink svg { display: block; flex: none; }
.textlink--body { font-size: var(--fs-body); }

.actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.actions .textlink { align-self: center; }

/* From 600 px the plate keeps its own width with the link beside it */
@media (min-width: 600px) {
  .actions { flex-direction: row; align-items: center; gap: 40px; }
  .actions .textlink { align-self: auto; min-height: var(--plate-h); }
}

/* Shared text */

.label {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.3;
  color: var(--lead);
}

.lede {
  max-width: 760px;
  font-size: var(--fs-lede);
  line-height: 1.45;
  color: var(--lead);
}

/* Hero */

.hero { display: flex; flex-direction: column; }
.hero-head { display: flex; flex-direction: column; gap: var(--sp-20-28); }

.hero .lede { margin-top: var(--sp-32-44); }
.hero .actions { margin-top: var(--sp-32-48); }

.display {
  max-width: 1180px;
  font-size: var(--fs-h1);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 0.95;
  letter-spacing: var(--ls-h1);
  overflow-wrap: break-word;
}

/* Highlighter stroke: an SVG layer behind the words, the text never moves */

.hl {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}

.hl-stroke {
  position: absolute;
  z-index: -1;
  inset: 0.161em -0.116em 0.036em -0.125em;
  display: block;
}

.hl-stroke svg { display: block; width: 100%; height: 100%; }

/* The sweep starts from a stroke already under the first letters, so no frame shows the words bare */
@media (prefers-reduced-motion: no-preference) {
  .hl-stroke { animation: hl-sweep 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
}

@keyframes hl-sweep {
  from { clip-path: inset(0 70% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Numbered sections, each headed by a 2 px press rule */

.section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-32-64);
  padding-top: var(--sp-20-32);
  border-top: var(--rule);
  scroll-margin-top: 24px;
}

.section--products { gap: var(--sp-36-64); }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-12-20);
}

.section-num {
  flex: none;
  font-size: var(--fs-num);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1.02;
  letter-spacing: var(--ls-h2);
}

.section-text {
  font-size: var(--fs-lede);
  line-height: 1.42;
  color: var(--lead);
}

.section-text--services { max-width: 900px; }
.section-text--about { max-width: 960px; line-height: 1.45; }

/* Products: two entries of equal size */

.products {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 64px;
}

.product { display: flex; flex-direction: column; gap: var(--sp-16-24); max-width: 560px; }
.product-head { display: flex; flex-direction: column; gap: var(--sp-20-32); }

.product-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 350 / 201;
  overflow: hidden;
  background: var(--bond);
  outline: 1px solid var(--press);
}

.product-art img { width: 100%; height: 100%; object-fit: contain; }
.product-art--svcrew { background: var(--svcrew-ground); }
.product-art--svcrew img { width: calc(44.8% + 3.2px); height: auto; }

.product-title { display: flex; flex-direction: column; gap: var(--sp-6-10); }

.product-name {
  font-size: var(--fs-name);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1.02;
  letter-spacing: var(--ls-name);
}

.product-descriptor {
  font-size: var(--fs-descriptor);
  font-weight: 500;
  line-height: 1.3;
  color: var(--lead);
}

.product-body { display: flex; flex: 1; flex-direction: column; gap: var(--sp-8-12); }
.product-status { font-size: var(--fs-label); line-height: 1.5; }
.product-text { max-width: 560px; font-size: var(--fs-body); line-height: 1.55; }
.product-action { display: flex; }

/* Services */

.services-list { display: flex; flex-direction: column; gap: var(--sp-16-24); }

.groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 36px;
}

.group,
.principle {
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-14-24);
  border-top: var(--rule);
}

.group { gap: var(--sp-20-32); }

.group-title {
  font-size: var(--fs-group);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1.05;
  letter-spacing: var(--ls-group);
}

.svcs { display: flex; flex-direction: column; gap: var(--sp-18-24); }

.svcs h4 {
  font-size: var(--fs-svc);
  font-weight: 700;
  font-stretch: 110%;
  line-height: 1.2;
}

.svcs p {
  margin-top: var(--sp-2-4);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--lead);
}

.focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
  padding-top: var(--sp-14-24);
  border-top: var(--rule);
}

.focus-head { display: flex; flex-direction: column; gap: var(--sp-12-16); }

.focus-title {
  font-size: var(--fs-focus);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1.02;
  letter-spacing: var(--ls-focus);
}

.focus-text { font-size: var(--fs-focus-text); line-height: 1.45; color: var(--lead); }

.services-close { display: flex; flex-direction: column; gap: var(--sp-24-36); }
.services-close-text { font-size: var(--fs-lede); font-weight: 500; line-height: 1.4; }

/* About */

.principles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 28px;
}

.principle { gap: var(--sp-8-14); }

.principle h3 {
  font-size: var(--fs-principle);
  font-weight: 800;
  font-stretch: 115%;
  line-height: 1.15;
}

.principle p { font-size: var(--fs-body); line-height: 1.55; color: var(--lead); }
.company-line { font-size: var(--fs-label); line-height: 1.55; }
.company-line :lang(ar) { line-height: 1; white-space: nowrap; }

/* Footer */

.site-footer {
  padding-top: var(--section-gap);
  padding-bottom: var(--footer-bottom);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20-28);
  padding-top: var(--sp-28-40);
  border-top: var(--rule);
}

.footer-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.site-footer .brand img { width: 164px; height: 40px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  row-gap: 0;
}

.footer-links .textlink { font-size: 1rem; }
.copyright { font-size: var(--fs-copyright); line-height: 1.55; color: var(--lead); }

/* Forms: square 2 px press fields on bond paper */

.form { display: flex; flex-direction: column; gap: 28px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }

.field-label {
  padding: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.3;
  color: var(--press);
}

.field-hint { font-size: 0.9375rem; line-height: 1.45; color: var(--lead); }
.field-req { font-weight: 400; color: var(--lead); }

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  border: 2px solid var(--press);
  border-radius: 0;
  background: var(--bond);
  color: var(--press);
  font: inherit;
  font-size: 1.0625rem;
  font-stretch: 100%;
  line-height: 1.4;
  appearance: none;
}

.textarea { min-height: 176px; resize: vertical; }

/* Resize grip: two square-capped press strokes in the corner */
.textarea::-webkit-resizer {
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13 5 5 13M13 10l-3 3' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat right 2px bottom 2px;
}
.input::placeholder, .textarea::placeholder { color: var(--lead); opacity: 1; }

.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: 3px solid var(--press);
  outline-offset: 2px;
}

/* Radio options drawn as square plates; checked is press black */

.options { display: flex; flex-wrap: wrap; gap: 12px; }
.option { position: relative; display: inline-flex; }

.option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.option span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--press);
  background: var(--bond);
  color: var(--press);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

.option input:checked + span { background: var(--press); color: var(--bond); }
.option input:hover + span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.option input:focus-visible + span { outline: 3px solid var(--press); outline-offset: 3px; }

.form-submit { align-self: flex-start; }

.notice {
  padding: 12px 16px;
  border: 2px solid var(--press);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
}

.fine { font-size: 0.9375rem; line-height: 1.5; color: var(--lead); }

/* Below the phone artboard: display type keeps shrinking so words fit at 320 */

@media (max-width: 389.98px) {
  :root {
    --fs-h1: clamp(3.13333125rem, 2.028525rem + 5.524vw, 3.375rem);
    --fs-h2: clamp(2.3rem, 1.38566875rem + 4.5716vw, 2.5rem);
    --fs-name: clamp(2.3rem, 1.9571125rem + 1.7144vw, 2.375rem);
    --fs-focus: clamp(2.03333125rem, 1.61424375rem + 2.0954vw, 2.125rem);
    --fs-group: clamp(1.73333125rem, 1.65710625rem + 0.3811vw, 1.75rem);
  }
}

/* Below 375 px "real work" fits on its line without help; letting it wrap
   keeps enlarged text spacing from pushing the headline off the screen */
@media (max-width: 374.98px) {
  .hl { white-space: normal; }
}

/* Very narrow phones: keep the lockup and the plate on one row */

@media (max-width: 359px) {
  .site-header { column-gap: 12px; }
  .site-header .brand img { width: auto; height: 32px; }
  .plate--nav { padding: 0 12px; font-size: 0.875rem; }
}

/* Desktop layout */

@media (min-width: 900px) {
  a:focus-visible,
  button:focus-visible { outline-offset: 4px; }

  .site-header { display: flex; align-items: center; gap: 0; }
  .site-nav { margin-left: auto; }
  .site-nav ul { gap: 36px; }
  .site-header > .plate { margin-left: 48px; }

  .display { font-stretch: 120%; }
  .lede { line-height: 1.42; }

  .section-title,
  .product-name,
  .focus-title { line-height: 1; }

  .section-text--services { line-height: 1.4; }

  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .product { max-width: none; }
  .product-art { aspect-ratio: 600 / 344; }
  .product-status span { display: block; }

  /* Groups and principles share two rows, so the first entries line up
     whether or not a title wraps */
  .groups,
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 48px; }
  .groups { row-gap: var(--sp-20-32); }
  .principles { row-gap: var(--sp-8-14); }
  .group,
  .principle { display: grid; grid-row: span 2; grid-template-rows: subgrid; }

  .group-title,
  .principle h3,
  .svcs h4 { text-wrap: balance; }

  .svcs p { line-height: 1.5; }

  .focus { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: end; }
  .focus-text { line-height: 1.4; }

  .principle h3 { line-height: 1.1; }
  .company-line { line-height: 1.5; }

  .footer-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
  .footer-links { column-gap: 32px; }
  .copyright { line-height: 1.5; }

  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Forced colours (Windows contrast themes) */

@media (forced-colors: active) {
  .hl-stroke { display: none; }
  .plate { border: 2px solid ButtonText; }
  .option input:checked + span {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
  .brand img { filter: invert(1); }
}