/* Tokens from DESIGN.md (IBM / Carbon) */
:root {
  --primary: #0f62fe;
  --on-primary: #ffffff;
  --ink: #161616;
  --ink-muted: #525252;
  --ink-subtle: #8c8c8c;
  --canvas: #ffffff;
  --surface-1: #f4f4f4;
  --surface-2: #e0e0e0;
  --inverse-canvas: #161616;
  --inverse-surface-1: #262626;
  --inverse-ink: #ffffff;
  --inverse-ink-muted: #c6c6c6;
  --hairline: #e0e0e0;
  --hairline-strong: #161616;
  --blue-60: #0043ce;
  --blue-80: #002d9c;
  --blue-hover: #0050e6;

  --s-xxs: 4px; --s-xs: 8px; --s-sm: 12px; --s-md: 16px;
  --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px; --s-section: 96px;

  --gutter: 32px;
  --max: 1584px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0.16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--blue-60); text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
p { margin: 0 0 var(--s-md); }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Type scale */
.display-xl { font-size: 76px; font-weight: 300; line-height: 1.17; letter-spacing: -0.5px; }
.display-md { font-size: 42px; font-weight: 300; line-height: 1.2; letter-spacing: 0; }
.headline   { font-size: 32px; font-weight: 400; line-height: 1.25; letter-spacing: 0; }
.card-title { font-size: 24px; font-weight: 400; line-height: 1.33; letter-spacing: 0; }
.subhead    { font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.body-lg    { font-size: 18px; line-height: 1.5; letter-spacing: 0; }
/* Section labels: a short accent rule so they're easy to spot */
.eyebrow    { display: flex; align-items: center; gap: var(--s-sm); font-size: 16px; line-height: 1.375; font-weight: 600; letter-spacing: 0.16px; color: var(--ink); }
.eyebrow::before { content: ""; flex: none; width: 24px; height: 2px; background: var(--primary); }
.muted { color: var(--ink-muted); }

/* Utility bar */
.utility { background: var(--surface-1); color: var(--ink-muted); height: 32px; font-size: 12px; letter-spacing: 0.32px; }
.utility .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); }
.utility a { color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; }
.utility a:hover { color: var(--ink); text-decoration: none; }
.utility .contacts { display: flex; gap: var(--s-lg); }
.utility svg { width: 14px; height: 14px; fill: currentColor; }

/* Top nav */
.top-nav { position: sticky; top: 0; z-index: 10; background: var(--canvas); border-bottom: 1px solid var(--hairline); }
.top-nav .wrap { display: flex; align-items: stretch; height: 64px; }
.brand { display: flex; align-items: center; padding-right: var(--s-xl); margin-right: var(--s-md); border-right: 1px solid var(--hairline); }
.brand img { height: 48px; width: auto; }
.nav-links { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: flex; align-items: center; height: 100%; padding: 0 var(--s-md);
  color: var(--ink-muted); font-size: 14px; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--ink); background: var(--surface-1); text-decoration: none; }
.nav-cta { margin-left: auto; display: flex; align-items: center; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; width: 64px; cursor: pointer; color: var(--ink); }
.nav-toggle svg { width: 20px; height: 20px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s-xxl); min-height: 48px; padding: 12px 16px; font: inherit; font-size: 16px; line-height: 1.25; letter-spacing: 0; border: 1px solid transparent; border-radius: 0; cursor: pointer; }
.btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--blue-hover); color: var(--on-primary); }
.btn-primary:active { background: var(--blue-80); }
.btn-tertiary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-tertiary:hover { background: var(--primary); color: var(--on-primary); }
.btn-inverse { background: var(--canvas); color: var(--primary); }
.btn-inverse:hover { background: var(--surface-1); color: var(--blue-60); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-md); }

/* Hero */
.hero .eyebrow { margin-bottom: var(--s-lg); }
.hero h1 { margin-bottom: var(--s-lg); }
.hero .lead { max-width: 680px; margin-bottom: var(--s-xl); }

/* Proof stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stat { padding: var(--s-lg) var(--s-lg) var(--s-lg) 0; }
.stat + .stat { padding-left: var(--s-lg); border-left: 1px solid var(--hairline); }
.stat .num { font-size: 42px; font-weight: 300; line-height: 1.2; }
.stat .lbl { font-size: 14px; color: var(--ink-muted); margin-top: var(--s-xxs); }

/* Sections */
section { padding: var(--s-section) 0; }
.band { background: var(--surface-1); }
.section-head { display: grid; grid-template-columns: repeat(16, minmax(0,1fr)); column-gap: var(--s-xl); margin-bottom: var(--s-xxl); }
.section-head > * { grid-column: 1 / span 10; }
.section-head .eyebrow { margin-bottom: var(--s-md); }
.section-head p.subhead { margin: var(--s-md) 0 0; }

/* Tile grids — hairline grid, no gaps, no shadows */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.tile { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--canvas); padding: var(--s-xl) var(--s-lg); display: flex; flex-direction: column; gap: var(--s-lg); transition: background .11s; }
.tile:hover { background: var(--surface-1); }
.band .tile:hover { background: var(--canvas); box-shadow: inset 0 -2px 0 var(--primary); }
.tile .icon { width: 32px; height: 32px; color: var(--primary); }
.tile .icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.tile h3 { font-size: 20px; line-height: 1.4; letter-spacing: 0; margin-bottom: var(--s-xs); }
.tile p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { border-top: 2px solid var(--hairline); padding: var(--s-lg) var(--s-lg) 0 0; counter-increment: step; }
.steps li:first-child { border-top-color: var(--primary); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-size: 14px; color: var(--primary); margin-bottom: var(--s-md); }
.steps h3 { font-size: 20px; line-height: 1.4; letter-spacing: 0; margin-bottom: var(--s-xs); }
.steps p { font-size: 14px; color: var(--ink-muted); margin: 0; }

/* Standards split */
.split { display: grid; grid-template-columns: repeat(16, minmax(0,1fr)); column-gap: var(--s-xl); align-items: stretch; }
/* The copy sets the row height; the photo fills it, cropped, instead of stretching the row */
.split .media { grid-column: 1 / span 6; background: var(--inverse-canvas); align-self: stretch; }
.split .media img { width: 100%; object-fit: cover; }
@media (min-width: 1057px) {
  .split .media { position: relative; min-height: 480px; }
  .split .media img { position: absolute; inset: 0; height: 100%; object-position: 40% 35%; }
}
.split .copy { grid-column: 8 / span 9; align-self: center; }
.split .copy h2 { margin-bottom: var(--s-lg); }
.checks { list-style: none; margin: var(--s-xl) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); }
.checks li { padding: var(--s-lg) var(--s-lg) var(--s-lg) 0; border-bottom: 1px solid var(--hairline); }
.checks li:nth-child(even) { padding-left: var(--s-lg); border-left: 1px solid var(--hairline); }
.checks strong { display: flex; align-items: center; gap: var(--s-xs); font-weight: 600; font-size: 16px; margin-bottom: var(--s-xxs); }
.checks strong svg { width: 16px; height: 16px; fill: var(--primary); flex: none; }
.checks span { font-size: 14px; color: var(--ink-muted); }

/* Partner logo marquee */
.partners { padding: var(--s-xxl) 0; border-bottom: 1px solid var(--hairline); }
.partners .eyebrow { margin: 0 0 var(--s-lg); }
.marquee {
  overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; list-style: none; margin: 0; padding: 0; }
.logo-tile {
  /* One set must be at least as wide as the screen for a gap-free loop (seven logos are visible at once) */
  width: max(224px, calc(100vw / 7)); height: 104px; flex: none; display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--hairline); padding: var(--s-lg);
  color: var(--ink-subtle); transition: color .11s, background .11s;
}
.logo-tile:hover { color: var(--ink); background: var(--surface-1); }
/* Full-colour logos: red marks wash out when desaturated */
.logo-tile img { height: 40px; width: auto; max-width: 160px; max-height: 40px; object-fit: contain; mix-blend-mode: multiply; transition: filter .11s, opacity .11s; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; }
  .marquee ul { flex-wrap: wrap; }
  .marquee ul[aria-hidden="true"] { display: none; }
}

/* Projects map */
.projects-grid { display: grid; grid-template-columns: repeat(16, minmax(0,1fr)); column-gap: var(--s-xl); align-items: start; }
.map-col { grid-column: 1 / span 10; min-width: 0; }
.panel-col { grid-column: 11 / span 6; position: sticky; top: 88px; }
.map-frame { background: var(--canvas); border: 1px solid var(--hairline); }
.island-tabs { position: relative; display: flex; overflow-x: auto; border-bottom: 1px solid var(--hairline); scrollbar-width: none; }
.island-tabs::-webkit-scrollbar { display: none; }
.island-tabs button {
  flex: none; display: flex; align-items: center; gap: var(--s-xs); min-height: 48px; padding: 0 var(--s-md);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: inherit; font-size: 14px; letter-spacing: 0.16px; color: var(--ink-muted); cursor: pointer; white-space: nowrap;
}
.island-tabs button:hover { color: var(--ink); background: var(--surface-1); }
.island-tabs button[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }
.island-tabs .n { font-size: 12px; font-weight: 400; color: var(--ink-subtle); }
.map-stage { position: relative; background: var(--surface-1); overflow: hidden; }
.map-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-stage .land { fill: var(--canvas); stroke: #c6c6c6; stroke-width: 0.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map-stage .islet { fill: #c6c6c6; }
.pin {
  position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: var(--ink); color: var(--inverse-ink); box-shadow: 0 0 0 2px var(--canvas);
  font: 600 13px/1 "IBM Plex Sans", sans-serif; cursor: pointer; transition: background .11s, width .11s, height .11s;
}
.pin:hover { background: #393939; }
.pin[aria-pressed="true"] { background: var(--primary); width: 40px; height: 40px; font-size: 15px; box-shadow: 0 0 0 3px var(--canvas), 0 0 0 4px var(--primary); z-index: 2; }
.pin[aria-pressed="true"]::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--primary); animation: ping 2s cubic-bezier(.2,0,.38,.9) infinite; }
@keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin[aria-pressed="true"]::after { animation: none; } }
.pin-label {
  position: absolute; white-space: nowrap; pointer-events: none;
  font-size: 12px; font-weight: 400; letter-spacing: 0.32px; color: var(--ink-muted);
  text-shadow: 0 0 3px var(--surface-1), 0 0 3px var(--surface-1), 0 0 3px var(--surface-1);
}
.pin[aria-pressed="true"] .pin-label { color: var(--ink); font-weight: 600; }
.pin-label.right  { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.pin-label.left   { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.pin-label.top    { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.pin-label.bottom { top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.map-foot { display: flex; justify-content: space-between; gap: var(--s-md); padding: var(--s-md) var(--s-lg); border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-muted); }
.map-foot .legend { display: inline-flex; align-items: center; gap: var(--s-xs); }
/* Miniature pin, so the key matches what's on the map */
.map-foot .swatch { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--inverse-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: 0; }

/* Long lists scroll inside the panel on desktop */
.panel { background: var(--canvas); border: 1px solid var(--hairline); padding: var(--s-xl); max-height: calc(100vh - 112px); overflow-y: auto; }
.panel-head { display: flex; justify-content: space-between; gap: var(--s-md); margin-bottom: var(--s-xs); }
.panel h3 { margin-bottom: var(--s-lg); }
.panel .rule { width: 48px; height: 2px; background: var(--primary); margin-bottom: var(--s-lg); }
.panel-empty { border-top: 1px solid var(--hairline); padding-top: var(--s-lg); }
.panel-body { animation: fade .24s cubic-bezier(.2,0,.38,.9); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: repeat(16, minmax(0,1fr)); column-gap: var(--s-xl); }
.faq-grid .intro { grid-column: 1 / span 5; }
.faq-grid .intro h2 { margin-bottom: var(--s-lg); }
.faq { grid-column: 7 / span 10; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-lg);
  padding: var(--s-lg) 0; font-size: 20px; line-height: 1.4; letter-spacing: 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--primary); }
.faq summary svg { width: 16px; height: 16px; flex: none; fill: currentColor; transition: transform .15s; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .answer { padding: 0 var(--s-xxl) var(--s-lg) 0; color: var(--ink-muted); }
.faq .answer p:last-child { margin-bottom: 0; }

/* Closing CTA */
.closing { background: var(--surface-1); border-top: 1px solid var(--hairline); }
.closing .grid { display: grid; grid-template-columns: repeat(16, minmax(0,1fr)); column-gap: var(--s-xl); row-gap: var(--s-xl); align-items: start; }
.closing .copy { grid-column: 1 / span 9; }
.closing .copy h2 { margin-bottom: var(--s-lg); }
.closing .contact { grid-column: 11 / span 6; border-top: 2px solid var(--primary); padding-top: var(--s-lg); }
.closing .contact dl { margin: 0 0 var(--s-xl); display: grid; grid-template-columns: auto 1fr; gap: var(--s-xs) var(--s-lg); font-size: 14px; }
.closing .contact dt { color: var(--ink-muted); }
.closing .contact dd { margin: 0; }

/* Footer */
footer { background: var(--inverse-canvas); color: var(--inverse-ink-muted); padding: 64px 0 var(--s-xl); font-size: 14px; line-height: 1.5; }
footer .grid { display: grid; grid-template-columns: repeat(16, minmax(0,1fr)); column-gap: var(--s-xl); row-gap: var(--s-xl); }
footer .lead { grid-column: 1 / span 6; color: var(--inverse-ink); }
footer .col { grid-column: span 3; }
footer .col.wide { grid-column: span 4; }
footer h4 { font-size: 14px; font-weight: 600; color: var(--inverse-ink); margin-bottom: var(--s-md); }
footer address { font-style: normal; }
footer a { color: var(--inverse-ink-muted); }
footer a:hover { color: var(--inverse-ink); }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li + li { margin-top: var(--s-xs); }
footer .bar { margin-top: 64px; padding-top: var(--s-lg); border-top: 1px solid var(--inverse-surface-1); display: flex; justify-content: space-between; align-items: center; gap: var(--s-lg); flex-wrap: wrap; font-size: 12px; letter-spacing: 0.32px; }

/* Responsive */
@media (max-width: 1312px) {
  .display-xl { font-size: 60px; letter-spacing: -0.4px; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-xl); }
}
@media (max-width: 1056px) {
  :root { --gutter: 24px; --s-section: 64px; }
  .display-xl { font-size: 48px; }
  .display-md { font-size: 36px; }
  .section-head, .projects-grid, .split, .faq-grid, .closing .grid { grid-template-columns: minmax(0, 1fr); }
  .section-head > *, .map-col, .panel-col, .split .media, .split .copy,
  .faq-grid .intro, .faq, .closing .copy, .closing .contact { grid-column: 1 / -1; }
  .split .copy { margin-top: var(--s-xl); }
  .faq { margin-top: var(--s-xl); }
  .panel-col { position: static; margin-top: var(--s-lg); }
  .tiles, .tiles.four { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  footer .grid { grid-template-columns: 1fr 1fr; }
  footer .lead { grid-column: 1 / -1; }
  footer .col, footer .col.wide { grid-column: span 1; }
  .nav-links a { padding: 0 var(--s-sm); }
}
@media (max-width: 900px) {
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .nav-cta { display: none; }
  .brand { border-right: 0; }
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--canvas); border-bottom: 1px solid var(--hairline); }
  .nav-links.open { display: flex; }
  .nav-links a { height: 48px; padding: 0 var(--gutter); border-bottom: 0; border-left: 2px solid transparent; }
}
@media (max-width: 672px) {
  :root { --gutter: 16px; --s-section: 48px; }
  .utility { display: none; }
  .display-xl { font-size: 36px; letter-spacing: 0; }
  .display-md { font-size: 30px; }
  .headline { font-size: 24px; }
  .body-lg { font-size: 16px; }
  .btn-row .btn { width: 100%; }
  .tiles, .tiles.four, .steps, .checks { grid-template-columns: 1fr; }
  .checks li:nth-child(even) { padding-left: 0; border-left: 0; }
  .stat .num { font-size: 32px; }
  .faq summary { font-size: 18px; }
  .faq .answer { padding-right: 0; }
  .pin { width: 24px; height: 24px; font-size: 11px; }
  .pin[aria-pressed="true"] { width: 30px; height: 30px; font-size: 13px; }
  .pin-label { display: none; }
  .map-foot { padding: var(--s-sm) var(--s-md); font-size: 12px; }
  .panel { padding: var(--s-lg); }
  footer .grid { grid-template-columns: 1fr; }
}

/* ---- Inner pages ---- */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }
@media (max-width: 900px) { .nav-links a[aria-current="page"] { border-left-color: var(--primary); } }

.crumbs { display: flex; gap: var(--s-xs); list-style: none; margin: 0 0 var(--s-xxl); padding: 0; font-size: 14px; color: var(--ink-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-xs); color: var(--ink-subtle); }
.crumbs a { color: var(--ink-muted); }
.page-hero h1 { max-width: 1000px; margin-bottom: var(--s-lg); }
.page-hero .lead { max-width: 760px; margin-bottom: var(--s-xl); }

/* Jump links under the hero */
.jump { position: sticky; top: 64px; z-index: 5; background: var(--canvas); border-bottom: 1px solid var(--hairline); }
.jump ul { display: flex; overflow-x: auto; list-style: none; margin: 0; padding: 0; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
.jump a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--s-md); white-space: nowrap; font-size: 14px; color: var(--ink-muted); border-bottom: 2px solid transparent; }
.jump a:hover { color: var(--ink); background: var(--surface-1); text-decoration: none; }
.jump a.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }

/* Detail rows: one per service / industry */
.detail { display: grid; grid-template-columns: repeat(16, minmax(0,1fr)); column-gap: var(--s-xl); padding: var(--s-xxl) 0; border-top: 1px solid var(--hairline); scroll-margin-top: 56px; /* plus html scroll-padding: clears nav + jump bar */ }
.detail:first-child { border-top: 0; padding-top: 0; }
.detail .head { grid-column: 1 / span 5; }
.detail .head .icon { display: block; width: 32px; height: 32px; color: var(--primary); margin-bottom: var(--s-lg); }
.detail .head .icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.detail .head .num { display: block; font-size: 14px; color: var(--primary); margin-bottom: var(--s-md); }
.detail .head h2 { margin-bottom: var(--s-md); }
.detail .body { grid-column: 7 / span 10; }
.detail .body > p:first-child { font-size: 18px; line-height: 1.5; letter-spacing: 0; color: var(--ink); }
.detail h3 { font-size: 14px; font-weight: 600; margin-bottom: var(--s-sm); }
.ticks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.ticks li { display: flex; gap: var(--s-sm); padding: var(--s-sm) 0; border-bottom: 1px solid var(--hairline); font-size: 14px; color: var(--ink-muted); }
.ticks li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.3L3 7.8l.7-.7 2.8 2.8 5.8-5.8.7.7z'/%3E%3C/svg%3E") center/16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.3L3 7.8l.7-.7 2.8 2.8 5.8-5.8.7.7z'/%3E%3C/svg%3E") center/16px no-repeat; }
.callout { margin-top: var(--s-xl); padding: var(--s-lg); background: var(--surface-1); border-left: 2px solid var(--primary); font-size: 14px; color: var(--ink-muted); }
.callout strong { color: var(--ink); font-weight: 600; }
.callout a { font-weight: 600; }

/* About page */
.prose { max-width: 760px; }
.prose p { font-size: 18px; line-height: 1.6; letter-spacing: 0; color: var(--ink-muted); }
.prose p:first-of-type { color: var(--ink); }
.creds { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.creds > div { padding: var(--s-lg); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--canvas); }
.creds .k { font-size: 12px; letter-spacing: 0.32px; color: var(--ink-muted); margin-bottom: var(--s-xs); }
.creds .v { font-size: 20px; line-height: 1.4; letter-spacing: 0; }
.islands { display: flex; flex-wrap: wrap; gap: var(--s-xs); list-style: none; margin: var(--s-xl) 0 0; padding: 0; }
.islands li { border: 1px solid var(--hairline); background: var(--canvas); font-size: 14px; }
.islands li.hq { border-color: var(--primary); color: var(--primary); font-weight: 600; }

/* Draft markers: facts still to be confirmed by Cariboss. Remove the class once confirmed. */
.todo { background: #fcf4d6; box-shadow: 0 0 0 2px #fcf4d6; outline: 1px dashed #b28600; outline-offset: 2px; }

/* Service and industry rows keep two columns down to 900px */
@media (max-width: 900px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .detail .head, .detail .body { grid-column: 1 / -1; }
  .detail .body { margin-top: var(--s-lg); }
  .detail .head .photo { max-width: 560px; }
}
@media (max-width: 1056px) {
  .creds { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 672px) {
  .creds { grid-template-columns: 1fr; }
  .crumbs { margin-bottom: var(--s-xl); }
}

a.tile { color: inherit; text-decoration: none; }
a.tile:hover { text-decoration: none; }
a.tile:hover h3 { color: var(--primary); }
.see-all { margin-top: var(--s-xl); }
.jump ul { position: relative; }
/* Map pin for a location without a project count yet */
.pin.pin-dot { width: 16px; height: 16px; }
.pin.pin-dot[aria-pressed="true"] { width: 22px; height: 22px; }
@media (max-width: 672px) { .pin.pin-dot { width: 14px; height: 14px; } .pin.pin-dot[aria-pressed="true"] { width: 18px; height: 18px; } }

/* ---- Three-up stats ---- */
.brand:hover { text-decoration: none; }
.stats.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1056px) {
  .stats.three { grid-template-columns: 1fr 1fr 1fr; }
  .stats.three .stat:nth-child(3) { padding-left: var(--s-lg); border-left: 1px solid var(--hairline); border-top: 0; }
}
@media (max-width: 672px) {
  .stats.three { grid-template-columns: 1fr; }
  .stats.three .stat + .stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
}

/* ---- Photography ---- */
.detail .head .photo { margin: var(--s-lg) 0 0; }
.detail .head .photo img { width: 100%; object-fit: cover; border: 1px solid var(--hairline); }

/* ---- Photo banners: text over the image, with a dark Gaussian-blur panel on the left ---- */
.photo-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--inverse-canvas); color: var(--inverse-ink); border-bottom: 0;
  --copy-end: calc(max(0px, (100vw - var(--max)) / 2) + var(--gutter) + 720px); }
.hero.photo-hero { padding: 112px 0; }
.page-hero.photo-hero { padding: var(--s-xl) 0 var(--s-xxl); }
.photo-hero .hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; border: 0; }
.photo-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Sized to the text block (max 680px inside the page wrap), so long lines never run onto the bright part of a photo */
  background: linear-gradient(90deg, rgba(22,22,22,.88) 0, rgba(22,22,22,.78) var(--copy-end), rgba(22,22,22,.2) calc(var(--copy-end) + 320px));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(90deg, #000 var(--copy-end), transparent calc(var(--copy-end) + 320px));
          mask-image: linear-gradient(90deg, #000 var(--copy-end), transparent calc(var(--copy-end) + 320px));
}
.photo-hero .hero-copy { max-width: 680px; }
.photo-hero h1 { color: var(--inverse-ink); }
.photo-hero .eyebrow, .photo-hero .muted, .photo-hero .lead, .photo-hero .crumbs, .photo-hero .crumbs a { color: var(--inverse-ink-muted); }
.photo-hero .lead { margin-bottom: var(--s-xl); }
.photo-hero .crumbs { margin-bottom: var(--s-xl); }
.photo-hero .crumbs a:hover { color: var(--inverse-ink); }
.photo-hero .btn-tertiary { color: var(--inverse-ink); border-color: var(--inverse-ink); }
.photo-hero .btn-tertiary:hover { background: var(--inverse-ink); color: var(--ink); }
.page-hero.photo-hero h1 { font-size: 60px; letter-spacing: -0.4px; margin-bottom: var(--s-md); }
.page-hero.photo-hero .lead { margin-bottom: var(--s-lg); }

/* Section photos: wide slivers instead of tall frames */
.detail .head .photo img { aspect-ratio: 2 / 1; }

@media (max-width: 1056px) {
  .hero.photo-hero { padding: var(--s-xxl) 0; }
  .page-hero.photo-hero h1 { font-size: 42px; }
  /* Below desktop the text spans nearly the full width, so tint and lightly blur the whole photo */
  .photo-hero::before { -webkit-mask-image: none; mask-image: none; background: rgba(22,22,22,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  /* Phone and tablet crop starts at the top of the technician's head */
  .split .media img { height: auto; aspect-ratio: 3 / 2; object-position: 40% 52%; }
}
@media (max-width: 672px) {
  .hero.photo-hero { padding: var(--s-xxl) 0 var(--s-xl); }
  .page-hero.photo-hero h1 { font-size: 32px; letter-spacing: 0; }
}

/* ---- Partner logos: per-brand sizes so each mark reads at a similar weight ---- */

/* Section labels on photo banners and in the map panel */
.photo-hero .eyebrow { color: var(--inverse-ink); }
.photo-hero .eyebrow::before { background: #4589ff; }
/* Small inline labels (map panel) stay quiet */
.panel-head .eyebrow { display: inline; font-size: 14px; font-weight: 400; color: var(--ink-muted); }
.panel-head .eyebrow::before { display: none; }

/* Siemon's wordmark sits small beside its swoosh, so give it more height */
.logo-tile img[src*="siemon"] { height: 60px; max-width: 180px; }
/* Hikvision is a long, thin wordmark; Ubiquiti stacks two lines */
.logo-tile img[src*="hikvision"] { height: 28px; max-width: 190px; }
.logo-tile img[src*="ubiquiti"] { height: 52px; max-width: 170px; }


/* ---- Siemon page ---- */
.checks.wide { margin-top: 0; }
.note { margin: var(--s-lg) 0 0; font-size: 14px; color: var(--ink-muted); }
.compare-title { margin: var(--s-section) 0 var(--s-lg); max-width: 760px; }
.table-wrap { overflow-x: auto; }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: var(--s-md) var(--s-lg) var(--s-md) var(--s-md); border-bottom: 1px solid var(--hairline); }
.compare thead th { font-size: 14px; font-weight: 600; border-bottom: 2px solid var(--ink); }
.compare tbody th { font-weight: 600; width: 22%; padding-left: 0; }
.compare .hl { background: #edf5ff; color: var(--ink); }
.compare thead .hl { border-bottom-color: var(--primary); color: var(--primary); }
.compare td:not(.hl) { color: var(--ink-muted); }

/* ---- Projects panel ---- */
.job-more { margin: 0; padding-top: var(--s-md); font-size: 14px; color: var(--ink-muted); }
@media (max-width: 1056px) { .panel { max-height: none; overflow: visible; } }

/* ---- Projects panel: compact list grouped by type ---- */
.job-groups { border-bottom: 1px solid var(--hairline); }
.job-group summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-sm);
  min-height: 48px; padding: var(--s-sm) 0; border-top: 1px solid var(--hairline);
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.job-group summary::-webkit-details-marker { display: none; }
.job-group summary:hover { color: var(--primary); }
.job-group .job-n { margin-left: auto; min-width: 24px; padding: 0 var(--s-xs); text-align: center; font-size: 12px; font-weight: 600; line-height: 20px; border-radius: 10px; background: var(--surface-1); color: var(--ink-muted); }
.job-group summary svg { width: 16px; height: 16px; fill: currentColor; flex: none; transition: transform .15s; }
.job-group[open] summary svg { transform: rotate(180deg); }
.job-list { list-style: none; margin: 0 0 var(--s-sm); padding: 0; }
.job-list li { padding: 6px 0 6px var(--s-md); border-left: 2px solid var(--hairline); font-size: 15px; line-height: 1.4; letter-spacing: 0; color: var(--ink); }
.job-list .job-loc { color: var(--ink-muted); font-size: 13px; white-space: nowrap; }
.job-list .job-loc::before { content: "· "; }

/* ---- Head office (Barbados): deep red "HQ" pin, not counted ---- */
:root { --hq: #a2191f; --hq-hover: #750e13; }
.pin.pin-hq { background: var(--hq); font-size: 11px; letter-spacing: 0.32px; }
.pin.pin-hq:hover { background: var(--hq-hover); }
.pin.pin-hq[aria-pressed="true"] { background: var(--hq); box-shadow: 0 0 0 3px var(--canvas), 0 0 0 4px var(--hq); font-size: 12px; }
.pin.pin-hq[aria-pressed="true"]::after { border-color: var(--hq); }
.panel-hq .rule { background: var(--hq); }
.map-foot .legends { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-lg); }
.map-foot .swatch-hq { width: 26px; border-radius: 10px; background: var(--hq); font-size: 9px; letter-spacing: 0.32px; }
/* Push count and chevron to the right whether or not a count is shown */
.job-group summary .job-cat-name { margin-right: auto; }
.job-group .job-n { margin-left: 0; }
/* Siemon certification steps: same layout as the process steps, with room above */
.cert-steps { margin-top: var(--s-xl); }


/* ---- Contact page ---- */
.contact-grid { display: grid; grid-template-columns: repeat(16, minmax(0,1fr)); column-gap: var(--s-xl); align-items: start; }
.quote-form { grid-column: 1 / span 10; min-width: 0; }
.contact-aside { grid-column: 12 / span 5; position: sticky; top: 88px; display: grid; gap: var(--s-lg); }
.aside-block { border-top: 2px solid var(--primary); padding-top: var(--s-lg); }
.aside-block h2 { margin-bottom: var(--s-md); }
.contact-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-sm) var(--s-lg); font-size: 16px; }
.contact-list dt { color: var(--ink-muted); font-size: 14px; padding-top: 2px; }
.contact-list dd { margin: 0; }
.next-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.next-steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; column-gap: var(--s-sm); padding: var(--s-sm) 0; border-bottom: 1px solid var(--hairline); font-size: 14px; color: var(--ink-muted); }
.next-steps li::before { content: counter(step); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.next-steps strong { color: var(--ink); font-weight: 600; font-size: 16px; }

.quote-form fieldset { border: 0; margin: 0 0 var(--s-xxl); padding: 0; }
.quote-form legend { font-size: 32px; font-weight: 300; line-height: 1.25; padding: 0; margin-bottom: var(--s-lg); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg) var(--s-lg); margin-bottom: var(--s-lg); }
.field { display: flex; flex-direction: column; gap: var(--s-xs); margin-bottom: var(--s-lg); }
.field-grid .field { margin-bottom: 0; }
.field label, .field .label { font-size: 14px; color: var(--ink-muted); letter-spacing: 0.16px; }
.req { color: var(--hq); }
.quote-form input:not([type="checkbox"]):not([type="radio"]), .quote-form select, .quote-form textarea {
  width: 100%; min-height: 48px; padding: 11px 16px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface-1); border: 0; border-bottom: 1px solid #8d8d8d; border-radius: 0; outline: 2px solid transparent; outline-offset: -2px;
}
.quote-form textarea { resize: vertical; line-height: 1.5; }
.quote-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23161616' d='M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline-color: var(--primary); }
.quote-form ::placeholder { color: var(--ink-subtle); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xs) var(--s-lg); margin-top: var(--s-xxs); }
.choice { display: flex; align-items: flex-start; gap: var(--s-sm); font-size: 16px; color: var(--ink); cursor: pointer; padding: 6px 0; }
.choice input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--primary); }
.choice-feature { margin: 0 0 var(--s-lg); padding: var(--s-md); background: #edf5ff; border-left: 2px solid var(--primary); }
.form-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-lg); }
.form-note { margin: 0; font-size: 14px; color: var(--ink-muted); }
.form-status { margin-top: var(--s-md); font-size: 14px; color: var(--ink); }
.form-status:empty { display: none; }

@media (max-width: 1056px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .quote-form, .contact-aside { grid-column: 1 / -1; }
  .contact-aside { position: static; margin-top: var(--s-xl); }
}
@media (max-width: 672px) {
  .field-grid, .choices { grid-template-columns: 1fr; }
  .quote-form legend { font-size: 24px; }
  .form-foot .btn { width: 100%; }
}
.photo-hero .lead a { color: var(--inverse-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }


/* ---- Projects page ---- */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.feature-card { padding: var(--s-xl) var(--s-lg); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; }
.fc-meta { margin: 0 0 var(--s-md); font-size: 12px; letter-spacing: 0.32px; color: var(--ink-muted); }
.fc-title { font-size: 24px; line-height: 1.33; letter-spacing: 0; margin-bottom: var(--s-lg); }
.fc-stat { margin: 0; font-size: 42px; font-weight: 300; line-height: 1.1; color: var(--primary); }
.fc-stat-label { margin: var(--s-xxs) 0 var(--s-lg); font-size: 14px; color: var(--ink); }
.fc-scope { margin: auto 0 0; padding-top: var(--s-md); border-top: 1px solid var(--hairline); font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

.region-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.region { padding: var(--s-lg); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.region-name { margin: 0; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: var(--s-xs); flex-wrap: wrap; }
.region-name .n { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.region ul { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--ink-muted); }

@media (max-width: 1056px) {
  .featured-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 672px) {
  .featured-grid { grid-template-columns: 1fr; }
}

/* ---- About: milestones timeline ---- */
.timeline { list-style: none; margin: 0; padding: 0; max-width: 960px; border-left: 2px solid var(--hairline); }
.timeline li { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-lg); padding: var(--s-md) 0 var(--s-md) var(--s-xl); }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--canvas); border: 2px solid var(--primary); }
.timeline li:first-child::before { background: var(--primary); }
.tl-year { font-size: 20px; font-weight: 300; line-height: 1.4; color: var(--primary); }
.timeline p { margin: 0; font-size: 16px; line-height: 1.5; padding-top: 2px; }
.prose.copy p:first-of-type { color: var(--ink-muted); }
@media (max-width: 672px) {
  .timeline li { grid-template-columns: 1fr; gap: var(--s-xxs); padding-left: var(--s-lg); }
}

/* About: "Where we work" chips link to that location on the homepage map */
.islands a { display: block; padding: var(--s-xs) var(--s-md); color: inherit; text-decoration: none; }
.islands a:hover { background: var(--surface-1); color: var(--primary); text-decoration: none; }
.islands li.hq a:hover { background: #edf5ff; }

/* ---- Projects: compact, searchable table ---- */
.proj-toolbar { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-lg); align-items: end; }
.proj-toolbar .field { margin: 0; }
.proj-toolbar .field label { font-size: 14px; color: var(--ink-muted); }
.proj-toolbar input, .proj-toolbar select {
  width: 100%; min-height: 48px; padding: 11px 16px; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--canvas); border: 0; border-bottom: 1px solid #8d8d8d; border-radius: 0; outline: 2px solid transparent; outline-offset: -2px;
}
.proj-toolbar select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23161616' d='M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.proj-toolbar input:focus, .proj-toolbar select:focus { outline-color: var(--primary); }
.proj-count { margin: var(--s-md) 0 var(--s-sm); font-size: 14px; color: var(--ink-muted); }

.proj-table { background: var(--canvas); border-top: 2px solid var(--ink); }
.pt-head, .proj-table summary, .pt-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px 190px 96px 24px; gap: var(--s-md); align-items: center;
  padding: var(--s-sm) var(--s-md);
}
.pt-head { font-size: 12px; font-weight: 600; letter-spacing: 0.32px; color: var(--ink-muted); border-bottom: 1px solid var(--hairline); }
.pt-head span:last-child { grid-column: span 2; }
.pt-row { border-bottom: 1px solid var(--hairline); }
.pt-row[hidden] { display: none; }
.proj-table summary { list-style: none; cursor: pointer; }
.proj-table summary::-webkit-details-marker { display: none; }
.proj-table summary:hover { background: var(--surface-1); }
.proj-table details[open] summary { background: var(--surface-1); }
.pt-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.pt-place, .pt-cat { font-size: 14px; color: var(--ink-muted); }
.pt-year { font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pt-toggle svg { width: 16px; height: 16px; fill: var(--ink-muted); transition: transform .15s; display: block; }
.proj-table details[open] .pt-toggle svg { transform: rotate(180deg); }
.pt-scope { margin: 0; padding: var(--s-xs) var(--s-md) var(--s-md); background: var(--surface-1); font-size: 14px; line-height: 1.5; color: var(--ink); }
.proj-more { margin-top: var(--s-lg); }
.proj-more[hidden] { display: none; }

@media (max-width: 1056px) {
  .proj-toolbar { grid-template-columns: 1fr 1fr; }
  .proj-toolbar .field:first-child { grid-column: 1 / -1; }
  .pt-head { display: none; }
  /* Two lines per project: title and year, then location and industry; the arrow is centred across both */
  .proj-table summary, .pt-summary { grid-template-columns: minmax(0, 1fr) auto 16px; column-gap: var(--s-md); row-gap: 2px; align-items: baseline; }
  .pt-title { grid-column: 1; grid-row: 1; }
  .pt-year { grid-column: 2; grid-row: 1; text-align: right; }
  .pt-toggle { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .pt-place { grid-column: 1; grid-row: 2; font-size: 13px; }
  .pt-cat { grid-column: 2; grid-row: 2; text-align: right; font-size: 12px; letter-spacing: 0.32px; }
}
@media (max-width: 672px) {
  .proj-toolbar { grid-template-columns: 1fr; }
  .proj-table summary, .pt-summary { padding: var(--s-sm); }
}
.proj-count:empty { margin: 0; height: var(--s-lg); }
/* Nitrotel's tagline makes its wordmark read small at the shared height */
.logo-tile img[src*="nitrotel"] { height: 56px; max-width: 170px; }
.logo-tile img[src*="cisco"] { height: 54px; }
.logo-tile img[src*="nitrotel"], .logo-tile img[src*="siemon"], .logo-tile img[src*="ubiquiti"], .logo-tile img[src*="cisco"] { max-height: none; }

/* ---- Projects: client references ---- */
.ref-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.ref { display: flex; flex-direction: column; padding: var(--s-lg); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--canvas); }
.ref p { margin: 0; }
.ref-org { font-size: 12px; letter-spacing: 0.32px; color: var(--ink-muted); margin-bottom: var(--s-md) !important; }
.ref-name { font-size: 20px; line-height: 1.4; letter-spacing: 0; color: var(--ink); }
.ref-role { font-size: 14px; color: var(--ink-muted); margin-bottom: var(--s-lg) !important; }
@media (max-width: 1056px) { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 672px) { .ref-grid { grid-template-columns: 1fr; } }

/* Beyond Barbados: projects are a bulleted list */
.region ul { margin-top: var(--s-md); border-top: 1px solid var(--hairline); }
.region li { position: relative; padding: var(--s-xs) 0 var(--s-xs) var(--s-md); border-bottom: 1px solid var(--hairline); line-height: 1.4; }
.region li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-xs) + 0.45em); width: 6px; height: 6px; background: var(--primary); }
/* Beyond Barbados: country names open that pin on the homepage map */
.region-name a { color: var(--ink); text-decoration: none; }
.region-name a::after { content: " →"; color: var(--primary); }
.region-name a:hover { color: var(--primary); text-decoration: underline; }

/* Services: photo rows. The photo fills one half of the row edge to edge, touching the
   dividers above and below, and alternates sides down the page. Rows without a photo keep the plain layout. */
.detail:has(.photo) { padding: 0; align-items: stretch; grid-template-rows: auto auto 1fr; }
.detail:has(.photo) .head { display: contents; }
.detail:has(.photo) .head .photo { grid-column: 1 / span 7; grid-row: 1 / -1; margin: 0; position: relative; min-height: 400px; }
.detail:has(.photo) .head .photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border: 0; }
.detail:has(.photo) .head .icon { grid-column: 9 / span 8; grid-row: 1; margin: var(--s-xxl) 0 var(--s-lg); }
.detail:has(.photo) .head h2 { grid-column: 9 / span 8; grid-row: 2; }
.detail:has(.photo) .body { grid-column: 9 / span 8; grid-row: 3; padding-bottom: var(--s-xxl); }
.detail:has(.photo):nth-of-type(even) .head .photo { grid-column: 10 / span 7; }
.detail:has(.photo):nth-of-type(even) .head .icon,
.detail:has(.photo):nth-of-type(even) .head h2,
.detail:has(.photo):nth-of-type(even) .body { grid-column: 1 / span 8; }
/* A thin blue rule ties each photo to the brand colour */
.detail:has(.photo) .head .photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--primary); }
.detail:has(.photo) + .detail:not(:has(.photo)) { border-top: 1px solid var(--hairline); }
@media (max-width: 900px) {
  .detail:has(.photo) { grid-template-rows: none; padding-bottom: var(--s-xxl); }
  .detail:has(.photo) .head .photo,
  .detail:has(.photo):nth-of-type(even) .head .photo { grid-column: 1 / -1; grid-row: auto; min-height: 0; max-width: none; aspect-ratio: 2 / 1; }
  .detail:has(.photo) .head .icon, .detail:has(.photo) .head h2, .detail:has(.photo) .body,
  .detail:has(.photo):nth-of-type(even) .head .icon, .detail:has(.photo):nth-of-type(even) .head h2,
  .detail:has(.photo):nth-of-type(even) .body { grid-column: 1 / -1; grid-row: auto; }
  .detail:has(.photo) .head .icon { margin-top: var(--s-xl); }
  .detail:has(.photo) .body { padding-bottom: 0; }
}

/* Siemon page: partnership intro, copy beside a photo collage of the visit to Siemon headquarters */
.intro-split { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--s-xl); align-items: start; }
.intro-copy { grid-column: 1 / span 7; }
.intro-copy .eyebrow { margin-bottom: var(--s-md); }
.intro-copy h2 { margin-bottom: var(--s-xl); }
.intro-copy .partner-mark { display: block; width: 180px; margin-top: var(--s-xl); padding-top: var(--s-lg); border-top: 1px solid var(--hairline); box-sizing: content-box; }
.intro-copy .partner-mark img { width: 100%; height: auto; transition: opacity .15s; }
.intro-copy .partner-mark:hover img { opacity: .8; }
.visit { grid-column: 9 / span 8; margin: 0; }
/* One tall photo beside two stacked. The 3:2 frame trims the ceiling off the tall photo (anchored low) */
.visit-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-sm); aspect-ratio: 3 / 2; }
.visit-grid img { width: 100%; height: 100%; object-fit: cover; background: var(--inverse-canvas); }
.visit-grid img:first-child { grid-row: 1 / span 2; object-position: 50% 90%; }
.visit-grid img[src*="factory"] { object-position: 50% 0%; }
.visit-grid img[src*="fibre"] { object-position: 50% 6%; }
.visit figcaption { margin-top: var(--s-md); font-size: 14px; font-weight: 500; color: var(--ink-muted); border-left: 3px solid var(--primary); padding-left: var(--s-md); }
/* Tablet: stacked, photos in a full-width row of three to match the content below */
@media (max-width: 1056px) {
  .intro-split { grid-template-columns: minmax(0, 1fr); }
  .intro-copy, .visit { grid-column: 1; }
  .visit { margin-top: var(--s-xxl); }
  .visit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; aspect-ratio: auto; }
  .visit-grid img { height: auto; aspect-ratio: 3 / 4; }
  .visit-grid img:first-child { grid-row: auto; }
  .visit-grid img[src*="factory"], .visit-grid img[src*="fibre"] { object-position: 50% 50%; }
}
/* Phone: back to the collage, which reads better than three narrow strips */
@media (max-width: 672px) {
  .visit-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); aspect-ratio: 3 / 2; }
  .visit-grid img { height: 100%; aspect-ratio: auto; }
  .visit-grid img:first-child { grid-row: 1 / span 2; object-position: 50% 90%; }
  .visit-grid img[src*="factory"] { object-position: 50% 0%; }
  .visit-grid img[src*="fibre"] { object-position: 50% 6%; }
}
/* Draft highlight stays readable on dark photo heroes */
.photo-hero .todo { color: var(--ink); }

/* ---- Accessibility ---- */
.skip-link { position: absolute; left: var(--gutter); top: 0; z-index: 100; padding: var(--s-sm) var(--s-md); background: var(--primary); color: var(--on-primary); font-size: 14px; transform: translateY(-120%); transition: transform .15s; }
.skip-link:focus { transform: translateY(var(--s-xs)); color: var(--on-primary); text-decoration: none; outline: 2px solid var(--ink); outline-offset: 2px; }
/* Visible keyboard focus on every control, including checkboxes and radios */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.quote-form input:not([type="checkbox"]):not([type="radio"]):focus-visible, .quote-form select:focus-visible, .quote-form textarea:focus-visible,
.proj-toolbar input:focus-visible, .proj-toolbar select:focus-visible { outline-offset: -2px; }
.table-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Links inside running text are underlined so they don't rely on colour alone */
.prose a, .subhead a, .faq .answer a, .steps p a, .note a, .lead a, .body-lg a, .detail .body p a, .callout a, .visit figcaption a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* Contact links in the footer and header bar meet the 24px minimum target size */
footer .wide p a, footer address a { display: inline-block; padding: 3px 0; }
.utility a { min-height: 24px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel-body, .skip-link, .tile, .faq summary svg, .job-group summary svg, .pt-toggle svg { animation: none; transition: none; }
}

/* ---- Phone header: tap-to-call beside the menu button (the contact bar is hidden on phones) ---- */
.nav-call { display: none; align-items: center; justify-content: center; width: 48px; margin-left: auto; color: var(--primary); }
.nav-call svg { width: 20px; height: 20px; fill: currentColor; }
.nav-call:hover { background: var(--surface-1); }
@media (max-width: 672px) {
  .nav-call { display: flex; }
  .nav-call + .nav-toggle { margin-left: 0; width: 56px; }
}

/* ---- Linked tiles: an arrow shows they open a page ---- */
a.tile { position: relative; }
a.tile > div { padding-right: var(--s-lg); }
a.tile::after {
  content: ""; position: absolute; top: var(--s-xl); right: var(--s-lg); width: 16px; height: 16px; background: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.3 3.3l-.7.7 3.5 3.5H2v1h10.1L8.6 12l.7.7L14 8z'/%3E%3C/svg%3E") center/16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.3 3.3l-.7.7 3.5 3.5H2v1h10.1L8.6 12l.7.7L14 8z'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity: .5; transition: opacity .11s, transform .11s;
}
a.tile:hover::after, a.tile:focus-visible::after { opacity: 1; transform: translateX(3px); }

/* ---- Phone tiles: icon beside the text, tighter padding, so a dozen services don't run to 1,600px ---- */
@media (max-width: 672px) {
  .tile { flex-direction: row; align-items: flex-start; gap: var(--s-md); padding: var(--s-md) var(--s-md); }
  .tile .icon, .tile .icon svg { width: 24px; height: 24px; flex: none; }
  .tile h3 { font-size: 18px; line-height: 1.33; margin-bottom: 2px; }
  a.tile > div { padding-right: var(--s-xl); }
  a.tile::after { top: 50%; right: var(--s-md); margin-top: -8px; }
}
@media (prefers-reduced-motion: reduce) { a.tile::after { transition: none; } }

/* Phone: compact service rows. A 2:1 photo strip, no icon where a photo already leads the row,
   body-size intro text and tighter lists, so eleven services don't run to 10,000px */
@media (max-width: 672px) {
  .detail:has(.photo) { padding-bottom: var(--s-xl); }
  .detail:has(.photo) .head .photo, .detail:has(.photo):nth-of-type(even) .head .photo { aspect-ratio: 2 / 1; }
  .detail:has(.photo) .head .icon { display: none; }
  .detail:has(.photo) .head h2 { margin-top: var(--s-lg); margin-bottom: var(--s-sm); }
  .detail:has(.photo) .body { margin-top: var(--s-md); }
  .detail .body > p:first-child { font-size: 16px; }
  .detail .ticks li { padding: var(--s-xs) 0; }
}

/* Featured project cards: titles reserve two lines when cards sit side by side, so the stats line up across a row */
@media (min-width: 673px) { .fc-title { min-height: calc(2 * 1.33em); } }

/* Home hero heading: 60px on large screens, matching the inner-page banners (76px ran to four lines) */
@media (min-width: 1313px) { .hero .display-xl { font-size: 60px; letter-spacing: -0.4px; } }

/* ---- Phone: two-column grids on the home page instead of one long stack ---- */
@media (max-width: 672px) {
  /* Services and industries: compact two-up tiles; icon and arrow share the top row */
  #services .tiles, #industries .tiles { grid-template-columns: 1fr 1fr; }
  #services .tile, #industries .tile { flex-direction: column; gap: var(--s-sm); padding: var(--s-md) var(--s-sm) var(--s-md) var(--s-md); }
  #services .tile h3, #industries .tile h3 { font-size: 16px; line-height: 1.3; margin-bottom: var(--s-xxs); }
  #services .tile p, #industries .tile p { font-size: 13px; line-height: 1.45; }
  #services a.tile > div { padding-right: 0; }
  #industries a.tile > div { padding-right: var(--s-md); }
  #services a.tile::after, #industries a.tile::after { top: var(--s-md); right: var(--s-sm); margin-top: 0; }
  #industries .tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* How we deliver: steps two-up, the odd last step full width */
  #process .steps { grid-template-columns: 1fr 1fr; column-gap: var(--s-md); row-gap: var(--s-lg); }
  #process .steps li { padding-right: 0; }
  #process .steps li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Three stats: two side by side, the third full width below */
  .stats.three { grid-template-columns: 1fr 1fr; }
  .stats.three .stat { padding: var(--s-md) var(--s-md) var(--s-md) 0; }
  .stats.three .stat:nth-child(2) { padding-left: var(--s-md); border-left: 1px solid var(--hairline); border-top: 0; }
  .stats.three .stat:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }

  /* Footer: link columns side by side; the address block spans the width */
  footer .grid { grid-template-columns: 1fr 1fr; row-gap: var(--s-xl); }
  footer .lead, footer .col.wide { grid-column: 1 / -1; }
  footer .lead .display-md { font-size: 26px; }
}

/* ---- Phone pass: Projects, About and Siemon ---- */
@media (max-width: 672px) {
  /* Projects: featured cards keep one column but lose the oversized padding and figures */
  .feature-card { padding: var(--s-lg) var(--s-md); }
  .fc-title { font-size: 20px; margin-bottom: var(--s-md); }
  .fc-stat { font-size: 32px; }
  .fc-stat-label { margin-bottom: var(--s-md); }
  /* Beyond Barbados and references: short items, two-up */
  .region-grid, .ref-grid { grid-template-columns: 1fr 1fr; }
  .region { padding: var(--s-md); }
  .region-grid > :last-child:nth-child(odd), .ref-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ref { padding: var(--s-md); }
  .ref-name { font-size: 17px; }

  /* About: milestone year sits beside its entry instead of on a line of its own */
  .timeline li { grid-template-columns: 52px minmax(0, 1fr); gap: var(--s-sm); padding: var(--s-sm) 0 var(--s-sm) var(--s-lg); }
  .timeline li::before { top: 18px; }
  .tl-year { font-size: 16px; font-weight: 400; line-height: 1.5; }
  .timeline p { font-size: 15px; padding-top: 0; }
  /* About: company profile two-up with body-size values */
  .creds { grid-template-columns: 1fr 1fr; }
  .creds > div { padding: var(--s-md); }
  .creds .v { font-size: 15px; line-height: 1.45; }
  .creds > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Siemon: certification steps two-up like How we deliver */
  .cert-steps { grid-template-columns: 1fr 1fr; column-gap: var(--s-md); row-gap: var(--s-lg); }
  .cert-steps li { padding-right: 0; }
  .cert-steps li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Siemon: comparison table fits the screen, so both columns are visible without sideways scrolling */
  .compare { min-width: 0; font-size: 14px; line-height: 1.4; }
  .compare th, .compare td { padding: var(--s-sm) var(--s-xs); }
  .compare thead th { font-size: 13px; }
  .compare tbody th { width: 26%; padding-left: 0; }
}

/* Heading column of the text-only split sections (About mission, Siemon GPS and Supply).
   Was an inline style, which kept six columns even after the layout stacked and squeezed the text */
.split-head { grid-column: 1 / span 6; }
@media (max-width: 1056px) { .split-head { grid-column: 1 / -1; } }
@media (max-width: 672px) { .region-name { flex-direction: column; align-items: flex-start; gap: 2px; } }


/* Links inside the Why Cariboss points are underlined like other in-text links */
.checks span a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Small follow-on link under a Why Cariboss point */
.check-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-xs); min-height: 24px; font-size: 14px; }
.check-link svg { width: 14px; height: 14px; fill: currentColor; transition: transform .11s; }
.check-link:hover svg { transform: translateX(2px); }
.checks li > span { display: block; }

/* Process and certification steps: a real gap between columns (each step gets its own rule segment),
   and the step number sits close to its title */
.steps { column-gap: var(--s-xl); }
.steps li { padding-right: 0; }
.steps li::before { margin-bottom: var(--s-xs); }
@media (max-width: 672px) { .cert-steps { column-gap: var(--s-md); } }

/* Desktop: How we deliver reads as a timeline (the Siemon certification steps are conditions, not a sequence, so they keep the segmented rules). One continuous line across all five, a marker on the line
   at each step (the first filled), number and title below. Narrower screens wrap, so they keep the segmented rules */
@media (min-width: 1057px) {
  #process .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; padding-top: 0; }
  #process .steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--hairline); }
  #process.band .steps::before { background: #d0d0d0; }
  #process .steps li { position: relative; border-top: 0; padding-top: var(--s-lg); }
  #process .steps li::after { content: ""; position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%;
    background: var(--canvas); border: 2px solid var(--primary); box-sizing: border-box; }
  #process .steps li:first-child::after { background: var(--primary); }
}

/* FAQ answers: the direct answer first in a darker lead line, detail in short paragraphs at a comfortable
   line length, and the follow-on link on its own line */
.faq .answer { max-width: 680px; padding: 0 0 var(--s-lg); color: var(--ink-muted); }
.faq .answer p { margin: 0 0 var(--s-sm); font-size: 16px; line-height: 1.6; }
.faq .answer p.a-lead { font-size: 18px; line-height: 1.5; color: var(--ink); }
.faq .answer p:last-child { margin-bottom: 0; }
.faq .answer .faq-link { margin-top: var(--s-md); }
.faq .answer .faq-link a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-size: 14px; text-decoration: none; }
.faq .answer .faq-link a:hover { text-decoration: underline; }
.faq .answer .faq-link svg { width: 14px; height: 14px; fill: currentColor; transition: transform .11s; }
.faq .answer .faq-link a:hover svg { transform: translateX(2px); }
@media (max-width: 672px) { .faq .answer p.a-lead { font-size: 16px; font-weight: 600; } .faq .answer p { font-size: 15px; } }

/* Home services: twelve tiles in three rows of four on desktop (was four rows of three) */
@media (min-width: 1057px) { #services .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Phone: Why Cariboss photo a little taller and cropped lower, so the hands and cabling show */
@media (max-width: 672px) { .split .media img { aspect-ratio: 5 / 4; object-position: 40% 62%; } }

/* Project table: nested list inside an expanded row (villas within Apes Hill Villas) */
div.pt-scope p { margin: 0; }
.pt-inc-label { margin-top: var(--s-sm) !important; font-weight: 600; }
.pt-inc { margin: var(--s-xxs) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px var(--s-lg); }
.pt-inc li { position: relative; padding-left: var(--s-md); }
.pt-inc li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--primary); }

/* Project table: byline under a title (Apes Hill Villas, 20+ villas) */
.pt-byline { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; font-style: italic; color: var(--ink-muted); }
/* Grouped projects: parts listed indented and in italics under the row */
.pt-children { list-style: none; margin: 0; padding: 0 var(--s-md) var(--s-md) calc(var(--s-md) * 2); }
.pt-children li { padding: 3px 0 3px var(--s-md); border-left: 1px solid #c6c6c6; font-size: 14px; font-style: italic; color: var(--ink); }
/* Expanded detail as short dated lines instead of one block */
ul.pt-scope-list { list-style: none; }
.pt-scope-list li + li { margin-top: var(--s-xxs); }
.pt-scope-list strong { font-weight: 600; margin-right: var(--s-xxs); }
@media (max-width: 672px) { .pt-children { padding-left: var(--s-lg); padding-right: var(--s-sm); } }

/* Grouped projects, revised: villa names in two columns with square blue bullets, smaller, not italic
   (only names marked *like this* in the data are italic) */
.pt-children { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 2px var(--s-xl); padding: 0 var(--s-md) var(--s-md) calc(var(--s-md) * 2); }
.pt-children li { position: relative; padding: 2px 0 2px var(--s-md); border-left: 0; font-size: 13px; font-style: normal; color: var(--ink-muted); }
.pt-children li::before { content: ""; position: absolute; left: 0; top: calc(2px + .55em); width: 6px; height: 6px; background: var(--primary); }
.pt-children em { color: var(--ink); }
@media (max-width: 672px) { .pt-children { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-md); padding-left: var(--s-lg); } }
/* Map panel: villas indented and smaller under Apes Hill Villas */
.job-sub { list-style: none; margin: 4px 0 2px; padding: 0 0 0 var(--s-sm); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-sm); }
.job-list .job-sub li { position: relative; padding: 1px 0 1px var(--s-sm); border-left: 0; font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
.job-list .job-sub li::before { content: ""; position: absolute; left: 0; top: calc(1px + .55em); width: 5px; height: 5px; background: var(--primary); }

/* Map panel: a fade along the bottom edge while more content is below (desktop, where the panel scrolls) */
.panel { position: relative; }
.panel::after { content: ""; position: sticky; bottom: calc(-1 * var(--s-xl)); display: block; height: 56px; margin: -56px calc(-1 * var(--s-xl)) calc(-1 * var(--s-xl));
  background: linear-gradient(rgba(255,255,255,0), var(--canvas) 85%); pointer-events: none; opacity: 0; transition: opacity .2s; }
.panel.has-more::after { opacity: 1; }
@media (max-width: 1056px) { .panel::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .panel::after { transition: none; } }

/* Quote form: spam trap kept out of sight, and the confirmation once a request is sent */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status.is-sent { padding: var(--s-md); border-left: 3px solid var(--primary); background: var(--surface-1); font-size: 16px; }