:root {
  --primary: var(--brand-primary);
  --primary-active: var(--brand-primary-active);
  --on-primary: var(--brand-on-primary);
  --accent: var(--brand-accent);
  --focus: var(--brand-focus);
  --focus-width: var(--brand-focus-width);
  --slate: var(--brand-accent-slate);
  --green: var(--brand-accent-green);
  --dark: var(--brand-dark);
  --canvas: var(--brand-canvas);
  --soft: var(--brand-canvas-soft);
  --surface: var(--brand-surface);
  --surface-alt: var(--brand-surface-alt);
  --ink: var(--brand-ink);
  --ink-secondary: var(--brand-ink-secondary);
  --muted: var(--brand-ink-secondary);
  --ink-muted: var(--brand-ink-muted);
  --ink-faint: var(--brand-ink-faint);
  --hairline: var(--brand-hairline);
  --radius-xs: var(--brand-radius-xs);
  --radius-sm: var(--brand-radius-sm);
  --radius-md: var(--brand-radius-md);
  --radius-lg: var(--brand-radius-lg);
  --radius-xl: var(--brand-radius-xl);
  --radius-xxl: var(--brand-radius-xxl);
  --radius-full: var(--brand-radius-full);
  --shadow-1: var(--brand-shadow-1);
  --shadow-2: var(--brand-shadow-2);
  --shadow: 0 24px 60px rgb(45 44 43 / 10%);
  --ease: var(--brand-motion-ease)
}

.shared-document-page {
  display: grid;
  min-height: min(72vh, 56rem);
  place-items: center;
  padding: clamp(3rem, 8vw, 7rem) 1.25rem;
  background: var(--canvas)
}

.shared-document-card {
  width: min(100%, 43rem);
  padding: clamp(2rem, 5vw, 3.75rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
  animation: shared-document-enter 180ms var(--ease) both
}

.shared-document-card h1 {
  max-width: 22ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.1;
  overflow-wrap: anywhere
}

.shared-document-card > p {
  margin: 1.15rem 0 0;
  color: var(--muted);
  line-height: 1.7;
  white-space: normal;
  overflow-wrap: anywhere
}

.shared-document-richtext {
  margin-top: 1.15rem;
  color: var(--muted);
  line-height: 1.7;
  overflow-wrap: anywhere
}

.shared-document-richtext > :first-child { margin-top: 0 }
.shared-document-richtext > :last-child { margin-bottom: 0 }
.shared-document-richtext p { margin: 0 0 1rem }
.shared-document-richtext h2, .shared-document-richtext h3, .shared-document-richtext h4 { margin: 1.5rem 0 .65rem; color: var(--ink); line-height: 1.25 }
.shared-document-richtext h2 { font-size: 1.45rem }
.shared-document-richtext h3 { font-size: 1.2rem }
.shared-document-richtext h4 { font-size: 1.05rem }
.shared-document-richtext ul, .shared-document-richtext ol { margin: .5rem 0 1rem; padding-left: 1.5rem }
.shared-document-richtext li + li { margin-top: .25rem }
.shared-document-richtext blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 2px solid var(--hairline); color: var(--ink-secondary) }
.shared-document-richtext table { display: block; width: max-content; min-width: 100%; max-width: 100%; margin: 1rem 0; overflow-x: auto; border-collapse: collapse; font-size: .9em }
.shared-document-richtext th, .shared-document-richtext td { padding: .55rem .65rem; border: 1px solid var(--hairline); text-align: left; vertical-align: top }
.shared-document-richtext th { color: var(--ink); font-weight: 700 }

.shared-document-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem
}

.shared-document-card__actions .button {
  min-width: 9.5rem;
  justify-content: center
}

.shared-document-card .shared-document-privacy-note {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5
}

.shared-document-privacy-note a { color: var(--primary-active); text-decoration: underline; text-underline-offset: .15em }

@keyframes shared-document-enter {
  from { opacity: 0; transform: translateY(12px) }
  to { opacity: 1; transform: translateY(0) }
}

@media (max-width: 36rem) {
  .shared-document-page { min-height: 60vh; padding-inline: 1rem }
  .shared-document-card { padding: 1.6rem 1.25rem }
  .shared-document-card__actions { display: grid }
  .shared-document-card__actions .button { width: 100% }
}

@media (prefers-reduced-motion: reduce) {
  .shared-document-card { animation: none }
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Hanken Grotesk", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6
}

body,
.site-header,
.site-footer {
  min-width: 20rem
}

img {
  max-width: 100%
}

.shell {
  width: min(100% - 2.5rem, 76rem);
  margin-inline: auto
}

.shell.narrow {
  width: min(100% - 2.5rem, 48rem)
}

h1,
h2,
h3,
p,
ul,
ol {
  margin-top: 0
}

h1,
h2,
h3 {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02
}

h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(3rem, 6.5vw, 6.4rem)
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.15rem, 4.2vw, 4.25rem)
}

h3 {
  margin-bottom: .6rem;
  font-size: clamp(1.25rem, 2vw, 1.65rem)
}

p {
  margin-bottom: 1rem
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px
}

button,
input,
select,
textarea {
  font: inherit
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: .75px solid var(--accent);
  outline-offset: 2px
}

.lead {
  max-width: 42rem;
  color: var(--muted);
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
  line-height: 1.5
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  transform: translateY(-200%);
  padding: .65rem .9rem;
  background: var(--dark);
  color: #fff
}

.skip-link:focus {
  transform: translateY(0)
}

/* Header and navigation */
.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--hairline);
  background: rgb(249 244 242 / 96%)
}

.nav-wrap {
  position: relative;
  min-height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem
}

.brand {
  display: inline-flex;
  line-height: 0
}

.brand img {
  width: 10.75rem;
  height: auto
}

.site-nav {
  display: flex;
  align-items: center;
  gap: .2rem
}

.nav-group {
  position: relative
}

.nav-group--services {
  position: static
}

.nav-group>summary {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem .8rem;
  border: 0;
  border-radius: .3rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  list-style: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease)
}

.nav-group>summary::-webkit-details-marker {
  display: none
}

.nav-group>summary:hover,
.nav-group>summary:focus-visible,
.nav-group[open]>summary {
  background: var(--soft);
  color: var(--primary-active)
}

.nav-chevron {
  width: 1rem;
  height: 1rem;
  flex: none;
  overflow: visible;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms var(--ease)
}

.nav-group[open]>summary .nav-chevron {
  transform: rotate(180deg)
}

.nav-group::after {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: .65rem;
  content: ""
}

.nav-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + .55rem);
  right: 0;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: .35rem;
  background: var(--surface);
  box-shadow: 0 28px 70px rgb(45 44 43 / 18%);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 190ms var(--ease), transform 190ms var(--ease)
}

.nav-menu--three {
  width: min(46rem, calc(100vw - 2rem));
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.nav-menu--services {
  width: min(44rem, calc(100vw - 2rem));
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.nav-menu--products {
  width: min(34.67rem, calc(100vw - 2rem));
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.nav-menu--products .nav-card {
  min-height: 10.75rem
}

.nav-menu--services .nav-card,
.nav-menu--products .nav-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  border-bottom: 1px solid var(--hairline)
}

.nav-menu--services .nav-card {
  min-height: 8rem;
  align-items: start
}

.nav-menu--services .nav-card__icon,
.nav-menu--products .nav-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0
}

.nav-menu--services .nav-card:nth-child(2n),
.nav-menu--products .nav-card:nth-child(2n) {
  border-right: 0
}

.nav-menu--services .nav-card:last-child {
  grid-column: 1 / -1;
  min-height: 0;
  border-bottom: 0
}

.nav-menu--products .nav-card:nth-last-child(-n+2) {
  border-bottom: 0
}

.nav-menu--products .nav-card:nth-child(-n+2) {
  border-bottom: 1px solid var(--hairline)
}

.nav-menu--resources {
  width: min(23rem, calc(100vw - 2rem));
  grid-template-columns: 1fr;
  padding: .4rem
}

.nav-group[open]>.nav-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto
}

.nav-card {
  min-width: 0;
  min-height: 12.5rem;
  display: flex;
  flex-direction: column;
  padding: 1.15rem;
  border-right: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease)
}

.nav-card:last-child {
  border-right: 0
}

.nav-card:hover,
.nav-card:focus-visible {
  background: var(--soft);
  color: var(--primary-active)
}

.nav-menu--resources .nav-card {
  min-height: 0;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: .85rem;
  padding: .8rem;
  border-right: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: .2rem
}

.nav-menu--resources .nav-card:last-child {
  border-bottom: 0
}

.nav-menu--resources .nav-card__icon {
  width: 2.35rem;
  height: 2.35rem;
  margin: 0
}

.nav-menu--resources .nav-card__copy {
  gap: .15rem
}

.nav-menu--resources .nav-card__copy strong {
  font-size: .95rem
}

.nav-menu--resources .nav-card__copy>span {
  font-size: .78rem;
  line-height: 1.35
}

.nav-card__icon {
  width: 2.45rem;
  height: 2.45rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  padding: .35rem;
  border-radius: .2rem;
  color: var(--dark)
}

.nav-simple-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: .65rem .8rem;
  border-radius: .3rem;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease)
}

.nav-simple-link:hover,
.nav-simple-link:focus-visible {
  background: var(--soft);
  color: var(--primary-active)
}

.nav-card__icon--orange {
  background: #f7d2c2
}

.nav-card__icon--blue {
  background: #d8e4ed
}

.nav-card__icon--green {
  background: #dce8de
}

.nav-card__icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 240ms var(--ease)
}

.nav-icon__motion {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 240ms var(--ease), opacity 240ms var(--ease)
}

.nav-card:hover .nav-card__icon svg,
.nav-card:focus-visible .nav-card__icon svg {
  transform: translateY(-2px) rotate(-2deg)
}

.nav-card:hover .nav-icon__motion,
.nav-card:focus-visible .nav-icon__motion {
  transform: translate(2px, -2px) scale(1.05)
}

.nav-card__copy {
  display: grid;
  gap: .4rem
}

.nav-card__copy strong {
  font-size: 1.05rem;
  line-height: 1.2
}

.nav-card__copy>span {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.38
}

/* Managed EDR product page. */
.edr-hero {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: linear-gradient(120deg, var(--canvas), #e9eff2)
}

.edr-hero__layout {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center
}

.edr-hero__copy h1 {
  max-width: 11ch;
  font-size: clamp(3rem, 6.5vw, 5.8rem)
}

.edr-hero__copy .lead {
  max-width: 40rem
}

.edr-response-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 24px 60px rgb(45 44 43 / 8%)
}

.edr-response-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline)
}

.edr-response-card__heading strong {
  font-size: 1.05rem
}

.edr-coverage-badge {
  padding: .3rem .65rem;
  border-radius: var(--radius-full);
  background: #dce8de;
  color: #315e3c;
  font-size: .78rem;
  font-weight: 700
}

.edr-response-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none
}

.edr-response-steps li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline)
}

.edr-response-steps li:last-child {
  padding-bottom: 0;
  border-bottom: 0
}

.edr-step-number {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--soft);
  color: var(--primary);
  font-size: .85rem;
  font-weight: 700
}

.edr-response-steps strong,
.edr-response-steps span:last-child {
  display: block
}

.edr-response-steps span:last-child {
  color: var(--muted);
  font-size: .9rem
}

.edr-content-section {
  padding: clamp(4rem, 8vw, 7rem) 0
}

.edr-content-section--soft {
  background: var(--soft)
}

.edr-section-heading {
  max-width: 46rem;
  margin-bottom: 2.5rem
}

.edr-section-heading h2 {
  max-width: 18ch
}

.edr-capabilities,
.edr-audience {
  display: grid;
  gap: 1.5rem
}

.edr-capabilities article,
.edr-audience article {
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline)
}

.edr-capabilities h3,
.edr-audience h3 {
  font-size: 1.25rem
}

.edr-capabilities p,
.edr-audience p {
  margin-bottom: 0;
  color: var(--muted)
}

@media(min-width: 52rem) {
  .edr-hero__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr)
  }

  .edr-capabilities,
  .edr-audience {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

/* AI Readiness & Security Review: assessment scope and outputs. */
.ai-rsr-hero {
  background: var(--canvas)
}

.ai-rsr-hero .itdr-hero__copy h1 {
  max-width: 13ch
}

.ai-rsr-hero .itdr-hero__image img {
  aspect-ratio: 1.3
}

.ai-rsr-scope {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem)
}

.ai-rsr-scope-section {
  background: var(--surface)
}

.ai-rsr-scope__intro {
  display: grid;
  gap: 1.25rem;
  align-items: end
}

.ai-rsr-scope__intro h2 {
  max-width: 15ch;
  margin-bottom: 0;
  font-size: clamp(2.5rem, 4.5vw, 3.5rem)
}

.ai-rsr-scope__intro > p {
  max-width: 44rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7
}

.ai-rsr-scope__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none
}

.ai-rsr-scope__list li {
  min-width: 0
}

.ai-rsr-scope__list h3 {
  margin: 0 0 .4rem;
  color: var(--primary);
  font-size: 1.2rem;
  line-height: 1.3
}

.ai-rsr-scope__list p {
  max-width: 25rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.6
}

.ai-rsr-outputs {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center
}

.ai-rsr-outputs__image {
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-lg)
}

.ai-rsr-outputs__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1.4;
  object-fit: cover
}

.ai-rsr-outputs__list {
  margin: 0 0 1.75rem;
  padding-left: 1.25rem
}

.ai-rsr-outputs__list li {
  padding: .55rem 0 .55rem .3rem
}

.ai-rsr-recommendation {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: 1.08rem;
  line-height: 1.65
}

@media(min-width: 52rem) {
  .ai-rsr-scope__intro {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr)
  }
}

@media(min-width: 40rem) {
  .ai-rsr-scope__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem
  }
}

@media(min-width: 68rem) {
  .ai-rsr-scope__list {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(min-width: 52rem) {
  .ai-rsr-outputs {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, .9fr)
  }
}

/* Managed ITDR: identity-focused editorial split. */
.itdr-hero {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--surface)
}

.itdr-hero__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center
}

.itdr-hero__copy h1 {
  max-width: 11ch;
  font-size: clamp(3rem, 6vw, 5.5rem)
}

.itdr-hero__copy .lead {
  max-width: 39rem
}

.itdr-hero__image {
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-lg)
}

.itdr-hero__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1.08;
  object-fit: cover
}

.product-detail-section {
  padding: clamp(4rem, 8vw, 6.5rem) 0
}

.product-detail-section--soft {
  background: var(--soft)
}

.product-section-heading {
  max-width: 47rem;
  margin-bottom: 2.4rem
}

.product-section-heading h2 {
  max-width: 19ch
}

.product-feature-grid {
  display: grid;
  gap: 1.5rem
}

.product-feature-grid article {
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline)
}

.product-feature-grid h3 {
  font-size: 1.25rem
}

.product-feature-grid p {
  margin-bottom: 0;
  color: var(--muted)
}

@media(min-width: 52rem) {
  .itdr-hero__layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr)
  }

  .product-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

/* Service editorial sections: open copy groups and uncropped explanatory imagery. */
.vciso-page h1 {
  max-width: 20ch;
  font-size: clamp(2.35rem, 4vw, 3.25rem);
  line-height: 1.08
}

.vciso-page h2 {
  max-width: 24ch;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.12
}

.service-detail-pair {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem)
}

.service-detail-pair--centred {
  align-items: center
}

.service-detail-pair--divided article {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline)
}

.service-detail-pair p {
  max-width: 40rem;
  color: var(--ink-secondary);
  line-height: 1.65
}

.service-detail-pair p:last-child {
  margin-bottom: 0
}

.service-story-image {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg)
}

.service-story-image img {
  display: block;
  width: 100%;
  height: auto
}

@media(min-width:52rem) {
  .service-detail-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* Managed SIEM: full-width monitoring image beneath an editorial introduction. */
.siem-hero {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--dark);
  color: #fff
}

.siem-hero__intro {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 2rem
}

.siem-hero .service-label,
.siem-hero h1 {
  color: #fff
}

.siem-hero h1 {
  max-width: 13ch;
  margin-bottom: 0;
  font-size: clamp(3rem, 6vw, 5.4rem)
}

.siem-hero__summary {
  max-width: 38rem;
  color: #e7dfdb
}

.siem-hero__summary .lead {
  color: inherit
}

.siem-hero__image {
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-md)
}

.siem-hero__image img {
  display: block;
  width: 100%;
  max-height: 31rem;
  aspect-ratio: 3 / 1.45;
  object-fit: cover
}

.siem-signal-flow {
  display: grid;
  gap: 1.4rem
}

.siem-signal-flow article {
  padding: 1rem 0 0;
  border-top: 1px solid var(--hairline)
}

.siem-signal-flow strong {
  display: block;
  margin-bottom: .45rem;
  color: var(--primary)
}

.siem-signal-flow p {
  margin: 0;
  color: var(--muted)
}

@media(min-width: 52rem) {
  .siem-hero__intro {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
    gap: 3rem
  }

  .siem-signal-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

/* Managed SAT: a people-led training story on a deep blue field. */
.sat-hero {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  background: var(--primary);
  color: #fff
}

.sat-hero__layout {
  display: grid;
  gap: 2rem;
  align-items: center
}

.sat-hero__copy .service-label,
.sat-hero__copy h1 {
  color: #fff
}

.sat-hero__copy h1 {
  max-width: 12ch;
  font-size: clamp(2.8rem, 5.8vw, 5rem)
}

.sat-hero__copy .lead {
  max-width: 38rem;
  color: #edf2f5
}

.sat-hero__image {
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-xs)
}

.sat-hero__image img {
  display: block;
  width: 100%;
  aspect-ratio: 1.2;
  object-fit: cover
}

.sat-learning-grid {
  display: grid;
  gap: 1.4rem
}

.sat-learning-grid article {
  padding: 1rem 0 0;
  border-top: 1px solid var(--hairline)
}

.sat-learning-grid h3 {
  font-size: 1.2rem
}

.sat-learning-grid p {
  margin: 0;
  color: var(--muted)
}

@media(min-width: 52rem) {
  .sat-hero__layout {
    grid-template-columns: minmax(20rem, .92fr) minmax(0, 1.08fr);
    gap: clamp(2.5rem, 6vw, 5rem)
  }

  .sat-learning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

.menu-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  padding: .55rem .7rem;
  border: 1px solid var(--hairline);
  border-radius: .3rem;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 700
}

.menu-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round
}

.menu-toggle__line {
  transform-origin: center;
  transition: transform 220ms var(--ease), opacity 160ms var(--ease)
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line--top {
  transform: translateY(6px) rotate(45deg)
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line--middle {
  opacity: 0;
  transform: scaleX(.3)
}

.menu-toggle[aria-expanded="true"] .menu-toggle__line--bottom {
  transform: translateY(-6px) rotate(-45deg)
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-left: .55rem;
  border-radius: .35rem;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease)
}

.contact-link:hover,
.contact-link:focus-visible {
  background: var(--primary-active);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgb(45 44 43 / 14%)
}

/* Buttons and links */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease)
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgb(45 44 43 / 14%);
  text-decoration: none
}

.button:active,
.contact-link:active {
  transform: translateY(0);
  box-shadow: none
}

.button-primary {
  background: var(--primary);
  color: #fff
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--accent)
}

.button-accent {
  background: var(--accent);
  color: #fff
}

.button-accent:hover,
.button-accent:focus-visible {
  background: var(--primary)
}

.button-secondary {
  border-color: var(--primary);
  background: transparent;
  color: var(--primary)
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: var(--primary);
  color: #fff
}

.button-light {
  background: #fff;
  color: var(--slate)
}

.button-light:hover,
.button-light:focus-visible {
  background: var(--accent);
  color: #fff
}

.action-link,
.contact-link,
.starting-point__action {
  gap: 0
}

.action-link::after,
.starting-point__action::after {
  margin-left: .55rem;
  color: currentColor;
  content: "\2192"
}

.starting-point__action::after {
  color: var(--accent)
}

.action-link.has-button-arrow::after,
.starting-point__action.has-button-arrow::after {
  content: none
}

.button-arrow {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  margin-left: .55rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.starting-point__action .button-arrow {
  color: var(--accent)
}

@media (prefers-reduced-motion: no-preference) {
  .button-arrow__shaft,
  .button-arrow__tip {
    transition: d 300ms var(--ease)
  }

  .action-link:hover .button-arrow__shaft,
  .action-link:focus-visible .button-arrow__shaft,
  .contact-link:hover .button-arrow__shaft,
  .contact-link:focus-visible .button-arrow__shaft,
  .starting-point:hover .button-arrow__shaft,
  .starting-point:focus-visible .button-arrow__shaft {
    d: path("M 5 12 h 17")
  }

  .action-link:hover .button-arrow__tip,
  .action-link:focus-visible .button-arrow__tip,
  .contact-link:hover .button-arrow__tip,
  .contact-link:focus-visible .button-arrow__tip,
  .starting-point:hover .button-arrow__tip,
  .starting-point:focus-visible .button-arrow__tip {
    d: path("M 15 7 l 7 5 l -7 5")
  }
}

.text-link {
  display: inline-flex;
  align-items: center;
  color: var(--primary-active);
  font-weight: 700;
  text-decoration: none
}

.text-link--light {
  color: var(--on-primary);
  text-decoration: underline
}

/* Hero system */
.experience-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--soft)
}

.experience-hero__inner {
  display: grid;
  gap: clamp(3rem, 6vw, 5.5rem)
}

.experience-hero__intro {
  display: grid;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end
}

.experience-hero__intro h1 {
  max-width: 10ch;
  margin-bottom: 0
}

.experience-hero__subheading {
  max-width: none;
  margin: .8rem 0 0;
  color: #fff;
  font-size: clamp(1.4rem, 2.7vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.03em
}

.experience-hero__summary {
  max-width: 32rem;
  padding-bottom: .35rem
}

.experience-hero__summary p {
  color: var(--muted);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.5
}

.service-label,
.section-label {
  margin-bottom: .9rem;
  color: var(--accent);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em
}

.experience-hero--home {
  min-height: min(52rem, calc(100vh - 5.25rem));
  display: flex;
  align-items: flex-end;
  padding-top: clamp(5rem, 10vw, 9rem);
  background: linear-gradient(100deg, rgb(45 44 43 / 94%) 0%, rgb(45 44 43 / 78%) 58%, rgb(45 44 43 / 62%) 100%), url('/assets/img/hero-keyboard.png') center 55%/cover no-repeat;
  color: #fff
}

.experience-hero--home h1 {
  max-width: 14ch;
  color: #fff
}

.experience-hero--home .service-label {
  color: #ff9b69
}

.experience-hero--home .experience-hero__summary p {
  color: #fff
}

.experience-hero--services {
  background: linear-gradient(125deg, var(--soft), #e5edf2)
}

.experience-hero--security {
  background: linear-gradient(120deg, #eef1f2, var(--soft))
}

.experience-hero--web {
  background: linear-gradient(135deg, var(--canvas), #e7edf0)
}

.experience-hero--hosting {
  background: linear-gradient(130deg, #e6edf1, var(--soft))
}

.experience-hero--domains {
  background: linear-gradient(125deg, var(--soft), #e8ede6)
}

.experience-hero--contact {
  background: linear-gradient(125deg, var(--canvas), #e7edf1)
}

.experience-hero--support {
  background: linear-gradient(130deg, #edf0f2, var(--soft))
}

.service-stage {
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 20%);
  background: rgb(45 44 43 / 72%);
  box-shadow: 0 30px 70px rgb(0 0 0 / 22%);
  backdrop-filter: blur(12px)
}

.service-stage__bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
  color: #e9e3df;
  font-size: .78rem;
  font-weight: 700
}

.service-stage__grid {
  display: grid
}

.service-stage__grid a {
  min-height: 9.5rem;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem 1.2rem;
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  color: #fff;
  text-decoration: none;
  transition: background 200ms var(--ease), transform 200ms var(--ease)
}

.service-stage__grid a:last-child {
  border-bottom: 0
}

.service-stage__grid a:hover,
.service-stage__grid a:focus-visible {
  background: rgb(214 89 39 / 88%);
  transform: translateY(-4px)
}

.service-stage__icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  margin-bottom: .75rem;
  color: #ff9b69;
  transition: color 180ms var(--ease)
}

.service-stage__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.service-stage__icon-motion {
  transform-origin: center;
  transition: transform 200ms var(--ease)
}

.service-stage__grid a:hover .service-stage__icon,
.service-stage__grid a:focus-visible .service-stage__icon {
  color: #fff
}

.service-stage__grid a:hover .service-stage__icon-motion,
.service-stage__grid a:focus-visible .service-stage__icon-motion {
  transform: translateX(3px)
}

.service-stage h3 {
  margin-bottom: .4rem;
  color: #fff;
  font-size: 1.25rem
}

.service-stage p {
  margin: 0;
  color: #e9e3df;
  font-size: .9rem;
  line-height: 1.35
}

.service-map {
  display: grid;
  border-top: 1px solid rgb(45 44 43 / 22%)
}

.service-map a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid rgb(45 44 43 / 22%);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms var(--ease), padding 180ms var(--ease)
}

.service-map a:hover,
.service-map a:focus-visible {
  padding-left: .6rem;
  color: var(--accent)
}

.service-map span {
  color: var(--accent);
  font-size: .78rem
}

.contact-hero {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem)
}

.contact-hero__intro {
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end
}

.contact-hero__heading h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(3rem, 5.2vw, 5rem)
}

.contact-hero__summary {
  width: 100%;
  max-width: 43rem
}

.contact-hero__summary p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.55
}

.contact-path {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  list-style: none
}

.contact-path li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.35rem 0
}

.contact-path li+li {
  border-top: 1px solid var(--hairline)
}

.contact-path svg {
  width: 2rem;
  height: 2rem;
  margin-top: .1rem;
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round
}

.contact-path div {
  display: grid;
  gap: .25rem
}

.contact-path strong {
  font-size: 1.05rem;
  line-height: 1.3
}

.contact-path span {
  max-width: 22rem;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45
}

.support-hero__layout {
  display: grid;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: end
}

.support-hero__copy {
  max-width: 46rem
}

.support-hero__copy h1 {
  max-width: 13ch
}

.support-hero__summary {
  max-width: 37rem;
  margin-bottom: 1.75rem;
  color: var(--muted);
  font-size: clamp(1.12rem, 1.8vw, 1.4rem);
  line-height: 1.5
}

.support-hero__guide {
  padding: clamp(1.35rem, 3vw, 2rem);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 50px rgb(45 44 43 / 8%)
}

.support-hero__guide-label {
  margin-bottom: 1rem;
  color: var(--primary);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em
}

.support-hero__guide ol {
  margin: 0;
  padding: 0;
  list-style: none
}

.support-hero__guide li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline)
}

.support-hero__guide li:last-child {
  padding-bottom: 0
}

.support-hero__guide li>span {
  padding-top: .12rem;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700
}

.support-hero__guide strong {
  display: block;
  margin-bottom: .2rem;
  font-size: 1rem
}

.support-hero__guide li p {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.45
}

/* Content rhythm */
.story-section,
.service-chapter,
.form-experience,
.section {
  padding: clamp(4.5rem, 9vw, 8rem) 0
}

.story-section--surface,
.service-chapter--surface {
  background: var(--soft)
}

.story-section--dark,
.service-chapter--dark {
  background: var(--dark);
  color: #fff
}

.story-section--dark h2,
.story-section--dark h3,
.service-chapter--dark h2,
.service-chapter--dark h3 {
  color: #fff
}

.story-section--dark p,
.service-chapter--dark p {
  color: #e7dfdb
}

/* Technical patterns apply only to approved reusable background families. */
:is(.closing-cta--blue, .product-story--surface, .content-section--dark, .story-section--dark, .service-chapter--dark, .product-story--dark) {
  position: relative;
  isolation: isolate
}
:is(.closing-cta--blue, .product-story--surface, .content-section--dark, .story-section--dark, .service-chapter--dark, .product-story--dark)::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: var(--section-pattern-image);
  background-repeat: repeat;
  background-position: center;
  background-size: var(--section-pattern-size, auto);
  content: "";
  pointer-events: none
}
:is(.closing-cta--blue, .product-story--surface, .content-section--dark, .story-section--dark, .service-chapter--dark, .product-story--dark) > * { position: relative; z-index: 1 }
body[data-pattern-intensity="off"] :is(.closing-cta--blue, .product-story--surface, .content-section--dark, .story-section--dark, .service-chapter--dark, .product-story--dark)::before { display: none }
body[data-pattern-intensity="muted"] :is(.closing-cta--blue, .product-story--surface, .content-section--dark, .story-section--dark, .service-chapter--dark, .product-story--dark)::before { opacity: .45 }

body[data-pattern-blue="signal"] .closing-cta--blue,
body[data-pattern-light="signal"] .product-story--surface,
body[data-pattern-dark="signal"] :is(.content-section--dark, .story-section--dark, .service-chapter--dark, .product-story--dark) {
  --section-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cpath d='M0 18h23l13 13h26l18 18h52M18 132V94l18-18h30l14-14h52' fill='none' stroke='%23d65927' stroke-opacity='.19' stroke-width='1'/%3E%3Ccircle cx='36' cy='31' r='2' fill='%23d65927' fill-opacity='.38'/%3E%3Ccircle cx='80' cy='49' r='2' fill='%23d65927' fill-opacity='.38'/%3E%3C/svg%3E");
}

body[data-pattern-blue="grid"] .closing-cta--blue,
body[data-pattern-light="grid"] .product-story--surface,
body[data-pattern-dark="grid"] :is(.content-section--dark, .story-section--dark, .service-chapter--dark, .product-story--dark) {
  --section-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M0 0h96v96H0zM24 0v96M48 0v96M72 0v96M0 24h96M0 48h96M0 72h96' fill='none' stroke='%233a526a' stroke-opacity='.3' stroke-width='.65'/%3E%3Cpath d='M0 0h96v96M96 0 0 96' fill='none' stroke='%23d65927' stroke-opacity='.14' stroke-width='.5'/%3E%3C/svg%3E");
  --section-pattern-size: 9rem 9rem;
}

body[data-pattern-blue="trace"] .closing-cta--blue,
body[data-pattern-light="trace"] .product-story--surface,
body[data-pattern-dark="trace"] :is(.content-section--dark, .story-section--dark, .service-chapter--dark, .product-story--dark) {
  --section-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='116' viewBox='0 0 160 116'%3E%3Cpath d='M0 20h28l12 12h25v24h34l15 15h46M15 116V85h23l14-14h30V48h20l16-16h42' fill='none' stroke='%23468254' stroke-opacity='.3' stroke-width='1'/%3E%3Cpath d='M0 99h15M145 20h15' fill='none' stroke='%23d65927' stroke-opacity='.36' stroke-width='1'/%3E%3Ccircle cx='65' cy='56' r='2.3' fill='%23468254' fill-opacity='.42'/%3E%3Ccircle cx='82' cy='71' r='2.3' fill='%23d65927' fill-opacity='.42'/%3E%3C/svg%3E");
}

body[data-pattern-blue="diagonal"] .closing-cta--blue,
body[data-pattern-light="diagonal"] .product-story--surface,
body[data-pattern-dark="diagonal"] :is(.content-section--dark, .story-section--dark, .service-chapter--dark, .product-story--dark) {
  --section-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23d65927' fill-opacity='.21'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'/%3E%3C/g%3E%3C/svg%3E");
}

body[data-pattern-blue="fine-grid"] .closing-cta--blue,
body[data-pattern-light="fine-grid"] .product-story--surface,
body[data-pattern-dark="fine-grid"] :is(.content-section--dark, .story-section--dark, .service-chapter--dark, .product-story--dark) {
  --section-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cpattern id='g' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 0H0v10' fill='none' stroke='%233a526a' stroke-opacity='.16' stroke-width='.65'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M0 0h100v100H0z' fill='url(%23g)'/%3E%3Cpath d='M5 0v100M0 5h100' fill='none' stroke='%23d65927' stroke-opacity='.16' stroke-width='.7'/%3E%3C/svg%3E");
  --section-pattern-size: 6.25rem 6.25rem;
}

.story-intro {
  display: grid;
  gap: 1.5rem
}

.section-number {
  color: var(--accent);
  font-size: .82rem;
  font-weight: 700
}

.story-intro__heading h2 {
  max-width: 14ch
}

.statement-flow {
  max-width: 46rem
}

.statement-flow p {
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: clamp(1.08rem, 1.5vw, 1.25rem)
}

.section-heading {
  max-width: 52rem;
  margin-bottom: clamp(2rem, 5vw, 4rem)
}

.section-heading--split {
  max-width: none;
  display: grid;
  gap: 2rem;
  align-items: end
}

.section-heading--split>:last-child {
  max-width: 32rem
}

.starting-list {
  border-top: 1px solid var(--hairline)
}

.starting-list>a {
  display: grid;
  gap: .75rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: color 180ms var(--ease), padding 180ms var(--ease)
}

.starting-list>a:hover,
.starting-list>a:focus-visible {
  padding-left: .6rem;
  color: var(--primary-active)
}

.starting-list span {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700
}

.starting-list p {
  margin: 0;
  color: var(--muted)
}

.starting-list strong {
  color: var(--accent);
  font-size: .9rem
}

.audience-layout {
  display: grid;
  gap: 3rem;
  align-items: start
}

.audience-layout__copy h2 {
  max-width: 12ch
}

.audience-layout__copy p:last-child {
  max-width: 43rem;
  color: var(--muted);
  font-size: 1.08rem
}

.home-sector-accordion {
  display: grid;
  border-top: 1px solid var(--hairline)
}

.home-sector-accordion details {
  border-bottom: 1px solid var(--hairline)
}

.home-sector-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 700;
  list-style: none
}

.home-sector-accordion summary::-webkit-details-marker {
  display: none
}

.home-sector-accordion summary::after {
  width: .62rem;
  height: .62rem;
  flex: none;
  content: "";
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--ease)
}

.home-sector-accordion details[open] summary::after {
  transform: translateY(2px) rotate(225deg)
}

.home-sector-accordion details>div {
  overflow: hidden
}

.home-sector-accordion details p {
  margin: 0;
  padding: 0 0 1.2rem;
  color: var(--muted)
}

.process-track {
  display: grid;
  margin: 3rem 0 0;
  padding: 0;
  border-top: 1px solid rgb(255 255 255 / 18%);
  list-style: none
}

.process-track li {
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  font-weight: 700
}

.process-track span {
  color: #ff9b69;
  font-size: .78rem
}

.operational-grid {
  display: grid;
  gap: 3rem
}

.operational-grid>div:first-child h2 {
  max-width: 11ch
}

.issue-list {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--soft)
}

.issue-list h3 {
  max-width: 24ch
}

.issue-list ul,
.feature-rows {
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  list-style: none
}

.issue-list li,
.feature-rows li {
  position: relative;
  padding: .85rem 0 .85rem 1.5rem;
  border-bottom: 1px solid var(--hairline)
}

.issue-list li::before,
.feature-rows li::before {
  position: absolute;
  left: 0;
  color: var(--accent);
  content: "↳"
}

.service-chapter {
  scroll-margin-top: 6rem
}

.service-chapter__header {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem)
}

.service-chapter__header h2 {
  max-width: 19ch
}

.service-chapter__body {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem)
}

.service-chapter__copy {
  max-width: 34rem
}

.service-chapter__copy p {
  font-size: 1.08rem
}

.feature-rows {
  margin-top: 0
}

.feature-rows--numbered {
  counter-reset: feature
}

.feature-rows--numbered li {
  counter-increment: feature;
  padding-left: 2.5rem
}

.feature-rows--numbered li::before {
  content: counter(feature, decimal-leading-zero);
  font-size: .75rem;
  font-weight: 700
}

.reading-columns {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1.5rem
}

.reading-columns p {
  margin: 0;
  font-size: 1.08rem
}

.capability-sequence {
  display: grid
}

.capability-sequence article {
  min-height: 23rem;
  display: flex;
  flex-direction: column;
  padding: 2rem 0;
  border-top: 1px solid var(--hairline)
}

.capability-sequence article>span {
  margin-bottom: auto;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700
}

.capability-sequence article h2 {
  max-width: 14ch;
  font-size: clamp(2rem, 3.5vw, 3.4rem)
}

.capability-sequence article p {
  max-width: 34rem;
  color: var(--muted)
}

.editorial-columns {
  display: grid;
  gap: 2rem
}

.editorial-columns article {
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline)
}

/* Services page: editorial sections and unnumbered capability navigation. */
.services-hero .experience-hero__heading h1 {
  max-width: 13ch
}

.services-nav {
  display: grid;
  border: 1px solid rgb(45 44 43 / 12%);
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 24px 60px rgb(45 44 43 / 8%)
}

.services-nav a {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease)
}

.services-nav a:last-child {
  border-bottom: 0
}

.services-nav a:hover,
.services-nav a:focus-visible {
  background: var(--surface);
  color: var(--primary-active);
  transform: translateY(-3px)
}

.services-nav__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: .45rem;
  border-radius: .25rem;
  background: #dbe5ec;
  color: var(--primary)
}

.services-nav__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms var(--ease)
}

.services-nav a:hover .services-nav__icon svg,
.services-nav a:focus-visible .services-nav__icon svg {
  transform: translateY(-2px)
}

.services-nav strong,
.services-nav small {
  display: block
}

.services-nav strong {
  margin-bottom: .25rem;
  font-size: 1.05rem
}

.services-nav small {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.4
}

.services-feature {
  scroll-margin-top: 6rem;
  padding: clamp(5rem, 10vw, 9rem) 0
}

.services-feature--surface {
  background: var(--soft)
}

.services-feature--dark {
  background: var(--dark);
  color: #fff
}

.services-feature--projects {
  background: linear-gradient(135deg, var(--canvas), #edf1f3)
}

.services-feature__layout {
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center
}

.services-feature__intro {
  max-width: 39rem
}

.services-feature__intro h2 {
  max-width: 16ch;
  font-size: clamp(2.35rem, 4.4vw, 4.5rem)
}

.services-feature__intro>p:not(.section-label) {
  max-width: 38rem;
  color: var(--muted);
  font-size: 1.08rem
}

.services-feature__intro .text-link {
  margin-top: 1rem
}

.services-capability-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 24px 60px rgb(45 44 43 / 7%)
}

.services-capability-panel__label {
  margin: 0 0 1.2rem;
  color: var(--primary);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em
}

.services-capabilities {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  list-style: none
}

.services-capabilities li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1rem;
  font-weight: 500
}

.services-capabilities li:last-child {
  border-bottom: 0
}

.services-feature--dark h2 {
  color: #fff
}

.services-feature--dark .services-feature__intro>p:not(.section-label) {
  color: #e7dfdb
}

.services-feature--dark .section-label {
  color: #ff9b69
}

.services-feature--dark .text-link {
  color: #fff
}

.services-feature--dark .services-capability-panel {
  border-color: rgb(255 255 255 / 14%);
  background: #353432;
  box-shadow: none
}

.services-feature--dark .services-capability-panel__label {
  color: #ff9b69
}

.services-feature--dark .services-capabilities {
  border-color: rgb(255 255 255 / 18%)
}

.services-feature--dark .services-capabilities li {
  border-color: rgb(255 255 255 / 18%);
  color: #fff
}

/* Product and service stories shared by Hosting, Domains and Website Design. */
.product-story,
.domain-intro,
.domain-options,
.web-design-story,
.web-design-features,
.static-websites {
  padding: clamp(5rem, 10vw, 9rem) 0
}

.product-story--surface,
.web-design-features {
  background: var(--soft)
}

.product-story--dark {
  background: var(--dark);
  color: #fff
}

.product-story__layout {
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center
}

.product-story__intro {
  max-width: 43rem
}

.product-story__intro h2 {
  max-width: 17ch;
  font-size: clamp(2.35rem, 4.2vw, 4.25rem)
}

.product-story__intro>p:not(.section-label) {
  color: var(--muted);
  font-size: 1.08rem
}

.product-story__intro .text-link {
  margin-top: 1rem
}

.product-story__detail {
  max-width: 40rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-left: 1px solid var(--hairline)
}

.product-story__detail p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.12rem, 1.7vw, 1.35rem);
  line-height: 1.6
}

.product-story--dark h2 {
  color: #fff
}

.product-story--dark .section-label {
  color: #ff9b69
}

.product-story--dark .product-story__intro>p:not(.section-label),
.product-story--dark .product-story__detail p {
  color: #e7dfdb
}

.product-story--dark .product-story__detail {
  border-color: rgb(255 255 255 / 20%)
}

.product-story--dark .text-link {
  color: #fff
}

.domain-intro__content {
  max-width: 50rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center
}

.domain-intro__content h2 {
  max-width: 18ch;
  margin-right: auto;
  margin-bottom: 1.25rem;
  margin-left: auto;
  font-size: clamp(2.5rem, 4.5vw, 4rem)
}

.domain-intro__content>p:last-child {
  max-width: 42rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.65
}

.domain-options {
  background: var(--canvas)
}

.domain-options__grid {
  display: grid;
  gap: clamp(3rem, 7vw, 7rem)
}

.domain-options article {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline)
}

.domain-options article h2 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 3.8vw, 3.75rem)
}

.domain-options article>p:not(.section-label) {
  max-width: 37rem;
  color: var(--muted);
  font-size: 1.06rem
}

.domain-options article .text-link {
  margin-top: 1rem
}

.web-design-story__layout {
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center
}

.web-design-story__media {
  min-height: 24rem
}

.web-design-story__media img {
  height: 100%;
  object-fit: cover
}

.web-design-story__copy {
  max-width: 40rem
}

.web-design-story__copy h2 {
  max-width: 13ch;
  font-size: clamp(2.5rem, 4.7vw, 4.75rem)
}

.web-design-story__copy>p:not(.section-label) {
  font-size: 1.08rem
}

.web-design-features__grid,
.static-websites__grid {
  display: grid
}

.web-design-features article,
.static-websites__grid article {
  padding: 1.75rem 0;
  border-top: 1px solid var(--hairline)
}

.web-design-features article h2 {
  max-width: 15ch;
  font-size: clamp(1.85rem, 2.8vw, 2.8rem)
}

.web-design-features article p,
.static-websites__grid article p {
  max-width: 33rem;
  color: var(--muted)
}

.static-websites__intro {
  max-width: 54rem;
  margin-bottom: clamp(3rem, 6vw, 5rem)
}

.static-websites__overview {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center
}

.static-websites__overview .static-websites__intro {
  margin-bottom: 0
}

.static-websites__media {
  overflow: hidden;
  min-height: 20rem
}

.static-websites__media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.static-websites__intro h2 {
  max-width: 16ch;
  font-size: clamp(2.5rem, 4.5vw, 4.5rem)
}

.static-websites__intro>p:not(.section-label) {
  max-width: 47rem;
  font-size: 1.08rem
}

.static-websites__grid h3 {
  font-size: clamp(1.45rem, 2vw, 1.85rem)
}

/* Cyber security page: image-led charcoal hero and unnumbered service scope. */
.cyber-hero {
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  background: var(--dark);
  color: #fff
}

.cyber-hero__layout {
  display: grid;
  gap: clamp(3rem, 6vw, 5.5rem);
  align-items: center
}

.cyber-hero__copy {
  max-width: 39rem
}

.cyber-hero__copy .service-label {
  color: #ff9b69
}

.cyber-hero__copy h1 {
  max-width: 13ch;
  color: #fff;
  font-size: clamp(3rem, 4.5vw, 4.5rem);
  line-height: 1.02;
  text-wrap: balance
}

.cyber-hero__summary {
  max-width: 35rem;
  margin: 1.5rem 0 2rem;
  color: #e7dfdb;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.55
}

.cyber-hero__visual {
  min-width: 0;
  margin: 0;
  border-radius: var(--radius-sm);
  background: #161d25;
  box-shadow: 0 24px 60px rgb(0 0 0 / 24%);
  overflow: hidden
}

.cyber-hero__visual img {
  width: 100%;
  aspect-ratio: 3/2;
  display: block;
  object-fit: cover;
  transition: transform 220ms var(--ease)
}

.cyber-hero.reveal:not(.is-revealed) .cyber-hero__visual img {
  transform: scale(1.02)
}

.cyber-scope {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background: var(--canvas)
}

.cyber-scope__layout {
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start
}

.cyber-scope__header {
  max-width: 35rem
}

.cyber-scope__header h2 {
  max-width: 12ch;
  font-size: clamp(2.35rem, 3.8vw, 3.75rem);
  line-height: 1.05
}

.cyber-scope__header>p:not(.section-label) {
  max-width: 31rem;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.55
}

.cyber-scope__action {
  margin-top: 1.5rem
}

.cyber-scope__list {
  display: grid;
  margin: 0;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgb(58 94 131 / 12%);
  border-radius: var(--radius-sm);
  background-color: #f2f4f4;
  background-image: repeating-linear-gradient(90deg, rgb(58 94 131 / 4%) 0 1px, transparent 1px 4rem), repeating-linear-gradient(0deg, rgb(58 94 131 / 4%) 0 1px, transparent 1px 4rem);
  box-shadow: 0 20px 50px rgb(45 44 43 / 7%);
  list-style: none
}

.cyber-scope__list li {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-height: 5.5rem;
  padding: 1rem .25rem;
  border-bottom: 1px solid rgb(58 94 131 / 16%);
  color: var(--ink)
}

.cyber-scope__list li:last-child {
  border-bottom: 0
}

.cyber-scope__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: .4rem;
  color: var(--primary)
}

.cyber-scope__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.cyber-scope__list strong {
  max-width: 29ch;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.35
}

.cyber-products {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: var(--surface)
}

.cyber-products--soft {
  background: var(--soft)
}

.cyber-products__heading {
  max-width: 47rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem)
}

.cyber-products__heading h2 {
  max-width: 22ch;
  margin-bottom: .75rem;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.12
}

.cyber-products__heading > p:last-child {
  max-width: 42rem;
  margin-bottom: 0;
  color: var(--muted)
}

.cyber-products__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem
}

.cyber-product-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 180ms var(--ease), border-color 180ms var(--ease)
}

.cyber-product-card:focus-visible {
  outline: .75px solid var(--accent);
  outline-offset: 2px
}

.cyber-product-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 0;
  background: var(--soft)
}

.cyber-product-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms var(--ease)
}

.cyber-product-card__copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.25rem, 2.5vw, 1.75rem)
}

.cyber-product-card__copy .section-label {
  margin-bottom: .5rem;
  color: var(--primary-active)
}

.cyber-product-card__copy h3 {
  margin-bottom: .5rem;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem)
}

.cyber-product-card__copy > p:not(.section-label) {
  margin-bottom: 1.25rem;
  color: var(--muted)
}

.cyber-product-card__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  color: var(--primary-active);
  font-weight: 700
}

.cyber-product-card__link span {
  display: inline-block;
  transition: transform 160ms var(--ease)
}

.cyber-product-card:hover,
.cyber-product-card:focus-visible {
  border-color: var(--hairline);
  box-shadow: 0 12px 30px rgb(45 44 43 / 8%)
}

.cyber-product-card:hover .cyber-product-card__image img,
.cyber-product-card:focus-visible .cyber-product-card__image img {
  transform: scale(1.025)
}

.cyber-product-card:hover .cyber-product-card__link span,
.cyber-product-card:focus-visible .cyber-product-card__link span {
  transform: translateX(5px)
}

@media (min-width: 48rem) {
  .cyber-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem
  }
}

@media (prefers-reduced-motion: reduce) {
  .cyber-product-card,
  .cyber-product-card__image img,
  .cyber-product-card__link span {
    transition: none
  }
}

.contact-band,
.closing-cta {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--soft)
}

.contact-band__inner,
.closing-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 2rem
}

.contact-band h2,
.closing-cta h2 {
  max-width: 18ch;
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 3.75rem)
}

.closing-cta__inner>div p:last-child {
  max-width: 42rem
}

.closing-cta--blue {
  background: var(--slate);
  color: #fff
}

.closing-cta--blue h2,
.closing-cta--blue p {
  color: #fff
}

.closing-cta--blue .section-label {
  color: #ff9b69
}

.support-guidance {
  display: grid;
  gap: 4rem
}

.support-guidance h2 {
  max-width: 14ch;
  font-size: clamp(2rem, 3.5vw, 3.3rem)
}

.form-experience {
  background: var(--soft)
}

.form-experience--support {
  background: #e7edf1
}

.form-experience__layout {
  display: grid;
  gap: 3rem;
  align-items: start
}

.form-experience__intro {
  max-width: 33rem
}

.form-experience__intro h2 {
  max-width: 12ch
}

.form-panel {
  padding: clamp(1.35rem, 4vw, 2.75rem);
  background: #fff;
  box-shadow: var(--shadow)
}

.enquiry-form {
  position: relative;
  display: grid;
  gap: 1.1rem
}

.form-grid {
  display: grid;
  gap: 1rem
}

.enquiry-form label {
  display: grid;
  gap: .38rem;
  color: var(--ink);
  font-size: .94rem;
  font-weight: 700
}

.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select {
  width: 100%;
  padding: .8rem .85rem;
  border: 1px solid #b9b0aa;
  border-radius: 0;
  background: #fff;
  color: var(--ink)
}

.enquiry-form input:focus,
.enquiry-form textarea:focus,
.enquiry-form select:focus {
  border-color: var(--accent);
  outline: .75px solid var(--accent);
  outline-offset: 2px
}

.enquiry-form textarea {
  min-height: 10rem;
  resize: vertical
}

.form-note {
  color: var(--muted);
  font-size: .88rem
}

.field-error,
.js-field-error {
  color: #a6340e;
  font-size: .86rem
}

.form-status {
  margin: 0;
  font-weight: 700
}

.notice {
  padding: 1.2rem;
  border-left: 3px solid var(--accent);
  background: var(--soft)
}

.notice.success {
  border-color: var(--green);
  background: #edf5ef
}

.notice.error {
  background: #fff0eb
}

.enquiry-form[aria-busy="true"] {
  opacity: .7
}

.enquiry-form button:disabled {
  cursor: wait;
  opacity: .7
}

.trap {
  position: absolute;
  left: -9999px
}

.form-experience__intro .form-experience__title {
  max-width: 18ch;
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  line-height: 1.08
}

.form-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

.toast-region {
  position: fixed;
  z-index: 140;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: min(calc(100% - 2rem), 26rem);
  gap: .75rem;
  pointer-events: none
}

.form-toast {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--dark);
  color: #fff;
  box-shadow: 0 18px 45px rgb(45 44 43 / 24%);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  pointer-events: auto
}

.form-toast::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
  content: ""
}

.form-toast.is-visible {
  opacity: 1;
  transform: none
}

.form-toast--success::before {
  background: var(--green)
}

.form-toast--pending::before {
  background: #ff9b69
}

.form-toast p {
  margin: 0;
  color: #fff;
  font-weight: 500;
  line-height: 1.45
}

.form-toast__close {
  min-width: 1.75rem;
  margin: -.2rem -.35rem 0 0;
  padding: .1rem;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1
}

.form-toast__close:hover,
.form-toast__close:focus-visible {
  color: #ff9b69
}

/* Legal documents deliberately use a quiet reading layout. */
.legal-page-header {
  padding: clamp(4rem, 8vw, 7rem) 0 3rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--soft)
}

.legal-page-header h1 {
  max-width: 15ch;
  font-size: clamp(2.8rem, 5vw, 4.8rem)
}

.legal-page-header .lead {
  max-width: 42rem
}

.legal-kicker {
  color: var(--accent);
  font-size: .9rem;
  font-weight: 700
}

.legal-document {
  padding-top: 0
}

.legal-document>* {
  max-width: 54rem
}

.legal-document p,
.legal-document li {
  color: #49423f
}

.legal-document h2 {
  max-width: 28ch;
  margin-top: 3.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
  font-size: clamp(1.55rem, 2.8vw, 2.25rem);
  letter-spacing: -.03em;
  line-height: 1.15
}

.legal-document h3 {
  max-width: 54rem;
  margin-top: 1.8rem;
  font-size: 1.08rem;
  letter-spacing: -.01em;
  line-height: 1.4
}

.legal-updated {
  color: var(--ink) !important;
  font-weight: 700
}

.not-found {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 5rem 0
}

.not-found__inner {
  display: grid;
  gap: 2rem;
  align-items: center
}

.not-found__code {
  margin: 0;
  color: var(--primary);
  font-size: clamp(8rem, 25vw, 20rem);
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: .7;
  text-shadow: -1px 0 var(--hairline), 0 1px var(--hairline), 1px 0 var(--hairline), 0 -1px var(--hairline)
}

.legal-page-header+.section {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important
}

/* Footer */
.site-footer {
  background: var(--dark);
  color: #e8e1dc
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding: 4rem 0 3rem
}

.footer-brand {
  display: block;
  width: 11rem;
  height: auto
}

.footer-intro p {
  max-width: 22rem;
  margin-top: 1rem
}

.site-footer h2 {
  margin-bottom: 1rem;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: -.02em
}

.site-footer p {
  color: #e8e1dc
}

.footer-links {
  display: grid;
  justify-items: start;
  gap: .45rem
}

.footer-links a,
.footer-cookie-settings {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease)
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-cookie-settings:hover,
.footer-cookie-settings:focus-visible {
  color: #ff9b69;
  text-decoration-color: currentColor
}

.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  border-top: 1px solid rgb(255 255 255 / 18%);
  color: #bdb4af;
  font-size: .9rem
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .35rem 1.25rem;
  text-align: right
}

.footer-legal a,
.footer-legal .footer-cookie-settings {
  color: #bdb4af;
  font-size: inherit;
  font-weight: 400;
  text-decoration-color: transparent;
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease)
}

.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-legal .footer-cookie-settings:hover,
.footer-legal .footer-cookie-settings:focus-visible {
  color: #fff;
  text-decoration-color: currentColor
}

@media(max-width:47.99rem) {
  .footer-base {
    align-items: flex-start;
    flex-direction: column
  }

  .footer-legal {
    justify-content: flex-start;
    text-align: left
  }
}

/* Cookie preferences */
.cookie-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(45 44 43 / 62%);
  backdrop-filter: blur(2px)
}

.cookie-modal:not([hidden]) {
  display: flex
}

.cookie-modal-open {
  overflow: hidden
}

.cookie-panel {
  width: min(100%, 58rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: .45rem;
  background: var(--surface);
  box-shadow: 0 30px 80px rgb(0 0 0 / 24%)
}

.cookie-copy {
  display: grid;
  grid-template-columns: minmax(19rem, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start
}

.cookie-panel h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  white-space: nowrap
}

.cookie-copy p {
  max-width: 42rem;
  margin: .15rem 0 0;
  color: var(--muted);
  line-height: 1.6
}

.cookie-policy-link {
  color: var(--primary-active);
  font-weight: 700;
  white-space: nowrap
}

.cookie-policy-link:hover,
.cookie-policy-link:focus-visible {
  color: var(--accent)
}

.cookie-options {
  margin: 1.5rem 0 0;
  padding: 1.1rem 0 0;
  border: 0;
  border-top: 1px solid var(--hairline)
}

.cookie-options[hidden] {
  display: none
}

.cookie-options legend {
  width: 100%;
  margin: 0 0 .8rem;
  padding: 0;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 700
}

.cookie-option-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1.5rem
}

.cookie-options label {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  margin: 0;
  cursor: pointer;
  line-height: 1.45
}

.cookie-options input {
  width: 1rem;
  height: 1rem;
  margin: .24rem 0 0;
  accent-color: var(--primary)
}

.cookie-options span {
  display: block
}

.cookie-status {
  min-height: 1.5rem;
  margin: .75rem 0 0;
  color: #a6340e;
  font-size: .92rem;
  font-weight: 700
}

.cookie-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: .65rem
}

.cookie-actions .button {
  width: 100%;
  border-radius: .35rem
}

.cookie-actions [hidden] {
  display: none
}

/* Homepage starting points */
.starting-points__header {
  max-width: 50rem;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center
}

.starting-points__header h2 {
  max-width: none;
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 5vw, 4.5rem)
}

.starting-points__header>p:last-child {
  max-width: 38rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem)
}

.starting-points__grid {
  display: grid;
  gap: 2rem
}

.starting-point {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 0;
  color: var(--ink);
  text-decoration: none;
  transition: color 220ms var(--ease), transform 220ms var(--ease)
}

.starting-point+.starting-point {
  border-top: 1px solid var(--hairline)
}

.starting-point__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.35rem;
  color: var(--primary)
}

.starting-point__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 220ms var(--ease), transform 220ms var(--ease)
}

.starting-point h3 {
  max-width: 18rem;
  margin-bottom: .75rem;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  letter-spacing: -.025em
}

.starting-point p {
  max-width: 22rem;
  margin-bottom: 1.35rem;
  color: var(--muted);
  line-height: 1.55
}

.starting-point__action {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  color: var(--primary-active);
  font-size: .9rem;
  font-weight: 700
}

.starting-point:hover,
.starting-point:focus-visible {
  color: var(--primary-active);
  transform: translateY(-4px)
}

.starting-point:hover .starting-point__icon svg,
.starting-point:focus-visible .starting-point__icon svg {
  color: var(--accent);
  transform: translateY(-3px)
}

@media(min-width:48rem) {
  .starting-points__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2.5rem, 6vw, 6rem)
  }

  .starting-point {
    padding: 0
  }

  .starting-point+.starting-point {
    border-top: 0
  }
}

/* One-shot entrance and route transition motion. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms)
}

.reveal.is-revealed {
  opacity: 1;
  transform: none
}

.page-leaving main {
  opacity: .25;
  transform: translateY(-4px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease)
}

@media(min-width:48rem) {
  .experience-hero__intro {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr)
  }

  .service-stage__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .service-stage__grid a {
    border-right: 1px solid rgb(255 255 255 / 14%);
    border-bottom: 0
  }

  .service-stage__grid a:last-child {
    border-right: 0
  }

  .service-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem
  }

  .security-stack>div {
    grid-template-columns: 8rem 1fr
  }

  .contact-hero__intro {
    grid-template-columns: minmax(0, .92fr) minmax(23rem, 1.08fr)
  }

  .contact-path {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .contact-path li {
    min-height: 8.5rem;
    padding: 1.35rem 1.5rem;
    border-right: 1px solid var(--hairline)
  }

  .contact-path li+li {
    border-top: 0
  }

  .contact-path li:first-child {
    padding-left: 0
  }

  .contact-path li:last-child {
    padding-right: 0;
    border-right: 0
  }

  .support-hero__layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .72fr)
  }

  .story-intro {
    grid-template-columns: 4rem minmax(15rem, .75fr) minmax(0, 1.25fr);
    gap: 2.5rem
  }

  .section-heading--split {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr)
  }

  .starting-list>a {
    grid-template-columns: minmax(14rem, .8fr) minmax(18rem, 1fr) auto;
    align-items: center
  }

  .process-track {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .process-track li {
    padding: 1rem;
    border-right: 1px solid rgb(255 255 255 / 18%);
    border-bottom: 0
  }

  .process-track li:first-child {
    padding-left: 0
  }

  .operational-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr)
  }

  .service-chapter__header {
    grid-template-columns: 4rem minmax(0, 1fr)
  }

  .service-chapter__body {
    grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr)
  }

  .reading-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 6vw, 6rem)
  }

  .capability-sequence {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .capability-sequence--two {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .capability-sequence article {
    padding: 2rem;
    border-right: 1px solid var(--hairline)
  }

  .capability-sequence article:first-child {
    padding-left: 0
  }

  .capability-sequence article:last-child {
    padding-right: 0;
    border-right: 0
  }

  .editorial-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .support-guidance {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .form-experience__layout {
    grid-template-columns: minmax(18rem, .7fr) minmax(0, 1.3fr);
    gap: clamp(3rem, 7vw, 7rem)
  }

  .form-experience__intro {
    position: sticky;
    top: 2rem
  }

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

  .footer-grid {
    grid-template-columns: 1.35fr .8fr 1fr
  }

  .not-found__inner {
    grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr)
  }
}

@media(min-width:64rem) {
  .audience-layout {
    grid-template-columns: minmax(0, .95fr) minmax(28rem, 1.05fr);
    gap: clamp(4rem, 8vw, 8rem)
  }
}

@media(min-width:48rem) {
  .services-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .services-nav a:nth-child(odd) {
    border-right: 1px solid var(--hairline)
  }

  .services-nav a:nth-last-child(-n+2) {
    border-bottom: 0
  }
}

@media(min-width:64rem) {
  .services-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .services-nav a {
    border-right: 1px solid var(--hairline);
    border-bottom: 0
  }

  .services-nav a:last-child {
    border-right: 0
  }

  .services-feature__layout {
    grid-template-columns: minmax(0, .9fr) minmax(28rem, 1.1fr)
  }

  .services-feature__layout--reverse .services-feature__intro {
    grid-column: 2;
    grid-row: 1
  }

  .services-feature__layout--reverse .services-capability-panel {
    grid-column: 1;
    grid-row: 1
  }
}

@media(min-width:48rem) {
  .domain-options__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .web-design-features__grid,
  .static-websites__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .web-design-features article,
  .static-websites__grid article {
    padding: 2rem
  }

  .web-design-features article:first-child,
  .static-websites__grid article:first-child {
    padding-left: 0
  }

  .web-design-features article+article,
  .static-websites__grid article+article {
    border-left: 1px solid var(--hairline)
  }

  .web-design-features article:last-child,
  .static-websites__grid article:last-child {
    padding-right: 0
  }
}

@media(min-width:64rem) {
  .static-websites__overview {
    grid-template-columns: minmax(0, .9fr) minmax(24rem, 1.1fr)
  }

  .m365-improvements__layout {
    grid-template-columns: minmax(0, .9fr) minmax(24rem, 1.1fr)
  }

  .product-story__layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(24rem, .95fr)
  }

  .product-story__layout--reverse .product-story__intro {
    grid-column: 2;
    grid-row: 1
  }

  .product-story__layout--reverse .product-story__detail {
    grid-column: 1;
    grid-row: 1
  }

  .web-design-story__layout {
    grid-template-columns: minmax(24rem, 1fr) minmax(0, 1fr)
  }

}

@media(min-width:64rem) {
  .cyber-scope__layout {
    grid-template-columns: minmax(20rem, .8fr) minmax(30rem, 1.2fr)
  }
}

@media(min-width:64rem) {
  .cyber-hero__layout {
    grid-template-columns: minmax(0, .95fr) minmax(30rem, 1.05fr)
  }
}

@media(max-width:47.99rem) {
  body {
    font-size: 16px
  }

  .shell {
    width: min(100% - 2rem, 76rem)
  }

  .nav-wrap {
    min-height: 4.75rem
  }

  .brand img {
    width: 9.5rem
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem
  }

  .site-nav {
    position: absolute;
    z-index: 60;
    top: 100%;
    right: 1rem;
    left: 1rem;
    display: none;
    padding: .7rem;
    border: 1px solid var(--hairline);
    background: var(--surface);
    box-shadow: var(--shadow)
  }

  .site-nav.is-open {
    display: grid
  }

  .site-nav>details>summary,
  .site-nav>.contact-link {
    width: 100%
  }

  .site-nav>details>summary {
    justify-content: space-between
  }

  .site-nav>details>.nav-menu {
    position: static;
    min-width: 0;
    display: none;
    padding: .25rem;
    border: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto
  }

  .site-nav>details[open]>.nav-menu {
    display: grid
  }

  .site-nav>.contact-link {
    justify-content: center;
    margin: .4rem 0 0
  }

  .experience-hero {
    padding-top: 3.5rem
  }

  .experience-hero--home {
    min-height: auto;
    background-position: 64% center
  }

  .service-stage__bar {
    align-items: flex-start;
    flex-direction: column
  }

  .security-stack>div:nth-child(n) {
    margin-left: 0
  }

  .capability-sequence article {
    min-height: 18rem
  }

  .contact-band__inner,
  .closing-cta__inner {
    align-items: flex-start;
    flex-direction: column
  }

  .cookie-copy,
  .cookie-option-list,
  .cookie-actions {
    grid-template-columns: 1fr
  }

  .cookie-panel {
    padding: 1.4rem
  }

  .cookie-panel h2,
  .cookie-policy-link {
    white-space: normal
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important
  }

  .reveal {
    opacity: 1;
    transform: none
  }
}

@media(max-width:79.99rem) {
  body:not(.page-ready) .nav-wrap {
    flex-wrap: wrap
  }

  body:not(.page-ready) .menu-toggle {
    display: none
  }

  body:not(.page-ready) .site-nav {
    position: static;
    display: grid;
    flex-basis: 100%;
    max-height: none
  }

  .nav-wrap {
    min-height: 4.75rem
  }

  .brand img {
    width: 9.5rem
  }

  .menu-toggle {
    display: inline-flex
  }

  .site-nav {
    position: absolute;
    z-index: 60;
    top: 100%;
    right: 1rem;
    left: 1rem;
    display: none;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: .65rem;
    border: 1px solid var(--hairline);
    border-radius: .35rem;
    background: var(--surface);
    box-shadow: var(--shadow)
  }

  .site-nav.is-open {
    display: grid
  }

  .site-nav>.nav-group {
    width: 100%
  }

  .site-nav>.nav-group::after {
    display: none
  }

  .site-nav>.nav-group>summary {
    width: 100%;
    justify-content: space-between;
    padding: .85rem
  }

  .site-nav>.nav-group>.nav-menu {
    position: static;
    width: 100%;
    display: none;
    grid-template-columns: 1fr;
    margin: .15rem 0 .5rem;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto
  }

  .site-nav>.nav-group[open]>.nav-menu {
    display: grid
  }

  .site-nav>.nav-group>.nav-menu--products {
    grid-template-columns: 1fr
  }

  .site-nav>.nav-group>.nav-menu--services .nav-card,
  .site-nav>.nav-group>.nav-menu--products .nav-card {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--hairline)
  }

  .site-nav>.nav-group>.nav-menu--services .nav-card:last-child,
  .site-nav>.nav-group>.nav-menu--products .nav-card:last-child {
    border-bottom: 0
  }

  .nav-card {
    min-height: 0;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: .85rem;
    padding: .9rem .85rem;
    border-right: 0;
    border-bottom: 1px solid var(--hairline)
  }

  .nav-card:last-child {
    border-bottom: 0
  }

  .nav-card__icon {
    width: 2.35rem;
    height: 2.35rem;
    margin: 0
  }

  .nav-card__copy {
    gap: .2rem
  }

  .nav-card__copy strong {
    font-size: 1rem
  }

  .nav-card__copy>span {
    font-size: .83rem
  }

  .site-nav>.contact-link {
    width: 100%;
    justify-content: center;
    margin: .4rem 0 0
  }
}

/* Shared floating-label forms */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important
}

.floating-form {
  gap: 1.35rem
}

.floating-form .form-grid {
  gap: 1.35rem 1.5rem
}

.floating-form .form-field {
  position: relative;
  display: block;
  padding-top: .85rem
}

.floating-form .form-field>input,
.floating-form .form-field>select,
.floating-form .form-field>textarea {
  width: 100%;
  margin: 0;
  padding: 1.05rem 0 .55rem;
  border: 0;
  border-bottom: 1px solid #a79e98;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.5;
  outline: none;
  box-shadow: none;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease)
}

.floating-form .form-field>textarea {
  min-height: 8.5rem;
  resize: vertical
}

.floating-form .form-field>label {
  position: absolute;
  z-index: 1;
  top: 1.7rem;
  left: 0;
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.2;
  pointer-events: none;
  transform-origin: left top;
  transition: color 180ms var(--ease), transform 180ms var(--ease), top 180ms var(--ease)
}

.floating-form .form-field>input:focus+label,
.floating-form .form-field>input:not(:placeholder-shown)+label,
.floating-form .form-field>textarea:focus+label,
.floating-form .form-field>textarea:not(:placeholder-shown)+label,
.floating-form .form-field--select>label {
  top: .25rem;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700;
  transform: none
}

.floating-form .form-field>input:focus,
.floating-form .form-field>select:focus,
.floating-form .form-field>textarea:focus {
  border-color: var(--accent);
  outline: .75px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none
}

.floating-form .form-field>[aria-invalid="true"] {
  border-color: #b42318;
  box-shadow: inset 0 -2px 0 #b42318
}

.floating-form .form-field>[aria-invalid="true"]+label {
  color: #b42318
}

.floating-form .form-field>.is-valid {
  border-color: var(--green);
  box-shadow: inset 0 -2px 0 var(--green)
}

.floating-form .form-field>.is-valid+label {
  color: var(--green)
}

.floating-form .field-error,
.floating-form .js-field-error {
  display: block;
  margin-top: .35rem;
  color: #b42318;
  font-size: .78rem;
  font-weight: 700
}

.floating-form .form-note {
  margin: 0
}

.floating-form .form-note a {
  color: var(--primary-active);
  font-weight: 700
}

.floating-form .button {
  justify-self: start
}

.form-fallback-message {
  padding: .8rem 1rem;
  border-left: 3px solid #b42318;
  background: #fff0eb;
  font-size: .875rem;
  font-weight: 700
}

.form-fallback-message.is-success {
  border-left-color: var(--green);
  background: #edf5ef
}

/* Global callback drawer */
.callback-drawer {
  position: relative
}

.callback-drawer>summary {
  list-style: none
}

.callback-drawer>summary::-webkit-details-marker {
  display: none
}

.callback-trigger {
  position: fixed;
  z-index: 48;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  box-shadow: 0 14px 36px rgb(45 44 43 / 22%);
  cursor: pointer;
  line-height: 1;
  transition: background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease)
}

.callback-trigger:hover,
.callback-trigger:focus-visible {
  background: var(--accent);
  color: var(--dark);
  box-shadow: 0 18px 42px rgb(45 44 43 / 28%)
}

.callback-trigger svg {
  width: 1.45rem;
  height: 1.45rem
}

@media (prefers-reduced-motion: no-preference) {
  .callback-trigger__arrow {
    transform-origin: center;
    transition: transform 300ms var(--ease)
  }

  .callback-trigger:hover .callback-trigger__arrow,
  .callback-trigger:focus-visible .callback-trigger__arrow {
    transform: translate(2px, -2px)
  }
}

.callback-drawer__layer {
  position: fixed;
  z-index: 90;
  inset: 0;
  visibility: hidden;
  pointer-events: none
}

.callback-drawer__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgb(20 19 19 / 58%);
  opacity: 0;
  cursor: pointer;
  transition: opacity 220ms var(--ease)
}

.callback-panel {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: min(100%, 32rem);
  height: 100%;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--dark);
  color: #fff;
  box-shadow: -24px 0 60px rgb(20 19 19 / 24%);
  transform: translateX(100%);
  transition: transform 220ms var(--ease)
}

.callback-drawer[open] .callback-drawer__layer {
  visibility: visible;
  pointer-events: auto
}

.callback-drawer[open] .callback-drawer__backdrop {
  opacity: 1
}

.callback-drawer[open] .callback-panel {
  transform: translateX(0)
}

.callback-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem
}

.callback-panel__label {
  margin: 0 0 .35rem;
  color: #ff9b69;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em
}

.callback-panel h2 {
  max-width: 10ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3rem)
}

.callback-panel__intro {
  max-width: 30rem;
  margin: 1rem 0 2rem;
  color: #ded6d1
}

.callback-panel__close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease)
}

.callback-panel__close:hover,
.callback-panel__close:focus-visible {
  border-color: #ff9b69;
  background: rgb(255 255 255 / 8%);
  transform: rotate(4deg)
}

.callback-form {
  gap: 1.15rem;
  color-scheme: dark
}

.floating-form--dark .form-field>input,
.floating-form--dark .form-field>select,
.floating-form--dark .form-field>textarea {
  border-bottom-color: rgb(255 255 255 / 38%);
  background: transparent !important;
  color: #fff !important;
  caret-color: #fff
}

.floating-form--dark .form-field>select option {
  background-color: var(--dark);
  color: #fff
}

.callback-form input:-webkit-autofill,
.callback-form input:-webkit-autofill:hover,
.callback-form input:-webkit-autofill:focus,
.callback-form textarea:-webkit-autofill,
.callback-form textarea:-webkit-autofill:hover,
.callback-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px var(--dark) inset !important;
  box-shadow: 0 0 0 1000px var(--dark) inset !important
}

.floating-form--dark .form-field>label {
  color: #cfc7c2
}

.floating-form--dark .form-field>input:focus+label,
.floating-form--dark .form-field>input:not(:placeholder-shown)+label,
.floating-form--dark .form-field>textarea:focus+label,
.floating-form--dark .form-field>textarea:not(:placeholder-shown)+label {
  color: #ff9b69
}

.floating-form--dark .form-field>input:focus,
.floating-form--dark .form-field>textarea:focus {
  border-bottom-color: #ff9b69;
  box-shadow: inset 0 -2px 0 #ff9b69
}

.floating-form--dark .form-field>[aria-invalid="true"] {
  border-bottom-color: #ff8d85;
  box-shadow: inset 0 -2px 0 #ff8d85
}

.floating-form--dark .form-field>[aria-invalid="true"]+label,
.floating-form--dark .field-error,
.floating-form--dark .js-field-error {
  color: #ffaaa4
}

.floating-form--dark .form-field>.is-valid {
  border-bottom-color: #80c58e;
  box-shadow: inset 0 -2px 0 #80c58e
}

.floating-form--dark .form-field>.is-valid+label {
  color: #80c58e
}

.floating-form--dark .form-note {
  color: #d8d0cb
}

.floating-form--dark .form-note a {
  color: #fff
}

.callback-fallback-message {
  padding: .8rem 1rem;
  border-left: 3px solid #ff8d85;
  background: rgb(255 255 255 / 7%);
  font-size: .875rem
}

.callback-fallback-message.is-success {
  border-left-color: #80c58e
}

body.callback-drawer-open {
  overflow: hidden
}

@media(max-width:36rem) {
  .callback-trigger {
    right: .75rem;
    bottom: .75rem
  }

  .callback-panel {
    width: 100%;
    padding: 1.25rem
  }

  .callback-panel__intro {
    margin-bottom: 1.25rem
  }
}

.contact-link:hover,
.contact-link:focus-visible,
.button-primary:hover,
.button-primary:focus-visible {
  background: var(--primary-active)
}

/* Supplied section imagery */
.section-media {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--dark)
}

.section-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.section-media--landscape {
  aspect-ratio: 4/3
}

.section-media--landscape img {
  object-position: center
}

.section-media--portrait {
  aspect-ratio: 16/10;
  margin-bottom: 2rem
}

.section-media--portrait img {
  object-position: center 38%
}

.section-media--process {
  aspect-ratio: 3/2
}

.section-media--wide {
  aspect-ratio: 21/9;
  margin-bottom: clamp(2.5rem, 6vw, 5rem)
}

.section-media--wide img {
  object-position: center 58%
}

.section-media--security {
  min-height: 24rem
}

.section-media--security::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent 55%, rgb(45 44 43 / 28%))
}

.media-story {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center
}

.media-story__content {
  min-width: 0
}

.media-story__content .statement-flow {
  max-width: none
}

.why-section__header {
  max-width: 48rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  text-align: center
}

.why-section__header h2 {
  max-width: none;
  margin-inline: auto
}

.media-story--why .statement-flow {
  display: grid;
  gap: 1.35rem
}

.media-story--why .statement-flow p {
  margin: 0;
  padding-top: 0;
  border-top: 0
}

.process-showcase {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center
}

.process-showcase__content h2 {
  max-width: 13ch;
  color: #fff
}

.process-showcase__content>p {
  color: #e7dfdb
}

.process-track--vertical {
  grid-template-columns: 1fr;
  margin-top: 2rem
}

.process-track--vertical li {
  min-height: auto;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: .8rem 0;
  border-right: 0;
  border-bottom: 1px solid rgb(255 255 255 / 18%)
}

.delivery-showcase {
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center
}

.delivery-showcase__content {
  min-width: 0
}

.delivery-showcase__intro {
  margin-bottom: clamp(2.5rem, 5vw, 4rem)
}

.delivery-showcase__intro h2 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 4vw, 3.75rem)
}

.delivery-showcase__intro>p:last-child {
  max-width: 36rem;
  color: var(--muted);
  font-size: 1.08rem
}

.delivery-showcase__scope {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: .4rem;
  background: var(--surface)
}

.delivery-showcase__scope h3 {
  max-width: 25rem;
  margin-bottom: 1.5rem;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  letter-spacing: -.025em
}

.delivery-showcase__scope ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
  list-style: none
}

.delivery-showcase__scope li {
  padding: .8rem 0;
  border-bottom: 1px solid var(--hairline)
}

.delivery-showcase__scope li:last-child {
  border-bottom: 0
}

.delivery-showcase__media {
  aspect-ratio: 1/1;
  border-radius: .5rem;
  box-shadow: var(--shadow)
}

.delivery-showcase__media img {
  object-position: center
}

@media(min-width:48rem) {
  .media-story {
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr)
  }

  .process-showcase {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr)
  }

  .delivery-showcase {
    grid-template-columns: minmax(20rem, .9fr) minmax(24rem, 1.1fr)
  }
}

@media(max-width:47.99rem) {

  .section-media--landscape,
  .section-media--portrait,
  .section-media--wide {
    aspect-ratio: 4/3
  }

  .section-media--security {
    min-height: 16rem;
    aspect-ratio: 3/2
  }

  .process-showcase__content {
    padding-bottom: 1rem
  }
}

/* Home audience section */
.audience-section {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem)
}

.audience-masthead {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end
}

.audience-heading h2 {
  max-width: 11ch;
  margin-bottom: 0
}

.audience-image {
  aspect-ratio: 16/7
}

.audience-image img {
  object-position: center 42%
}

.audience-content {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start
}

.audience-summary {
  max-width: 42rem;
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: clamp(1.05rem, 1.45vw, 1.2rem);
  line-height: 1.65
}

.audience-content .home-sector-accordion {
  align-self: start
}

/* Shared service-page hero; the Home, Contact and legal heroes remain independent. */
.service-page-hero .experience-hero__intro {
  grid-template-columns: 1fr
}

.service-page-hero .experience-hero__heading {
  min-width: 0;
  max-width: 48rem
}

.service-page-hero .experience-hero__heading h1 {
  max-width: 16ch;
  font-size: clamp(3rem, 5.5vw, 5.4rem)
}

.service-page-hero .experience-hero__summary {
  width: 100%;
  max-width: 44rem
}

/* Website design page: compact closing action. */
.web-design-cta .closing-cta__inner>div {
  max-width: 54rem
}

.web-design-cta .closing-cta__inner h2 {
  max-width: 24ch;
  font-size: clamp(1.85rem, 3vw, 2.8rem);
  line-height: 1.08
}

.web-design-cta .closing-cta__inner>div p:last-child {
  max-width: 46rem;
  margin-top: 1rem;
  font-size: 1.05rem
}

@media(min-width:48rem) {
  .audience-masthead {
    grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr)
  }

  .audience-content {
    grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr)
  }

  .web-design-cta .closing-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(3rem, 8vw, 8rem)
  }
}

@media(min-width:64rem) {
  .service-page-hero .experience-hero__intro {
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr);
    gap: clamp(3rem, 6vw, 5rem)
  }
}

@media(max-width:47.99rem) {
  .audience-image {
    aspect-ratio: 4/3
  }

  .audience-heading h2 {
    max-width: 13ch
  }
}

/* Browser-based security tools. */
.tools-hero .experience-hero__heading h1 { max-width: 13ch }
.tools-section { padding-bottom: clamp(4.5rem, 9vw, 8rem) }
.tools-heading { margin-bottom: clamp(2.25rem, 5vw, 4rem) }
.tools-grid { display: grid; gap: 1rem }
.tool-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface) }
.tool-card__number { margin-bottom: clamp(1.25rem, 2.2vw, 2rem); color: var(--accent-yellow); font-size: .8rem; font-weight: 700; letter-spacing: .08em }
.tool-card h3 { max-width: 17ch; margin: 0 0 .85rem; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15 }
.tool-card p { max-width: 32rem; margin: 0 0 1.5rem; color: var(--muted); line-height: 1.6 }
.tool-card .button { margin-top: auto }
.tools-boundary h2 { max-width: 15ch }
.tool-modal { width: min(calc(100% - 2rem), 48rem); max-width: 48rem; max-height: calc(100vh - 2rem); margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink) }
.tool-modal::backdrop { background: rgb(45 44 43 / 72%); backdrop-filter: blur(3px) }
.tool-modal__panel { max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1.35rem, 4vw, 2.5rem); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 30px 90px rgb(0 0 0 / 28%) }
.tool-modal__header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start }
.tool-modal__header h2 { max-width: 21ch; margin: 0; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.1 }
.tool-modal__header .service-label { margin-bottom: .55rem }
.tool-modal__close { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.65rem; line-height: 1 }
.tool-modal__close:hover, .tool-modal__close:focus-visible { background: var(--dark); color: #fff }
.tool-modal__notice { margin: 1.5rem 0 0; padding: 1rem 1.15rem; border-left: 3px solid var(--accent-yellow); background: var(--canvas-soft); color: var(--ink-secondary); font-size: .94rem; line-height: 1.55 }
.tool-form { display: grid; gap: 1.35rem; margin-top: 1.5rem }
.tool-form.floating-form .form-field { min-width: 0 }
.tool-form.floating-form .form-field>input,
.tool-form.floating-form .form-field>textarea { min-height: 2.9rem; font: inherit }
.tool-form.floating-form .form-field>textarea { resize: vertical }
.tool-form.floating-form .form-field--file>label { top: .25rem; color: var(--primary); font-size: .75rem; font-weight: 700 }
.tool-form.floating-form .form-field--file>input { max-width: 100%; padding-top: 1.05rem; color: var(--ink-secondary); font-size: .875rem }
.tool-form .tool-check { display: flex; align-items: flex-start; gap: .65rem; color: var(--ink); font-size: .94rem; font-weight: 700; line-height: 1.45 }
.tool-form .tool-check input { width: 1.1rem; min-width: 1.1rem; height: 1.1rem; margin: .16rem 0 0; accent-color: var(--primary) }
.tool-form > .button { justify-self: start; margin-top: .5rem }
.tool-input-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9rem; align-items: end }
.tool-results { min-height: 1px; margin-top: 1.25rem }
.tool-result { padding: 1.15rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--canvas-soft) }
.tool-result--error { border-color: #c66a4d }
.tool-result h3 { margin: 0 0 .75rem; font-size: 1.15rem }
.tool-result p, .tool-result ul { margin: 0 }
.tool-result ul { display: grid; gap: .45rem; padding-left: 1.2rem }
.tool-result__footnote { margin-top: .9rem !important; color: var(--muted); font-size: .88rem }
@media (min-width: 48rem) { .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 64rem) { .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) } .tool-card:last-child:nth-child(5) { grid-column: 2 / span 1 } }
@media (max-width: 47.99rem) { .tool-modal { width: min(calc(100% - 1rem), 48rem); max-height: calc(100vh - 1rem) } .tool-modal__panel { max-height: calc(100vh - 1rem) } }

/* Domain availability dialog. */
.domain-search-open {
  overflow: hidden
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important
}

.domain-search-modal {
  width: min(calc(100% - 2rem), 48rem);
  max-width: 48rem;
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink)
}

.domain-search-modal::backdrop {
  background: rgb(45 44 43 / 72%);
  backdrop-filter: blur(3px)
}

.domain-search-panel {
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: clamp(1.35rem, 4vw, 2.5rem);
  border-radius: .5rem;
  background: var(--surface);
  box-shadow: 0 30px 90px rgb(0 0 0 / 28%);
  animation: domain-modal-in 220ms var(--ease)
}

.domain-search-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: .25rem
}

.domain-search-header>div {
  max-width: 43rem
}

.domain-search-header h2 {
  max-width: 17ch;
  margin-bottom: .75rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem)
}

.domain-search-header p:last-child {
  margin-bottom: 0;
  color: var(--muted)
}

.domain-search-close {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.65rem;
  line-height: 1;
  transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease)
}

.domain-search-close:hover,
.domain-search-close:focus-visible {
  background: var(--dark);
  color: #fff;
  transform: rotate(6deg)
}

.domain-search-form {
  padding: clamp(1.5rem, 3vw, 2.25rem) 0
}

.domain-search-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .75rem
}

.domain-search-modal .button {
  border-radius: .3rem
}

.domain-search-form .form-note {
  margin: .6rem 0 0
}

.domain-search-status {
  min-height: 1.6rem;
  margin: .55rem 0 0;
  font-weight: 700
}

.domain-search-status.is-error {
  color: #a6340e
}

.domain-search-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline)
}

.domain-search-table {
  width: 100%;
  min-width: 36rem;
  text-align: left
}

.domain-search-table th,
.domain-search-table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle
}

.domain-search-table th {
  background: var(--soft);
  color: var(--ink);
  font-size: .82rem;
  letter-spacing: .02em
}

.domain-search-table tbody tr:last-child td {
  border-bottom: 0
}

.domain-search-table td:first-child {
  font-weight: 700
}

.domain-search-table th:last-child,
.domain-search-table td:last-child {
  text-align: right
}

.domain-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted)
}

.domain-status::before {
  width: .55rem;
  height: .55rem;
  flex: none;
  border-radius: 50%;
  background: #9b928c;
  content: ""
}

.domain-status--available {
  color: #315f3b;
  font-weight: 700
}

.domain-status--available::before {
  background: var(--green)
}

.domain-search-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1rem
}

.domain-search-pagination span {
  min-width: 7rem;
  text-align: center;
  font-weight: 700
}

.domain-search-pagination .button:disabled {
  cursor: not-allowed;
  opacity: .45;
  transform: none
}

@keyframes domain-modal-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.99)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media(max-width:47.99rem) {
  .domain-search-entry {
    grid-template-columns: 1fr
  }

  .domain-search-entry .button {
    width: 100%
  }

  .domain-search-header {
    gap: 1rem
  }

  .domain-search-header h2 {
    font-size: 2rem
  }

  .domain-search-pagination {
    justify-content: space-between;
    gap: .5rem
  }

  .domain-search-pagination span {
    min-width: 0;
    font-size: .9rem
  }
}

/* Source-backed company, service and guidance pages. */
.info-hero__panel {
  overflow: hidden;
  border: 1px solid rgb(45 44 43 / 12%);
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 24px 60px rgb(45 44 43 / 8%)
}

.info-hero__panel-label {
  margin: 0;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--primary);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em
}

.quiet-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none
}

.quiet-list li {
  min-width: 0;
  padding: 1.2rem;
  border-right: 1px solid var(--hairline);
  font-weight: 700;
  line-height: 1.4
}

.quiet-list li:last-child {
  border-right: 0
}

.content-section {
  padding: clamp(4.5rem, 9vw, 8rem) 0
}

.content-section--surface {
  background: var(--soft)
}

.content-section--dark {
  background: var(--dark);
  color: #fff
}

.content-section--dark h2,
.content-section--dark h3 {
  color: #fff
}

.content-section--dark p {
  color: #e7dfdb
}

.content-section h2 {
  font-size: clamp(2.25rem, 3.5vw, 3.5rem);
  line-height: 1.05
}

.editorial-split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start
}

.editorial-split h2 {
  max-width: 19ch
}

.prose-stack {
  max-width: 46rem
}

.prose-stack p {
  font-size: 1.08rem;
  line-height: 1.7
}

.prose-stack>*:last-child {
  margin-bottom: 0
}

.content-heading {
  max-width: 54rem;
  margin-bottom: clamp(2.25rem, 5vw, 4rem)
}

.content-heading h2 {
  max-width: 21ch
}

.content-heading>p:last-child {
  max-width: 44rem;
  color: var(--muted);
  font-size: 1.08rem
}

.content-section--dark .content-heading>p:last-child {
  color: #e7dfdb
}

.it-support-coverage__heading {
  display: grid;
  width: 100%;
  max-width: none;
  justify-items: center;
  text-align: center
}

.it-support-coverage__heading h2 {
  width: min(100%, 24ch);
  max-width: none;
  margin-right: auto;
  margin-left: auto;
  text-align: center
}

.sector-strip {
  display: grid;
  border-top: 1px solid var(--hairline)
}

.sector-strip span {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.05rem;
  font-weight: 700
}

.feature-columns {
  display: grid;
  border-top: 1px solid currentColor
}

.feature-columns article {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 20%)
}

.feature-columns article h3 {
  max-width: 18ch;
  margin-bottom: .75rem;
  font-size: clamp(1.35rem, 2vw, 1.75rem)
}

.feature-columns article p {
  max-width: 30rem;
  margin: 0
}

.content-section--surface .feature-columns {
  border-top-color: var(--hairline)
}

.content-section--surface .feature-columns article {
  border-bottom-color: var(--hairline)
}

.service-lines {
  border-top: 1px solid var(--hairline)
}

.service-lines>div {
  display: grid;
  gap: .5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--hairline)
}

.service-lines h3,
.service-lines p {
  margin: 0
}

.service-lines p {
  max-width: 46rem;
  color: var(--muted)
}

.projects-scope__intro {
  display: grid;
  justify-items: center;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  text-align: center
}

.projects-scope__intro h2 {
  max-width: 20ch;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  font-size: clamp(2.25rem, 3.8vw, 3.5rem);
  line-height: 1.08
}

.projects-scope__grid {
  display: grid;
  gap: 1rem
}

.projects-scope__grid article {
  min-height: 12rem;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid var(--hairline);
  background: #fff
}

.projects-scope__grid h3 {
  max-width: 18ch;
  margin: 0 0 1rem;
  font-size: clamp(1.35rem, 1.8vw, 1.65rem);
  line-height: 1.18
}

.projects-scope__grid p {
  max-width: 34rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.65
}

.projects-provider__layout {
  display: grid;
  max-width: 52rem;
  justify-items: center;
  gap: 1.5rem;
  text-align: center
}

.projects-provider h2 {
  max-width: 18ch;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  font-size: clamp(2.15rem, 3.2vw, 3rem);
  line-height: 1.08
}

.projects-provider .prose-stack {
  max-width: 44rem
}

.projects-provider .prose-stack p:first-child {
  margin-top: 0
}

.about-audience__layout {
  display: grid;
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: center
}

.about-audience__intro h2 {
  max-width: 18ch;
  margin-bottom: 1.5rem;
  font-size: clamp(2.25rem, 3.5vw, 3.4rem);
  line-height: 1.08
}

.about-audience__intro>p:last-child {
  max-width: 35rem;
  margin: 0;
  color: #e7dfdb;
  line-height: 1.65
}

.about-audience__list {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none
}

.about-audience__list li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center
}

.about-audience__list h3 {
  max-width: 17ch;
  margin: 0;
  color: #fff;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.25
}

.about-audience__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  color: #ff9b69
}

.about-audience__icon svg {
  width: 1.55rem;
  height: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.m365-improvements__heading {
  max-width: 48rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem)
}

.m365-improvements__heading h2 {
  max-width: 21ch;
  margin-bottom: 0;
  font-size: clamp(2.25rem, 3.8vw, 3.5rem);
  line-height: 1.08
}

.m365-improvements__layout {
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center
}

.m365-improvements__copy {
  max-width: 38rem
}

.m365-improvements__copy p {
  color: var(--muted);
  font-size: 1.08rem
}

.m365-improvements__media {
  min-height: 20rem;
  overflow: hidden
}

.m365-improvements__media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.process-cards {
  display: grid;
  border-top: 1px solid var(--hairline)
}

.process-cards article {
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--hairline)
}

.process-cards article h2 {
  max-width: 12ch;
  font-size: clamp(1.8rem, 3vw, 2.7rem)
}

.process-cards article>p:last-child {
  max-width: 28rem;
  margin-top: auto;
  color: var(--muted)
}

.how-work-steps .process-cards article {
  min-height: 0;
  display: block;
  padding-block: clamp(1.75rem, 4vw, 2.5rem)
}

.how-work-steps .process-cards article h2 {
  max-width: 18ch;
  margin-bottom: 1rem;
  font-size: clamp(1.65rem, 2.2vw, 2.15rem);
  line-height: 1.12
}

.how-work-steps .process-cards article>p:last-child {
  max-width: 31rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.65
}

.how-work-delivery__layout {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start
}

.how-work-delivery h2 {
  max-width: none;
  margin-bottom: .65rem;
  font-size: clamp(2.1rem, 3vw, 3rem);
  line-height: 1.08
}

.how-work-delivery__subheading {
  max-width: 28rem;
  margin: 0;
  color: #e7dfdb;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.45
}

.how-work-delivery .prose-stack p:first-child {
  margin-top: 0
}

.faq-layout {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start
}

.faq-layout .content-heading {
  margin-bottom: 0
}

.faq-layout .content-heading h2 {
  font-size: clamp(2.15rem, 3vw, 3rem)
}

.faq-list {
  border-top: 1px solid var(--hairline)
}

.faq-list details {
  border-bottom: 1px solid var(--hairline)
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none
}

.faq-list summary::-webkit-details-marker {
  display: none
}

.faq-list summary::after {
  width: .65rem;
  height: .65rem;
  flex: none;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms var(--ease)
}

.faq-list details[open] summary::after {
  transform: translateY(2px) rotate(225deg)
}

.faq-list details p {
  max-width: 46rem;
  margin: 0;
  padding: 0 2rem 1.25rem 0;
  color: var(--muted)
}

.security-checklist {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 5rem)
}

.security-checklist__groups {
  display: grid;
  gap: 1rem
}

.security-checklist__group {
  min-width: 0;
  margin: 0;
  padding: clamp(1.4rem, 2.5vw, 1.8rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface)
}

.security-checklist__group h2 {
  margin: 0 0 .8rem;
  color: var(--ink);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15
}

.security-checklist__items {
  display: grid;
  gap: .1rem
}

.security-checklist__group label {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: .8rem;
  align-items: start;
  margin: 0;
  padding: .35rem .4rem;
  border-radius: var(--radius-xs);
  color: var(--ink-secondary);
  cursor: pointer;
  font-size: .925rem;
  line-height: 1.45
}

.security-checklist__group label:hover {
  background: var(--canvas-soft)
}

.security-checklist__group input {
  width: 1.1rem;
  height: 1.1rem;
  margin: .22rem 0 0;
  accent-color: var(--primary);
  cursor: pointer
}

.security-checklist__group label:has(input:checked) span {
  color: var(--primary);
  font-weight: 700
}

.security-checklist__group label:focus-within {
  outline: .75px solid var(--accent);
  outline-offset: 3px
}

.security-checklist__outcome {
  max-width: 48rem;
  margin-top: clamp(3rem, 5vw, 4rem)
}

.security-checklist__outcome p {
  max-width: 44rem
}

@media(min-width:48rem) {
  .editorial-split {
    grid-template-columns: minmax(22rem, .9fr) minmax(0, 1.1fr)
  }

  .m365-security-control {
    align-items: center
  }

  .sector-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .sector-strip span:nth-child(odd) {
    padding-right: 1.5rem
  }

  .sector-strip span:nth-child(even) {
    padding-left: 1.5rem;
    border-left: 1px solid var(--hairline)
  }

  .feature-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .feature-columns--two {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .feature-columns article {
    padding: 1.75rem;
    border-right: 1px solid rgb(255 255 255 / 20%)
  }

  .feature-columns article:first-child {
    padding-left: 0
  }

  .feature-columns article:last-child {
    padding-right: 0;
    border-right: 0
  }

  .content-section--surface .feature-columns article {
    border-right-color: var(--hairline)
  }

  .service-lines>div {
    grid-template-columns: minmax(14rem, .55fr) minmax(0, 1.45fr);
    gap: 2rem
  }

  .projects-scope__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .projects-scope__grid article {
    grid-column: span 2
  }

  .projects-scope__grid article:nth-last-child(-n+2) {
    grid-column: span 3
  }

  .about-audience__layout {
    grid-template-columns: minmax(22rem, .9fr) minmax(0, 1.1fr)
  }

  .about-audience__list {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .about-audience__list li:last-child {
    grid-column: 1/-1
  }

  .process-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .process-cards article {
    padding: 1.75rem
  }

  .process-cards article:nth-child(odd) {
    padding-left: 0;
    border-right: 1px solid var(--hairline)
  }

  .process-cards article:nth-child(even) {
    padding-right: 0
  }

  .how-work-delivery__layout {
    grid-template-columns: minmax(20rem, .8fr) minmax(0, 1.2fr)
  }

  .faq-layout {
    grid-template-columns: minmax(19rem, .72fr) minmax(0, 1.28fr)
  }

  .security-checklist__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    align-items: start
  }

}

@media(min-width:64rem) {
  .security-checklist__groups {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .security-checklist__group {
    grid-column: span 3
  }

  .security-checklist__group:nth-child(n+3) {
    grid-column: span 2
  }
}

@media(max-width:79.99rem) {
  .site-nav>.nav-simple-link {
    width: 100%;
    padding: .85rem
  }
}

@media(max-width:47.99rem) {
  .quiet-list {
    grid-auto-flow: row;
    grid-template-columns: 1fr
  }

  .quiet-list li {
    padding: 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--hairline)
  }

  .quiet-list li:last-child {
    border-bottom: 0
  }

  .projects-scope__grid article {
    min-height: 0
  }

  .process-cards article {
    min-height: 15rem
  }

  .how-work-steps .process-cards article {
    min-height: 0
  }
}

/* Keep focus visible across public forms and pages, including non-keyboard focus. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: 2px
}

:is(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]), select, textarea):focus {
  border: 0 !important;
  border-bottom: var(--focus-width) solid var(--focus) !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important
}

.floating-form .form-field > label { color: var(--muted) !important }
.floating-form .form-field:focus-within > label { color: var(--accent) !important }