/* ==========================================================================
   KY WEB — DIRECTION C: SERVICE PAGE COMPONENTS

   Loaded AFTER c-loud.css, which owns the tokens, nav, footer, buttons,
   marquee bands, tiles, stats, testimonials, FAQ, modal and final CTA.
   Everything here is the extra vocabulary a service page needs and the
   homepage doesn't.

   Same rules as c-loud.css: zero radius, 3px rules, hard colour blocks,
   flood-invert on interaction, uppercase display / lowercase body,
   mobile-first, breakpoints 640/1024/1280 only, no `!important`.
   ========================================================================== */

/* ── PAGE HERO ─────────────────────────────────────────────────────────────
   The homepage hero owns a whole viewport. A service page hero must not —
   the visitor arrived with intent and the content has to start immediately. */

.hero--page {
  display: block;
  min-height: 0;
  padding-block: clamp(var(--s5), 7vw, var(--s7));
}

.hero--page .hero__h {
  font-size: min(clamp(2.25rem, 9vw, 6.5rem), 22vh);
  margin-bottom: clamp(var(--s3), 3vh, var(--s4));
}

.hero--page .hero__sub { max-width: 60ch; }

/* ── BREADCRUMBS ──────────────────────────────────────────────────────────── */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--s1);
  /* The global reset only zeroes `ul`. Breadcrumbs are marked up as `ol` on
     some pages and `ul` on others, and the `ol` kept the UA default
     margin-block-start of 1em — which at this 11px font size pushed the
     kicker, headline and everything under it down by exactly 11px on
     /app-development/, /marketing/, /about/, /portfolio/ and /contact/.
     Reset here so both elements land identically. */
  margin-top: 0;
  padding-inline-start: 0;
  list-style: none;
  margin-bottom: var(--s3);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.crumbs li { display: flex; align-items: center; gap: var(--s1); }
.crumbs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.crumbs a:hover { border-bottom-color: transparent; }
.crumbs [aria-current="page"] { opacity: 0.62; }
.crumbs span[aria-hidden] { opacity: 0.5; }

/* ── SPLIT — copy beside a spec panel ─────────────────────────────────────── */

.split {
  display: grid;
  gap: var(--s5);
  align-items: start;
}
.split + .split { margin-top: clamp(var(--s6), 9vw, var(--s8)); }

.split__no {
  display: inline-block;
  padding: 8px var(--s2);
  margin-bottom: var(--s2);
  background: var(--ink);
  color: var(--green);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
/* On black surfaces the chip inverts so it stays legible. */
.work .split__no, .says .split__no, .areas .split__no {
  background: var(--green);
  color: var(--ink);
}

.split__h {
  font-size: clamp(1.75rem, 6.5vw, 3.25rem);
  margin-bottom: var(--s3);
}
.split__body { max-width: 62ch; }
.split__body p + p { margin-top: var(--s2); }

@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s6); }
  /* Alternate which side the panel sits on so a stack of them has rhythm. */
  .split:nth-of-type(even) .split__copy { order: 2; }
}

/* ── SPEC — hard-ruled capability panel ───────────────────────────────────── */

.spec {
  border: var(--rule) solid var(--ink);
  background: var(--white);
  color: var(--ink);
}
.work .spec, .says .spec, .areas .spec { border-color: var(--green); }

.spec__head {
  padding: 12px var(--s2);
  background: var(--ink);
  color: var(--green);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.3;
}

.spec__list { display: grid; }

.spec__row {
  display: grid;
  gap: 2px;
  padding: 14px var(--s2);
  border-top: 2px solid var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.spec__row:first-child { border-top: 0; }
.spec__k {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.spec__v { color: var(--ink-soft); }

/* The phone and email in /contact/'s "Reach us directly" panel are the primary
   contact path on that page, not links inline in a sentence, so they get a
   real 44px target rather than the 19px the bare text gave them. */
.spec__v a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

@media (min-width: 640px) {
  .spec__row { grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: var(--s2); align-items: baseline; }
}

/* ── CHECKS — what's included ─────────────────────────────────────────────── */

.checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
}
@media (min-width: 640px)  { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s3);
  border: var(--rule) solid var(--ink);
  background: var(--white);
  color: var(--ink);
  transition: background-color var(--flip), color var(--flip);
}
.check:hover { background: var(--ink); color: var(--green); }

.work .check, .says .check, .areas .check {
  border-color: var(--green);
  background: var(--ink);
  color: var(--green);
}
.work .check:hover, .says .check:hover, .areas .check:hover { background: var(--green); color: var(--ink); }

/* Square, not a circle — nothing on this page is round. Black glyph on green
   is 14.5:1; the tick is never a bare green mark on a light surface. */
.check__tick {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.875rem;
  line-height: 1;
}
.check:hover .check__tick { background: var(--green); color: var(--ink); }

.check__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.25;
  margin-bottom: 4px;
}
.check__d { font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); }
.check:hover .check__d { color: currentColor; }
.work .check .check__d, .says .check .check__d, .areas .check .check__d { color: currentColor; }

/* ── STEPS — numbered process ─────────────────────────────────────────────── */

.steps { border-top: var(--rule) solid currentColor; }

.step {
  display: grid;
  gap: var(--s1);
  padding-block: var(--s3);
  border-bottom: var(--rule) solid currentColor;
}

.step__no {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 8vw, 4.5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
}
.step__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  text-transform: uppercase;
  line-height: 1.15;
}
.step__d { max-width: 60ch; font-size: 0.9375rem; line-height: 1.6; }

@media (min-width: 1024px) {
  .step {
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: baseline;
    column-gap: var(--s4);
    padding-block: var(--s4);
  }
}

/* ── PROSE — long-form copy blocks ────────────────────────────────────────── */

.prose { max-width: 68ch; }
.prose p + p { margin-top: var(--s2); }
.prose h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  text-transform: uppercase;
  line-height: 1.15;
  margin-top: var(--s4);
  margin-bottom: var(--s2);
}

/* ── RELATED SERVICES ─────────────────────────────────────────────────────── */

.related {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
}
@media (min-width: 640px)  { .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .related { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rel {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-height: 132px;
  padding: var(--s3);
  border: var(--rule) solid currentColor;
  text-decoration: none;
  transition: background-color var(--flip), color var(--flip);
}
.rel__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.0625rem;
  text-transform: uppercase;
  line-height: 1.15;
}
.rel__d { font-size: 0.875rem; line-height: 1.5; }
.rel__go { margin-top: auto; font-family: var(--display); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* Flood inversion, matched to the surface the row is sitting on. */
.svcs .rel:hover, .svcs .rel:focus-visible,
.why .rel:hover,  .why .rel:focus-visible,
.faq .rel:hover,  .faq .rel:focus-visible { background: var(--ink); color: var(--green); }

.work .rel:hover, .work .rel:focus-visible,
.says .rel:hover, .says .rel:focus-visible,
.areas .rel:hover, .areas .rel:focus-visible { background: var(--green); color: var(--ink); }

.hero .rel:hover, .hero .rel:focus-visible,
.guar .rel:hover, .guar .rel:focus-visible,
.cta .rel:hover,  .cta .rel:focus-visible { background: var(--ink); color: var(--green); }

/* ── SURFACES ──────────────────────────────────────────────────────────────
   c-loud.css ties its surface colours to semantic section classes (.faq is
   paper, .says is black, .guar is green). Service pages need more sections
   than there are semantic names, so these are neutral equivalents — use them
   instead of borrowing .faq or .says purely for their colour. */

.surf {
  padding-block: clamp(var(--s6), 9vw, var(--s8));
  padding-inline: var(--pad);
}
.surf--paper { background: var(--paper); color: var(--ink);   --fx: var(--ink); }
.surf--ink   { background: var(--ink);   color: var(--green); --fx: var(--green); }
.surf--green { background: var(--green); color: var(--ink);   --fx: var(--ink); }

/* Inversions for components sitting on a neutral surface. */
.surf--ink .check { border-color: var(--green); background: var(--ink); color: var(--green); }
.surf--ink .check:hover { background: var(--green); color: var(--ink); }
.surf--ink .check .check__d { color: currentColor; }
.surf--ink .spec { border-color: var(--green); }
.surf--ink .split__no { background: var(--green); color: var(--ink); }
.surf--ink .rel:hover, .surf--ink .rel:focus-visible { background: var(--green); color: var(--ink); }
.surf--paper .rel:hover, .surf--paper .rel:focus-visible,
.surf--green .rel:hover, .surf--green .rel:focus-visible { background: var(--ink); color: var(--green); }

/* ── ILIST — the bulleted list the reset removes ──────────────────────────
   The global reset strips markers from every ul, which meant deliverable
   lists inside body copy were getting flattened into prose and losing their
   scannability. Square markers, because nothing here is round. */

.ilist { display: grid; gap: 10px; margin-top: var(--s2); }
.ilist li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.ilist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  background: var(--green);
}
/* On green the marker would vanish, so it flips to ink. */
.hero .ilist li::before, .guar .ilist li::before,
.cta .ilist li::before, .surf--green .ilist li::before { background: var(--ink); }

/* ── CHIPS — non-interactive labels ───────────────────────────────────────
   .pills are anchors. This is the same shape for items with nowhere to link. */

.chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.chips li {
  padding: 8px 14px;
  border: 2px solid currentColor;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* ── PANELS — a row of .spec panels ───────────────────────────────────────
   .checks was being borrowed for this and left an orphan at 1024, where it
   is 2-up but these rows are usually 3. */

.panels { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 1024px) { .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.panels--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .panels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── FILTERS ──────────────────────────────────────────────────────────────
   Revealed by site.js. Hidden by default so a no-JS visitor sees the full
   unfiltered grid rather than dead buttons. */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s4);
}
.filters[hidden] { display: none; }

.filter {
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--flip), color var(--flip);
}
.filter__n { opacity: 0.55; margin-left: 6px; }

/* Active and hover both flood, matched to the surface underneath. */
.surf--ink .filter:hover, .surf--ink .filter.is-active,
.work .filter:hover,      .work .filter.is-active,
.says .filter:hover,      .says .filter.is-active { background: var(--green); color: var(--ink); }

.surf--paper .filter:hover, .surf--paper .filter.is-active,
.why .filter:hover,         .why .filter.is-active,
.faq .filter:hover,         .faq .filter.is-active { background: var(--ink); color: var(--green); }

.surf--green .filter:hover, .surf--green .filter.is-active,
.hero .filter:hover,        .hero .filter.is-active { background: var(--ink); color: var(--green); }

.filter.is-active .filter__n { opacity: 0.7; }

.filter-status {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s3);
}

/* ── PORTFOLIO GRID ───────────────────────────────────────────────────────
   .tile (c-loud.css) is a rotated poster for the homepage. Portfolio cards
   need to carry a name, a sector and a live domain, so they are their own
   component — square to the grid, no rotation. */

.pgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 640px)  { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pcard { display: flex; }
.pcard[hidden] { display: none; }

.pcard > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: var(--rule) solid var(--ink);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--flip), color var(--flip);
}
.surf--ink .pcard > a, .work .pcard > a { border-color: var(--green); }

.pcard img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  border-bottom: var(--rule) solid var(--ink);
}
.surf--ink .pcard img, .work .pcard img { border-bottom-color: var(--green); }

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  padding: var(--s3);
}

.pcard__sector {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.pcard__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.15;
  text-transform: uppercase;
}
.pcard__desc { font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); }

.pcard__go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s2);
  border-top: 2px solid currentColor;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pcard__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Flood inversion, matching every other interactive block in this direction. */
.pcard > a:hover, .pcard > a:focus-visible { background: var(--ink); color: var(--green); }
.pcard > a:hover .pcard__desc, .pcard > a:focus-visible .pcard__desc { color: currentColor; }

/* ── CONTACT ──────────────────────────────────────────────────────────────
   The form is the page, so it gets the wider column. c-loud.css already
   styles .field / .alert / .form-note unscoped, so they work outside the
   modal — only <select> was missing. */

.cgrid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 1024px) {
  .cgrid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--s6); }
}

.cform {
  border: var(--rule) solid var(--ink);
  background: var(--white);
  padding: var(--s3);
}
@media (min-width: 640px) { .cform { padding: var(--s4); } }

.cform__h {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: var(--s1);
}
.cform__sub { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: var(--s3); }

/* Native arrow is kept — it is the affordance users expect and it stays
   legible in forced-colours mode. */
.field select {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--s2);
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
}
.field select:focus-visible { outline: 4px solid var(--ink); outline-offset: 0; }

.crow { display: grid; gap: 0; }
@media (min-width: 640px) { .crow { grid-template-columns: 1fr 1fr; column-gap: var(--s2); } }

/* Aside — contact details and the booking block stacked. */
.caside { display: grid; gap: var(--s3); }

.cbook {
  border: var(--rule) solid var(--ink);
  background: var(--ink);
  color: var(--green);
  padding: var(--s3);
}
.cbook__h {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.125rem;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: var(--s1);
}
.cbook__d { font-size: 0.9375rem; line-height: 1.55; margin-bottom: var(--s3); }
.cbook .btn { width: 100%; }

/* ── SECTION HEAD (shared by the service sections) ────────────────────────── */

.sec__head {
  display: grid;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.sec__h { font-size: clamp(2rem, 8vw, 4.5rem); }
.sec__lede { font-size: clamp(1rem, 1.5vw, 1.125rem); max-width: 60ch; }

@media (min-width: 1024px) {
  .sec__head { margin-bottom: var(--s6); }
}