/* ==========================================================================
   Division23 — design system

   The values below are carried over from the previous WordPress theme so the
   rebuild keeps the same look: Urbanist for headings, DM Sans for body copy,
   #4a81d3 as the primary blue, and the blue-to-indigo gradient the theme used
   for its accents.
   ========================================================================== */

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/Urbanist.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  /* Brand ---------------------------------------------------------------- */
  --primary: #4a81d3;
  --primary-dark: #3968ad;
  --gradient: linear-gradient(135deg, #4a81d3 0%, #514a9d 100%);

  /* Ink and surfaces ----------------------------------------------------- */
  --ink: #111013;
  --ink-secondary: #797a8c;
  --ink-tertiary: #9a9bab;
  --bg: #ffffff;
  --bg-inset: #f5f6f8;
  --bg-dark: #0b1020;
  --rule: #e6e8ee;
  --rule-strong: #cdd1dc;
  --white: #ffffff;

  /* Type ----------------------------------------------------------------- */
  --family-heading: "Urbanist", "Helvetica Neue", Arial, sans-serif;
  --family-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --text-14: 1.4rem;
  --text-16: 1.6rem;
  --text-17: 1.7rem;
  --text-18: 1.8rem;

  /* Spacing — a 4px scale, named by pixel value at the 10px root ---------- */
  --space-4: 0.4rem;
  --space-8: 0.8rem;
  --space-12: 1.2rem;
  --space-16: 1.6rem;
  --space-20: 2rem;
  --space-24: 2.4rem;
  --space-32: 3.2rem;
  --space-40: 4rem;
  --space-56: 5.6rem;
  --space-80: 8rem;

  --radius: 10px;
  --radius-lg: 20px;
  --header-h: 8rem;

  --dur: 0.28s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  /* 10px root keeps the rem scale readable; browser text-size settings still
     scale it, unlike a px-based scale. */
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--family-body);
  font-size: var(--text-17);
  line-height: 1.7;
  color: var(--ink-secondary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--family-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--space-12) var(--space-20);
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

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

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: min(100% - var(--space-40), 126rem);
  margin-inline: auto;
}

.container-narrow {
  width: min(100% - var(--space-40), 82rem);
  margin-inline: auto;
}

.section {
  padding-block: clamp(6.4rem, 9vw, 11rem);
}

.section--inset {
  background: var(--bg-inset);
}

.section--dark {
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.72);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--white);
}

/* ==========================================================================
   Type scale
   ========================================================================== */

.h-hero {
  font-size: clamp(3.6rem, 5.4vw, 6rem);
  line-height: 1.08;
}

.h-section {
  font-size: clamp(2.8rem, 3.6vw, 4.2rem);
  text-wrap: balance;
}

.h-card {
  font-size: clamp(2rem, 2.2vw, 2.4rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--family-body);
  font-size: var(--text-14);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}

.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 2px;
  background: var(--gradient);
  border-radius: 2px;
}

.lede {
  font-size: clamp(1.7rem, 1.9vw, 2rem);
  line-height: 1.65;
}

.muted {
  color: var(--ink-secondary);
}

.section-head {
  display: grid;
  gap: var(--space-16);
  margin-bottom: clamp(4rem, 5vw, 6.4rem);
  max-width: 76rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--primary);
  --btn-ink: var(--white);
  --btn-rule: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  padding: 1.4rem var(--space-32);
  border: 1px solid var(--btn-rule);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--family-heading);
  font-size: var(--text-16);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:hover {
  --btn-bg: var(--primary-dark);
  --btn-rule: var(--primary-dark);
  transform: translateY(-2px);
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-rule: var(--rule-strong);
}

.btn-ghost:hover {
  --btn-bg: transparent;
  --btn-ink: var(--primary);
  --btn-rule: var(--primary);
}

.section--dark .btn-ghost {
  --btn-ink: var(--white);
  --btn-rule: rgba(255, 255, 255, 0.3);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--family-heading);
  font-weight: 600;
  color: var(--primary);
  transition: gap var(--dur) var(--ease);
}

.link-arrow:hover {
  gap: var(--space-16);
}

/* ==========================================================================
   Header
   ========================================================================== */

.topbar {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-14);
  color: var(--ink-secondary);
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.masthead-inner {
  display: flex;
  align-items: center;
  gap: var(--space-32);
  min-height: var(--header-h);
}

.logo img {
  height: 2.6rem;
  width: auto;
}

.main-nav {
  display: none;
  margin-left: auto;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.main-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-12);
  font-family: var(--family-heading);
  font-size: var(--text-17);
  font-weight: 500;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--primary);
}

.main-nav li {
  position: relative;
}

/* The current section keeps its ink colour and is marked by a gradient rule. */
.main-nav > ul > li > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 1.6rem;
  bottom: 0.6rem;
  height: 2px;
  background: var(--gradient);
  border-radius: 2px;
}

.submenu {
  position: absolute;
  top: 100%;
  left: -1.6rem;
  min-width: 20rem;
  padding: var(--space-8);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(17, 16, 19, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility var(--dur);
}

.has-children:hover .submenu,
.has-children:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu a {
  display: block;
  padding: var(--space-8) var(--space-16);
  border-radius: 6px;
  font-size: var(--text-16);
}

.submenu a:hover {
  background: var(--bg-inset);
}

.masthead-cta {
  display: none;
}

.nav-toggle {
  display: grid;
  gap: 5px;
  margin-left: auto;
  padding: var(--space-12);
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
  border-top: 1px solid var(--rule);
  padding: var(--space-16) 0 var(--space-32);
}

.mobile-nav ul {
  width: min(100% - var(--space-40), 126rem);
  margin-inline: auto;
}

.mobile-nav a {
  display: block;
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--family-heading);
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink);
}

.mobile-nav .is-child a {
  padding-left: var(--space-20);
  font-size: var(--text-17);
  font-weight: 500;
  color: var(--ink-secondary);
}

@media (min-width: 992px) {
  .main-nav,
  .masthead-cta {
    display: block;
  }

  .main-nav {
    margin-left: auto;
  }

  .masthead-cta {
    display: inline-flex;
  }

  .nav-toggle,
  .mobile-nav {
    display: none !important;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding-block: clamp(5.6rem, 7vw, 8rem) var(--space-40);
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.66);
}

.footer-grid {
  display: grid;
  gap: var(--space-40);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: var(--space-56);
  }
}

.footer-brand img {
  width: 6rem;
  height: auto;
  margin-bottom: var(--space-20);
}

.footer-brand p + p {
  margin-top: var(--space-12);
}

.footer-brand .muted:first-of-type {
  font-family: var(--family-heading);
  font-size: var(--text-18);
  font-weight: 600;
  color: var(--white);
}

.site-footer h2 {
  margin-bottom: var(--space-20);
  font-size: var(--text-18);
  color: var(--white);
}

.footer-col li + li {
  margin-top: var(--space-12);
}

.footer-col a {
  font-size: var(--text-16);
  transition: color var(--dur) var(--ease);
}

.footer-col a:hover {
  color: var(--white);
}

.site-footer address {
  font-style: normal;
  font-size: var(--text-16);
  line-height: 1.8;
}

.footer-base {
  margin-top: clamp(4rem, 5vw, 5.6rem);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--text-14);
}

/* ==========================================================================
   Scroll reveal

   Driven entirely by CSS. An earlier version set opacity:0 from JavaScript and
   restored it through an IntersectionObserver — which meant that any hiccup in
   the script left whole sections invisible, exactly the failure the old site
   shipped on its service pages.

   With a scroll-driven animation there is no such state: where the browser
   supports it the section fades in, and where it does not the content is
   simply there. Nothing can leave it hidden.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    @keyframes reveal-in {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--space-24);
}

@media (min-width: 700px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-32);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.card:hover {
  border-color: transparent;
  box-shadow: 0 20px 46px rgba(17, 16, 19, 0.1);
  transform: translateY(-4px);
}

.card-icon {
  width: 5.6rem;
  height: 5.6rem;
  object-fit: contain;
}

.card-num {
  font-family: var(--family-heading);
  font-size: var(--text-14);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: transparent;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.card p {
  font-size: var(--text-16);
}

.card .link-arrow {
  margin-top: auto;
  padding-top: var(--space-8);
}

/* Image card, used for the project grid -------------------------------- */
.card-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-inset);
}

.card-media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.card-media:hover img {
  transform: scale(1.05);
}

.card-media figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-32) var(--space-24) var(--space-24);
  background: linear-gradient(to top, rgba(11, 16, 32, 0.92), transparent);
  color: var(--white);
}

.card-media figcaption span {
  display: block;
  font-family: var(--family-heading);
  font-size: var(--text-18);
  font-weight: 600;
}

/* ==========================================================================
   Interior page header
   ========================================================================== */

.page-head {
  padding-block: clamp(5.6rem, 8vw, 9rem);
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.7);
  background-image: var(--gradient);
}

.page-head h1 {
  color: var(--white);
  font-size: clamp(3.2rem, 4.6vw, 5rem);
}

.page-head .lede {
  margin-top: var(--space-20);
  color: rgba(255, 255, 255, 0.82);
  max-width: 68rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-20);
  font-size: var(--text-14);
  color: rgba(255, 255, 255, 0.72);
}

.breadcrumb a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* ==========================================================================
   Long-form copy
   ========================================================================== */

.prose > * + * {
  margin-top: var(--space-24);
}

.prose h2 {
  margin-top: clamp(4rem, 5vw, 5.6rem);
  font-size: clamp(2.4rem, 3vw, 3.2rem);
}

.prose h3 {
  margin-top: var(--space-40);
  font-size: var(--text-18);
}

.prose h2 + *,
.prose h3 + * {
  margin-top: var(--space-16);
}

.tick-list {
  display: grid;
  gap: var(--space-16);
}

.tick-list li {
  position: relative;
  padding-left: 3.4rem;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--gradient);
  /* A tick, drawn as a mask so it inherits the gradient. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Numbered list, used for the challenges and solutions on a project ----- */
.step-list {
  display: grid;
  gap: var(--space-20);
  counter-reset: step;
}

.step-list li {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: var(--space-16);
  align-items: start;
  counter-increment: step;
}

.step-list li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--family-heading);
  font-size: var(--text-14);
  font-weight: 700;
  color: transparent;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  padding-top: 0.35em;
}

/* ==========================================================================
   Split layout
   ========================================================================== */

.split {
  display: grid;
  gap: var(--space-40);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: clamp(4rem, 6vw, 8rem);
  }
}

.split img {
  border-radius: var(--radius-lg);
}

.split p + p {
  margin-top: var(--space-16);
}

/* ==========================================================================
   Statistics
   ========================================================================== */

.stats {
  display: grid;
  gap: var(--space-32);
}

@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}

.stat-value {
  font-family: var(--family-heading);
  font-size: clamp(3.2rem, 4.4vw, 4.8rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.stat-label {
  margin-top: var(--space-8);
  font-size: var(--text-16);
}

/* ==========================================================================
   Service detail layout
   ========================================================================== */

.service-layout {
  display: grid;
  gap: var(--space-40);
}

@media (min-width: 1000px) {
  .service-layout {
    grid-template-columns: 26rem 1fr 1fr;
    gap: clamp(3.2rem, 4vw, 5.6rem);
    align-items: start;
  }
}

.service-rail ul {
  display: grid;
  gap: var(--space-12);
}

.service-rail a {
  display: block;
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius);
  background: var(--bg-inset);
  font-family: var(--family-heading);
  font-size: var(--text-17);
  font-weight: 600;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.service-rail a:hover {
  background: var(--rule);
}

.service-rail a.is-current {
  background: var(--gradient);
  color: var(--white);
}

.service-figure {
  margin: 0;
}

.service-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   Home hero

   Dark, full-bleed, the way the previous site had it: the background photo
   spans the whole section with the copy in white on top of it.
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(5.6rem, 8vw, 9rem) clamp(4rem, 6vw, 6.4rem);
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.76);
  overflow: hidden;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The backdrop photo is texture, not subject: it is held down to near-black so
   the padlock artwork and the headline are what the eye lands on. Only the top
   right corner is left open, where the lattice pattern gives the section some
   depth. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(65% 65% at 100% 0%, rgba(6, 10, 24, 0.42) 0%, rgba(6, 10, 24, 0.88) 72%),
    linear-gradient(95deg, rgba(6, 10, 24, 0.96) 0%, rgba(6, 10, 24, 0.86) 46%, rgba(6, 10, 24, 0.7) 100%);
}

.hero h1,
.hero .stat-label {
  color: var(--white);
}

.hero .eyebrow {
  color: #8fb4e8;
}

.hero-inner {
  display: grid;
  gap: var(--space-40);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(4rem, 6vw, 8rem);
  }
}

.hero-copy .eyebrow {
  margin-bottom: var(--space-20);
}

.hero-copy .lede {
  margin-top: var(--space-24);
  max-width: 56rem;
  color: rgba(255, 255, 255, 0.8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

.hero .btn-ghost {
  --btn-ink: var(--white);
  --btn-rule: rgba(255, 255, 255, 0.34);
}

.hero .btn-ghost:hover {
  --btn-ink: var(--white);
  --btn-rule: var(--white);
}

.hero-figure {
  position: relative;
  margin: 0;
}

.hero-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
}

/* The floating figure the old site placed over the artwork. */
.hero-stat-card {
  position: absolute;
  right: 0;
  bottom: var(--space-32);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-20) var(--space-24);
  background: rgba(11, 16, 32, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
}

.hero-stat-value {
  font-family: var(--family-heading);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}

.hero-stat-label {
  font-size: var(--text-14);
  color: rgba(255, 255, 255, 0.72);
}

.hero-stats {
  margin-top: clamp(4rem, 6vw, 7rem);
  padding-top: var(--space-40);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-stats dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 899px) {
  /* The crop is much tighter here, so the scrim covers the whole frame. */
  .hero::after {
    background: linear-gradient(180deg, rgba(6, 10, 24, 0.88) 0%, rgba(6, 10, 24, 0.72) 55%, rgba(6, 10, 24, 0.9) 100%);
  }

  .hero-stat-card {
    right: var(--space-16);
    bottom: var(--space-16);
    padding: var(--space-16);
  }

  .hero-stat-value {
    font-size: 2.4rem;
  }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-layout {
  display: grid;
  gap: var(--space-40);
}

@media (min-width: 900px) {
  .form-layout {
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(4rem, 6vw, 7rem);
    align-items: start;
  }
}

.form-aside {
  padding: var(--space-32);
  background: var(--bg-inset);
  border-radius: var(--radius-lg);
}

.form-aside address {
  margin-top: var(--space-16);
  font-style: normal;
  line-height: 1.8;
}

.field {
  margin-bottom: var(--space-24);
}

.field-row {
  display: grid;
  gap: 0 var(--space-24);
}

@media (min-width: 620px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  display: block;
  margin-bottom: var(--space-8);
  font-family: var(--family-heading);
  font-size: var(--text-16);
  font-weight: 600;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 1.3rem var(--space-16);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--text-16);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74, 129, 211, 0.16);
}

.field textarea {
  resize: vertical;
  min-height: 12rem;
}

.field [aria-invalid="true"] {
  border-color: #c8384c;
}

.field-msg {
  margin-top: var(--space-8);
  font-size: var(--text-14);
  color: #c8384c;
}

.field-check label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  font-family: var(--family-body);
  font-weight: 400;
  font-size: var(--text-16);
  color: var(--ink-secondary);
}

.field-check input {
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  margin-top: 0.3rem;
  accent-color: var(--primary);
}

.field-check a {
  color: var(--primary);
  text-decoration: underline;
}

/* The honeypot is positioned out of view rather than display:none, because
   some bots skip fields that are not rendered at all. Without this rule it
   shows up as a visible "leave this field empty" input — so it is covered by
   the layout test in tools/check.php. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  padding: var(--space-20) var(--space-24);
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: var(--space-32);
}

.alert-success {
  border-color: #b7e0c4;
  background: #eefaf1;
  color: #1d6b38;
}

.alert-error {
  border-color: #f0c2c9;
  background: #fdeff1;
  color: #a32a3c;
}

/* Copy column on a service detail page. */
.service-body .lede {
  color: var(--ink-secondary);
}

.service-body h2 {
  font-size: clamp(2.2rem, 2.6vw, 2.8rem);
}

/* Service card with artwork ------------------------------------------- */
.card--service {
  padding: 0;
  overflow: hidden;
}

.card--service > *:not(.card-figure) {
  margin-inline: var(--space-32);
}

.card--service > .card-figure + * {
  margin-top: var(--space-24);
}

.card--service > .link-arrow {
  margin-bottom: var(--space-32);
}

.card-figure {
  position: relative;
  margin: 0;
  background: var(--bg-inset);
}

.card-figure > img:first-child {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.card--service:hover .card-figure > img:first-child {
  transform: scale(1.04);
}

/* The icon sits on the artwork, on a light plate so it reads over any photo. */
.card-figure .card-icon {
  position: absolute;
  left: var(--space-24);
  bottom: 0;
  transform: translateY(50%);
  width: 6.4rem;
  height: 6.4rem;
  padding: var(--space-12);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(17, 16, 19, 0.12);
}

.card--service .card-num {
  display: block;
  margin-top: var(--space-40);
}