/*
 * Styling for the new information-architecture pages only.
 *
 * These pages reuse the real site's <head>, <header> and <footer>, so the
 * chrome, the fonts and the palette are already the site's own. This file
 * styles the middle of the page, using the same colours and type as the rest
 * of the site so the new sections do not read as a bolt-on.
 *
 * Colour values are taken from the live stylesheet, not chosen here.
 */
:root{
  --ia-navy:#0a2540;
  --ia-steel:#527b95;
  --ia-teal:#6db4b8;
  --ia-coral:#fe7e78;
  --ia-ink:#443f4c;
  --ia-grey:#686868;
  --ia-bg:#f6f9fc;
  --ia-line:#e2e9f0;
}

.ia-main{
  /* The site's own body type. madefor-text is self-hosted in /assets. */
  font-family:"madefor-text","helveticaneuew10-45ligh",Arial,Helvetica,sans-serif;
  color:var(--ia-ink);
  background:#fff;
}
.ia-wrap{max-width:1240px; margin:0 auto; padding:0 24px}

/* ------------------------------------------------------------- hero */
.ia-hero{
  background:var(--ia-navy); color:#fff;
  padding:64px 0 56px;
}
.ia-hero h1{
  font-family:"madefor-display-bold","helveticaneuew10-65medi",Arial,sans-serif;
  font-size:clamp(30px,4.2vw,52px); line-height:1.12; letter-spacing:-.015em;
  margin:14px 0 0; color:#fff; font-weight:600;
}
.ia-lede{
  color:#b7cbdb; font-size:clamp(15px,1.5vw,19px); line-height:1.55;
  margin:14px 0 0; max-width:66ch;
}
.ia-crumb{font-size:13px; color:#7f9cb4}
.ia-crumb a{color:#9fb6c9; text-decoration:none}
.ia-crumb a:hover{color:#fff; text-decoration:underline}
.ia-crumb span{color:var(--ia-teal)}

/* ------------------------------------------------------------- body */
.ia-body{padding:52px 0 72px; background:#fff}

.ia-dl{margin:0 0 30px; max-width:78ch}
.ia-dl dt{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ia-steel); margin:22px 0 5px; font-weight:600;
}
.ia-dl dd{margin:0; font-size:17px; line-height:1.6; color:var(--ia-ink)}

.ia-gate{
  background:#fff8f0; border:1px solid #f0dcc4; border-left:3px solid var(--ia-coral);
  padding:12px 16px; border-radius:4px; font-size:14px; margin:0 0 26px; max-width:78ch;
}
.ia-gate b{color:var(--ia-navy)}

.ia-chips{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0 0 14px}
.ia-chips-l{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ia-grey); margin-right:4px;
}
.ia-chip{
  font-size:13px; padding:4px 12px; border-radius:14px;
  background:#eef4f8; border:1px solid #dbe6ee; color:var(--ia-steel);
}

/* ------------------------------------------------------------ cards */
.ia-grid{
  display:grid; gap:18px; margin:34px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));
}
.ia-card{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--ia-line); border-radius:8px; padding:22px 22px 18px;
  background:#fff; transition:border-color .18s, box-shadow .18s, transform .18s;
}
.ia-card:hover{
  border-color:var(--ia-teal);
  box-shadow:0 6px 22px rgba(10,37,64,.08);
  transform:translateY(-2px);
}
/* Card titles are h2: the cards ARE the page's sections, and every
   other level below the h1 was a skip. h3 stays named so a page that
   has not been regenerated yet still gets the style. */
.ia-card h3,.ia-card h2{
  font-family:"madefor-display-bold","helveticaneuew10-65medi",Arial,sans-serif;
  margin:0 0 8px; font-size:19px; color:var(--ia-navy); font-weight:600; line-height:1.28;
}
.ia-card p{margin:0; font-size:14.5px; line-height:1.55; color:var(--ia-grey)}
.ia-more{
  display:inline-block; margin-top:14px; font-size:13px; color:var(--ia-steel);
  border-bottom:1px solid transparent;
}
.ia-card:hover .ia-more{border-bottom-color:var(--ia-steel)}

/* ------------------------------------------------------- cross-links */
.ia-cross{
  border-top:1px solid var(--ia-line); margin:34px 0 0; padding:24px 0 0;
}
.ia-cross h2{
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ia-grey); margin:0 0 6px; font-weight:600;
}
.ia-cross p{margin:0 0 12px; font-size:14px; color:var(--ia-grey)}
.ia-crosslinks{display:flex; flex-wrap:wrap; gap:10px}
.ia-crosslinks a{
  font-size:14px; padding:7px 14px; border-radius:20px; text-decoration:none;
  border:1px solid var(--ia-line); color:var(--ia-steel); background:#fff;
}
.ia-crosslinks a:hover{border-color:var(--ia-steel); background:#f4f8fb}

/* -------------------------------------------------------------- cta */
.ia-cta{
  margin:48px 0 0; padding:30px 32px; border-radius:8px;
  background:var(--ia-bg); border:1px solid var(--ia-line);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.ia-btn{
  display:inline-block; background:var(--ia-navy); color:#fff; text-decoration:none;
  padding:13px 26px; border-radius:26px; font-size:15px;
  transition:background .18s;
}
.ia-btn:hover{background:#13314f}
.ia-cta p{margin:0; font-size:13.5px; color:var(--ia-grey)}

@media (max-width:640px){
  .ia-hero{padding:40px 0 34px}
  .ia-body{padding:34px 0 48px}
  .ia-cta{padding:22px}
}

/* ------------------------------------------------ the product device grid
 * /products/gdx shows seven real device photographs. They come from brand
 * label sheets rather than a studio shoot, so they differ in crop, aspect
 * and background. object-fit: contain inside a fixed pale tile is what makes
 * a mixed set read as one grid: nothing is cropped, nothing is stretched,
 * and a wide device like the intraoral wand sits in the same box as a tall
 * one without either being distorted.
 */
.pd-grid{
  list-style:none; margin:20px 0 0; padding:0;
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
}
.pd-card{
  border:1px solid var(--ia-line); border-radius:8px; overflow:hidden;
  background:#fff;
}
.pd-shot{
  background:var(--ia-bg); aspect-ratio:4 / 3;
  display:flex; align-items:center; justify-content:center; padding:14px;
}
.pd-shot img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
}
.pd-card h3{
  margin:14px 16px 4px; font-size:16px; color:var(--ia-navy); font-weight:600;
}
.pd-card p{ margin:0 16px 16px; font-size:13.5px; color:var(--ia-grey) }

/* The catalogue card carries two extra facts under the description: which
 * venture makes it, and whether it can be had. Availability is the one a
 * reader is actually asking, so it gets the colour. */
.pd-meta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 16px 16px; font-size:12.5px;
}
.pd-meta a{ color:var(--ia-steel); text-decoration:none }
.pd-meta a:hover{ text-decoration:underline }
.pd-state{
  padding:2px 9px; border-radius:11px; white-space:nowrap;
  border:1px solid var(--ia-line);
}
.pd-now{ color:#14532d; background:#eaf6ee; border-color:#bfe0c9 }
.pd-soon{ color:#5b4a1f; background:#fdf6e3; border-color:#e6d9ae }

/* ---- service sub-pages: where it sits, tools, a named ask ---- */
.sv-ctx{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:18px;margin:34px 0 8px}
@media (max-width:860px){.sv-ctx{grid-template-columns:minmax(0,1fr)}}
.sv-box{border:1px solid var(--ia-line);border-radius:12px;padding:20px 22px;background:#fff}
.sv-box h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--ia-grey);margin:0 0 14px;font-weight:600}
.sv-box h3{font-size:13px;color:var(--ia-navy);margin:18px 0 8px;font-weight:600}
.sv-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px;counter-reset:sv}
.sv-strip li{counter-increment:sv}
.sv-strip a{display:inline-flex;align-items:center;gap:7px;font-size:12.8px;text-decoration:none;
  color:var(--ia-steel);border:1px solid var(--ia-line);border-radius:18px;padding:5px 10px 5px 6px;white-space:nowrap}
.sv-strip a::before{content:counter(sv);display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;background:#eef3f7;color:var(--ia-steel);font:600 11px/1 Arial,sans-serif}
.sv-strip a:hover{border-color:var(--ia-steel)}
.sv-strip .sv-now a{background:var(--ia-navy);border-color:var(--ia-navy);color:#fff}
.sv-strip .sv-now a::before{background:var(--ia-teal);color:#fff}
.sv-side{margin:10px 0 0;font-size:13px;color:var(--ia-grey)}
.sv-side a{color:var(--ia-steel)}
.sv-side[data-now] a{color:var(--ia-navy);font-weight:600}
.sv-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sv-list a{display:block;font-size:13.2px;text-decoration:none;color:var(--ia-ink);background:var(--ia-bg);
  border:1px solid var(--ia-line);border-radius:7px;padding:6px 10px}
.sv-list a:hover{border-color:var(--ia-teal)}
.sv-list .sv-here a{border-color:var(--ia-navy);color:var(--ia-navy);font-weight:600;background:#fff}
.sv-tool{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;
  border:1px solid var(--ia-line);border-radius:10px;padding:10px 12px;margin:0 0 8px}
.sv-tool:hover{border-color:var(--ia-teal);background:#fafdfd}
.sv-tool img{flex:0 0 72px;width:72px;height:auto;border-radius:6px;background:#f2f7fb}
.sv-tool b{display:block;color:var(--ia-navy);font-size:14.5px}
.sv-tool em{display:block;font-style:normal;color:var(--ia-grey);font-size:13px;line-height:1.45}
.sv-box a:focus-visible{outline:3px solid var(--ia-navy);outline-offset:2px}
.sv-cta-btns{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.ia-btn--ghost{background:#fff !important;color:var(--ia-navy) !important;box-shadow:inset 0 0 0 1px var(--ia-navy)}
.ia-btn--ghost:hover{background:#f2f7fb !important}

/* ================================================================ editorial
 * The sub-pages in the manner of the /tools page: a mono eyebrow over the
 * title, a numbered index of the section's pages in the hero, the page's
 * facts as a numbered spec table on hairlines, numbered cards, journeys as
 * steps, and a closing statement in place of the grey box. Markup is the
 * same as before except the index and the steps; the rest is this CSS. */
.ia-crumb{font:500 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.12em; text-transform:uppercase; color:#7f9cb4}
.ia-crumb a{color:#9fb6c9}
.ia-hero h1{font-weight:500; letter-spacing:-.02em}
.ia-hero .ed-index{margin-top:28px}

/* facts: label left, text right, a hairline between each */
.ia-dl{max-width:none; margin:0 0 36px; border-top:1px solid var(--ia-navy); counter-reset:fact;
  display:grid; grid-template-columns:minmax(180px,260px) minmax(0,1fr)}
.ia-dl dt{counter-increment:fact; margin:0; padding:20px 24px 20px 0; border-bottom:1px solid rgba(10,37,64,.14);
  font:500 11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.1em; color:var(--ia-steel)}
.ia-dl dt::before{content:"(" counter(fact, decimal-leading-zero) ")"; display:block; color:#9fb0bd; margin-bottom:4px}
.ia-dl dd{margin:0; padding:18px 0 20px; border-bottom:1px solid rgba(10,37,64,.14);
  font-size:clamp(17px,1.6vw,21px); line-height:1.5; color:var(--ia-navy); max-width:62ch}
@media (max-width:700px){
  .ia-dl{grid-template-columns:minmax(0,1fr)}
  .ia-dl dt{border-bottom:0; padding:18px 0 4px}
  .ia-dl dd{padding-top:0}
}

/* a journey as steps */
.ia-steps{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 0; align-items:center}
.ia-steps li{display:inline-flex; align-items:center; gap:8px; font-size:16px}
.ia-steps li:not(:last-child)::after{content:"\2192"; color:var(--ia-steel); margin:0 14px 0 6px}
.ia-steps li span{font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#fff;
  background:var(--ia-navy); border-radius:10px; padding:4px 7px}
.ia-steps a{color:var(--ia-navy); text-decoration:none; border-bottom:1px solid rgba(10,37,64,.3)}
.ia-steps a:hover{border-bottom-color:var(--ia-navy)}
.ia-steps-note{display:block; margin-top:10px; font-size:14.5px; color:var(--ia-steel)}

/* chips row on a hairline */
.ia-chips{padding:0 0 16px; margin:0 0 16px; border-bottom:1px solid rgba(10,37,64,.14)}
.ia-chips-l{font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.1em;
  color:var(--ia-steel); margin-right:10px; min-width:120px}
.ia-chip{background:#fff; border-color:rgba(10,37,64,.18); color:var(--ia-navy)}

/* numbered cards, flatter */
.ia-grid{counter-reset:card}
.ia-card{counter-increment:card; border-radius:12px; border-color:rgba(10,37,64,.14)}
.ia-card:hover{box-shadow:0 12px 30px -10px rgba(10,37,64,.18); border-color:rgba(10,37,64,.3)}
.ia-grid .ia-card h2::before,.ia-grid .ia-card h3::before{content:"(" counter(card, decimal-leading-zero) ")";
  display:block; font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.1em;
  color:#9fb0bd; margin:0 0 9px}
.ia-card h2,.ia-card h3{font-weight:500; font-size:19px}
.ia-more{font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.1em;
  text-transform:uppercase; margin-top:16px}

/* related links on a hairline */
.ia-cross{border-top:1px solid var(--ia-navy)}
.ia-cross h2{font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.12em; color:var(--ia-steel)}
.ia-crosslinks a{border-radius:0; border:0; border-bottom:1px solid rgba(10,37,64,.25); padding:6px 0; margin-right:14px;
  color:var(--ia-navy); background:none}
.ia-crosslinks a:hover{background:none; border-bottom-color:var(--ia-navy)}

/* the close: a statement, then the buttons */
.ia-cta{background:none; border:0; border-top:1px solid var(--ia-navy); border-radius:0; padding:34px 0 0;
  margin-top:56px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:18px 40px}
.ia-cta p{order:-1; grid-column:1 / 2; font-size:clamp(18px,2vw,24px); line-height:1.45; color:var(--ia-navy); max-width:40ch; margin:0}
.ia-cta > .ia-btn,.ia-cta > .sv-cta-btns{grid-column:2 / 3; grid-row:1; margin:0}
@media (max-width:760px){
  .ia-cta{grid-template-columns:minmax(0,1fr)}
  .ia-cta > .ia-btn,.ia-cta > .sv-cta-btns{grid-column:1; grid-row:auto; justify-self:start}
}

/* the service-page boxes, on the same hairlines */
.sv-box{border-radius:0; border:0; border-top:1px solid var(--ia-navy); padding:18px 0 0; background:none}
.sv-box h2{font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.12em}
.sv-cta-note{grid-column:1 / -1; font-size:13px; color:var(--ia-grey)}

/* Drawn hero plates: the wash covers the text side only, so the plate reads
 * at full colour; below 1180px the text would reach the plate, so the whole
 * band is washed again. The image is anchored right so the plate stays in
 * view as the band narrows. */
/* The tool pages build their own hero without the class, so the image itself
 * is the test as well. */
.ia-hero--mark .ia-hero-media img,.ia-hero-media:has(img[src*="/mark-hero-"]) img,.ia-hero-media:has(img[src*="/mono-band-"]) img{object-position:right center}
.ia-hero--mark .ia-hero-media::after,.ia-hero-media:has(img[src*="/mark-hero-"])::after,.ia-hero-media:has(img[src*="/mono-band-"])::after{
  background:linear-gradient(90deg,rgba(10,37,64,.97) 0%,rgba(10,37,64,.92) 42%,rgba(10,37,64,0) 64%)}
@media (max-width:1180px){.ia-hero--mark .ia-hero-media::after,
  .ia-hero-media:has(img[src*="/mark-hero-"])::after,.ia-hero-media:has(img[src*="/mono-band-"])::after{background:rgba(10,37,64,.9)}}

/* ================================================ layout audit, 2026-09-23 */
/* 1. Hero text never reaches the plate: capped to half the viewport, and the
 * full wash starts at 1280 instead of 1180. */
.ia-hero--img .ia-wrap > h1,.ia-hero--img .ia-wrap > .ia-lede,.ia-hero--img .ia-wrap > .ed-index{max-width:min(66ch,50vw)}
@media (max-width:1280px){.ia-hero--mark .ia-hero-media::after,
  .ia-hero-media:has(img[src*="/mark-hero-"])::after,.ia-hero-media:has(img[src*="/mono-band-"])::after{background:rgba(10,37,64,.9)}}
@media (max-width:760px){.ia-hero--img .ia-wrap > h1,.ia-hero--img .ia-wrap > .ia-lede,
  .ia-hero--img .ia-wrap > .ed-index{max-width:none}}
/* 2. The cloned stylesheet sets body text to 10px; anything unclassed in the
 * generated pages inherited it. */
.ia-main p:not([class]){font-size:15.5px; line-height:1.6; max-width:72ch}
.ia-main h2:not([class]){font-size:24px; font-weight:500; color:var(--ia-navy); margin:36px 0 12px}
.ia-main h3:not([class]){font-size:18px; font-weight:500; color:var(--ia-navy); margin:24px 0 8px}
.ia-note{font-size:13.5px; line-height:1.5; color:var(--ia-grey); margin:16px 0 0}
/* 3. mono labels up a step */
.ia-dl dt,.ia-chips-l,.ia-cross h2,.ia-more,.ia-crumb,.sv-box h2{font-size:12.5px}
.sv-strip a{font-size:13.5px}
/* 5. the row rule runs full width; the text keeps its measure */
.ia-dl dd{max-width:none; padding-right:max(0px, calc(100% - 62ch))}
/* 6. on a phone the chips label takes its own line */
@media (max-width:700px){.ia-chips-l{flex-basis:100%; margin:0 0 4px}}
/* 7. stacked body sections do not double their padding */
.ia-body + .ia-body{padding-top:0}
/* 9. reading measure on the tool pages */
.cc-intro,.cc-intro p,.bm-caveat,.nv-empty,.nv-scope{max-width:70ch}

/* Numbers only where there is an order. The facts, the cards and the FAQ are
 * not steps, and "(01)" on each read as a sequence the content does not have
 * (reported 2026-09-23). The journey steps and the pillar strip keep theirs. */
.ia-dl dt::before{content:none !important; display:none !important}
.ia-grid .ia-card h2::before,.ia-grid .ia-card h3::before{content:none !important; display:none !important}

/* ---------------------------------------------------------- products */
.pd2-group{margin:0 0 48px}
.pd2-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--ia-navy);padding:0 0 12px;margin:0 0 18px}
.pd2-head h2{font-size:26px;font-weight:500;margin:0}
.pd2-head h2 a{color:var(--ia-navy);text-decoration:none}
.pd2-head h2 a:hover{text-decoration:underline;text-underline-offset:5px}
.pd2-head span{font:500 12.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ia-steel)}
.pd2-grid{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.pd2-card{border:1px solid rgba(10,37,64,.14);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;
  transition:border-color .15s ease,box-shadow .2s ease}
.pd2-card:hover{border-color:rgba(10,37,64,.3);box-shadow:0 12px 30px -10px rgba(10,37,64,.18)}
.pd2-shot{position:relative;aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pd2-shot img{width:100%;height:100%;object-fit:contain;padding:46px 16px 12px;box-sizing:border-box}
.pd2-shot img.pd2-print{padding:0}
.pd2-state{position:absolute;top:12px;left:12px;font:600 11.5px/1 Arial,sans-serif;padding:6px 10px;border-radius:12px}
.pd2-now{background:#e5f4ea;color:#14532d}
.pd2-soon{background:#fdf3dc;color:#6b531b}
.pd2-info{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.pd2-cat{font:500 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ia-steel);min-height:2.8em}
.pd2-info h3{font-size:20px;font-weight:500;color:var(--ia-navy);margin:2px 0 0}
.pd2-venture{font-size:13.5px;color:var(--ia-grey);text-decoration:none}
.pd2-venture:hover{color:var(--ia-navy);text-decoration:underline}
.pd2-go{margin-top:auto;align-self:flex-start;display:inline-flex;gap:6px;align-items:center;
  font-size:14px;padding:9px 16px;border-radius:20px;background:var(--ia-navy);color:#fff;text-decoration:none}
/* Product cards line up (operator, 2026-10-16): the category keeps two lines
   of room so the names align, and the button sits at the card's foot. */
.pd2-info > :nth-last-child(2){margin-bottom:14px}
.pd2-go:hover{background:#13314f}
.pd2-go--soft{background:#fff;color:var(--ia-navy);box-shadow:inset 0 0 0 1px var(--ia-navy)}
.pd2-go--soft:hover{background:#f2f7fb}
.pd2-go:focus-visible,.pd2-venture:focus-visible{outline:3px solid var(--ia-navy);outline-offset:2px}

/* ------------------------------------------------ solution pages: the path
 * A map of the path across the top, then the steps on a rail down the left.
 * site.js fills the rail and marks the step in view as the reader scrolls.
 * Everything is visible without the script; it only adds the fill and the
 * highlight, so nothing load-bearing waits on a frame. */
.sol-steps{margin:44px 0 0}
.ia-body .sol-steps h2,.ia-body .sol-others h2{font-size:26px;font-weight:500;color:var(--ia-navy);margin:0 0 22px}
.sol-map{list-style:none;margin:0 0 34px;padding:0;display:flex;position:relative;overflow-x:auto;
  scrollbar-width:none;counter-reset:none}
.sol-map::-webkit-scrollbar{display:none}
.sol-map li{flex:1 0 118px;position:relative;text-align:center}
.sol-map li::before{content:"";position:absolute;top:21px;left:-50%;width:100%;height:2px;background:#dbe3ea;z-index:0}
.sol-map li:first-child::before{display:none}
.sol-map li.sol-map-side::before{background:repeating-linear-gradient(90deg,#c4d0da 0 6px,transparent 6px 12px)}
.sol-map a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;color:var(--ia-navy);padding:0 6px}
.sol-map b{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid #cbd6e0;font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ia-steel);transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}
.sol-map span{font-size:14px;line-height:1.35;max-width:150px}
.sol-map a:hover b{border-color:var(--ia-teal)}
.sol-map a:focus-visible{outline:3px solid var(--ia-navy);outline-offset:3px;border-radius:8px}
.sol-map a.is-past b{background:var(--ia-navy);border-color:var(--ia-navy);color:#fff}
.sol-map a.is-now b{background:var(--ia-teal);border-color:var(--ia-teal);color:#fff;box-shadow:0 0 0 6px rgba(109,180,184,.22)}

.sol-rail{position:relative;padding-left:64px}
.sol-track{position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:#dbe3ea;border-radius:2px}
.sol-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--ia-teal);border-radius:2px}
.sol-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.sol-step{position:relative;scroll-margin-top:110px}
.sol-dot{position:absolute;left:-64px;top:16px;width:44px;height:44px;border-radius:50%;background:#fff;
  border:2px solid #cbd6e0;display:flex;align-items:center;justify-content:center;
  font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ia-steel);
  transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}
.sol-step.is-past .sol-dot{background:var(--ia-navy);border-color:var(--ia-navy);color:#fff}
.sol-step.is-now .sol-dot{background:var(--ia-teal);border-color:var(--ia-teal);color:#fff;box-shadow:0 0 0 7px rgba(109,180,184,.22)}
.sol-card{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:22px;align-items:center;
  border:1px solid rgba(10,37,64,.14);border-radius:14px;padding:22px 24px;background:#fff;
  transition:border-color .2s ease,box-shadow .25s ease,transform .25s ease}
.sol-step.is-now .sol-card{border-color:rgba(109,180,184,.8);box-shadow:0 16px 34px -18px rgba(10,37,64,.35)}
.sol-step--side .sol-card{border-style:dashed;background:#fbfdfe}
.sol-art{width:170px;height:112px;object-fit:cover;border-radius:10px;background:#f2f7fb}
.sol-n{display:block;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ia-steel);margin:0 0 8px}
.ia-body .sol-steps h3{font-size:20px;font-weight:500;margin:0 0 6px;line-height:1.3}
.sol-steps h3 a{color:var(--ia-navy);text-decoration:none}
.sol-steps h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.sol-steps h3 a:focus-visible{outline:3px solid var(--ia-navy);outline-offset:2px}
.sol-txt p{margin:0;font-size:15.5px;line-height:1.6;color:#3f4650}
.sol-get{margin-top:12px !important;padding-top:12px;border-top:1px dashed rgba(10,37,64,.16)}
.sol-get b{display:block;font:600 12px/1.4 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ia-steel);margin:0 0 2px}
@media (max-width:760px){
  .sol-card{grid-template-columns:minmax(0,1fr);padding:18px}
  .sol-art{order:-1;width:100%;height:120px}
  .sol-rail{padding-left:48px}
  .sol-track{left:15px}
  .sol-dot{left:-48px;width:32px;height:32px;font-size:11.5px;top:14px}
  .sol-map{display:none}  /* the rail below already shows every step on a phone */
  .ia-body .sol-steps h2,.ia-body .sol-others h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.sol-dot,.sol-map b,.sol-card{transition:none}}
.sol-others{margin:44px 0 0}
.sol-others ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sol-others a{display:inline-block;padding:9px 15px;border-radius:20px;border:1px solid rgba(10,37,64,.2);
  color:var(--ia-navy);font-size:14.5px;text-decoration:none}
.sol-others a:hover{border-color:var(--ia-teal);background:#f2f7fb}
.sol-others a:focus-visible{outline:3px solid var(--ia-navy);outline-offset:2px}

/* --------------------------------------------- device-type pages: the depth */
.dm-sec{margin:46px 0 0}
.ia-body .dm-sec h2{font-size:26px;font-weight:500;color:var(--ia-navy);margin:0 0 8px}
.dm-sub{margin:0 0 20px;font-size:14.5px;color:var(--ia-grey)}
.dm-prog{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.dm-prog li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:12px;
  background:#f2f7fb;color:var(--ia-navy);font-size:15.5px;line-height:1.45}
.dm-tick{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--ia-teal);position:relative;margin-top:1px}
.dm-tick::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:10px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.dm-drivers{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));margin-top:18px}
.dm-driver{border:1px solid rgba(10,37,64,.14);border-top:3px solid var(--ia-teal);border-radius:12px;
  padding:18px 20px;background:#fff}
.ia-body .dm-driver h3{font-size:18px;font-weight:500;color:var(--ia-navy);margin:0 0 6px}
.dm-driver p{margin:0;font-size:15px;line-height:1.55;color:#3f4650}
.dm-std{list-style:none;margin:18px 0 12px;padding:0;border-top:1px solid rgba(10,37,64,.14)}
.dm-std li{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:18px;padding:12px 0;
  border-bottom:1px solid rgba(10,37,64,.1);font-size:15px}
.dm-std b{font:600 14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ia-navy)}
.dm-std span{color:#3f4650}
.dm-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:26px 28px;
  border-radius:14px;background:#f2f7fb}
.ia-body .dm-next h2{font-size:20px;margin:0 0 12px}
.dm-next ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dm-next a{color:var(--ia-navy);font-size:15.5px;text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(10,37,64,.3)}
.dm-next a:hover{text-decoration-color:var(--ia-navy)}
@media (max-width:760px){.dm-std li{grid-template-columns:minmax(0,1fr);gap:2px}
  .dm-next{grid-template-columns:minmax(0,1fr);padding:20px}
  .ia-body .dm-sec h2{font-size:22px}}

/* ------------------------------------------------ service pages */
.sp-sec{margin:44px 0 0}
.sp-sec:first-child{margin-top:8px}
.ia-body .sp-sec h2{font-size:26px;font-weight:500;color:var(--ia-navy);margin:0 0 18px}
.sp-glance{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.sp-card{border:1px solid rgba(10,37,64,.14);border-top:3px solid var(--ia-teal);border-radius:12px;padding:18px 20px;background:#fff}
.ia-body .sp-card h3{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ia-steel);margin:0 0 8px}
.sp-card p{margin:0;font-size:16px;line-height:1.55;color:var(--ia-navy)}
.sp-tags{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}
.sp-tags b{font-weight:600;color:var(--ia-steel);margin-right:4px}
.sp-tags span{padding:6px 12px;border-radius:16px;background:#f2f7fb;color:var(--ia-navy)}
.sp-stage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:1px solid rgba(10,37,64,.14);border-radius:12px;overflow:hidden}
.sp-stage li{padding:16px 18px;background:#fff;border-right:1px solid rgba(10,37,64,.1);position:relative}
.sp-stage li:last-child{border-right:0}
.sp-stage b{display:block;font-size:15px;color:var(--ia-steel);font-weight:600}
.sp-stage span{display:block;font-size:14px;color:var(--ia-grey);margin-top:2px}
.sp-stage li.is-now{background:var(--ia-navy)}
.sp-stage li.is-now b{color:#6db4b8}
.sp-stage li.is-now span{color:#fff}
.sp-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.sp-steps li{position:relative;border-radius:12px;background:#f2f7fb;padding:20px 18px 18px}
.sp-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:var(--ia-navy);color:#fff;font-size:13px;font-weight:600;margin-bottom:12px}
.sp-steps li:not(:last-child)::after{content:"";position:absolute;top:37px;right:-14px;width:14px;height:2px;background:var(--ia-teal)}
.ia-body .sp-steps h3{font-size:17px;font-weight:600;color:var(--ia-navy);margin:0 0 6px}
.sp-steps p{margin:0;font-size:14.5px;line-height:1.55;color:#3f4650}
.sp-map{margin-bottom:26px}
.sp-map li.is-now a b{background:var(--ia-teal);border-color:var(--ia-teal);color:#fff;box-shadow:0 0 0 6px rgba(109,180,184,.22)}
.sp-map li.is-now a span{font-weight:600}
.ia-body .sp-sibh{font-size:15px;font-weight:600;color:var(--ia-steel);margin:0 0 12px}
.sp-sibs{margin:0;list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sp-sibs a{display:inline-block;padding:9px 15px;border-radius:20px;border:1px solid rgba(10,37,64,.2);color:var(--ia-navy);font-size:14.5px;text-decoration:none}
.sp-sibs a:hover{border-color:var(--ia-teal);background:#fff}
.sp-sibs a:focus-visible{outline:3px solid var(--ia-navy);outline-offset:2px}
.sp-sibs a.is-here{background:var(--ia-navy);border-color:var(--ia-navy);color:#fff}
.sp-next{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;padding:26px 28px;border-radius:14px;background:#f2f7fb}
.ia-body .sp-next h2{font-size:20px;margin:0 0 12px}
.sp-tools{display:grid;gap:10px}
.sp-next ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sp-next ul a{color:var(--ia-navy);font-size:15.5px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(10,37,64,.3)}
@media (max-width:900px){.sp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-steps li::after{display:none}}
@media (max-width:760px){.sp-stage{grid-template-columns:minmax(0,1fr)}.sp-stage li{border-right:0;border-bottom:1px solid rgba(10,37,64,.1)}
  .sp-steps{grid-template-columns:minmax(0,1fr)}.sp-next{grid-template-columns:minmax(0,1fr);padding:20px}
  .ia-body .sp-sec h2{font-size:22px}}

/* ------------------------------------------------ company pages */
.co-stats{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr))}
.co-stats li{padding:20px;border-radius:12px;background:#0a2540;color:#fff}
.co-stats b{display:block;font-size:34px;line-height:1;color:#6db4b8;font-weight:600;margin:0 0 8px}
.co-stats span{font-size:14.5px;color:#dfe8f0}
.co-svcs{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.co-svc{display:block;border:1px solid rgba(10,37,64,.14);border-radius:12px;padding:18px 20px;text-decoration:none;
  background:#fff;transition:border-color .15s ease,box-shadow .2s ease}
.co-svc:hover{border-color:var(--ia-teal);box-shadow:0 12px 28px -14px rgba(10,37,64,.3)}
.co-svc:focus-visible{outline:3px solid var(--ia-navy);outline-offset:2px}
.co-svc b{display:block;font-size:18px;font-weight:500;color:var(--ia-navy);margin:0 0 6px}
.co-svc span{display:block;font-size:14.5px;line-height:1.55;color:#3f4650}
.co-cert{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.co-cert p{margin:0;max-width:520px;font-size:15px;line-height:1.6;color:#3f4650}
.co-certrows{margin-top:22px}
.co-small{margin:8px 0 0 !important;font-size:13px !important;color:var(--ia-grey) !important}
.co-small a{color:var(--ia-navy)}
.dm-driver .co-small{margin:0 0 6px !important;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.sp-card p a{color:var(--ia-navy)}
.co-three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.co-three{grid-template-columns:minmax(0,1fr)}}

.in-fig{margin:10px 0 30px;padding:18px;border:1px solid rgba(10,37,64,.12);border-radius:14px;background:#fff}
.in-fig svg{display:block;width:100%;height:auto}
.in-fig figcaption{margin:12px 2px 0;font-size:13.5px;line-height:1.5;color:var(--ia-grey)}
.in-fig figcaption a{color:var(--ia-navy)}

/* the Exchange index: the two live parts */
.ex-live{margin:0 0 22px}
.co-svc .ex-open{display:inline-block;width:auto;margin-left:8px;padding:3px 9px;border-radius:10px;background:#e5f4ea;color:#14532d;
  font-size:11.5px;font-weight:600;vertical-align:middle}

/* careers: open roles */
.jb{border:1px solid rgba(10,37,64,.14);border-left:4px solid var(--ia-teal);border-radius:14px;padding:24px 26px;background:#fff;margin:0 0 16px}
.jb-head{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:flex-start}
.ia-body .jb h3{font-size:22px;font-weight:500;color:var(--ia-navy);margin:0 0 8px}
.jb-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.jb-meta span{font-size:13px;padding:5px 11px;border-radius:14px;background:#f2f7fb;color:var(--ia-navy)}
.jb-btns{display:flex;flex-wrap:wrap;gap:10px}
.jb-sum{margin:16px 0 8px;font-size:16px;line-height:1.6;color:#2c333b;max-width:78ch}
.jb-exp{margin:0 0 12px;font-size:14.5px;color:#3f4650}
.jb-exp b{display:inline-block;margin-right:8px;color:var(--ia-steel);font-weight:600}
.jb-more summary{cursor:pointer;font-size:15px;font-weight:500;color:var(--ia-navy);padding:6px 0}
.jb-more summary:focus-visible{outline:3px solid var(--ia-navy);outline-offset:2px}
.ia-body .jb-more h4{font-size:15px;font-weight:600;color:var(--ia-navy);margin:16px 0 8px}
.jb-more ul{margin:0 0 8px;padding-left:20px}
.jb-more li,.jb-more p{font-size:15px;line-height:1.6;color:#3f4650;margin:0 0 6px}

/* proof block on solution and service-group pages */
.pf-list a{display:flex;gap:12px;align-items:flex-start;color:inherit;text-decoration:none;width:100%}
.pf-list a:hover{color:var(--ia-navy);text-decoration:underline;text-underline-offset:4px}
.pf-cert{margin:16px 0 0;font-size:14.5px;color:#3f4650}
.pf-cert a,.pf .dm-sub a{color:var(--ia-navy)}

/* Solutions: every starting point in view above the illustrated cards. */
.ia-pick{margin:0 0 36px}
.ia-pick-h{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ia-steel); margin:0 0 12px}
.ia-pick-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.ia-pick-row a{display:flex; gap:10px; align-items:baseline; padding:14px 16px; border:1px solid rgba(10,37,64,.15); border-radius:10px; background:#fff; color:var(--ia-navy); text-decoration:none; font-size:15px; line-height:1.3}
.ia-pick-row a span{font-size:12px; color:#d9786a; font-weight:600}
.ia-pick-row a:hover{border-color:var(--ia-navy); background:#f4f8fb}
@media (max-width:900px){.ia-pick-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

.wk-note{max-width:74ch;margin:0 0 6px}
.wk-note p{font-size:15.5px;line-height:1.6;color:var(--ia-ink)}
.lg{max-width:74ch}
.lg h2{font-family:"madefor-display-bold","helveticaneuew10-65medi",Arial,sans-serif;
  font-size:23px;color:var(--ia-navy);margin:34px 0 10px}
.lg h3{font-size:16px;color:var(--ia-navy);margin:22px 0 7px}
.lg p{font-size:15.5px;line-height:1.65;margin:0 0 12px;color:var(--ia-ink)}
.lg p.lg-meta{font-size:13.5px;color:var(--ia-grey);margin:0 0 4px}
.lg-jump{display:inline-block;margin-left:4px}
.lg-jump a{color:var(--ia-steel)}
.lg p.lg-addr{font-size:14.5px;line-height:1.7;color:var(--ia-grey)}

/* service_pages.py: pilot & small-batch */
.pb-lead{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 8px}
.pb-worry{border-left:4px solid var(--ia-teal);background:#f2f7fb;border-radius:0 12px 12px 0;padding:18px 22px;max-width:780px}
.pb-worry span{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#1d5559;margin:0 0 6px}
.pb-worry h2{font-size:22px;line-height:1.3;font-weight:500;color:var(--ia-navy);margin:0 0 6px}
.pb-worry p{font-size:16px;line-height:1.6;color:#2c333b;margin:0}
.pb-btn{display:inline-flex;align-items:center;padding:12px 22px;border-radius:26px;font-size:15px;font-weight:500;
  text-decoration:none;background:var(--ia-navy);color:#fff}
.pb-btn--line{background:#fff;color:var(--ia-navy);box-shadow:inset 0 0 0 1.5px var(--ia-navy)}
.pb-btn:focus-visible{outline:3px solid var(--ia-teal);outline-offset:3px}
.pb-purp{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pb-purp li{border:1px solid rgba(10,37,64,.13);border-radius:16px;padding:20px 22px;background:#fff}
.pb-prop{display:block;width:84px;height:84px;margin:0 0 10px}
.ia-body .pb-purp h3{font-size:18px;font-weight:600;color:var(--ia-navy);margin:0 0 8px}
.pb-purp p{font-size:15px;line-height:1.55;color:#2c333b;margin:0}
.pb-fit{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pb-fit a{display:block;height:100%;box-sizing:border-box;border-radius:12px;background:#f2f7fb;padding:14px 16px;
  text-decoration:none;color:#2c333b;font-size:14.5px;line-height:1.5}
.pb-fit b{display:block;color:var(--ia-navy);margin:0 0 2px}
.pb-fit a:hover{background:#e6f2f3}
.pb-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pb-col{border-radius:16px;padding:22px 24px}
.pb-col--in{background:#f2f7fb}.pb-col--out{background:#0a2540;color:#dfe8f0}
.ia-body .pb-col h3{font-size:18px;font-weight:600;margin:0 0 12px;color:inherit}
.pb-col--in h3{color:var(--ia-navy)!important}
.pb-col ul{margin:0;padding-left:20px;list-style:disc}
.pb-col li{font-size:15px;line-height:1.55;margin:0 0 8px}
.pb-col--out li::marker{color:#6db4b8}
.pb-tool-svg{width:100%;height:auto;display:block}
.pb-two--one{grid-template-columns:minmax(0,1fr)}
.pb-gal{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pb-gal figure{margin:0;position:relative;border-radius:14px;overflow:hidden}
.pb-gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.pb-gal figcaption{position:absolute;left:10px;bottom:10px;background:rgba(10,37,64,.82);color:#fff;font-size:13.5px;padding:6px 12px;border-radius:16px}
@media (max-width:760px){.pb-gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pb-pit{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pb-pit li{border-radius:14px;background:#fff4f3;padding:18px 20px;border-left:4px solid #fe7e78}
.pb-pit b{display:block;font-size:13px;letter-spacing:.12em;color:#b4534d;margin:0 0 6px}
.ia-body .pb-pit h3{font-size:17px;font-weight:600;color:var(--ia-navy);margin:0 0 6px}
.pb-pit p{font-size:14.5px;line-height:1.55;color:#2c333b;margin:0}
.pb-road{list-style:none;margin:10px 0 0;padding:0;position:relative;display:grid;gap:0 18px;
  grid-template-columns:repeat(var(--n),minmax(0,1fr)) minmax(0,.9fr)}
.pb-road--bare{grid-template-columns:repeat(var(--n),minmax(0,1fr)) 44px}
.pb-road::before{content:"";position:absolute;left:0;right:0;top:44px;height:12px;border-radius:6px;background:#2f5d9a}
.pb-road::after{content:"";position:absolute;left:10px;right:10px;top:49px;height:2px;
  background:repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 20px)}
.pb-road li{position:relative;padding:0 0 4px}
.pb-road .pb-pin{display:block;position:relative;z-index:1;width:32px;height:43px;margin:6px 0 22px 2px}
.pb-road .pb-flagmark{display:block;position:relative;z-index:1;width:36px;height:44px;margin:6px 0 21px 6px}
.pb-road .pb-k{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ia-steel);margin:0 0 5px}
.ia-body .pb-road h3{font-size:16.5px;font-weight:600;color:var(--ia-navy);margin:0 0 6px;line-height:1.3}
.pb-road p{font-size:14.5px;line-height:1.55;color:#2c333b;margin:0}
.pb-road .pb-endline{font-weight:600;color:var(--ia-navy)}
.pb-road .pb-go{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--ia-steel);text-decoration:none}
.pb-road .pb-go:hover{text-decoration:underline}
@media (max-width:900px){
  .pb-road,.pb-road--bare{grid-template-columns:minmax(0,1fr);gap:22px}
  .pb-road .pb-end--bare{min-height:44px}
  .pb-road::before{left:12px;right:auto;top:20px;bottom:20px;width:12px;height:auto}
  .pb-road::after{left:17px;right:auto;top:26px;bottom:26px;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,#fff 0 10px,transparent 10px 20px)}
  .pb-road li{padding-left:52px}
  .pb-road .pb-pin,.pb-road .pb-flagmark{position:absolute;left:2px;top:0;margin:0}
  .pb-road .pb-flagmark{left:14px}
}
.pb-plan{border:1px solid rgba(10,37,64,.14);border-radius:18px;padding:24px 26px;background:#fff;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px}
.pb-row{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:12px;align-items:center;padding:10px 0;
  border-bottom:1px solid #e3e9ef}
.pb-row label{font-size:15px;font-weight:600;color:var(--ia-navy)}
.pb-row small{display:block;font-size:13px;font-weight:400;color:#5b6773;margin-top:2px}
.pb-row input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:9px 10px;border:1px solid #c4d0da;
  border-radius:10px;text-align:right}
.pb-row input:focus{outline:3px solid rgba(109,180,184,.45);border-color:var(--ia-teal)}
.pb-sum{border-radius:14px;background:#f2f7fb;padding:20px 22px;align-self:start}
.pb-total{margin:0 0 6px;font-size:15px;color:#2c333b}
.pb-total b{display:block;font-size:44px;line-height:1.1;color:var(--ia-navy);font-weight:600}
.pb-verdict{font-size:15px;line-height:1.5;margin:0 0 16px;color:#2c333b}
.pb-verdict.is-ok{color:#14532d}.pb-verdict.is-low,.pb-verdict.is-high{color:#7a4b0c}
.pb-verdict a{color:inherit;text-decoration:underline}
.pb-send[aria-disabled=true]{opacity:.5;pointer-events:none}
.pb-small{font-size:13px;color:#5b6773;margin:12px 0 0}
.pb-faq details{border-top:1px solid rgba(10,37,64,.14)}
.pb-faq details:last-child{border-bottom:1px solid rgba(10,37,64,.14)}
.pb-faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-size:16.5px;
  font-weight:600;color:var(--ia-navy)}
.pb-faq summary::-webkit-details-marker{display:none}
.pb-faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:24px;font-weight:400;color:var(--ia-steel)}
.pb-faq details[open] summary::after{content:"\2212"}
.pb-faq p{font-size:15.5px;line-height:1.6;color:#2c333b;margin:0 0 16px;max-width:780px}
.pb-faq a{color:var(--ia-navy)}
.pb-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center}
.pb-proof img{width:100%;height:auto;border-radius:16px;display:block}
.pb-proof p{font-size:16px;line-height:1.6;color:#2c333b;margin:0 0 12px}
@media (max-width:900px){.pb-purp,.pb-fit,.pb-steps,.pb-pit{grid-template-columns:minmax(0,1fr)}
  .pb-two,.pb-plan,.pb-proof{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.pb-plan{padding:18px}.pb-row{grid-template-columns:minmax(0,1fr) 88px}}

/* ---------------------------------------------------------- imagery
 * The generated pages were text only, which is the wrong impression for a
 * company whose work is physical. These are the site's own photographs and
 * the marks generated in build/illustrations.py.
 */
.ia-hero--img{position:relative;overflow:hidden}
.ia-hero--img .ia-wrap{position:relative;z-index:2}
.ia-hero-media{
  position:absolute;inset:0;z-index:1;
}
.ia-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
/* The text sits on the photograph, so it needs a wash dark enough to keep
   contrast at every image. The generated hero bands are drawn on the same
   navy this wash uses and put their mark in the right third, where the
   wash thins to 58%, so they read through it rather than fight it. */
.ia-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,37,64,.94) 0%,rgba(10,37,64,.86) 45%,rgba(10,37,64,.58) 100%);
}
@media (max-width:760px){
  .ia-hero-media::after{background:rgba(10,37,64,.88)}
}

.ia-card--img{padding:0;overflow:hidden;display:flex;flex-direction:column}
.ia-card-media{aspect-ratio:16/9;overflow:hidden;background:#eef2f6}
.ia-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.ia-card--img:hover .ia-card-media img{transform:scale(1.04)}
.ia-card--img .ia-card-body{padding:18px 20px 16px;flex:1 1 auto;display:flex;flex-direction:column}
.ia-card--img h3{margin-top:0}

/* /services: five stages, one under the other; picture and bento grid swap
   sides (services_path.py, operator 2026-10-14). */
.svp{margin:0 0 56px}
.svp-intro{max-width:760px; margin:0 0 12px}
.svp-eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ia-steel); margin:0 0 8px}
.svp-intro-text{font-size:19px; line-height:1.5; color:var(--ia-ink); margin:0}
.svp-stage{padding:44px 0 8px; border-top:1px solid var(--ia-line); margin-top:32px}
.svp-head{display:flex; align-items:baseline; gap:16px; margin:0 0 24px;
  font-family:"madefor-display","helveticaneuew10-45ligh",Arial,sans-serif; font-weight:400;
  font-size:clamp(28px,3.2vw,44px); line-height:1.1; color:var(--ia-navy)}
.svp-num{font-size:15px; letter-spacing:.08em; color:var(--ia-steel); font-family:inherit}
.svp-body{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; align-items:start}
.svp-stage--flip .svp-body{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.svp-stage--flip .svp-media{order:2}
.svp-media{border-radius:16px; overflow:hidden; background:var(--ia-bg); aspect-ratio:4/3}
.svp-media img{display:block; width:100%; height:100%; object-fit:cover}
.svp-line{font-family:"madefor-display","helveticaneuew10-45ligh",Arial,sans-serif; font-weight:400;
  font-size:24px; line-height:1.3; color:#111; margin:0 0 16px}
.svp-bento{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  grid-template-areas:"ask ask" "bring leave" "get get" "team stop"}
.svp-tile{background:var(--ia-bg); border:1px solid var(--ia-line); border-radius:14px; padding:14px 16px}
.svp-tile--ask{grid-area:ask; background:var(--ia-navy); border-color:var(--ia-navy)}
.svp-tile--ask .svp-label{color:#9fc6d6}
.svp-tile--ask .svp-text{color:#fff; font-size:17px}
.svp-tile--bring{grid-area:bring}
.svp-tile--leave{grid-area:leave}
.svp-tile--get{grid-area:get}
.svp-tile--team{grid-area:team; display:flex; flex-direction:column; justify-content:center}
.svp-tile--stop{grid-area:stop; background:#fff; border-color:var(--ia-teal)}
.svp-label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ia-steel); margin:0 0 6px}
.svp-text{font-size:14.5px; line-height:1.5; color:var(--ia-ink); margin:0}
.svp-big{font-family:"madefor-display-bold","helveticaneuew10-65medi",Arial,sans-serif; font-size:38px;
  line-height:1; color:var(--ia-navy); margin:0 0 4px}
.svp-big--words{font-size:20px; line-height:1.25; margin:0 0 6px}
.svp-tile a{color:var(--ia-navy); font-weight:600; text-decoration:none; border-bottom:1px solid var(--ia-teal)}
.svp-more{display:inline-block; margin-top:14px; font-weight:600; color:var(--ia-navy);
  text-decoration:none; border-bottom:2px solid var(--ia-teal); padding-bottom:2px}
.svp-more:hover{border-bottom-color:var(--ia-navy)}
/* /services, /solutions and /domains (operator 2026-10-16): fewer boxes, all light. */
.svp-bento--short{grid-template-areas:"ask ask" "bring leave" "get get"}
.svp-bento--short .svp-tile--ask{background:var(--ia-bg); border-color:var(--ia-line)}
.svp-bento--short .svp-tile--ask .svp-label{color:var(--ia-steel)}
.svp-bento--short .svp-tile--ask .svp-text{color:var(--ia-ink); font-size:16px}
@media (max-width:899px){
  .svp-body,.svp-stage--flip .svp-body{grid-template-columns:minmax(0,1fr); gap:20px}
  .svp-stage--flip .svp-media{order:0}
  .svp-stage{padding-top:32px; margin-top:20px}
  .svp-line{font-size:21px}
}
@media (max-width:480px){
  .svp-bento{grid-template-columns:minmax(0,1fr); grid-template-areas:"ask" "bring" "leave" "get" "team" "stop"}
  .svp-bento--short{grid-template-areas:"ask" "bring" "leave" "get"}
}