/* ==========================================================================
   components.css — Reusable component styles
   Header, navbar, footer, buttons, cards, forms, accordions, etc.
   ========================================================================== */

/* Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 2rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.75;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.btn--sm {
  padding: 0.75rem 2rem;
}

.btn--lg {
  padding: 1rem 4.5rem;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-ink);
}

.btn--light {
  background: var(--color-ink);
  color: var(--color-on-light);
}

.btn--primary:hover {
  background: var(--color-ink);
  color: var(--color-on-light);
}

.btn--light:hover {
  background: var(--color-accent);
  color: var(--color-ink);
}

/* Buttons are text only: the arrow icons in the markup are hidden */
.btn__icon {
  display: none;
}

/* Arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--ease-out);
}

.link-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover {
  background-size: 100% 1px;
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

.link-arrow--on-dark {
  color: var(--color-on-dark);
}

/* Skip link
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-on-light);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top var(--dur-fast) ease;
}

.skip-link:focus {
  top: var(--space-3);
}

/* Header
   ========================================================================== */
/* Fixed over the page: transparent at the top, black once scrolled
   (.is-scrolled is set by navigation.js) or while a menu is open. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
}

/* Background lives on a pseudo-element: a background or filter on the header itself
   would trap the fixed-position mobile menu inside the header box. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-bg);
  opacity: 0;
  transition: opacity var(--dur) ease;
}

.site-header.is-scrolled::before,
.site-header.has-open-dropdown::before,
html.nav-open .site-header::before {
  opacity: 1;
}

/* Logo | centred menu | button. The outer columns share the leftover space equally,
   so the menu sits in the true centre of the bar. */
.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  height: 100%;
}

.site-header__inner > .site-logo {
  justify-self: start;
}

.site-header__cta {
  justify-self: end;
}

/* Logo */
/* Logo symbol + wordmark. The symbol scales with the wordmark's font size. */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.site-logo__img {
  width: auto;
  height: 1.15em;
  transition: transform var(--dur) var(--ease-out);
}

.site-logo:hover .site-logo__img {
  transform: rotate(-8deg);
}

/* Navbar
   ========================================================================== */
.navbar {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.nav-toggle {
  display: none;
}

.nav-menu,
.nav-list {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-list {
  gap: var(--space-6);
}

.nav-item {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  position: relative;
  gap: 0.375rem;
  padding: var(--space-1) 6px var(--space-1) 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.75;
  text-transform: uppercase;
  color: var(--color-ink);
  transition: color var(--dur-fast) ease;
}

.nav-link:hover,
.has-dropdown.is-open > .nav-link {
  color: var(--color-accent);
}

/* Active page: small dot top-right of the label */
.nav-link.is-active::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.nav-link__chevron {
  width: 12px;
  height: 12px;
  transition: transform var(--dur) var(--ease-out);
}

.has-dropdown.is-open .nav-link__chevron {
  transform: rotate(180deg);
}

.nav-menu__footer {
  display: none;
}

/* Dropdowns (desktop) */
.has-dropdown {
  position: relative;
}

/* The mega menu positions against the header container, not its trigger */
.has-dropdown--mega {
  position: static;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}

.dropdown--mega {
  left: var(--gutter);
  right: var(--gutter);
}

.has-dropdown.is-open > .dropdown {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease-out), visibility 0s;
}

.dropdown__panel {
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.dropdown-list a {
  display: block;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.dropdown-list a:hover,
.dropdown-list a[aria-current="page"] {
  color: var(--color-ink);
  background: var(--color-bg);
}

/* Mega menu */
.dropdown--mega .dropdown__panel {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.mega-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mega-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

.mega-link {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.875rem var(--space-4);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) ease;
}

.mega-link:hover,
.mega-link[aria-current="page"] {
  background: var(--color-bg);
}

.mega-link__title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.mega-link__desc {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.mega-main__all {
  align-self: flex-start;
  margin: 0 0 var(--space-2) var(--space-4);
}

.mega-feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-dark);
  color: var(--color-on-dark);
}

.mega-feature__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Mobile menu toggle */
.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 10px;
}

.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out);
}

.nav-toggle__bars span:first-child {
  top: 0;
}

.nav-toggle__bars span:last-child {
  top: calc(100% - 1.5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span {
  top: calc(50% - 0.75px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child {
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child {
  transform: rotate(-45deg);
}


/* Footer
   ========================================================================== */
.site-footer {
  padding-block: 6.25rem 1.875rem;
  background: var(--color-dark);
  color: var(--color-on-dark);
}

.site-footer a {
  transition: color var(--dur-fast) ease;
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16) clamp(4rem, 14vw, 17.5rem);
}

.footer-logo {
  font-size: 2rem;
}

.footer-about {
  max-width: 44ch;
  margin-top: var(--space-5);
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
}

.footer-pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-8);
  font-size: var(--fs-base);
  line-height: 1.75;
  text-transform: uppercase;
}

.footer-info {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10) clamp(2rem, 6vw, 6.25rem);
  max-width: 482px;
}

.footer-info__col,
.footer-info__group {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-6);
}

.footer-info__col {
  gap: var(--space-12);
}

.footer-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.04em;
}

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

.footer-info a {
  color: var(--color-ink-soft);
}

.footer-address {
  font-size: var(--fs-base);
  line-height: 1.75;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.footer-pages a:hover,
.footer-info a:hover,
.footer-legal a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-top: clamp(4rem, 3rem + 4vw, 8.75rem);
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  text-transform: uppercase;
}

.footer-legal li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.footer-legal li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-surface);
}

/* Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* Fills the screen; content is centred in the space below the fixed header */
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--space-10)) var(--space-10);
}

/* Glow drawn in CSS so it stays sharp at any size: peach top-right, red centre,
   plum top-left, fading to black at the bottom. Shared with inner-page heroes. */
.hero,
.page-hero {
  background:
    linear-gradient(to bottom, transparent 50%, var(--color-bg) 100%),
    radial-gradient(55% 55% at 100% 0%, rgba(255, 172, 125, 0.95), transparent 70%),
    radial-gradient(50% 70% at 88% 45%, rgba(214, 74, 32, 0.85), transparent 75%),
    radial-gradient(60% 65% at 50% 38%, rgba(165, 20, 30, 0.95), transparent 75%),
    radial-gradient(45% 55% at 0% 0%, rgba(130, 42, 66, 0.9), transparent 75%),
    #140a0e;
}

/* Warped grid lines over the glow (SVG, stretched to the hero), fading out at the bottom.
   At least 1200px wide so narrow screens crop the sides instead of squashing the curves. */
.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/hero/hero-grid.svg") center / max(100%, 1200px) 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  pointer-events: none;
}

/* Faint grid behind the CTA, fading out towards the edges */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 140px 140px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 35%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 75% at 50% 35%, #000 30%, transparent 85%);
  pointer-events: none;
}

.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 400px);
  justify-content: space-between;
  align-items: end;
  gap: var(--space-8);
}

.hero__intro {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.4;
}

.hero__aside {
  align-self: end;
  max-width: 400px;
  font-size: var(--fs-base);
  line-height: 1.75;
}

.hero__bottom {
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.06em;
  text-align: center;
  white-space: nowrap;
}

/* Ticker (trusted by)
   ========================================================================== */
.ticker__label {
  margin-bottom: 3.75rem;
  font-size: var(--fs-lg);
  line-height: 1.75;
  text-transform: uppercase;
}

.ticker__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-10);
}

.ticker__item {
  display: grid;
  place-items: center;
  height: 120px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  padding-inline: var(--space-6);
}

/* About
   ========================================================================== */
.about,
.split {
  display: grid;
  grid-template-columns: 296px 1fr;
  gap: var(--space-8) 6.25rem;
}

.about__statement {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.35;
}

.about__text {
  max-width: 770px;
  margin-top: 1.4rem;
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
}

.about .btn {
  margin-top: 5rem;
}

/* Services (cards pin one after another as you scroll)
   ========================================================================== */
.services-stack__step {
  position: sticky;
  top: calc(var(--header-h) + var(--space-10));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: var(--space-6);
  /* Scroll distance before the next card arrives */
  height: min(816px, 75vh);
  pointer-events: none;
}

.services-stack__step > * {
  grid-column: var(--col);
  align-self: start;
  pointer-events: auto;
}

/* The last step stays pinned long enough to show the "more services" panel under the cards */
.services-stack__step:last-child {
  height: auto;
  min-height: min(816px, 75vh);
}

/* "Plus 7 more services" panel, shown under the three pinned cards */
.services-stack__step > .services-more {
  grid-column: 1 / -1;
}

.services-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-10);
  padding: var(--space-8);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.services-more__text {
  flex: 1;
  min-width: 260px;
}

.services-more__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.4;
}

.pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.pill-links a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.pill-links a:hover {
  border-color: var(--color-accent);
  color: var(--color-ink);
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-12) var(--space-6);
  margin-top: 6.25rem;
}

.stat {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-6);
  text-align: center;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.stat__label {
  max-width: 264px;
  color: var(--color-ink-soft);
}

/* Projects (cards stack as you scroll)
   ========================================================================== */
/* Each card sits in a 684px slot with 100px between slots in the design */
.project-stack {
  display: grid;
  gap: clamp(6.25rem, 15.9vw, 19.0625rem);
}

/* Each card pins a little lower than the one before, so the edges of the
   cards underneath stay visible. --stack-index is set by animations.js.
   Two classes so this beats .project-card { position: relative }. */
.project-stack > .project-card {
  position: sticky;
  top: calc(var(--header-h) + var(--space-10) + var(--stack-index, 0) * 1.5rem);
  justify-self: center;
  width: min(100%, 721px);
  transform-origin: center top;
  will-change: transform, filter;
}

/* Keeps the last card pinned for a moment before the section scrolls away */
.project-stack::after {
  content: "";
  height: 20vh;
}

/* Pricing badge ("Popular") */
.price-card__badge {
  padding: 5px var(--space-4) 6px;
  border-radius: 4px;
  background: var(--color-ink);
  color: var(--color-on-light);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.6;
}

/* CTA
   ========================================================================== */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--section-space);
  text-align: center;
}

.cta::before {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 20%, transparent 80%);
}

.cta__title {
  max-width: 1200px;
  margin-inline: auto;
  font-size: var(--fs-section);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.03em;
}

.cta .btn {
  margin-top: 3.75rem;
}

.cta__text {
  max-width: 650px;
  margin: 3.75rem auto 0;
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
}

.cta .tag-row {
  margin-top: 9.75rem;
}

/* Service card */
.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.service-card__icon {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  margin: 7px 0 0 7px;
  color: var(--color-accent);
}

.service-card__icon svg {
  width: 45px;
  height: 45px;
}

.service-card__title {
  margin-top: 1.875rem;
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Pushed to the bottom so text lines up across cards of equal height */
.service-card__summary {
  margin-top: auto;
  padding-top: clamp(2.5rem, 1rem + 5vw, 6rem);
  font-size: var(--fs-base);
}

.service-card__link {
  align-self: flex-start;
  margin-top: var(--space-6);
}

/* Project card — title and details sit over the image */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.project-card__link {
  position: relative;
  display: block;
  aspect-ratio: 721 / 479;
}

.project-card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  transition: transform 600ms var(--ease-out);
}

.project-card__link:hover .project-card__media,
.project-card__link:hover .project-card__img {
  transform: scale(1.03);
}

/* Real project image fills the card */
.project-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}

/* Title with an optional "Visit site" pill on the right */
.project-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.project-card__visit {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.35);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.project-card__visit svg {
  width: 16px;
  height: 16px;
}

.project-card__link:hover .project-card__visit {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

/* Darken the top and bottom so the text stays readable over any image */
.project-card--image .project-card__body {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 32%, transparent 50%, rgba(0, 0, 0, 0.88) 92%);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7);
}

.project-card__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.6rem 2.625rem 3.2rem;
}

.project-card__title {
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.project-card__details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.project-card__summary {
  max-width: 252px;
  font-size: 0.7875rem;
  line-height: 1.75;
}

.project-card__year {
  font-size: 0.7rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Case study card */
.case-study-card {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.case-study-card__media {
  border: 0;
  border-radius: 0;
}

.case-study-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
}

.case-study-card__title {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.case-study-card__results {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  color: var(--color-ink-soft);
}

.case-study-card__results strong {
  color: var(--color-ink);
}

/* Team card */
.team-card__photo {
  aspect-ratio: 4 / 5;
}

.team-card__name {
  margin-top: var(--space-4);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.team-card__role {
  margin-top: var(--space-1);
  color: var(--color-ink-soft);
}

.team-card__social {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  text-transform: uppercase;
}

.team-card__social a:hover {
  color: var(--color-accent);
}

/* Blog card */
.blog-card__link {
  display: flex;
  flex-direction: column;
}

.blog-card__media {
  aspect-ratio: 424 / 453;
  transition: transform 600ms var(--ease-out);
}

.blog-card__link:hover .blog-card__media {
  transform: scale(0.985);
}

.blog-card__meta {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.blog-card__title {
  max-width: 300px;
  margin-top: var(--space-4);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.04em;
  transition: color var(--dur-fast) ease;
}

.blog-card__link:hover .blog-card__title {
  color: var(--color-accent);
}

.blog-card__excerpt {
  display: -webkit-box;
  margin-top: var(--space-5);
  overflow: hidden;
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}


/* ==========================================================================
   Inner pages
   ========================================================================== */

/* Page hero — shorter version of the home hero (background shared above) */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(4rem, 3rem + 4vw, 7.5rem)) clamp(4rem, 3rem + 3vw, 6rem);
}

.page-hero__title {
  max-width: 18ch;
  margin-top: var(--space-4);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.page-hero__lead {
  max-width: 640px;
  margin-top: var(--space-6);
  font-size: var(--fs-lg);
}

.page-hero .eyebrow {
  color: var(--color-ink);
}

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* Section intro paragraph under a split heading */
.section-lead {
  max-width: 720px;
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
}

.section-lead + .section-lead {
  margin-top: var(--space-4);
}

/* Feature cards — values, industries, inclusions, services list */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.feature-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

a.feature-card {
  transition: background-color var(--dur-fast) ease;
}

a.feature-card:hover {
  background: #222;
}

.feature-card__num {
  font-size: var(--fs-sm);
  color: var(--color-accent);
}

.feature-card__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.4;
}

.feature-card__text {
  color: var(--color-ink-soft);
}

.feature-card .link-arrow {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-ink);
}

a.feature-card:hover .link-arrow svg {
  transform: translateX(3px);
}

/* Numbered process steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-6);
  counter-reset: step;
}

.step {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  counter-increment: step;
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-accent);
}

.step__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.4;
}

.step__text {
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
}

/* Check list (service inclusions, careers perks) */
.check-list {
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
}

.check-list--2col {
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-8);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: calc(0.875em - 9px);
  border-radius: 50%;
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5 7.8 12 13 6.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* Long-form text — blog articles and legal pages */
.prose {
  max-width: 760px;
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
}

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

.prose h2 {
  margin-top: var(--space-12);
  font-size: var(--fs-2xl);
  line-height: 1.4;
  color: var(--color-ink);
}

.prose h3 {
  margin-top: var(--space-8);
  font-size: var(--fs-xl);
  line-height: 1.4;
  color: var(--color-ink);
}

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

.prose ul,
.prose ol {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.25em;
}

.prose li::marker {
  color: var(--color-accent);
}

.prose strong {
  color: var(--color-ink);
  font-weight: 600;
}

.prose a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--color-accent);
}

.prose blockquote {
  margin-inline: 0;
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--color-ink);
}

.prose .media-placeholder {
  margin-top: var(--space-10);
  aspect-ratio: 16 / 9;
}

/* Legal page "last updated" / review note */
.notice {
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

/* FAQ accordion (native <details>, smooth open/close in animations.js)
   ========================================================================== */
.accordion {
  display: grid;
  gap: var(--space-3);
  counter-reset: faq;
}

.accordion__item {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  counter-increment: faq;
  transition: border-color var(--dur) ease, background-color var(--dur) ease;
}

.accordion__item:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.accordion__item[open] {
  border-color: rgba(255, 71, 25, 0.55);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(255, 71, 25, 0.1), transparent 60%),
    var(--color-surface);
}

.accordion__item summary {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.accordion__item summary::-webkit-details-marker {
  display: none;
}

/* Question number */
.accordion__item summary::before {
  content: counter(faq, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-accent);
}

/* Round + icon that turns into × */
.accordion__item summary::after {
  content: "";
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) ease, border-color var(--dur) ease;
}

.accordion__item summary:hover::after {
  border-color: var(--color-accent);
}

.accordion__item[open] summary::after {
  transform: rotate(45deg);
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.accordion__body {
  overflow: hidden;
  padding: 0 calc(var(--space-6) + 40px + var(--space-4)) var(--space-6) calc(var(--space-8) + 2.5rem + var(--space-4));
  color: var(--color-ink-soft);
}

.accordion__body > * + * {
  margin-top: var(--space-3);
}

/* Contact cards */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.contact-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.contact-card__icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-2);
  color: var(--color-accent);
}

.contact-card__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.4;
}

.contact-card a,
.contact-card address {
  color: var(--color-ink-soft);
  transition: color var(--dur-fast) ease;
}

.contact-card a:hover {
  color: var(--color-accent);
}

/* Forms — behaviour in assets/js/form-validation.js */
.form-layout {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: var(--space-12) clamp(2rem, 6vw, 6.25rem);
  align-items: start;
}

.form {
  display: grid;
  gap: var(--space-6);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

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

.field__label {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.field__label .req {
  color: var(--color-accent);
}

.field__input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-ink);
  font: inherit;
  line-height: 1.5;
  transition: border-color var(--dur-fast) ease;
}

.field__input::placeholder {
  color: var(--color-muted);
}

.field__input:hover {
  border-color: rgba(255, 255, 255, 0.24);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

textarea.field__input {
  min-height: 9rem;
  resize: vertical;
}

select.field__input {
  appearance: none;
  padding-right: 2.75rem;
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ccc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1rem center / 12px no-repeat;
}

.field.is-invalid .field__input {
  border-color: #ff7a6b;
}

.field__error {
  font-size: var(--fs-xs);
  color: #ff9a8e;
}

.field__error:empty {
  display: none;
}

/* Pill checkboxes */
.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-group legend {
  margin-bottom: var(--space-3);
  padding: 0;
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.choice span {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.choice input:hover + span {
  border-color: rgba(255, 255, 255, 0.24);
}

.choice input:checked + span {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-ink);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.form__note {
  flex: 1;
  min-width: 220px;
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.form__status {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.form__status:empty {
  display: none;
}

/* Blog article */
.article-cover {
  aspect-ratio: 16 / 7;
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.blog-card--soon .blog-card__link {
  pointer-events: none;
}

.blog-card__soon {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

/* Empty state ("no open roles", "projects coming soon") */
.empty-state {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border: 1px dashed var(--color-line);
  border-radius: var(--radius-md);
}

.empty-state__title {
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.4;
}

.empty-state p {
  max-width: 620px;
  color: var(--color-ink-soft);
}

/* Project grid (work page) */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

/* Spacing inside split sections (service details, forms) */
.split .check-list,
.split .about__statement + .btn {
  margin-top: var(--space-10);
}

.form-layout .about__statement {
  margin-top: var(--space-4);
}

.steps--stacked {
  grid-template-columns: 1fr;
  margin-top: var(--space-8);
}

/* Inline text link */
.text-link {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

.text-link:hover {
  color: var(--color-accent);
}

/* FAQ intro beside the accordion: stays in view while reading */
.faq-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-8));
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-4);
}

.faq-help {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.faq-help__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.faq-help p {
  color: var(--color-ink-soft);
}

.faq-help__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.faq-help__actions .btn {
  flex: 1;
  padding-inline: var(--space-5);
}

.faq-aside .section-lead {
  margin-bottom: var(--space-2);
}

/* Home FAQ: wider left column so the title fits beside the questions */
.split--faq {
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
}

.accordion__body a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}

.accordion__body a:hover {
  color: var(--color-accent);
}

/* Home "About us": two-tone statement, story + stats underneath
   ========================================================================== */
.about-home__statement {
  max-width: 28ch;
  margin-top: var(--space-6);
  font-size: var(--fs-section);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--color-muted);
}

.about-home__statement strong {
  font-weight: inherit;
  color: var(--color-ink);
}

.about-home__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-12) clamp(3rem, 8vw, 8rem);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--color-line);
}

.about-home__story {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-5);
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
}

.about-home__story .btn {
  margin-top: var(--space-5);
}

.about-home__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10) var(--space-8);
}

.about-home__stats li {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-line);
}

.about-home__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.about-home__label {
  max-width: 24ch;
  color: var(--color-ink-soft);
}

/* Centred section heading */
.section-head--center {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}

/* Article layout: long text with a sticky sidebar (blog, case study, legal)
   ========================================================================== */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--space-12) clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.article-layout .prose {
  max-width: none;
}

.article-layout .prose h2 {
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

.article-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-8));
  display: grid;
  gap: var(--space-6);
}

.aside-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink-soft);
}

.aside-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
}

.aside-card--accent {
  background: var(--color-accent);
  color: var(--color-ink);
}

.toc {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc li {
  display: flex;
  gap: var(--space-3);
  counter-increment: toc;
}

.toc li::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--color-accent);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.toc a {
  transition: color var(--dur-fast) ease;
}

.toc a:hover {
  color: var(--color-ink);
}

.facts {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.facts div {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.facts div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.facts dt {
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

.facts dd {
  margin: 0;
  color: var(--color-ink);
}

/* Testimonials book (components/testimonials.html, assets/js/testimonials.js)
   ========================================================================== */
/* Book colours: change these to restyle the whole book */
.book-wrap {
  --paper: #1c1c1e;
  --paper-edge: #2a2a2d;
  --ink-on-paper: #ffffff;
  --muted-on-paper: #a3a3a8;
  --rule-on-paper: rgba(255, 255, 255, 0.12);
  --spine-shadow: rgba(0, 0, 0, 0.55);
}

/* Plain list shown only if JavaScript is off */
.book-wrap.is-ready .book-source {
  display: none;
}

.book-source {
  display: grid;
  gap: var(--space-6);
  max-width: 760px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  font-size: var(--fs-lg);
}

.book {
  position: relative;
  width: min(100%, 1040px);
  aspect-ratio: 2 / 1.2;
  margin-inline: auto;
  perspective: 2600px;
  perspective-origin: 50% 40%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

/* Static shadow under the open book (cheap: never repainted while pages turn) */
.book::before {
  content: "";
  position: absolute;
  inset: 4% 2% -3%;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.6);
  filter: blur(28px);
  pointer-events: none;
}

.book:active {
  cursor: grabbing;
}

.book:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 8px;
  border-radius: 6px;
}

.book__base,
.book__leaf {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}

.book__base--left {
  left: 0;
}

.book__base--right,
.book__leaf {
  left: 50%;
}

.book__leaf {
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}

.book__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.book__face--back {
  transform: rotateY(180deg);
}

/* Shading that deepens as a page lifts and curls */
.book__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 4px 14px 14px 4px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.05));
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

.book__face--back .book__shade {
  border-radius: 14px 4px 4px 14px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.05));
}

/* A page */
.book-page {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  background: var(--paper);
  color: var(--ink-on-paper);
  overflow: hidden;
}

/* Right-hand pages: rounded outer edge, shadow near the spine */
.book__base--right .book-page,
.book__face--front .book-page {
  border-radius: 4px 14px 14px 4px;
  background:
    linear-gradient(to right, var(--spine-shadow), rgba(0, 0, 0, 0.08) 6%, transparent 14%),
    linear-gradient(to left, var(--paper-edge), transparent 3%),
    var(--paper);
}

/* Left-hand pages */
.book__base--left .book-page,
.book__face--back .book-page {
  border-radius: 14px 4px 4px 14px;
  background:
    linear-gradient(to left, var(--spine-shadow), rgba(0, 0, 0, 0.08) 6%, transparent 14%),
    linear-gradient(to right, var(--paper-edge), transparent 3%),
    var(--paper);
}

.book-page__mark {
  width: 40px;
  height: 32px;
  color: var(--color-accent);
}

.book-page__quote {
  margin: var(--space-6) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.85rem + 0.9vw, 1.625rem);
  font-weight: 500;
  line-height: 1.5;
}

.book-page__author {
  display: grid;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-on-paper);
}

.book-page__name {
  font-weight: 600;
}

.book-page__role {
  font-size: var(--fs-sm);
  color: var(--muted-on-paper);
}

.book-page__num {
  position: absolute;
  bottom: clamp(1rem, 0.5rem + 1vw, 1.5rem);
  right: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  font-size: var(--fs-xs);
  color: var(--muted-on-paper);
}

.book__face--back .book-page__num {
  right: auto;
  left: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

.book-page--intro,
.book-page--end {
  justify-content: center;
  gap: var(--space-4);
}

.book-page__eyebrow {
  color: var(--color-accent);
}

.book-page__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.book-page__text {
  max-width: 34ch;
  color: var(--muted-on-paper);
}

.book-page__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.book-page__hint svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

.book-page--end .btn {
  align-self: flex-start;
  margin-top: var(--space-4);
}

/* Single page (phones) */
.book--single {
  width: min(100%, 520px);
  aspect-ratio: 1 / 1.3;
}

.book--single .book__base,
.book--single .book__leaf {
  left: 0;
  width: 100%;
}

.book--single .book__face--back {
  display: none;
}

.book--single .book-page {
  border-radius: 14px;
}

/* Controls under the book */
.book-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-10);
}

.book-controls__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-ink);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.book-controls__btn:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.book-controls__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.book-controls__btn svg {
  width: 18px;
  height: 18px;
}

.book-controls__status {
  min-width: 9ch;
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--color-ink-soft);
}

/* Price list: "From ₹…" per service (assets/js/pricing.js)
   ========================================================================== */
.price-list {
  border-top: 1px solid var(--color-line);
}

.price-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) auto 40px;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  transition: background-color var(--dur-fast) ease;
}

.price-row:hover {
  background: var(--color-surface);
}

.price-row__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.4;
}

.price-row__desc {
  color: var(--color-ink-soft);
}

.price-row__price {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

.price-row__price small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-ink-soft);
}

.price-row__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.price-row__arrow svg {
  width: 16px;
  height: 16px;
}

.price-row:hover .price-row__arrow {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.price-list__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.price-list__footer p {
  max-width: 60ch;
  color: var(--color-ink-soft);
}

/* Service pricing: two packages + "Build your own" calculator
   ========================================================================== */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-10) var(--space-8) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.plan--popular {
  border-color: rgba(255, 255, 255, 0.18);
}

.plan--builder {
  border-color: var(--color-accent);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 71, 25, 0.16), transparent 60%),
    var(--color-surface);
}

.plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.plan__name {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.4;
}

.plan__desc {
  color: var(--color-ink-soft);
}

.plan__price {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.plan__period {
  margin-left: 0.15em;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-ink-soft);
}

.plan__features {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-ink-soft);
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.plan__features li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: calc(0.875em - 8px);
  border-radius: 50%;
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5 7.8 12 13 6.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.plan > .btn {
  margin-top: auto;
}

.plans__note {
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* Calculator */
.builder {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

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

.builder__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-ink-soft);
}

.builder__value {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
}

.builder__hint {
  font-size: var(--fs-xs);
  color: var(--color-muted);
}

.builder input[type="range"] {
  --fill: 50%;
  width: 100%;
  height: 6px;
  margin: var(--space-2) 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--color-accent) var(--fill), rgba(255, 255, 255, 0.15) var(--fill));
  appearance: none;
  cursor: pointer;
}

.builder input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 4px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-ink);
  appearance: none;
  transition: transform var(--dur-fast) ease;
}

.builder input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 4px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-ink);
}

.builder input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

.builder input[type="range"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
}

.builder__addons {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.builder__addon {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.builder__addon:hover {
  background: rgba(255, 255, 255, 0.05);
}

.builder__addon input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.builder__check {
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.builder__addon input:checked ~ .builder__check {
  border-color: var(--color-accent);
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5 7.8 12 13 6.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.builder__addon input:checked ~ .builder__addon-name {
  color: var(--color-ink);
}

.builder__addon input:focus-visible ~ .builder__check {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.builder__addon-price {
  white-space: nowrap;
  color: var(--color-ink);
}

/* Home pricing: "From" label and the per-service rates in the third card */
.plan__from {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-ink-soft);
}

.plan__rates {
  display: grid;
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.plan__rates a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  transition: color var(--dur-fast) ease;
}

.plan__rates a span:last-child {
  color: var(--color-ink);
  white-space: nowrap;
}

.plan__rates a:hover {
  color: var(--color-accent);
}

/* Service page: "What's included" tiles
   ========================================================================== */
.include-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: include;
}

.include-grid li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 168px;
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.4;
  counter-increment: include;
  transition: border-color var(--dur) ease, transform var(--dur) var(--ease-out);
}

.include-grid li::before {
  content: counter(include, decimal-leading-zero);
  order: -1;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-accent);
}

.include-grid li::after {
  content: "";
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 71, 25, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5 7.8 12 13 6.5' fill='none' stroke='%23ff4719' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.include-grid li:hover {
  border-color: rgba(255, 71, 25, 0.5);
  transform: translateY(-3px);
}

/* Service page: "Who it's for" panel */
.fit-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(165, 20, 30, 0.55), transparent 60%),
    radial-gradient(50% 90% at 70% 100%, rgba(255, 71, 25, 0.22), transparent 70%),
    var(--color-surface);
}

.fit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/hero/hero-grid.svg") center / cover no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 70%);
  mask-image: linear-gradient(to right, #000, transparent 70%);
}

.fit-card__main {
  display: grid;
  align-content: center;
  gap: var(--space-5);
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.fit-card__eyebrow {
  color: var(--color-ink);
}

.fit-card__title {
  max-width: 24ch;
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.fit-card__side {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  padding: clamp(2rem, 1rem + 3vw, 3.5rem);
  border-left: 1px solid var(--color-line);
  background: rgba(0, 0, 0, 0.35);
}

.fit-card__label {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.fit-card__price {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.fit-card__period {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-ink-soft);
}

.fit-card__note {
  margin-bottom: var(--space-4);
  color: var(--color-ink-soft);
}

.fit-card__link {
  justify-self: center;
  margin-top: var(--space-2);
}

/* Four-across feature cards (service page "More services") */
.feature-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Form result message */
.form__status[data-state="success"] {
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(74, 222, 128, 0.08);
  color: #b8f5cc;
}

.form__status[data-state="error"] {
  padding: var(--space-4) var(--space-5);
  border: 1px solid rgba(255, 122, 107, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(255, 122, 107, 0.08);
  color: #ffc7c0;
}

.form [type="submit"]:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Blog cover art: small centred illustration on the dark card background */
.blog-art {
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255, 71, 25, 0.1), transparent 70%),
    var(--color-surface);
}

.blog-art img {
  width: 44%;
  max-width: 260px;
  height: auto;
  transition: transform 600ms var(--ease-out);
}

.blog-card__link:hover .blog-art img {
  transform: scale(1.06);
}

.blog-art.article-cover {
  aspect-ratio: 16 / 6;
  border-radius: var(--radius-lg);
}

.blog-art.article-cover img {
  width: auto;
  height: 62%;
  max-width: none;
}