/* Service pages and the What We Do menu.

   The header was already at capacity, so the four lines hang off the existing
   What We Do item rather than becoming four more. That item is both a link to
   the index and a parent that reveals the four: top-level count unchanged, and
   the four-line idea reinforced instead of split across two vocabularies. */

/* ------------------------------------------------------- the header menu */
.tn-wrap { position: relative; display: inline-flex; }
.tn-parent { display: inline-flex; align-items: center; gap: 6px; }
.tn-caret {
  width: 10px; flex: none;
  transition: transform .35s var(--ease);
}
.tn-wrap:hover .tn-caret,
.tn-wrap:focus-within .tn-caret { transform: rotate(180deg); }

.svc-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  width: min(460px, calc(100vw - 32px));
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(19, 26, 44, .18);
  padding: 8px;
  display: grid;
  gap: 1px;
  opacity: 0;
  translate: -50% -8px;
  pointer-events: none;
  transition: opacity .28s var(--ease), translate .4s var(--ease-out);
  z-index: 90;
}
/* A small bridge, so the pointer can cross the gap without the menu closing. */
.svc-menu::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.tn-wrap:hover .svc-menu,
.tn-wrap:focus-within .svc-menu,
.tn-wrap.is-open .svc-menu {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}

.svc-mi {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink);
  transition: background .25s var(--ease);
}
.svc-mi:hover, .svc-mi:focus-visible { background: var(--desk); }
.svc-mi[aria-current='page'] { background: rgba(190, 150, 72, .13); }
.svc-mi-n {
  font-family: var(--f-display); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; color: var(--gold-deep); padding-top: 3px;
}
.svc-mi b {
  display: block;
  font-family: var(--f-display); font-weight: 600; font-size: 16px;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1.1;
}
.svc-mi em {
  display: block; margin-top: 3px;
  font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--muted);
}
.svc-mi-all {
  grid-template-columns: 1fr;
  justify-items: start;
  font-family: var(--f-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px;
}

/* ------------------------------------------------------------ the index */
.svc-cards {
  margin: clamp(30px, 4vw, 50px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.svc-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: transform .5s var(--spring), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
.svc-card:hover, .svc-card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 22px 50px rgba(19, 26, 44, .13);
}
.svc-card-plate { display: block; background: var(--desk); border-bottom: 1px solid var(--line); }
.svc-card-body { display: grid; gap: 5px; padding: 20px 22px 24px; }
.svc-card-n {
  font-family: var(--f-display); font-weight: 700; font-size: 11px;
  letter-spacing: .2em; color: var(--gold-deep);
}
.svc-card-k {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(22px, 2.3vw, 29px);
  text-transform: uppercase; line-height: 1; color: var(--navy);
}
.svc-card-v { font-size: 14.5px; color: var(--ink-2); margin-top: 2px; }
.svc-card-go {
  margin-top: 10px;
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
}

/* --------------------------------------------------- a single service -- */
.plate-svg { display: block; width: 100%; height: auto; }

.svc-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}
.svc-plate {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
}
.svc-plate figcaption {
  padding: 10px 16px 13px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.4; color: var(--faint);
}
.svc-approach p { font-size: clamp(15px, 1.25vw, 18px); color: var(--ink-2); }

.svc-h2 {
  font-size: clamp(24px, 3vw, 40px);
  max-width: 20ch;
}
.svc-deliver { margin-top: clamp(20px, 2.6vw, 32px); max-width: 76ch; }
.svc-sample { margin-top: clamp(32px, 4.5vw, 54px); max-width: 76ch; }

.svc-next {
  margin: clamp(24px, 3.4vw, 40px) 0 clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.svc-next-i {
  display: grid; gap: 4px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid #ece4d2;
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: transform .45s var(--spring), border-color .3s var(--ease);
}
.svc-next-i:hover, .svc-next-i:focus-visible { transform: translateY(-4px); border-color: var(--gold); }
.svc-next-n {
  font-family: var(--f-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .2em; color: var(--gold-deep);
}
.svc-next-k {
  font-family: var(--f-display); font-weight: 700; font-size: 20px;
  text-transform: uppercase; line-height: 1; color: var(--navy);
}
.svc-next-v { font-size: 13.5px; color: var(--ink-2); }

/* The home console now links through to each full line. */
.cpanel-more {
  display: inline-flex; align-items: center;
  min-height: 44px;            /* thumb-sized on touch */
  margin: -14px 0 10px;
  font-family: var(--f-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.cpanel-more:hover { border-bottom-color: var(--gold); }

@media (max-width: 1000px) {
  .svc-split { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* No dropdown on touch: the four are nested in the sheet instead. */
  .svc-menu { display: none; }
  .tn-caret { display: none; }
  .sh-sub { padding-left: 22px; }
  .sh-sub .sh-t { font-size: 16px; color: var(--ink-2); }
}

@media (max-width: 900px) {
  /* The footer lockup is the last sub-44 target on the page. */
  .foot-wrap .lockup { min-height: 48px; }
}