@font-face {
  font-family: Archivo;
  src: url("/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
}
/* Arial adjusted to Archivo's metrics, so the font swap does not move the layout. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 86%;
  descent-override: 21%;
  line-gap-override: 0%;
}
/* The same for the slightly wider display headings. */
@font-face {
  font-family: "Archivo Display Fallback";
  src: local("Arial");
  size-adjust: 108%;
  ascent-override: 84%;
  descent-override: 20%;
  line-gap-override: 0%;
}

/* Headings: Montserrat, the face on the company's LinkedIn banner. */
@font-face {
  font-family: Montserrat;
  src: url("/fonts/montserrat-var.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 113%;
  ascent-override: 85%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --ink: #0d1f2d;
  --text: #3a4854;
  --muted: #5d6b77;
  --line: #e2e7eb;
  --line-strong: #c3ccd3;
  --tint: #f3f6f8;
  --white: #fff;
  --brand: #1e74bd;
  --brand-deep: #165c98;
  --error: #b3261e;
  --success: #1b6e3c;
  /* Radius: controls (buttons, inputs, chips) use --radius, surfaces (tiles, cards) use --radius-lg. */
  --radius: 8px;
  --radius-lg: 14px;
  --gutter: 1.25rem;
  --section: 3.5rem;
  --gap: 1.75rem;
  --header: 3.75rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: Archivo, "Archivo Fallback", Arial, sans-serif;
  --font-display: Montserrat, "Montserrat Fallback", Arial, sans-serif;
  /* z-index: launcher 9, sticky header 10, skip link 30. Dialogs use the top layer. */
}
@media (min-width: 768px) {
  :root { --gutter: 2rem; --section: 4.5rem; --gap: 2.25rem; }
}
@media (min-width: 1200px) {
  :root { --gutter: 2.5rem; --section: 5.5rem; --header: 4.25rem; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 1rem); }
html:has(dialog:modal) { overflow: hidden; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 1rem/1.6 var(--font);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
address { font-style: normal; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-stretch: 106%; }
h1 { font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); line-height: 1.05; letter-spacing: -.028em; }
h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.024em; }
h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.005em; }
a { color: var(--brand-deep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.icon { width: 1.125rem; height: 1.125rem; flex: none; }
.icon--lg { width: 2rem; height: 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: min(100%, 80rem); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: .5rem; top: -4rem; z-index: 30; padding: .625rem .875rem; background: var(--white); }
.skip:focus { top: .5rem; }
.lead { margin-top: .875rem; max-width: 52ch; color: var(--text); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.5; text-wrap: pretty; }
.eyebrow { margin-bottom: .5rem; color: var(--brand-deep); font-size: .9375rem; font-weight: 600; }
.note { margin-top: 1rem; color: var(--muted); font-size: .875rem; line-height: 1.45; }

/* Buttons: compact to look at. The ::after strip extends the touch area to 48px. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4375rem;
  height: 2.5rem; padding-inline: 1rem;
  border: 1px solid transparent; border-radius: var(--radius);
  font: inherit; font-size: .9375rem; font-weight: 500; line-height: 1; letter-spacing: -.003em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
.btn::after { content: ""; position: absolute; inset: -.25rem 0; }
/* White with blue text everywhere. The border keeps it defined on white pages. */
.btn--primary { border-color: var(--brand); background: var(--white); color: var(--brand); }
.btn--primary:hover { background: #e8f1f8; color: var(--brand-deep); }
.btn--primary:active { background: #d9e8f4; color: var(--brand-deep); }
.btn--line { border-color: var(--line-strong); background: var(--white); color: var(--ink); }
.btn--line:hover { border-color: var(--muted); background: var(--tint); color: var(--ink); }
.btn--line:active { background: var(--line); }
.btn--on-brand { border-color: rgb(255 255 255 / .5); background: transparent; color: var(--white); }
.btn--on-brand:hover { border-color: var(--white); background: rgb(255 255 255 / .1); color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.5rem; }
.link { display: inline-flex; align-items: center; gap: .3125rem; min-height: 2.75rem; color: var(--brand-deep); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.link .icon { width: 1rem; height: 1rem; }
.link:hover { color: var(--ink); }
.icon-btn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer;
}
.icon-btn .icon { width: 1.25rem; height: 1.25rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10;  background: var(--white); }
.site-header__row { display: flex; align-items: center; gap: 1.5rem; height: var(--header); }
.brand { display: block; margin-right: auto; padding-block: .1875rem; }
.brand img { width: auto; height: 2.375rem; }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: .25rem; }
.site-nav a { position: relative; display: block; padding: .5rem .75rem; color: var(--text); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.site-nav a::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .125rem; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav a[aria-current] { color: var(--brand-deep); }
.site-header__cta { display: none; }
.menu-btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.625rem; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.menu-lines { position: relative; display: block; width: 1.25rem; height: .5rem; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; border-radius: 1px; background: currentColor; }
.menu-lines::before { top: 0; }
.menu-lines::after { bottom: 0; }
.menu-lines--close::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-lines--close::after { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
@media (min-width: 1024px) {
  .site-header__row { gap: 1.25rem; }
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .site-header > .wrap > .menu-btn { display: none; }
  .brand img { height: 2.625rem; }
}

/* Dialogs: a full sheet for the menu, a panel for product galleries */
dialog { border: 0; color: inherit; }
dialog::backdrop { background: rgb(13 31 45 / .45); }
.menu::backdrop { display: none; }
.menu { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: auto; background: var(--white); }
.menu > .wrap { display: flex; flex-direction: column; min-height: 100%; }
.menu__links { margin-top: .5rem; }
.menu__links a { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem;  color: var(--ink); font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; font-stretch: 106%; letter-spacing: -.02em; text-decoration: none; }
.menu__links .icon { color: var(--line-strong); }
.menu__links a[aria-current] { color: var(--brand-deep); }
.menu__links a[aria-current] .icon { color: var(--brand); }
.menu__foot { display: grid; gap: .625rem; margin-top: auto; padding-block: 1.5rem; }
.menu__cta { width: 100%; height: 2.75rem; }

/* Breadcrumb, on the same logo blue as the page head below it */
.crumbs-bar { background: var(--brand); }
.crumbs { padding-top: .75rem; color: var(--white); font-size: .8125rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .375rem; }
.crumbs li + li::before { content: "/"; margin-right: .375rem; }
.crumbs a { display: inline-block; padding-block: .75rem; color: var(--white); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs [aria-current] { font-weight: 600; }

/* Catalogue tile: the studio photos have white backgrounds, so they sit on plain white. */
.tile { display: block; background: var(--white); }
.tile img { width: 100%; aspect-ratio: 1; object-fit: contain; }

/* Colour bands: the hero, page heads and the inquiry section use the logo blue. */
.hero, .page-head, .inquiry { background: var(--brand); color: var(--white); }
:is(.hero, .page-head, .inquiry, .crumbs-bar, .cta-band, .why__lead) :focus-visible { outline-color: var(--white); }

/* Hero */
.hero { overflow: hidden; }
.hero__grid { display: grid; gap: 1.75rem; padding-top: 2rem; }
.hero__kicker { margin-bottom: .75rem; color: var(--white); font-size: .9375rem; font-weight: 500; }
.hero h1 { color: var(--white); font-size: clamp(2.375rem, 1.55rem + 2.9vw, 3.625rem); line-height: 1.04; letter-spacing: -.03em; }
.hero h1 span { display: block; }
.hero__lead { margin-top: 1rem; max-width: 34rem; color: var(--white); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; text-wrap: pretty; }
.hero .actions { margin-top: 1.5rem; }
.hero__stage { margin-inline: calc(var(--gutter) * -1); }
.hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; padding-block: 1rem 1.5rem; }
.hero__facts > div { padding-block: .625rem; }
.hero__facts dt { color: var(--white); font-size: .8125rem; line-height: 1.35; }
.hero__facts dd { margin-top: .125rem; color: var(--white); font-size: .9375rem; font-weight: 600; line-height: 1.3; }
/* Text and photo sit side by side from tablet width up, so the photo never takes over the screen. */
@media (min-width: 768px) {
  .hero__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: 2rem; padding-block: 2.5rem 2rem; }
  .hero h1 { font-size: clamp(2.375rem, 1.55rem + 1.8vw, 2.75rem); }
  .hero__stage { margin-inline: 0; }
  .hero__photo { border-radius: var(--radius-lg); overflow: hidden; }
  .hero__photo img { aspect-ratio: 1; }
  .hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; padding-block: 1.25rem;  }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 12fr) minmax(0, 11fr); gap: 3.5rem; padding-block: 3.25rem 2.75rem; }
  .hero h1 { font-size: clamp(2.375rem, 1.55rem + 2.9vw, 3.625rem); }
  .hero__photo img { aspect-ratio: 5 / 4; }
}

/* Page head */
.page-head { padding-block: 1rem clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.page-head h1 { color: var(--white); font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem); }
.page-head .lead { color: var(--white); }
.crumbs-bar + .page-head { padding-top: .25rem; }
.page-head__row { display: grid; gap: 1.5rem 3rem; }
.page-head__jump { display: none; }
@media (min-width: 900px) {
  .page-head__row:has(> :nth-child(2)) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}
@media (min-width: 768px) {
  .page-head__jump { display: block; }
  .page-head__jump ul { display: flex; flex-wrap: wrap; gap: .375rem; }
  .page-head__jump a { display: block; padding: .4375rem .75rem; border: 1px solid rgb(255 255 255 / .24); border-radius: var(--radius); color: var(--white); font-size: .875rem; text-decoration: none; }
  .page-head__jump a:hover { border-color: var(--white); background: rgb(255 255 255 / .08); color: var(--white); }
}

/* Sections */
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .72); }
.section--tint { background-color: var(--tint); }
.heading-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .25rem 2rem; }
.heading-row__text { max-width: 44rem; }
.heading-row__text > p:last-child:not(.eyebrow) { margin-top: .625rem; max-width: 56ch; }

/* Home capabilities: six identical cards in an even grid. Each is a photo above its title and
   text, so every edge lines up. On phones the photo sits beside the text to keep the list short. */
.bento { display: grid; gap: .75rem; margin-top: 1.5rem; }
.bento__item a {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); color: var(--ink); text-decoration: none; overflow: hidden;
}
.bento__media { display: block; align-self: stretch;  background: var(--white); }
.bento__media .tile, .bento__media picture { height: 100%; }
.bento__media img { height: 100%; aspect-ratio: auto; object-fit: contain; padding: .5rem; }
.bento__body { display: flex; flex-direction: column; gap: .375rem; padding: .875rem 1rem; }
.bento__head { display: flex; align-items: center; gap: .625rem; }
.bento__icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius); background: var(--tint); color: var(--brand); }
.bento__icon .icon { width: 1.125rem; height: 1.125rem; }
.bento__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.bento__text { color: var(--text); font-size: .9375rem; line-height: 1.45; }
.bento__more { display: none; align-items: center; gap: .3125rem; margin-top: auto; padding-top: .25rem; color: var(--brand); font-size: .9375rem; font-weight: 500; }
.bento__more .icon { width: 1rem; height: 1rem; }
.bento__item a:hover { border-color: var(--brand); color: var(--ink); }
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__item a { grid-template-columns: none; grid-template-rows: auto 1fr; }
  .bento__media { border-right: 0;  }
  .bento__media img { height: auto; aspect-ratio: 4 / 3; padding: .75rem; }
  .bento__body { padding: 1rem 1.125rem 1.125rem; }
  .bento__more { display: inline-flex; }
}
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

/* Home products: equal tiles */
.range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.5rem; }
.range a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); color: var(--ink); text-decoration: none; overflow: hidden; }
.range .tile { flex: 1; min-height: 0; overflow: hidden; }
.range__name { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem .875rem;  font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.range__name .icon { width: 1rem; height: 1rem; color: var(--brand-deep); }
.range a:hover { border-color: var(--line-strong); color: var(--brand-deep); }
@media (min-width: 768px) {
  .range { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Process: numbered panels */
.process { display: grid; gap: .75rem; margin-top: 1.5rem; }
.process li { padding: 1.5rem 1.25rem 1.25rem; border-radius: var(--radius-lg); background: var(--tint); overflow: hidden; }
.process__num { display: block; margin-bottom: .75rem; color: var(--brand-deep); font-family: var(--font-display); font-size: 2.25rem; font-weight: 600; font-stretch: 110%; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }
.process :is(h2, h3) { font-size: 1.0625rem; letter-spacing: -.005em; line-height: 1.35; }
.process p { margin-top: .375rem; font-size: .9375rem; line-height: 1.5; }
@media (max-width: 639px) {
  .process li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); padding: 1.125rem 1rem 1rem; }
  .process__num { grid-row: span 2; margin: 0; font-size: 1.75rem; }
}
@media (min-width: 640px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Why: a solid colour panel beside a checked list */
.why { display: grid; gap: var(--gap); }
.why__lead { padding: 1.75rem 1.5rem; border-radius: var(--radius-lg); background: var(--brand); color: var(--white); }
.why__year { margin-bottom: .75rem; font-family: var(--font-display); font-size: clamp(3.25rem, 2.25rem + 4vw, 6rem); font-stretch: 112%; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.why__lead h2 { color: var(--white); }
.why__lead > p:not(.why__year) { margin-top: .625rem; max-width: 40ch; color: var(--white); }
.why__cta { margin-top: 1.5rem; }
.why__list > div { padding-block: 1rem;  }
.why__list > div:first-child { border-top: 0; padding-top: 0; }
.why__list dt { display: flex; gap: .5rem; align-items: baseline; color: var(--ink); font-weight: 600; line-height: 1.35; }
.why__list dt .icon { position: relative; top: .1875rem; color: var(--brand); }
.why__list dd { margin-top: .1875rem; padding-left: 1.625rem; font-size: .9375rem; line-height: 1.5; }
@media (min-width: 900px) {
  .why { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 4rem; }
  .why__lead { padding: 2.5rem; }
  .why__list > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 1.5rem; }
  .why__list dd { margin-top: 0; padding-left: 0; }
}

/* Inquiry: logo-blue band with the form on a white card */
.inquiry :is(h1, h2) { color: var(--white); }
.inquiry h1 { font-size: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem); }
.crumbs-bar + .inquiry { padding-top: 1rem; }
.inquiry .lead { color: var(--white); }
.inquiry__grid { display: grid; gap: 1.75rem; }
@media (min-width: 1000px) {
  .inquiry__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
}
.contact-details { display: grid; margin-top: 1.5rem; }
.contact-details > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline;  font-size: .9375rem; }
.contact-details dt { color: var(--white); }
.contact-details dd { padding-block: .625rem; color: var(--white); font-weight: 500; }
.contact-details dd:has(a) { padding-block: 0; }
.contact-details a { display: inline-block; padding-block: .625rem; color: var(--white); }
.contact-details a:hover { color: var(--white); text-decoration-thickness: 2px; }
.quote-form { padding: 1.25rem; border-radius: var(--radius-lg); background: var(--white); color: var(--text); box-shadow: 0 18px 44px rgb(5 20 33 / .28); }
@media (min-width: 640px) { .quote-form { padding: 1.75rem; } }
.quote-form__fields { display: grid; gap: .875rem; }
@media (min-width: 640px) {
  .quote-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem 1rem; }
  .field--wide { grid-column: 1 / -1; }
}
.field label { display: block; margin-bottom: .3125rem; color: var(--ink); font-size: .875rem; font-weight: 500; }
.optional { color: var(--muted); font-weight: 400; }
.field input:not([type="checkbox"]), .field select, .field textarea {
  display: block; width: 100%; height: 2.75rem; padding: .5rem .75rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white);
  color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.4;
}
.field textarea { height: auto; min-height: 7rem; resize: vertical; }
.field :is(input, select, textarea):hover { border-color: var(--muted); }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); border-radius: var(--radius); }
.field [aria-invalid="true"] { border-color: var(--error) !important; }
.field__error { margin-top: .3125rem; color: var(--error); font-size: .8125rem; font-weight: 500; line-height: 1.4; }
.field--check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .75rem; align-items: start; margin-top: .25rem; }
/* The box is as tall as one line of its label, so the two centre on each other. */
.field--check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--brand); }
.field--check label { margin: 0; color: var(--text); font-weight: 400; line-height: 1.25rem; }
.field--check .field__error { grid-column: 2; }
/* Inside the white form card, the send button stays solid so it is clearly the next step. */
.btn--submit { margin-top: 1.5rem; width: 100%; height: 2.75rem; border-color: var(--brand); background: var(--brand); color: var(--white); }
.btn--submit:hover, .btn--submit:active { border-color: var(--brand-deep); background: var(--brand-deep); color: var(--white); }
.btn--submit[aria-busy="true"] { border-color: var(--muted); background: var(--muted); cursor: progress; }
@media (min-width: 640px) {
  .btn--submit { width: auto; height: 2.5rem; min-width: 9rem; }
}
.hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.quote-form__alert { margin-bottom: 1rem; padding: .75rem .875rem; border: 1px solid var(--error); border-radius: var(--radius); color: var(--error); font-size: .9375rem; line-height: 1.45; }
.quote-form__alert a { color: inherit; }
.quote-form__success { padding: .5rem; }
.quote-form__success:focus { outline: 0; }
.quote-form__success .icon { color: var(--success); }
.quote-form__success h3 { margin-top: .625rem; font-size: 1.1875rem; }
.quote-form__success p { margin-top: .375rem; }

/* Capabilities page: alternating photo and text rows */
.capabilities { display: grid; gap: 2.5rem; }
.capabilities > li { display: grid; gap: 1rem; scroll-margin-top: calc(var(--header) + 1rem); }
.capabilities__media { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.capabilities__media img { aspect-ratio: 2 / 1; }
.index__badge { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: var(--tint); color: var(--brand-deep); }
.index__badge .icon { width: 1.25rem; height: 1.25rem; }
.capabilities h2 { margin-top: .75rem; font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; }
.capabilities p { margin-top: .5rem; max-width: 56ch; text-wrap: pretty; }
.capabilities .link { margin-top: .25rem; }
@media (min-width: 900px) {
  .capabilities { gap: 2.5rem; }
  .capabilities > li { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); align-items: center; gap: 3rem; }
  .capabilities > li:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); }
  .capabilities > li:nth-child(even) .capabilities__media { order: 2; }
  .capabilities__media img { aspect-ratio: 4 / 3; }
}
.specs { display: grid; gap: .75rem; }
.specs > div { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.specs h2 { font-size: 1.1875rem; letter-spacing: -.008em; }
.chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .75rem; }
.chips li { padding: .3125rem .625rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: .875rem; }
@media (min-width: 900px) {
  .specs:not(.specs--single) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Products page */
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; }
.product { min-width: 0; scroll-margin-top: calc(var(--header) + 1rem); }
.product__view { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; cursor: zoom-in; }
.product__view:hover { border-color: var(--line-strong); }
.product h2 { margin-top: .75rem; font-family: var(--font); font-size: 1rem; font-stretch: 100%; letter-spacing: -.004em; line-height: 1.3; }
.product > p { margin-top: .1875rem; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.product .link { font-size: .875rem; }
@media (min-width: 700px) {
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1rem; }
}
@media (min-width: 1100px) {
  .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gallery { width: min(100% - 1.5rem, 52rem); max-width: none; max-height: calc(100dvh - 1.5rem); padding: 0; overflow: auto; border-radius: var(--radius-lg); background: var(--white); }
.gallery[open] { display: grid; }
.gallery__close { position: absolute; top: .25rem; right: .25rem; z-index: 1; }
.gallery__media .tile img { max-height: 46dvh; }
.gallery__thumbs { display: flex; gap: .375rem; padding: .5rem; }
.gallery__thumbs button { width: 3.5rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: none; overflow: hidden; cursor: pointer; }
.gallery__thumbs button[aria-current] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.gallery__body { padding: 1rem 1.25rem 1.25rem; }
.gallery h3 { padding-right: 1.75rem; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.012em; }
.gallery__body > p { margin-top: .5rem; font-size: .9375rem; }
.gallery .actions { margin-top: 1rem; }
@media (min-width: 800px) {
  .gallery[open] { grid-template-columns: 1fr 1fr; }
  .gallery__media .tile img { max-height: none; }
  .gallery__body { padding: 2.5rem 1.75rem 1.75rem; }
}

/* Detail pages */
.detail { display: grid; gap: 2rem; }
.detail__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; align-content: start; }
.detail__media .tile { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 900px) {
  .detail { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
  .detail__media { position: sticky; top: calc(var(--header) + 1.5rem); align-self: start; }
}
.callout { margin-top: 1.75rem; padding: 1.25rem; border-radius: var(--radius-lg); background: var(--tint); }
.related { background: var(--tint); }
.related h2 { font-family: var(--font); font-size: 1.0625rem; font-stretch: 100%; letter-spacing: -.005em; }
.related ul { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-top: .25rem; }

/* About */
.about { display: grid; gap: 1.75rem; }
.about__photo img { width: 100%; border-radius: var(--radius-lg); }
@media (min-width: 900px) {
  .about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 4rem; }
}
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.facts > div { padding: 1rem 1.125rem; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: .8125rem; }
.facts dd { margin-top: .125rem; color: var(--ink); font-weight: 600; line-height: 1.3; }
@media (min-width: 900px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.index { margin-top: 1.5rem; display: grid; gap: .75rem; }
.split-head { display: grid; gap: .25rem; }
.split-head__intro p { margin-top: .625rem; max-width: 52ch; }
.split-head__intro .link { margin-top: .25rem; }
.index a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .125rem .875rem; align-items: start; height: 100%; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; text-decoration: none; }
.index a:hover { border-color: var(--line-strong); }
.index .index__badge { grid-row: span 2; }
.index__title { color: var(--ink); font-size: 1rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
.index__text { grid-column: 2; color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.index__arrow { display: none; }
@media (min-width: 700px) {
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Call to action band, contact, prose */
.cta-band { background: var(--brand); color: var(--white); }
.cta-band h2 { color: var(--white); font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); }
.cta-band__row { display: grid; gap: .25rem 3rem; }
.cta-band p { margin-top: .375rem; }
.cta-band .actions { margin-top: 1rem; }
@media (min-width: 800px) {
  .cta-band__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .cta-band .actions { margin-top: 0; }
}
.visit { display: grid; gap: 1.5rem; }
.visit h2 { font-size: 1.375rem; margin-bottom: .625rem; }
.visit h3 { margin-top: 1.25rem; font-size: .9375rem; font-weight: 600; }
.visit .note { margin-top: .5rem; }
.link-list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: .25rem; }
.link-list a { display: inline-block; padding-block: .625rem; font-size: .9375rem; }
.map { border-radius: var(--radius-lg); background: var(--line); overflow: hidden; }
.map iframe { width: 100%; height: clamp(16rem, 40vw, 24rem); border: 0; }
@media (min-width: 900px) {
  .visit { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; }
}
.prose h2 { margin-top: 1.75rem; font-size: clamp(1.25rem, 1.15rem + .5vw, 1.625rem); letter-spacing: -.018em; line-height: 1.2; }
.prose > h2:first-child, .callout h2 { margin-top: 0; }
.prose p, .prose address, .prose ul { margin-top: .5rem; max-width: 62ch; text-wrap: pretty; }
.prose ul { display: grid; gap: .25rem; padding-left: 1.0625rem; list-style: square; }
.prose li::marker { color: var(--brand); font-size: .8em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose--narrow { max-width: 46rem; }

/* Footer */
.site-footer { background: var(--tint); font-size: .875rem; }
.site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; padding-block: 2.25rem 1.5rem; }
.site-footer__about { grid-column: 1 / -1; }
.site-footer__about img { width: auto; height: 3.25rem; }
.site-footer__about p { margin-top: .75rem; max-width: 40ch; line-height: 1.5; }
.site-footer__contact { grid-column: 1 / -1; }
.footer-title { margin-bottom: .25rem; color: var(--ink); font-size: .875rem; font-weight: 600; letter-spacing: 0; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--brand-deep); text-decoration: underline; }
.site-footer nav a, .site-footer__contact a { display: block; padding-block: .6875rem; line-height: 1.3; }
.site-footer address { margin-top: .375rem; line-height: 1.5; }
.site-footer__base {
  display: grid; gap: .25rem 1.5rem; padding-block: .75rem 1rem; color: var(--muted); font-size: .8125rem;
}
.site-footer__base ul { display: flex; flex-wrap: wrap; gap: 0 1.125rem; }
.site-footer__base a { display: inline-block; padding-block: .625rem; color: var(--muted); }
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 4fr 2fr 4fr 3fr; gap: 2.5rem; padding-block: 2.75rem 1.75rem; }
  .site-footer__about, .site-footer__contact { grid-column: auto; }
  .site-footer nav a, .site-footer__contact a { padding-block: .25rem; }
  .site-footer__base { grid-template-columns: 1fr auto; align-items: center; }
  .site-footer__base a { padding-block: .25rem; }
}

/* Assistant launcher. The panel's own styles load only when it is first opened. */
.assist-launcher {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 9;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 3.25rem; height: 3.25rem; padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--brand); color: var(--white); box-shadow: 0 6px 18px rgb(11 33 51 / .28);
  font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer;
}
.assist-launcher .icon { width: 1.5rem; height: 1.5rem; }
.assist-launcher span { display: none; }
.assist-launcher:hover { background: var(--brand-deep); }
.assist-launcher.is-tucked, .assist-launcher.is-open { visibility: hidden; transform: translateY(calc(100% + 1.5rem)); }
@media (min-width: 768px) {
  .assist-launcher { right: 1.25rem; bottom: 1.25rem; width: auto; height: 3rem; padding-inline: 1rem; }
  .assist-launcher .icon { width: 1.25rem; height: 1.25rem; }
  .assist-launcher span { display: inline; }
}

/* Motion. Everything below is enhancement: with reduced motion, or no JavaScript, the page is
   simply already in its final state. Only opacity and transform are animated, and nothing loops. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes settle { from { opacity: 0; transform: scale(1.015); } }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Controls */
  .btn { transition: transform .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
  .btn:active { transform: scale(.98); }
  .site-nav a { transition: color .15s var(--ease); }
  .site-nav a::after { transition: transform .22s var(--ease); }
  .link .icon, .bento__arrow, .range__name .icon { transition: transform .2s var(--ease); }
  .field :is(input, select, textarea) { transition: border-color .14s var(--ease); }
  .tile img { transition: transform .32s var(--ease); }
  .assist-launcher { transition: transform .22s var(--ease), background-color .15s var(--ease); animation: rise .32s var(--ease) .45s both; }
  .assist-launcher.is-tucked, .assist-launcher.is-open { transition: transform .22s var(--ease), visibility 0s .22s; }
  .bento__item a, .range a, .index a, .product__view { transition: transform .2s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
  @media (hover: hover) {
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: scale(.98); }
    .link:hover .icon, .range a:hover .range__name .icon, .bento__item a:hover .bento__arrow { transform: translateX(3px); }
    .bento__item a:hover, .range a:hover, .index a:hover { transform: translateY(-2px); }
    .bento__item a:hover .tile img, .range a:hover .tile img, .product__view:hover .tile img { transform: scale(1.04); }
  }

  /* Dialogs */
  dialog, dialog::backdrop { transition: opacity .2s var(--ease), transform .2s var(--ease), overlay .2s allow-discrete, display .2s allow-discrete; }
  dialog:not([open]), dialog:not([open])::backdrop { opacity: 0; }
  @starting-style {
    dialog[open], dialog[open]::backdrop { opacity: 0; }
    .menu[open] { transform: translateY(-.5rem); }
  }
  .menu[open] .menu__links li { animation: rise .3s var(--ease) both; }
  .menu[open] .menu__links li:nth-child(2) { animation-delay: .04s; }
  .menu[open] .menu__links li:nth-child(3) { animation-delay: .08s; }
  .menu[open] .menu__links li:nth-child(4) { animation-delay: .12s; }
  .menu[open] .menu__links li:nth-child(5) { animation-delay: .16s; }
  [data-slide]:not([hidden]) { animation: settle .22s var(--ease); }

  /* First screen, on load. Pure CSS, so it needs no script and cannot leave anything hidden. */
  .hero__text > *, .page-head__text > * { animation: rise .42s var(--ease) both; }
  .hero__text > :nth-child(2), .page-head__text > :nth-child(2) { animation-delay: .05s; }
  .hero__text > :nth-child(3) { animation-delay: .1s; }
  .hero__text > :nth-child(4) { animation-delay: .15s; }
  .hero__photo { animation: settle .45s var(--ease) both; }

  /* On scroll. The js-reveal class exists only when site.js runs and the device can afford it.
     The first block under a page head is never hidden: it is the content the visitor came for. */
  .js-reveal main section.is-visible, .js-reveal :is(.capabilities, .products) > li.is-visible { transition: opacity .42s var(--ease), transform .42s var(--ease); }
  .js-reveal main section:not(.hero, .crumbs-bar + section, .page-head + section, .is-visible) { opacity: 0; transform: translateY(16px); }
  .js-reveal :is(.capabilities, .products) > li:not(.is-visible) { opacity: 0; transform: translateY(16px); }

  /* Items in a revealed section cascade in, by transform alone, a beat after it. */
  .js-reveal :is(.bento, .range, .process, .index, .facts, .why__list) > * { transition: transform .42s var(--ease); transition-delay: var(--stagger, 0ms); }
  .js-reveal main section:not(.is-visible) :is(.bento, .range, .process, .index, .facts, .why__list) > * { transform: translateY(14px); }
  .js-reveal :is(.bento, .range, .process, .index, .facts, .why__list) > :nth-child(2) { --stagger: 50ms; }
  .js-reveal :is(.bento, .range, .process, .index, .facts, .why__list) > :nth-child(3) { --stagger: 100ms; }
  .js-reveal :is(.bento, .range, .process, .index, .facts, .why__list) > :nth-child(4) { --stagger: 150ms; }
  .js-reveal :is(.bento, .range, .process, .index, .facts, .why__list) > :nth-child(n+5) { --stagger: 200ms; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .map, .assist-launcher { display: none; }
  .js-reveal main section, .js-reveal :is(.capabilities, .products) > li { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Design layer. Colours are white and tones of the blue sampled from the SSP logo, and nothing
   else. Headings use Montserrat, the face on the company's LinkedIn banner. Lines are part of the
   design: every section is closed by a hairline, and lists, cards and the footer are ruled.
   ========================================================================== */
:root {
  --brand: #1e74be;
  --brand-deep: #185b94;
  --head: #1f5c9e;
  --ink: #123d63;
  --text: #325775;
  --muted: #506e87;
  --line: #d0e0ee;
  --line-strong: #9db9d1;
  --tint: #f2f7fc;
  --wash-1: #e7f0f9;
  --wash-2: #d5e5f4;
  --success: #185b94;
  --radius: 8px;
  --radius-lg: 14px;
}

/* Headings and titles */
h1, h2, h3, .bento__title, .index__title, .footer-title, .why__list dt, .range__name, .product h2, .assist__title {
  font-family: var(--font-display); font-stretch: 100%;
}
h1, h2 { color: var(--head); font-weight: 700; }
h1 { font-size: clamp(2rem, 1.15rem + 3.3vw, 3.5rem); line-height: 1.1; letter-spacing: -.025em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.18; letter-spacing: -.02em; }
h3 { color: var(--ink); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.bento__title, .index__title, .why__list dt, .range__name, .product h2 { font-weight: 600; letter-spacing: -.01em; }
.bento__title { font-size: 1rem; }

/* Eyebrow: a small label with a rule running on from it */
.hero__kicker, .eyebrow {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .875rem;
  color: var(--brand-deep); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.hero__kicker::after, .eyebrow::after { content: ""; flex: 0 1 7rem; height: 1px; background: var(--line-strong); }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--white); box-shadow: none; }
.site-nav a::after { display: block; }
.site-nav a[aria-current] { background: none; border-radius: 0; color: var(--brand-deep); }
.menu__links a { border-bottom: 1px solid var(--line); }
.menu__links li:first-child a { border-top: 1px solid var(--line); }

/* Buttons: solid logo blue on light surfaces, white on blue ones */
.btn { height: 2.75rem; padding-inline: 1.125rem; font-weight: 600; }
.btn--primary { border-color: var(--brand); background: var(--brand); color: var(--white); }
.btn--primary:hover, .btn--primary:active { border-color: var(--brand-deep); background: var(--brand-deep); color: var(--white); }
.btn--line, .hero .btn--on-brand { border-color: var(--line-strong); background: var(--white); color: var(--brand-deep); }
.btn--line:hover, .hero .btn--on-brand:hover { border-color: var(--brand); background: var(--tint); color: var(--brand-deep); }
.cta-band .btn--primary { border-color: var(--white); background: var(--white); color: var(--brand-deep); }
.cta-band .btn--primary:hover { background: var(--wash-1); color: var(--brand-deep); }
.cta-band .btn--on-brand { border-color: rgb(255 255 255 / .6); }

/* Every section ends in a hairline. The first block under a page head or header has none above it. */
main > section + section, main > div + section { border-top: 1px solid var(--line); }

/* Hero and page heads: tonal blue bands at an angle, like the banner, and a fine grid on the pale side */
.hero, .page-head, .crumbs-bar { position: relative; color: var(--text); }
.hero {
  background:
    linear-gradient(180deg, transparent 0 54%, var(--wash-1) 54% 82%, var(--wash-2) 82% 100%),
    linear-gradient(180deg, #f8fbfe, #f2f7fc);
  overflow: hidden;
}
.hero::before, .page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgb(30 116 190 / .06) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgb(30 116 190 / .06) 0 1px, transparent 1px 44px);
  -webkit-mask-image: linear-gradient(100deg, #000, transparent 62%); mask-image: linear-gradient(100deg, #000, transparent 62%);
}
.hero__grid, .hero > .wrap, .page-head__row { position: relative; }
.hero__grid { padding-block: 2.25rem 1.25rem; gap: 1.75rem; }
.hero h1 { color: var(--head); font-size: clamp(2.125rem, 1.1rem + 3.9vw, 3.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.hero h1 span { color: var(--brand); }
.hero__lead { max-width: 44ch; color: var(--text); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }
.hero__stage { margin: 0; }
.hero__photo { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: 10px 10px 0 var(--wash-2); }
.hero__photo img { aspect-ratio: 1.6; }

/* Facts: one ruled box, cells divided by hairlines */
.hero__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: .5rem; margin-bottom: 1.75rem; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--white); overflow: hidden;
}
.hero__facts > div { padding: 1rem 1.125rem; border-top: 1px solid var(--line); }
.hero__facts > div:nth-child(-n+2) { border-top: 0; }
.hero__facts > div:nth-child(even) { border-left: 1px solid var(--line); }
.hero__facts dt { color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hero__facts dd { margin-top: .25rem; color: var(--ink); font-size: .9375rem; font-weight: 600; }
@media (min-width: 768px) {
  .hero { background:
    linear-gradient(112deg, transparent 0 58%, var(--wash-1) 58% 80%, var(--wash-2) 80% 100%),
    linear-gradient(180deg, #f8fbfe, #f2f7fc); }
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); padding-block: clamp(2.75rem, 4.5vw, 4.25rem) 1.75rem; }
  .hero__photo img { aspect-ratio: 1.3; }
  .hero__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 2.5rem; }
  .hero__facts > div, .hero__facts > div:nth-child(even) { border-top: 0; border-left: 1px solid var(--line); padding: 1.25rem 1.5rem; }
  .hero__facts > div:first-child { border-left: 0; }
}

.page-head { background: linear-gradient(112deg, #f8fbfe 0 56%, var(--wash-1) 56% 82%, var(--wash-2) 82% 100%); border-bottom: 1px solid var(--line); }
.page-head h1 { color: var(--head); font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem); }
.page-head .lead { color: var(--text); }
.crumbs-bar { background: transparent; }
.crumbs-bar + .page-head { padding-top: 1.75rem; border-top: 0; }
.crumbs-bar + .inquiry { padding-top: 2rem; }
.crumbs, .crumbs a, .crumbs a:hover { color: var(--brand-deep); }
.crumbs li + li::before { color: var(--line-strong); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.page-head__jump a, .page-head__jump a:hover { border: 1px solid var(--line-strong); background: var(--white); color: var(--brand-deep); }
:is(.hero, .crumbs-bar, .page-head, .inquiry) :focus-visible { outline-color: var(--brand-deep); }

/* Sections: pale sections carry a soft tonal wash in two corners, not a flat grey */
.section--tint {
  background-color: var(--tint);
  background-image:
    radial-gradient(48rem 22rem at 100% 0, var(--wash-1), transparent 70%),
    radial-gradient(36rem 18rem at 0 100%, var(--wash-1), transparent 70%);
}
.section-rule { border-top: 1px solid var(--line); }

/* Process: ruled panels, number beside a hairline */
.process { gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; }
.process li { padding: 1.4rem; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--white); }
.process li:first-child { border-top: 0; }
.process__num { display: flex; align-items: center; gap: .75rem; color: var(--brand); font-family: var(--font-display); font-weight: 700; }
.process__num::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 639px) {
  .process li { display: block; }
  .process__num { margin-bottom: .5rem; font-size: 1.5rem; }
}
@media (min-width: 640px) {
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process li:nth-child(2) { border-top: 0; }
  .process li:nth-child(even) { border-left: 1px solid var(--line); }
}
@media (min-width: 1000px) {
  .process { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .process li { border-top: 0; border-left: 1px solid var(--line); }
  .process li:first-child { border-left: 0; }
}

/* Why: a tonal panel beside a ruled list */
.why__lead { border: 1px solid var(--line-strong); background: linear-gradient(160deg, var(--white), var(--wash-1)); color: var(--text); }
.why__year { color: var(--brand); }
.why__lead h2 { color: var(--head); }
.why__lead > p:not(.why__year) { color: var(--text); }
.why__list > div { border-top: 1px solid var(--line-strong); }
.why__list > div:last-child { border-bottom: 1px solid var(--line-strong); }
.why__list > div:first-child { padding-top: 1rem; border-top: 1px solid var(--line-strong); }

/* Request section: heading and contact boxes on the left, a ruled form card on the right */
.inquiry {
  background:
    linear-gradient(112deg, transparent 0 62%, var(--wash-1) 62% 84%, var(--wash-2) 84% 100%),
    linear-gradient(180deg, #f8fbfe, #f2f7fc);
  color: var(--text);
}
.inquiry :is(h1, h2) { color: var(--head); }
.inquiry .lead { color: var(--text); }
.inquiry__intro > .lead { max-width: 40ch; }
.contact-details { gap: .5rem; margin-top: 1.5rem; }
.contact-details > div {
  grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 .75rem; align-items: center; padding: .25rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-size: .9375rem;
}
.contact-details dt { display: contents; }
.contact-details dt .icon { grid-row: span 2; width: 2.25rem; height: 2.25rem; padding: .5rem; border-radius: 6px; background: var(--wash-1); color: var(--brand-deep); }
.contact-details dt span { grid-column: 2; color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.contact-details dd { grid-column: 2; padding: 0; color: var(--ink); font-weight: 600; }
.contact-details dd:has(a) { padding: 0; }
.contact-details a { padding-block: .5rem; color: var(--brand-deep); }
.contact-details a:hover { color: var(--ink); }
.next { margin-top: 1.5rem; padding: 1.125rem 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--white); }
.next__title { color: var(--ink); font-family: var(--font-display); font-size: .9375rem; font-weight: 700; }
.next ul { display: grid; gap: .4rem; margin-top: .625rem; }
.next li { display: flex; gap: .5rem; align-items: baseline; font-size: .9375rem; line-height: 1.4; }
.next .icon { position: relative; top: .2rem; color: var(--brand); }
.quote-form { border: 1px solid var(--line-strong); box-shadow: 10px 10px 0 var(--wash-2); }
.quote-form__head { margin: -1.25rem -1.25rem 1.25rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--tint); }
.quote-form__head p { color: var(--muted); font-size: .8125rem; }
.quote-form__head strong { display: block; color: var(--head); font-family: var(--font-display); font-size: 1rem; }
@media (min-width: 640px) { .quote-form__head { margin: -1.75rem -1.75rem 1.5rem; padding: 1rem 1.75rem; } }

/* Footer: ruled columns, facts as small boxes, profiles as bordered links */
.site-footer { border-top: 1px solid var(--line-strong); background: var(--tint); }
.site-footer__grid { gap: 0; padding-block: 0; }
.site-footer__about, .site-footer nav, .site-footer__contact { padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.site-footer__about p { max-width: 38ch; color: var(--text); }
.footer-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.footer-facts li { padding: .3rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--white); color: var(--ink); font-size: .8125rem; font-weight: 500; }
.footer-title { padding-bottom: .625rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line-strong); color: var(--head); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.site-footer__base { border-top: 1px solid var(--line-strong); background: none; }
.site-footer__base ul { gap: .375rem; }
.site-footer__base li a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--brand-deep); }
.site-footer__base li a:hover { border-color: var(--brand); text-decoration: none; }
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 4fr 2fr 4fr 3fr; }
  .site-footer__about, .site-footer nav, .site-footer__contact { padding: 2.5rem 1.75rem; border-bottom: 0; border-left: 1px solid var(--line); }
  .site-footer__about { padding-left: 0; border-left: 0; }
  .site-footer__contact { padding-right: 0; }
}

/* Cards keep the soft, borderless look and gain hairline dividers inside */
.bento__item a, .range a { border-color: transparent; box-shadow: 0 5px 20px rgb(30 116 190 / .07); }
.bento__media { border-bottom: 1px solid var(--line); }
@media (max-width: 639px) { .bento__media { border-bottom: 0; border-right: 1px solid var(--line); } }
.range__name { border-top: 1px solid var(--line); }
.capabilities > li + li { padding-top: 2.5rem; border-top: 1px solid var(--line); }
.capabilities { gap: 2.5rem; }

/* Forms and states: no colour outside the palette except the error message */
.field :is(input, select, textarea) { border-color: var(--line-strong); }
.quote-form__success .icon { color: var(--brand); }

/* Motion refinements on this layer */
@media (prefers-reduced-motion: no-preference) {
  .hero__text > *, .page-head__text > * { animation: rise .42s var(--ease) both; }
  .hero__photo { animation: settle .45s var(--ease) both; }
  .bento__item a, .range a { transition: box-shadow .24s var(--ease), transform .24s var(--ease); }
  @media (hover: hover) {
    .bento__item a:hover, .range a:hover { box-shadow: 0 8px 24px rgb(30 116 190 / .14); border-color: transparent; }
  }
}