:root {
  --color-ink: #071936; --color-ink-soft: #24334a; --color-paper: #fff; --color-mist: #f4f6f9; --color-line: #d9e0e9;
  --color-blue: #1476cf; --color-blue-deep: #095398; --color-orange: #f57917; --color-purple: #71349b; --color-pink: #d62d75;
  --color-brand-blue: var(--color-blue); --color-brand-blue-hover: var(--color-blue-deep); --color-brand-orange: var(--color-orange); --color-brand-purple: var(--color-purple); --color-field-border: #9cabbc; --color-hero-purple: #d7b5f0;
  --shadow-sm: 0 4px 15px rgb(7 25 54 / .08); --shadow-lg: 0 24px 54px rgb(7 25 54 / .14);
  --radius-sm: .5rem; --radius-md: 1rem; --radius-lg: 1.5rem; --content: 75rem;
  --z-navigation: 100; --z-menu-overlay: 110; --z-menu-controls: 120;
  --space-1: .5rem; --space-2: .75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4.5rem; --space-8: 7rem;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: var(--font-body);
  --text-xs: .78rem; --text-sm: .94rem; --text-base: 1rem; --text-lg: clamp(1.15rem, 1.8vw, 1.35rem); --text-xl: clamp(1.8rem, 4vw, 3.4rem); --text-hero: clamp(2.7rem, 7vw, 6.2rem);
  --transition: 180ms ease;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 20rem; margin: 0; overflow-x: clip; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { color: var(--color-blue-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: .2rem solid var(--color-orange); outline-offset: .25rem; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); color: var(--color-ink); line-height: 1.06; letter-spacing: -.045em; }
h1 { max-width: 12ch; margin-bottom: var(--space-4); font-size: var(--text-hero); }
h2 { margin-bottom: var(--space-3); font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
main:focus { outline: none; }
.skip-link { position: fixed; z-index: 20; top: var(--space-2); left: var(--space-2); padding: var(--space-2) var(--space-3); transform: translateY(-150%); color: var(--color-paper); background: var(--color-ink); border-radius: var(--radius-sm); transition: transform var(--transition); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid rgb(217 224 233 / .8); background: rgb(255 255 255 / .94); backdrop-filter: blur(12px); }
.site-header__inner, .site-footer__inner, .site-footer__bottom { width: min(calc(100% - var(--space-5)), var(--content)); margin: auto; }
.site-header__inner { min-height: 4.7rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.brand { display: inline-grid; grid-template-columns: auto; color: var(--color-ink); text-decoration: none; line-height: 1; }
.brand:hover { color: var(--color-ink); }
.brand__name { font-size: clamp(1.65rem, 3.4vw, 2.1rem); font-weight: 850; letter-spacing: -.06em; }
.brand__descriptor { margin-top: .2rem; font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.brand__marks { display: flex; gap: .24rem; margin-top: .45rem; }
.brand__marks i { display: block; width: 1.55rem; height: .2rem; background: var(--color-blue); transform: skewX(-14deg); }.brand__marks i:nth-child(2) { background: var(--color-orange); }.brand__marks i:nth-child(3) { background: var(--color-purple); }
.primary-navigation { position: fixed; inset: 4.7rem 0 0; display: none; flex-direction: column; padding: var(--space-5); background: var(--color-paper); }.primary-navigation.is-open { display: flex; }.primary-navigation a { position: relative; display: flex; align-items: center; min-height: 2.75rem; font-weight: 700; text-decoration: none; }.primary-navigation a:not(.button)::after { position: absolute; bottom: .42rem; left: 0; width: 100%; height: .18rem; content: ""; background: var(--color-blue); border-radius: 999px; transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }.primary-navigation a:not(.button):hover::after, .primary-navigation a:not(.button):focus-visible::after, .primary-navigation a[aria-current="page"]::after { transform: scaleX(1); }.primary-navigation a:not(.button):focus-visible { color: var(--color-ink); outline-offset: .18rem; }
.menu-toggle { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; display: grid; place-content: center; gap: .35rem; padding: 0; color: var(--color-ink); background: var(--color-mist); border: 0; border-radius: 50%; }.menu-toggle span:not(.visually-hidden) { display: block; width: 1.45rem; height: .14rem; background: currentColor; transition: transform var(--transition); }.menu-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(.24rem) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-.24rem) rotate(-45deg); }
.button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.1rem; color: var(--color-paper); background: var(--color-ink); border: 1px solid var(--color-ink); border-radius: 999px; font-weight: 800; line-height: 1.1; text-align: center; text-decoration: none; transition: background var(--transition), color var(--transition), transform var(--transition); }.button:hover { color: var(--color-paper); background: var(--color-blue-deep); transform: translateY(-2px); }.button--secondary { color: var(--color-ink); background: transparent; }.button--secondary:hover { color: var(--color-ink); background: var(--color-mist); }.button--mobile { margin-top: var(--space-3); }.button--header { display: none; }
.hero { position: relative; isolation: isolate; display: grid; gap: var(--space-4); align-content: center; overflow: clip; padding: var(--space-6) max(var(--space-3), calc((100vw - var(--content)) / 2)); background: var(--color-paper); }.hero__content { position: relative; z-index: 1; width: min(100%, 42rem); }.hero__company { margin-bottom: var(--space-4); font-size: var(--text-sm); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.hero__lead { max-width: 36rem; margin-bottom: var(--space-5); color: var(--color-ink-soft); font-size: var(--text-lg); }.brand-slogan { display: grid; width: max-content; max-width: 100%; margin-bottom: var(--space-4); color: var(--color-ink); line-height: .88; }.brand-slogan__lead, .brand-slogan__main { font-family: var(--font-display); font-style: normal; font-weight: 900; text-transform: uppercase; }.brand-slogan__lead { margin-left: .08em; font-size: clamp(.82rem, 2.3vw, 1rem); letter-spacing: .1em; transform: skewX(-7deg); }.brand-slogan__main { position: relative; z-index: 0; font-size: clamp(2.45rem, 7.2vw, 4.35rem); letter-spacing: -.035em; white-space: nowrap; transform: skewX(-5deg); }.brand-slogan__main span { color: var(--color-purple); }.brand-slogan__main::after { position: absolute; z-index: -1; bottom: -.17em; left: .04em; width: 76%; height: .13em; content: ""; background: var(--color-purple); border-radius: 70% 18% 65% 15%; opacity: .88; transform: rotate(-2deg) skewX(-20deg); }.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }.hero-tools { display: block; width: min(100%, 36rem); justify-self: end; margin-right: calc(var(--space-3) * -1); pointer-events: none; }.hero-tools img { display: block; width: 100%; height: auto; }
.section { padding: var(--space-7) max(var(--space-3), calc((100vw - var(--content)) / 2)); }.section--mist { background: var(--color-mist); }.section-header { max-width: 43rem; margin-bottom: var(--space-5); }.section-header > p:last-child { color: var(--color-ink-soft); font-size: var(--text-lg); }.eyebrow { margin-bottom: var(--space-2); color: var(--color-blue-deep); font-size: var(--text-xs); font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }.eyebrow::after { display: inline-block; width: 2rem; height: .22rem; margin-left: .7rem; content: ""; vertical-align: middle; background: var(--color-orange); transform: skewX(-20deg); }
.card-grid { display: grid; gap: var(--space-3); }.service-card, .project-card, .testimonial-card, .process-step { border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-sm); }.service-card { min-height: 100%; padding: var(--space-4); }.service-card__number { color: var(--color-purple); font-size: var(--text-xs); font-weight: 850; letter-spacing: .1em; }.service-card p, .process-step p { color: var(--color-ink-soft); }.service-card a { font-weight: 800; }.project-card { overflow: hidden; }.project-card__body { padding: var(--space-4); }.image-placeholder { position: relative; min-height: 14rem; overflow: hidden; background: var(--color-ink); aspect-ratio: 16 / 10; }.image-placeholder::before { position: absolute; inset: 0; content: ""; background: linear-gradient(125deg, transparent 0 30%, rgb(255 255 255 / .08) 30% 32%, transparent 32%); }.image-placeholder span { position: absolute; top: -20%; bottom: -20%; width: 21%; transform: rotate(16deg); }.image-placeholder span:nth-child(1) { left: 22%; background: var(--color-blue); }.image-placeholder span:nth-child(2) { left: 47%; background: var(--color-orange); }.image-placeholder span:nth-child(3) { left: 72%; background: var(--color-purple); }
.cta-block { position: relative; overflow: hidden; padding: var(--space-5); color: var(--color-paper); background: var(--color-ink); border-radius: var(--radius-lg); }.cta-block h2 { max-width: 16ch; color: var(--color-paper); }.cta-block p { max-width: 40rem; color: rgb(255 255 255 / .8); }.cta-block .button { color: var(--color-ink); background: var(--color-paper); border-color: var(--color-paper); }.cta-block .button:hover { color: var(--color-paper); background: var(--color-purple); border-color: var(--color-purple); }.cta-block::after { position: absolute; top: -3rem; right: 3rem; width: 9rem; height: 15rem; content: ""; opacity: .7; background: repeating-linear-gradient(90deg, var(--color-blue) 0 2.4rem, var(--color-orange) 2.4rem 4.8rem, var(--color-purple) 4.8rem 7.2rem); transform: rotate(21deg); }
.process-grid { display: grid; gap: var(--space-3); counter-reset: steps; }.process-step { padding: var(--space-4); counter-increment: steps; }.process-step::before { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; margin-bottom: var(--space-4); content: counter(steps, decimal-leading-zero); color: var(--color-paper); background: var(--color-blue); border-radius: 50%; font-size: var(--text-sm); font-weight: 850; }.process-step:nth-child(2)::before { background: var(--color-orange); }.process-step:nth-child(3)::before { background: var(--color-purple); }
.faq-groups { display: grid; gap: var(--space-6); }.faq-group h2 { margin: 0 0 var(--space-3); color: var(--color-brand-blue); font-size: var(--text-xl); }.faq-group h2::after { display: block; width: 3rem; height: 0.2rem; margin-top: var(--space-2); background: var(--color-brand-orange); border-radius: var(--radius-pill); content: ""; }.faq-list { display: grid; gap: var(--space-2); }.faq-list details { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-paper); }.faq-list summary { min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-weight: 800; cursor: pointer; }.faq-list summary::after { content: "+"; color: var(--color-purple); font-size: 1.6rem; }.faq-list details[open] summary::after { content: "–"; }.faq-list p { max-width: 55rem; margin: var(--space-2) 0 0; color: var(--color-ink-soft); }.faq-list__link { display: inline-flex; margin-top: var(--space-2); color: var(--color-brand-blue); font-weight: 800; text-decoration-thickness: 0.12em; text-underline-offset: 0.16em; }.faq-list__link:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 3px; }
.breadcrumb { padding: var(--space-3) max(var(--space-3), calc((100vw - var(--content)) / 2)); color: var(--color-ink-soft); font-size: var(--text-sm); }.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; list-style: none; }.breadcrumb li + li::before { margin-right: .4rem; content: "/"; color: var(--color-purple); }
form { display: grid; gap: var(--space-3); max-width: 42rem; padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-sm); } label { display: grid; gap: var(--space-1); font-weight: 750; } input, textarea { width: 100%; min-height: 2.75rem; padding: .7rem .8rem; color: var(--color-ink); background: var(--color-paper); border: 1px solid #9cabbc; border-radius: var(--radius-sm); } textarea { min-height: 9rem; resize: vertical; }
.page-hero { padding: var(--space-7) max(var(--space-3), calc((100vw - var(--content)) / 2)); background: var(--color-mist); }.page-hero > div { max-width: 48rem; }.page-hero h1 { font-size: var(--text-xl); }.page-hero p:last-child { max-width: 42rem; margin-bottom: 0; color: var(--color-ink-soft); font-size: var(--text-lg); }.content-layout { display: grid; gap: var(--space-5); max-width: 65rem; }.content-layout p, .prose p { color: var(--color-ink-soft); }.check-list { display: grid; gap: var(--space-3); padding: 0; margin: 0; list-style: none; }.check-list li { padding-left: 2rem; position: relative; }.check-list li::before { position: absolute; left: 0; content: "✓"; color: var(--color-blue); font-weight: 900; }.service-groups { display: grid; gap: var(--space-7); }.filter-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }.filter-list span, .tag { display: inline-flex; padding: .3rem .65rem; color: var(--color-ink-soft); background: var(--color-mist); border-radius: 999px; font-size: var(--text-sm); font-weight: 750; }.timeline { display: grid; gap: var(--space-3); max-width: 54rem; padding: 0; margin: 0; list-style: none; counter-reset: timeline; }.timeline li { position: relative; padding: var(--space-4) var(--space-4) var(--space-4) 4.8rem; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-sm); counter-increment: timeline; }.timeline li::before { position: absolute; top: var(--space-4); left: var(--space-4); display: grid; width: 2.5rem; height: 2.5rem; place-items: center; content: counter(timeline, decimal-leading-zero); color: var(--color-paper); background: var(--color-blue); border-radius: 50%; font-size: var(--text-sm); font-weight: 850; }.timeline h2 { font-size: var(--text-lg); }.timeline p { margin: 0; color: var(--color-ink-soft); }.form-grid { display: grid; gap: var(--space-3); }.form-grid__wide { grid-column: 1 / -1; } select { width: 100%; min-height: 2.75rem; padding: .7rem .8rem; color: var(--color-ink); background: var(--color-paper); border: 1px solid #9cabbc; border-radius: var(--radius-sm); }.consent { grid-template-columns: 1.25rem 1fr; align-items: start; font-size: var(--text-sm); font-weight: 500; }.consent input { min-height: auto; width: 1.1rem; margin-top: .25rem; }.prose { max-width: 48rem; }.prose h2 { margin-top: var(--space-5); font-size: var(--text-lg); }
.site-footer { padding-top: var(--space-7); color: var(--color-paper); background: var(--color-ink); }.site-footer__inner { display: grid; gap: var(--space-5); padding-bottom: var(--space-6); }.site-footer h2 { color: var(--color-paper); font-size: var(--text-base); letter-spacing: 0; }.footer-kicker { margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 800; }.footer-slogan { margin-bottom: var(--space-3); font-size: 1.6rem; font-weight: 900; font-style: italic; line-height: 1; }.footer-slogan span { color: var(--color-orange); }.site-footer address, .site-footer nav { display: grid; gap: var(--space-1); font-style: normal; }.site-footer a { color: var(--color-paper); }.site-footer a:hover { color: #b9dcff; }.site-footer__bottom { padding: var(--space-3) 0; border-top: 1px solid rgb(255 255 255 / .16); color: rgb(255 255 255 / .65); font-size: var(--text-sm); }.site-footer__bottom p { margin: 0; }
.project-image { display: block; overflow: hidden; background: var(--color-mist); }.project-image img { display: block; width: 100%; height: auto; }.project-card__image { aspect-ratio: 4 / 3; }.project-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }.project-card h2 { font-size: clamp(1.65rem, 2.7vw, 2.65rem); overflow-wrap: anywhere; }.project-card__body p { color: var(--color-ink-soft); }.text-link { display: inline-flex; min-height: 2.75rem; align-items: center; margin-top: var(--space-2); color: var(--color-blue-deep); font-weight: 850; text-decoration: none; }.text-link::after { margin-left: .45rem; content: "→"; transition: transform var(--transition); }.text-link:hover::after { transform: translateX(.2rem); }.project-detail { display: grid; gap: var(--space-6); }.project-detail__layout { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); }.project-detail__layout h2 { font-size: var(--text-lg); }.project-detail__actions { display: grid; gap: var(--space-2); justify-items: start; }.comparison-grid { display: grid; gap: var(--space-4); }.comparison-grid__item, .project-feature-image, .project-overview { padding: 0; margin: 0; }.comparison-grid figcaption, .project-feature-image figcaption, .project-overview figcaption { padding: var(--space-2) var(--space-3); color: var(--color-paper); background: var(--color-ink); font-size: var(--text-sm); font-weight: 850; }.comparison-grid .project-image { aspect-ratio: 3 / 4; }.comparison-grid .project-image img { width: 100%; height: 100%; object-fit: cover; }.project-feature-image { width: min(100%, 48rem); }.project-feature-image .project-image, .project-overview .project-image { border: 1px solid var(--color-line); }.project-overview { width: min(100%, 48rem); }.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 48rem) { .site-header__inner { min-height: 5.8rem; }.menu-toggle { display: none; }.primary-navigation { position: static; display: flex; flex: 1; flex-direction: row; justify-content: flex-end; gap: var(--space-3); padding: 0; background: transparent; }.primary-navigation a { min-height: 2.75rem; font-size: var(--text-sm); white-space: nowrap; }.primary-navigation a:not(.button)::after { bottom: .3rem; }.primary-navigation .navigation__home, .primary-navigation .button--mobile { display: none; }.button--header { display: inline-flex; }.hero { min-height: 43rem; grid-template-columns: minmax(0, .9fr) minmax(22rem, .85fr); align-items: center; gap: var(--space-5); }.hero-tools { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(50vw, 45rem); margin: 0; }.hero-tools img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }.section { padding-top: var(--space-8); padding-bottom: var(--space-8); }.card-grid { grid-template-columns: repeat(3, 1fr); }.process-grid { grid-template-columns: repeat(3, 1fr); }.content-layout { grid-template-columns: repeat(2, 1fr); }.form-grid { grid-template-columns: repeat(2, 1fr); }.comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-grid { grid-template-columns: repeat(2, 1fr); }.cta-block { padding: var(--space-6); }.site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 64rem) { .hero__content { padding-left: var(--space-3); }.hero-tools { width: min(50vw, 45rem); }.project-grid { grid-template-columns: repeat(3, 1fr); } }
.check-list--detailed { max-width: 72rem; gap: var(--space-2) var(--space-6); }.check-list--detailed li { break-inside: avoid; line-height: 1.45; }
@media (min-width: 48rem) { .check-list--detailed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.workflow { padding-top: var(--space-6); }.workflow__list { display: grid; gap: var(--space-3); width: min(100%, 68rem); margin: auto; }.workflow-step { overflow: hidden; background: var(--color-paper); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }.workflow-step summary { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 1.2rem; gap: var(--space-2); align-items: center; min-height: 5.25rem; padding: var(--space-3); color: var(--color-ink); cursor: pointer; list-style: none; }.workflow-step summary::-webkit-details-marker { display: none; }.workflow-step summary::after { width: .6rem; height: .6rem; content: ""; border-right: .15rem solid var(--color-purple); border-bottom: .15rem solid var(--color-purple); transform: rotate(45deg) translateY(-.18rem); transition: transform var(--transition); }.workflow-step[open] summary::after { transform: rotate(225deg) translate(-.12rem, -.12rem); }.workflow-step__number { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--color-paper); background: var(--color-blue); border-radius: 50%; font-size: var(--text-sm); font-weight: 850; }.workflow-step__heading { display: grid; gap: .15rem; font-weight: 850; line-height: 1.2; }.workflow-step__summary { color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 500; line-height: 1.45; }.workflow-step__content { padding: 0 var(--space-4) var(--space-4) calc(var(--space-3) + 3.5rem); color: var(--color-ink-soft); }.workflow-step__content p { max-width: 62rem; margin-bottom: var(--space-2); }.workflow-step__content p:last-child { margin-bottom: 0; }.workflow-step__content ul { display: grid; gap: var(--space-1); padding-left: 1.15rem; margin: var(--space-2) 0; }.workflow-step__content li::marker { color: var(--color-orange); }.workflow-step:nth-child(3n + 2) .workflow-step__number { background: var(--color-orange); }.workflow-step:nth-child(3n) .workflow-step__number { background: var(--color-purple); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Homepage hero: sticky photographic layer with a deliberately restrained slide transition. */
.hero-wrapper { position: relative; z-index: 0; }
.hero { position: sticky; z-index: 0; top: 5.8rem; height: clamp(36rem, 78vh, 52rem); min-height: 0; isolation: isolate; display: grid; grid-template-columns: none; align-content: center; overflow: clip; padding: var(--space-6) max(var(--space-3), calc((100vw - var(--content)) / 2)); color: var(--color-paper); background: var(--color-ink); }
.hero-slider, .hero-slider__slide, .hero__overlay { position: absolute; inset: 0; }
.hero-slider { z-index: 0; overflow: hidden; }
.hero-slider__slide { opacity: 0; transform: translateX(3%); transition: opacity 1.2s ease, transform 1.2s ease; }
.hero-slider__slide.is-active { opacity: 1; transform: translateX(0); }
.hero-slider__slide.is-leaving { opacity: 0; transform: translateX(-2.5%); }
.hero-slider__slide.is-entering { opacity: 0; transform: translateX(3%); }
.hero-slider__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(7 25 54 / .92) 0%, rgb(7 25 54 / .77) 37%, rgb(7 25 54 / .38) 68%, rgb(7 25 54 / .16) 100%); }
.hero-tools { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: min(46vw, 45rem); margin: 0; pointer-events: none; }
.hero-tools img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right top; }
.hero__content { position: relative; z-index: 3; width: min(100%, 42rem); }
.hero h1, .hero__company { color: var(--color-paper); }
.hero__lead { color: rgb(255 255 255 / .88); }
.hero .brand-slogan { color: var(--color-paper); }
.hero .brand-slogan__main span { color: #d7b5f0; }
.hero .button { color: var(--color-ink); background: var(--color-paper); border-color: var(--color-paper); }
.hero .button:hover { color: var(--color-paper); background: var(--color-blue); border-color: var(--color-blue); }
.hero .button--secondary { color: var(--color-paper); background: transparent; border-color: rgb(255 255 255 / .72); }
.hero .button--secondary:hover { color: var(--color-ink); background: var(--color-paper); border-color: var(--color-paper); }
.home-content { position: relative; z-index: 1; background: var(--color-paper); box-shadow: 0 -1rem 2.5rem rgb(7 25 54 / .15); }
@media (min-width: 64rem) { .hero-tools { width: min(55vw, 52rem); } }
@media (max-width: 47.99rem) { .hero { position: relative; top: auto; min-height: clamp(34rem, 82svh, 43rem); height: auto; }.hero__overlay { background: linear-gradient(90deg, rgb(7 25 54 / .91) 0%, rgb(7 25 54 / .72) 68%, rgb(7 25 54 / .4) 100%); }.hero-tools { top: 0; right: -.75rem; bottom: auto; width: 8rem; height: auto; }.hero-tools img { height: auto; } }

.process-grid { counter-reset: none; }
.process-step { counter-increment: none; }
.process-step::before { display: none; }
.process-step__number { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; margin-bottom: var(--space-4); color: var(--color-paper) !important; background: var(--color-blue); border-radius: 50%; font-size: var(--text-sm); font-weight: 850; line-height: 1; }
.process-step:nth-child(3n + 2) .process-step__number { background: var(--color-orange); }
.process-step:nth-child(3n) .process-step__number { background: var(--color-purple); }
@media (min-width: 64rem) { .process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.service-hero { position: relative; isolation: isolate; display: grid; min-height: clamp(22rem, 64svh, 26rem); align-items: end; overflow: clip; padding: var(--space-5) max(var(--space-3), calc((100vw - var(--content)) / 2)); color: var(--color-paper); background: transparent; }
.service-hero__media, .service-hero::before { position: absolute; inset: 0; }
.service-hero__media { z-index: 0; background: var(--color-ink); }
.service-hero::before { z-index: 1; content: ""; pointer-events: none; background: linear-gradient(90deg, rgb(7 25 54 / .9) 0%, rgb(7 25 54 / .72) 40%, rgb(7 25 54 / .34) 69%, rgb(7 25 54 / .1) 100%); }
.service-hero__image { position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.service-hero__image--right { object-position: 70% center; }
.service-hero__content { position: relative; z-index: 2; width: min(100%, 46rem); }
.service-hero .eyebrow { color: rgb(255 255 255 / .82); }
.service-hero h1 { max-width: 16ch; margin-bottom: var(--space-3); color: var(--color-paper); font-size: var(--text-xl); }
.service-hero__content > p:last-child { max-width: 42rem; margin: 0; color: rgb(255 255 255 / .88); font-size: var(--text-lg); }
@media (min-width: 48rem) { .service-hero { min-height: clamp(23.75rem, 34vw, 31.25rem); align-items: center; padding-top: var(--space-6); padding-bottom: var(--space-6); } }

/* Nixsecure component colour system: white remains the canvas, blue leads the UI. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline-color: var(--color-brand-blue);
}

.button {
  color: var(--color-paper);
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
}

.button:hover {
  color: var(--color-paper);
  background: var(--color-brand-blue-hover);
  border-color: var(--color-brand-blue-hover);
}

.button--secondary,
.button--secondary:hover {
  color: var(--color-ink);
  background: transparent;
  border-color: var(--color-ink);
}

.button--secondary:hover {
  background: var(--color-mist);
}

.primary-navigation a:not(.button):hover,
.primary-navigation a:not(.button):focus-visible,
.primary-navigation a[aria-current="page"] {
  color: var(--color-brand-blue);
}

.eyebrow {
  color: var(--color-brand-blue);
}

.eyebrow::after {
  background: var(--color-brand-orange);
}

.section-header h2::after,
.service-groups > div > h2::after {
  display: block;
  width: 2.5rem;
  height: .2rem;
  margin-top: var(--space-2);
  content: "";
  background: var(--color-brand-blue);
  border-radius: 999px;
}

.service-groups > div:nth-child(3n + 2) > h2::after { background: var(--color-brand-orange); }
.service-groups > div:nth-child(3n) > h2::after { background: var(--color-brand-purple); }

.breadcrumb a {
  color: var(--color-brand-blue);
  font-weight: 750;
}

.breadcrumb a:hover {
  color: var(--color-brand-blue-hover);
}

.text-link {
  color: var(--color-brand-blue);
  text-decoration: underline;
  text-decoration-color: var(--color-brand-orange);
  text-decoration-thickness: .12em;
  text-underline-offset: .22em;
}

.text-link:hover {
  color: var(--color-brand-blue-hover);
  text-decoration-color: currentColor;
}

.service-card,
.project-card,
.testimonial-card,
.process-step,
.workflow-step,
.timeline li {
  border-top: .22rem solid var(--card-accent, var(--color-brand-blue));
}

.service-card,
.project-card,
.testimonial-card,
.process-step {
  --card-accent: var(--color-brand-blue);
}

.card-grid > :nth-child(3n + 2) { --card-accent: var(--color-brand-orange); }
.card-grid > :nth-child(3n) { --card-accent: var(--color-brand-purple); }

a.service-card {
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

a.service-card:hover,
a.service-card:focus-visible {
  color: var(--color-ink);
  border-color: var(--card-accent);
  box-shadow: 0 .7rem 1.8rem rgb(7 25 54 / .13);
  transform: translateY(-.18rem);
}

a.service-card:hover h3,
a.service-card:focus-visible h3 {
  color: var(--color-brand-blue);
}

.service-card__number {
  color: var(--card-accent, var(--color-brand-purple));
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 2.1rem;
  margin-top: auto;
  color: var(--color-brand-blue);
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: var(--card-accent, var(--color-brand-orange));
  text-decoration-thickness: .12em;
  text-underline-offset: .22em;
}

a.service-card:hover .service-card__link,
a.service-card:focus-visible .service-card__link {
  color: var(--color-brand-blue-hover);
}

a.project-card {
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

a.project-card:hover,
a.project-card:focus-visible {
  color: var(--color-ink);
  border-color: var(--card-accent);
  box-shadow: 0 .7rem 1.8rem rgb(7 25 54 / .13);
  transform: translateY(-.18rem);
}

.project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.project-card__link { margin-top: auto; }

a.project-card:hover h2,
a.project-card:focus-visible h2,
a.project-card:hover h3,
a.project-card:focus-visible h3,
a.project-card:hover .project-card__link,
a.project-card:focus-visible .project-card__link {
  color: var(--color-brand-blue);
}

.project-card .text-link { text-decoration-color: var(--card-accent, var(--color-brand-orange)); }
.check-list li::before { color: var(--color-brand-blue); }
.faq-list summary::after { color: var(--color-brand-purple); }
.timeline li::before { background: var(--color-brand-blue); }
.timeline li:nth-child(3n + 2)::before { background: var(--color-brand-orange); }
.timeline li:nth-child(3n)::before { background: var(--color-brand-purple); }

input, textarea, select { border-color: var(--color-field-border); }
input:focus, textarea:focus, select:focus { border-color: var(--color-brand-blue); }

.cta-block .button {
  color: var(--color-paper);
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
}

.cta-block .button:hover {
  color: var(--color-paper);
  background: var(--color-brand-blue-hover);
  border-color: var(--color-brand-blue-hover);
}

.cta-block::after {
  content: none;
}

.cta-block::before {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 3.25rem;
  height: .22rem;
  content: "";
  pointer-events: none;
  background: var(--color-brand-blue);
  border-radius: var(--radius-pill);
  box-shadow: 0 .55rem 0 var(--color-brand-orange), 0 1.1rem 0 var(--color-brand-purple);
  transform: skewX(-14deg);
}

.cta-block > * {
  position: relative;
  z-index: 1;
}

.cta-block {
  color: var(--color-ink);
  background: var(--color-mist);
  border: 1px solid var(--color-line);
  box-shadow: none;
}

.cta-block h2 {
  color: var(--color-ink);
}

.cta-block p {
  color: var(--color-ink-soft);
}

.cta-block .eyebrow {
  color: var(--color-brand-blue);
}

@media (max-width: 47.99rem) {
  .site-header {
    z-index: var(--z-navigation);
  }

  .site-header__inner {
    position: relative;
    z-index: 1;
  }

  .brand,
  .menu-toggle {
    position: relative;
    z-index: var(--z-menu-controls);
  }

  .primary-navigation {
    z-index: var(--z-menu-overlay);
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    width: min(60vw, 17.5rem);
    min-height: 0;
    max-height: 100dvh;
    padding: calc(4.7rem + var(--space-4)) var(--space-4) var(--space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgb(7 25 54 / .92);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-lg);
  }

  body.menu-open .site-header__inner {
    width: min(60vw, 17.5rem);
    margin-right: 0;
    margin-left: auto;
    padding-left: var(--space-4);
  }

  body.menu-open .brand,
  body.menu-open .brand:hover {
    color: var(--color-paper);
  }

  body.menu-open .menu-toggle {
    color: var(--color-paper);
    background: rgb(255 255 255 / .14);
  }

  body.menu-open .menu-toggle:hover {
    background: rgb(255 255 255 / .22);
  }

  .primary-navigation a:not(.button),
  .primary-navigation a:not(.button):hover,
  .primary-navigation a:not(.button):focus-visible,
  .primary-navigation a[aria-current="page"] {
    color: var(--color-paper);
  }

  .primary-navigation a:not(.button)::after {
    background: var(--color-brand-orange);
  }

  .primary-navigation .button--mobile {
    color: var(--color-paper);
    background: var(--color-brand-blue);
    border-color: var(--color-brand-blue);
  }

  .primary-navigation .button--mobile:hover {
    background: var(--color-brand-blue-hover);
    border-color: var(--color-brand-blue-hover);
  }

  .menu-backdrop.is-open {
    position: fixed;
    z-index: calc(var(--z-menu-overlay) - 1);
    inset: 0;
    display: block;
    width: 100%;
    min-height: 100dvh;
    padding: 0;
    background: rgb(7 25 54 / .52);
    border: 0;
  }

  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }
}

.hero .button {
  color: var(--color-paper);
  background: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
}

.hero .button:hover {
  color: var(--color-paper);
  background: var(--color-brand-blue-hover);
  border-color: var(--color-brand-blue-hover);
}

.hero .button--secondary,
.hero .button--secondary:hover {
  color: var(--color-paper);
  background: transparent;
  border-color: rgb(255 255 255 / .72);
}

.hero .button--secondary:hover { background: rgb(255 255 255 / .14); }
.hero .brand-slogan__main span { color: var(--color-hero-purple); }

.feedback-note {
  width: min(100%, 68rem);
  margin: 0 auto var(--space-5);
  padding: var(--space-5);
  background: var(--color-paper);
  border-top: .22rem solid var(--color-brand-blue);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.feedback-note h2::after {
  display: block;
  width: 2.5rem;
  height: .2rem;
  margin-top: var(--space-2);
  content: "";
  background: var(--color-brand-orange);
  border-radius: 999px;
}

.feedback-note p { max-width: 56rem; color: var(--color-ink-soft); }
.feedback-note p:last-child { margin-bottom: 0; }

.phone-reveal {
  min-height: 2.9rem;
  padding: .65rem 1rem;
  color: var(--color-paper);
  font: inherit;
  font-weight: 700;
  background: var(--color-brand-blue);
  border: .12rem solid var(--color-brand-blue);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.phone-reveal:hover { background: var(--color-brand-blue-hover); border-color: var(--color-brand-blue-hover); }
.phone-reveal__link { display: inline-flex; align-items: center; min-height: 2.9rem; font-weight: 700; }

.company-details { display: grid; gap: .8rem; margin: 0; }
.company-details > div { display: grid; gap: .15rem; padding-bottom: .7rem; border-bottom: 1px solid var(--color-line); }
.company-details dt { color: var(--color-brand-blue); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.company-details dd { margin: 0; font-weight: 650; }
.form--contact { max-width: 65rem; }
.form-intro { max-width: 65rem; margin-bottom: var(--space-5); }
.form-intro h2::after { display: block; width: 2.5rem; height: .2rem; margin-top: var(--space-2); content: ""; background: var(--color-brand-orange); border-radius: 999px; }
.form-intro p { max-width: 62rem; margin-bottom: 0; color: var(--color-ink-soft); }
.privacy-document { width: min(100%, 58rem); color: var(--color-ink-soft); }
.privacy-document h2 { margin-top: var(--space-6); color: var(--color-brand-blue); font-size: var(--text-lg); }
.privacy-document h2::after { display: block; width: 2.5rem; height: .2rem; margin-top: var(--space-2); content: ""; background: var(--color-brand-orange); border-radius: 999px; }
.privacy-document h3 { margin-top: var(--space-5); color: var(--color-ink); font-size: var(--text-base); }
.privacy-document p, .privacy-document ul { max-width: none; }
.privacy-document ul { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.privacy-document li + li { margin-top: .35rem; }
.privacy-document li::marker { color: var(--color-brand-blue); }
.privacy-document__updated { margin-top: var(--space-5); color: var(--color-ink); font-weight: 700; }
.terms-document { width: min(100%, 58rem); color: var(--color-ink-soft); }
.terms-document h2 { margin-top: var(--space-6); color: var(--color-brand-blue); font-size: var(--text-lg); }
.terms-document h2::after { display: block; width: 2.5rem; height: .2rem; margin-top: var(--space-2); content: ""; background: var(--color-brand-orange); border-radius: 999px; }
.terms-document p, .terms-document ul { max-width: none; }
.terms-document ul { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.terms-document li + li { margin-top: .35rem; }
.terms-document li::marker { color: var(--color-brand-blue); }
.terms-document__company { color: var(--color-ink); font-size: var(--text-lg); font-weight: 800; }
.terms-document__question { margin-top: var(--space-5); color: var(--color-ink); font-weight: 650; }
.field-error { margin: .35rem 0 0; color: #b42318; font-size: var(--text-sm); font-weight: 700; }
.input-invalid { border-color: #b42318 !important; }
.consent .field-error { grid-column: 1 / -1; }
.form-feedback { padding: .8rem 1rem; margin: 0; border-radius: var(--radius-sm); font-weight: 700; }
.form-feedback-error { color: #8f1d13; background: #fff0ee; border-left: .25rem solid #b42318; }
.form--contact .consent { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; column-gap: .65rem; row-gap: .35rem; }
.form--contact .consent label { display: block; line-height: 1.5; }
.form--contact .consent input { margin-top: .2rem; }
.form--contact .consent .field-error { margin: 0; text-align: left; }
.form--contact .button { color: var(--color-paper); background: var(--color-brand-blue); border-color: var(--color-brand-blue); }
.form--contact .button:hover { color: var(--color-paper); background: var(--color-brand-blue-hover); border-color: var(--color-brand-blue-hover); }
.upload-field { display: grid; gap: .55rem; }
.upload-field__heading { display: flex; align-items: baseline; gap: .55rem; }
.upload-field__optional, .upload-field__help { color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 500; }
.upload-field__input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.upload-field__button { width: fit-content; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: .72rem 1.1rem; color: var(--color-paper); background: var(--color-brand-blue); border: 1px solid var(--color-brand-blue); border-radius: 999px; cursor: pointer; font-weight: 800; line-height: 1.1; }
.upload-field__button:hover { color: var(--color-paper); background: var(--color-brand-blue-hover); border-color: var(--color-brand-blue-hover); }
.upload-field:focus-within .upload-field__button { outline: .2rem solid var(--color-orange); outline-offset: .25rem; }
.upload-field__status { color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 650; }