/* Cini Group Inc. Dark ground, photography carries the weight, lime is a touch. */

:root {
  --ink-900: #0b0d10;
  --ink-800: #101318;
  --ink-700: #161a20;
  --ink-600: #1d222a;

  --paper: #f4f2ee;
  --paper-2: #e8e5df;

  --text: #eceef0;
  --text-dim: #a0a7b1;
  --on-paper: #14171b;
  --on-paper-dim: #59616b;

  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .18);
  --line-dark: rgba(16, 19, 24, .12);

  --accent: #9fc131;
  --accent-lift: #b6da45;

  --shell: 76rem;
  --gut: clamp(1.25rem, 5vw, 3rem);
  --band: clamp(3.25rem, 6vw, 5.5rem);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Montserrat", var(--sans);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font: 400 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #10130f; padding: .75rem 1.25rem;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow.is-plain::before { display: none; }

.h-hero { font-size: clamp(2.35rem, 5.6vw, 4rem); font-weight: 300; letter-spacing: -.035em; }
.h-band { font-size: clamp(1.85rem, 3.8vw, 3rem); font-weight: 300; letter-spacing: -.03em; }
.h-card { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500; }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 46ch;
  margin: 1.5rem 0 0;
  text-wrap: pretty;
}
.lede.is-wide { max-width: 60ch; }

p { text-wrap: pretty; }

.on-paper { background: var(--paper); color: var(--on-paper); }
.on-paper .lede { color: var(--on-paper-dim); }
.on-paper .eyebrow { color: #6c8b14; }
.on-paper .eyebrow::before { background: #6c8b14; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.6rem;
  font: 600 .85rem/1 var(--sans);
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

.btn--solid { background: var(--accent); color: #101309; }
.btn--solid:hover { background: var(--accent-lift); }

.btn--ghost { border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.on-paper .btn--ghost { border-color: rgba(16,19,24,.22); color: var(--on-paper); }
.on-paper .btn--ghost:hover { border-color: #6c8b14; color: #556f0f; }

.btn .arw { transition: transform .25s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* inline text link with rule */
.tlink {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 600 .85rem/1 var(--sans); letter-spacing: .04em;
  text-decoration: none; color: var(--accent);
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(159, 193, 49, .35);
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.tlink:hover { border-color: var(--accent); gap: .85rem; }

/* ---------- header ---------- */

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
/* No backdrop-filter here on purpose. This bar is fixed and toggles on at
   24px of scroll, so a blur here recomputes on every scroll frame for the
   entire time the visitor is scrolling, on every page, for as long as they
   are on the site. That is a well known real cause of scroll jank, not a
   cosmetic nicety. The bar is fully opaque so page content never shows through. */
.hdr.is-stuck {
  background: var(--ink-900);
  border-bottom-color: var(--line);
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 5rem;
}
.brand { display: block; flex: none; }
.brand img { width: 8.25rem; height: auto; }

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a {
  font: 500 .86rem/1 var(--sans);
  letter-spacing: .02em;
  text-decoration: none; color: var(--text);
  opacity: .78;
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--accent); }

.hdr .btn { padding: .8rem 1.3rem; }

.burger {
  display: none; flex: none;
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--line-2);
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block;
  width: 1.1rem; height: 1px; background: var(--text);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span::before { transform: translateY(-.35rem); }
.burger span::after  { transform: translateY(.31rem); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

@media (max-width: 60rem) {
  .burger { display: flex; }
  .hdr__cta { display: none; }
  .nav {
    position: fixed; inset: 5rem 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink-900);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--gut) 2rem;
    transform: translateY(-120%);
    /* visibility, not transform alone: a transform-only hide can leave a sliver
       on screen and keeps the links in the tab order while the menu is shut */
    visibility: hidden;
    transition: transform .4s var(--ease), visibility .4s var(--ease);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); visibility: visible; }
  .nav a {
    padding: 1.05rem 0; font-size: 1rem; opacity: 1;
    border-bottom: 1px solid var(--line);
  }
  .nav a[aria-current="page"] { color: var(--accent); }
  .nav .btn { margin-top: 1.5rem; justify-content: center; }
}

/* ---------- hero ---------- */

.hero { position: relative; isolation: isolate; display: grid; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(8,10,13,.92) 0%, rgba(8,10,13,.72) 42%, rgba(8,10,13,.30) 75%, rgba(8,10,13,.45) 100%),
    linear-gradient(to bottom, rgba(8,10,13,.75) 0%, transparent 28%, transparent 55%, rgba(8,10,13,.85) 100%);
}
/* for heroes whose photo is bright and busy behind the text column */
.hero--busy::after {
  background:
    linear-gradient(to right, rgba(8,10,13,.94) 0%, rgba(8,10,13,.86) 50%, rgba(8,10,13,.55) 80%, rgba(8,10,13,.6) 100%),
    linear-gradient(to bottom, rgba(8,10,13,.75) 0%, transparent 28%, transparent 55%, rgba(8,10,13,.85) 100%);
}
/* The text column is capped by the grid track, not by narrowing .shell.
   Narrowing the shell would keep its auto margins and centre the column,
   which pushes the hero off the left edge every other section aligns to.
   One min-height for every hero, so they all stand the same. */
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 58rem);
  justify-content: start;
  align-content: center;
  /* Floored above the tallest hero's content, so every hero lands on exactly
     this number rather than on its own content height. Without the floor the
     heroes differ by whatever their content differs by: a breadcrumb row, or
     a lede that wraps to one more line. Raise the floor if a hero ever grows
     past it, and check with build-assets\shoot.py. */
  min-height: clamp(40rem, 68vh, 44rem);
  padding-block: 8rem 4.5rem;
}
/* On phones the heroes stay content-driven above a floor. Forcing them all to
   the tallest would leave the shorter pages with a screen of dead space. */
@media (max-width: 48rem) {
  .hero__in { min-height: clamp(30rem, 72vh, 38rem); padding-block: 7rem 3.5rem; }
}

/* ---------- sections ---------- */

.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.band__head { max-width: 44rem; margin-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.band__head.is-wide { max-width: 56rem; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.on-paper .rule { background: var(--line-dark); }

/* marquee strip of positioning statements */
.strip {
  border-block: 1px solid var(--line);
  background: var(--ink-800);
}
.strip ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.strip li {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem);
  font: 500 .82rem/1.5 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
  border-left: 1px solid var(--line);
  /* centred in its own cell: left-aligned items of differing length read as
     misaligned against the cell dividers */
  display: flex; align-items: center; justify-content: center;
  text-align: center; gap: .85rem;
}
.strip li:first-child { border-left: 0; }
.strip li::before {
  content: ""; width: .3rem; height: .3rem; flex: none;
  background: var(--accent); transform: rotate(45deg);
}
@media (max-width: 52rem) {
  .strip ul { grid-template-columns: 1fr; }
  .strip li {
    border-left: 0; border-top: 1px solid var(--line);
    justify-content: flex-start; text-align: left;
  }
  .strip li:first-child { border-top: 0; }
}

/* ---------- service cards ---------- */

.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 62rem) { .cards--3 { grid-template-columns: 1fr; } }
@media (max-width: 48rem) { .cards--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--ink-900);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex; flex-direction: column;
  transition: background .3s var(--ease);
  position: relative;
  text-decoration: none; color: inherit;
}
.card:hover { background: var(--ink-700); }
.card h3 { margin-bottom: .75rem; }
.card p { color: var(--text-dim); font-size: .95rem; margin: 0 0 1.25rem; }

/* these two outrank .card p on purpose, which needs the extra class */
.card .card__idx {
  font: 500 .7rem/1 var(--sans); letter-spacing: .14em;
  color: var(--accent); margin: 0 0 1.25rem;
}
.card .card__foot { margin: auto 0 0; }
.card__list {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; gap: .5rem;
}
.card__list li {
  font-size: .89rem; color: var(--text-dim);
  padding-left: 1.1rem; position: relative;
}
.card__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .32rem; height: 1px; background: var(--accent);
}

.card--media { padding: 0; overflow: hidden; }
.card--media .card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--ink-700); }
.card--media .card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.card--media:hover .card__img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .card--media:hover .card__img img { transform: none; }
}
.card--media .card__body { padding: clamp(1.75rem, 3vw, 2.25rem); display: flex; flex-direction: column; flex: 1; }

/* ---------- split feature ---------- */

.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.split--wide-media { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 62rem) {
  .split, .split--wide-media { grid-template-columns: 1fr; }
  .split__media { order: -1; }
}
.split__media { position: relative; }
/* the picture wrapper sits between the stretched cell and the img, so it has
   to pass the cell's height through or height:100% on the img resolves to auto */
.split__media picture { display: block; height: 100%; }
/* height:auto is load-bearing. These imgs carry width/height attributes from
   the manifest, and the height attribute is a presentational hint, so without
   this the image renders at its intrinsic height and aspect-ratio is ignored
   entirely. That was making every split image roughly twice as tall as the
   design asks for. */
.split__media img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }
.split__media.is-tall img { aspect-ratio: 4/3; }
@media (max-width: 62rem) {
  .split__media.is-portrait img { aspect-ratio: 4/5; max-height: 38rem; }
}

/* Side by side, the two columns are never the same height, and whichever way
   the short one is aligned it leaves a void: centred puts a gap above and
   below, top-aligned puts the whole gap in one place. So once there is room
   for two columns the photograph takes the height of the row instead, and the
   block reads as one object rather than a picture floating beside some text.
   Only above the stacking breakpoint: in one column the row height is the
   image's own, and height:100% against an auto row would collapse it. */
@media (min-width: 62.0625rem) {
  .split { align-items: stretch; }
  /* Out of flow, so the photo takes the text column's height and never sets
     it. In flow, a loaded portrait crop taller than the text pushed the row
     down and left the photo hanging below the copy. */
  .split__media { min-height: 20rem; }
  .split__media > picture, .split__media > img { position: absolute; inset: 0; }
  .split__media img {
    height: 100%; aspect-ratio: auto;
  }
  /* mirrors the image to the right, so two splits stacked back to back
     don't read as the same block repeated */
  .split--rev .split__media { order: 2; }
}

/* thin accent bracket, clearly outside the image so it reads as a frame
   rather than a stray line sitting on the photo */
.split__media::after {
  content: ""; position: absolute;
  right: -.5rem; bottom: -.5rem;
  width: 22%; height: 22%;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  pointer-events: none;
}
@media (max-width: 62rem) {
  .split__media::after { right: -.35rem; bottom: -.35rem; }
}

/* ---------- numbered approach ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-dark); }
@media (max-width: 62rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .steps { grid-template-columns: 1fr; } }

.step { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.25rem); }
.step h3 { font-size: 1.05rem; margin-bottom: .7rem; }
.step p { font-size: .9rem; color: var(--on-paper-dim); margin: 0; }

/* outranks .step p, which is why the extra class is here */
.step .step__n {
  font-family: var(--display); font-size: clamp(2.1rem, 3.2vw, 2.75rem);
  font-weight: 500; line-height: 1; color: #6c8b14;
  margin: 0 0 1.3rem; letter-spacing: -.04em;
}

/* ---------- stat / audience grid ---------- */

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 62rem) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .grid-4 { grid-template-columns: 1fr; } }

.tile { background: var(--ink-900); padding: clamp(1.6rem, 3vw, 2.15rem); }
.tile h3 { font-size: 1.02rem; margin-bottom: .6rem; }
.tile p { font-size: .88rem; color: var(--text-dim); margin: 0; }

/* ---------- reasons list ---------- */

.reasons { display: grid; gap: 0; margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.reason {
  display: grid; grid-template-columns: minmax(0, 18rem) 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2.1rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.reason:last-child { border-bottom: 1px solid var(--line); }
.reason h3 { font-size: 1.1rem; }
.reason p { margin: 0; color: var(--text-dim); font-size: .95rem; max-width: 52ch; }
/* a row can carry more than the original single line: extra paragraphs get
   the gap back that the base rule zeroes, and a row can hold a list instead
   of prose, using the same dash marker as .card__list for one bullet style
   site-wide */
.reason p + p { margin-top: .85rem; }
.reason ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; max-width: 52ch;
}
.reason ul li {
  font-size: .95rem; color: var(--text-dim);
  padding-left: 1.1rem; position: relative;
}
.reason ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .32rem; height: 1px; background: var(--accent);
}
/* .reason has only ever sat on the dark ground before, so its text colour was
   never overridden for .on-paper. Without this it is the dark-ground dim
   grey on a paper background: barely legible. Same fix already applied to
   .prose, .faq and .area for the same reason. */
.on-paper .reason p, .on-paper .reason ul li { color: var(--on-paper-dim); }
@media (max-width: 52rem) {
  .reason { grid-template-columns: 1fr; gap: .6rem; }
}

/* ---------- cta band ---------- */

.cta { position: relative; isolation: isolate; text-align: center; }
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(8,10,13,.88), rgba(8,10,13,.93));
}
.cta .btn-row { justify-content: center; }
.cta .lede { margin-inline: auto; }

/* ---------- contact ---------- */

.contact-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 62rem) { .contact-grid { grid-template-columns: 1fr; } }

.channels { margin: 2.5rem 0 0; padding: 0; display: grid; }
.channels > div { border-top: 1px solid var(--line); padding-block: 1.35rem; }
.channels > div:last-child { border-bottom: 1px solid var(--line); }
.channels dt {
  font: 600 .68rem/1 var(--sans); letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .55rem;
}
.channels dd { margin: 0; }
.channels a { text-decoration: none; font-size: 1.08rem; }
.channels a:hover { color: var(--accent); }

.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .55rem; }
.field label {
  font: 600 .72rem/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-dim);
}
.field input, .field select, .field textarea {
  font: 400 .98rem/1.5 var(--sans);
  color: var(--text);
  background: var(--ink-800);
  border: 1px solid var(--line);
  padding: .95rem 1.05rem;
  width: 100%;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); background: var(--ink-700); outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: #6a7280; }
.field select { appearance: none; cursor: pointer; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 40rem) { .form__row { grid-template-columns: 1fr; } }

.form__note {
  font-size: .85rem; color: var(--text-dim);
  border-left: 1px solid var(--accent);
  padding: .3rem 0 .3rem 1rem;
  margin: 0;
}
.form__status {
  font-size: .9rem; padding: 1rem 1.15rem;
  border: 1px solid var(--line-2); background: var(--ink-800);
}
.form__status[hidden] { display: none; }
.form__status.is-ok { border-color: var(--accent); }
.form__status.is-error { border-color: #d9674e; }
.form__status a { color: var(--accent); }

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */

.ftr { background: var(--ink-800); border-top: 1px solid var(--line); }
.ftr__top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 68rem) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .ftr__top { grid-template-columns: 1fr; } }

/* height:auto matters: without it the logo takes the column width and the
   intrinsic height attribute, which squashes it out of proportion */
.ftr img {
  width: 8.5rem; height: auto; aspect-ratio: 420 / 196;
  object-fit: contain; margin-bottom: 1.5rem;
}
.ftr p { color: var(--text-dim); font-size: .92rem; max-width: 34ch; margin: 0; }
.ftr h2 {
  font: 600 .7rem/1 var(--sans); letter-spacing: .15em;
  text-transform: uppercase; color: var(--text); margin: 0 0 1.25rem;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.ftr ul a { text-decoration: none; color: var(--text-dim); font-size: .92rem; }
.ftr ul a:hover { color: var(--accent); }

.ftr__bar {
  border-top: 1px solid var(--line);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .82rem; color: var(--text-dim);
}
.ftr__bar p { margin: 0; font-size: .82rem; }
.ftr__bar a { color: var(--text-dim); text-decoration: underline; text-underline-offset: .2em; }
.ftr__bar a:hover { color: var(--accent); }

/* ---------- scroll reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(1.25rem); }
  .rv.is-in {
    opacity: 1; transform: none;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .rv-d1.is-in { transition-delay: .08s; }
  .rv-d2.is-in { transition-delay: .16s; }
  .rv-d3.is-in { transition-delay: .24s; }
}

/* ---------- breadcrumbs ---------- */

.crumbs { font-size: .8rem; color: var(--text-dim); margin-bottom: 1.5rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.crumbs li::after { content: "/"; margin-left: .5rem; opacity: .4; }
.crumbs li:last-child::after { content: none; }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.on-paper .crumbs, .on-paper .crumbs a { color: var(--on-paper-dim); }

/* ---------- long-form prose ---------- */

.prose { max-width: 42rem; }
/* Inside a .split, prose sits directly against the bare h2 with no band__head
   between them to supply a gap, and headings carry zero margin by default, so
   without this the first h3 touches the h2's baseline. */
.split .prose { margin-top: 1.5rem; }
.prose.is-wide { max-width: 52rem; }
.prose p { margin: 0 0 1.35rem; color: var(--text-dim); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin: 2.5rem 0 .9rem;
}
.prose h3:first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.35rem; padding: 0; list-style: none; display: grid; gap: .7rem; }
.prose ul li { padding-left: 1.15rem; position: relative; color: var(--text-dim); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: .34rem; height: 1px; background: var(--accent);
}
.on-paper .prose p, .on-paper .prose ul li { color: var(--on-paper-dim); }

/* ---------- faq ---------- */

.faq { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.4rem 3rem 1.4rem 0;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  font-weight: 500; letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: .7rem; height: .7rem; margin-top: -.45rem;
  border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -.15rem; }
.faq .faq__a { padding: 0 2rem 1.6rem 0; }
.faq .faq__a p { margin: 0 0 1rem; color: var(--text-dim); font-size: .95rem; }
.faq .faq__a p:last-child { margin-bottom: 0; }
.on-paper .faq details { border-color: var(--line-dark); }
.on-paper .faq .faq__a p { color: var(--on-paper-dim); }

/* ---------- service areas ---------- */

/* Hairlines come from each tile's own outline rather than from a background
   showing through the gaps.
   Flex rather than grid, because none of these grids divides by three: five
   markets on the home page and four on each location page both left a hole in
   the last row, and a hole makes the frame stop mid-row and read as
   unfinished. With flex the last row's cells grow to fill the width instead. */
.areas { display: flex; flex-wrap: wrap; gap: 1px; }
.area { flex: 1 1 20rem; }
@media (max-width: 62rem) { .area { flex-basis: 17rem; } }
@media (max-width: 40rem) { .area { flex-basis: 100%; } }

.area {
  background: var(--ink-900); padding: clamp(1.5rem, 3vw, 2.1rem);
  text-decoration: none; color: inherit; display: block;
  box-shadow: 0 0 0 1px var(--line);
  transition: background .3s var(--ease);
}
.area:hover { background: var(--ink-700); }
.area h3 { font-size: 1.08rem; margin-bottom: .6rem; }
.area p { font-size: .88rem; color: var(--text-dim); margin: 0 0 1.1rem; }
.area span {
  font: 600 .74rem/1 var(--sans); letter-spacing: .05em; color: var(--accent);
}
/* These cells keep their dark ground even inside an .on-paper band, but .area
   is color:inherit, so on paper the headings were inheriting the band's
   near-black text onto that dark ground and rendering invisible. The
   paragraphs escaped it only because .area p sets a colour explicitly. */
.on-paper .area { color: var(--text); }

.area--all { background: var(--ink-800); }
.area--plain { background: var(--ink-800); }
.area--plain h3 { font-size: .95rem; margin-bottom: .4rem; }
.area--plain p { margin: 0; font-size: .84rem; }

/* ---------- full-width figure ---------- */

.figure { position: relative; }
.figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.figure::after {
  content: ""; position: absolute; inset: auto auto -.5rem -.5rem;
  width: 20%; height: 20%;
  border-left: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  pointer-events: none;
}
@media (max-width: 62rem) { .figure::after { inset: auto auto -.35rem -.35rem; } }

/* ---------- phones: centred ---------- */

/* Last in the file so it wins ties with the component rules above. Short
   display text centres; long-form reading text (.prose, FAQ answers, the form)
   stays left, because centred paragraphs of six or more lines are hard to
   track on a narrow screen. */
@media (max-width: 48rem) {
  .hero__in { justify-content: center; text-align: center; }
  /* the desktop overlay darkens the left, where desktop text sits; centred
     text spans the full width, so the photo needs an even scrim instead */
  .hero::after {
    background: linear-gradient(to bottom, rgba(8,10,13,.82) 0%, rgba(8,10,13,.66) 45%, rgba(8,10,13,.88) 100%);
  }
  .hero.hero--busy::after {
    background: linear-gradient(to bottom, rgba(8,10,13,.88) 0%, rgba(8,10,13,.8) 45%, rgba(8,10,13,.92) 100%);
  }

  .eyebrow { justify-content: center; }
  /* a centred label with a rule on one side only reads lopsided */
  .eyebrow::after {
    content: ""; width: 1.75rem; height: 1px;
    background: currentColor; flex: none;
  }
  .eyebrow.is-plain::after { display: none; }
  .lede { margin-inline: auto; }
  .btn-row { justify-content: center; }
  .crumbs ol { justify-content: center; }

  .band__head { margin-inline: auto; text-align: center; }
  .split > div:not(.split__media) { text-align: center; }
  .split .prose { text-align: left; }

  .strip li { justify-content: center; text-align: center; }

  .card, .tile, .step, .area, .reason { text-align: center; }
  .card--media .card__body { align-items: center; }
  .reason p, .reason ul { margin-inline: auto; }

  /* dash markers move inline so each centred line keeps its bullet */
  .card__list li, .reason ul li { padding-left: 0; }
  .card__list li::before, .reason ul li::before {
    position: static; display: inline-block;
    vertical-align: middle; margin-right: .55rem;
  }

  .contact-grid > div:first-child { text-align: center; }
  .contact-grid .prose ul li { padding-left: 0; }
  .contact-grid .prose ul li::before {
    position: static; display: inline-block;
    vertical-align: middle; margin-right: .55rem;
  }

  .ftr__top { text-align: center; }
  .ftr img { margin-inline: auto; }
  .ftr p { margin-inline: auto; }
  .ftr__bar { justify-content: center; text-align: center; }
}