/* enlighten-web -- design layer 2.
   Loaded after site.css and deliberately overrides it. The first pass mirrored
   the old site's look (gradient washes, bright orange, equal cards in rows).
   This layer replaces that with a quieter, heavier register -- large type on
   flat fields, hairlines instead of card borders, one restrained signal colour
   -- and adds motion that reads as speed rather than decoration.

   Rules that hold everywhere below:
     - no gradients, no glow, no drop shadows on content
     - one accent (--signal), used two or three times per page, never as fill
     - every figure set in tabular numerals so numbers line up column to column
     - all motion is short, eased out, and removed under prefers-reduced-motion
*/

/* ---------------------------------------------------------------- tokens */

:root {
  --ink:        #0b1622;   /* near-black, the heavy field */
  --navy:       #1a3a5c;   /* brand */
  --navy-deep:  #12293f;
  --paper:      #fff;
  --bone:       #f5f2ec;   /* warm platinum, the second neutral */
  --bone-deep:  #ece7dd;
  --graphite:   #5b6673;
  --graphite-lt:#8b96a3;
  --hair:       rgba(11, 22, 34, .13);
  --hair-light: rgba(255, 255, 255, .16);
  --signal:     #c9502c;   /* dialled down from the old #ff6b35 */
  --signal-lt:  #e0653d;

  --fast:  140ms cubic-bezier(.2, .6, .2, 1);
  --med:   220ms cubic-bezier(.2, .6, .2, 1);
  --ease-out: cubic-bezier(.2, .65, .25, 1);   /* the motion layer's one curve */
  --hair-faint: rgba(255, 255, 255, .05);      /* the drifting field grid */

  --measure: 63ch;
  --gutter: clamp(1.25rem, 4vw, 4rem);
}

/* Kill the inherited gradient wash. A flat field is what makes the type read. */
.page-bg::before,
.page-bg::after { display: none !important; }

body {
  background: var(--paper);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------ typography */

h1, h2, h3, h4, .display {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.02;
  text-wrap: balance;
}

.x-eyebrow {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--graphite);
  display: block;
  margin-bottom: 1.5rem;
}
.x-eyebrow--onink { color: var(--graphite-lt); }

.x-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------------------------------------------------------------- shell */

.x-wrap  { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.x-tight { max-width: 760px; }

.x-sec { padding: clamp(4.5rem, 11vh, 9rem) 0; }
.x-sec--ink  { background: var(--ink);  color: #e9edf2; }
.x-sec--navy { background: var(--navy); color: #eaf0f6; }
.x-sec--bone { background: var(--bone); }
.x-sec--ink h1, .x-sec--ink h2, .x-sec--navy h1, .x-sec--navy h2 { color: #fff; }

.x-rule { height: 1px; background: var(--hair); border: 0; margin: 0; }
.x-sec--ink .x-rule, .x-sec--navy .x-rule { background: var(--hair-light); }

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

.btn-primary, .btn-secondary, .cta-header, .mobile-menu-cta {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 2px;
  transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast);
  box-shadow: none;
}
.btn-primary {
  background: var(--signal);
  color: #fff;
  border: 1px solid var(--signal);
  padding: .95rem 1.7rem;
  display: inline-block;
}
.btn-primary:hover { background: var(--signal-lt); border-color: var(--signal-lt); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  padding: .95rem 1.7rem;
  display: inline-block;
  opacity: .9;
}
.btn-secondary:hover { opacity: 1; transform: translateY(-1px); }
.btn-primary.btn-inverse { background: #fff; color: var(--ink); border-color: #fff; }
.btn-primary.btn-inverse:hover { background: var(--bone); border-color: var(--bone); }

.x-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }

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

.site-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--hair);
  box-shadow: none;
}
.logo {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: .13em;
  color: var(--ink);
  font-size: 1.02rem;
}
.nav-links a {
  font-size: .93rem;
  color: var(--graphite);
  letter-spacing: .01em;
  transition: color var(--fast);
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
.cta-header {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  padding: .6rem 1.15rem;
  font-size: .88rem;
}
.cta-header:hover { background: var(--navy); border-color: var(--navy); }

/* Preview bar -- deliberate, not a warning strip. */
.staging-banner, .preview-banner, .site-banner {
  background: var(--ink);
  color: #b9c4d0;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--hair-light);
}
.staging-banner a, .preview-banner a, .site-banner a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }

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

.x-hero {
  background: var(--ink);
  color: #e9edf2;
  padding: clamp(4rem, 12vh, 8.5rem) 0 clamp(3rem, 7vh, 5rem);
  position: relative;
  overflow: hidden;
}
.x-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.x-hero h1 {
  font-size: clamp(2.9rem, 7.4vw, 5.4rem);
  font-weight: 400;
  line-height: .98;
  color: #fff;
  margin-bottom: 1.6rem;
  max-width: 15ch;
}
.x-hero__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: #b9c4d0;
  max-width: 46ch;
  margin-bottom: 2.25rem;
}
.x-hero__lead strong { color: #fff; font-weight: 600; }

/* A hairline that draws itself once, left to right. The only decoration on the
   page, and it exists to make the first impression feel quick. */
.x-hero__line {
  height: 1px;
  background: var(--signal);
  transform-origin: left center;
  animation: x-draw 620ms cubic-bezier(.2, .7, .2, 1) both;
  margin-bottom: 2.25rem;
  width: 88px;
}
@keyframes x-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------ photo plate */

.photo-block, .x-plate {
  background: linear-gradient(0deg, var(--bone-deep), var(--bone-deep));
  border: 1px solid var(--hair);
  color: var(--graphite);
  font-family: var(--font-sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1rem;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
}
.photo-block--onink { background: #16222f; border-color: var(--hair-light); color: var(--graphite-lt); }
/* When the server injects an image (preview builds), the plate collapses to
   a bare frame and takes the image's own aspect -- so the placeholder sits in
   exactly the space the real photograph will. */
.photo-block:has(.photo-block__img) { padding: 0; aspect-ratio: auto; display: block; }
.photo-block__img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 1px; }

/* --------------------------------------------------------- figure band */

.x-band {
  border-top: 1px solid var(--hair-light);
  padding-top: 2.25rem;
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair-light);
}
.x-band > div { background: var(--ink); padding: 0 1.5rem 0 0; }
.x-band > div + div { padding-left: 1.5rem; }
.x-fig {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1;
  color: #fff;
  display: block;
  font-variant-numeric: tabular-nums;
}
.x-fig__label {
  display: block;
  margin-top: .6rem;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--graphite-lt);
  max-width: 22ch;
}

/* trust band on light sections */
.x-band--light { border-color: var(--hair); background: var(--hair); }
.x-band--light > div { background: var(--paper); }
.x-band--light .x-fig { color: var(--ink); }
.x-band--light .x-fig__label { color: var(--graphite); }

/* --------------------------------------------------------- editorial split */

.x-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.x-split__head h2 {
  font-size: clamp(2rem, 3.9vw, 3.15rem);
  font-weight: 400;
  max-width: 14ch;
}
.x-split__head--sticky { position: sticky; top: 6.5rem; }
.x-prose { max-width: var(--measure); }
.x-prose p { margin-bottom: 1.3rem; }
.x-prose p:last-child { margin-bottom: 0; }
.x-prose strong { font-weight: 600; }
.x-lede { font-size: 1.18rem; line-height: 1.6; }

/* numbered list with hanging figures and hairlines -- replaces card grids */
.x-list { list-style: none; margin: 2.5rem 0 0; padding: 0; }
/* Row hairlines are ::before lines rather than borders so they can draw
   left-to-right as their group arrives (see the motion layer below). With no
   motion running they render identically to the old border-top. */
.x-list li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  padding: 1.35rem 0;
  position: relative;
}
.x-list li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: 0 50%;
}
.x-list li:last-child { border-bottom: 1px solid var(--hair); }
.x-list .x-list__n {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  padding-top: .15rem;
}
.x-list h3 { font-size: 1.22rem; font-weight: 500; margin-bottom: .3rem; }
.x-list p { color: var(--graphite); margin: 0; }
.x-sec--ink .x-list li, .x-sec--navy .x-list li { border-color: var(--hair-light); }
.x-sec--ink .x-list li::before, .x-sec--navy .x-list li::before { background: var(--hair-light); }
.x-sec--ink .x-list p, .x-sec--navy .x-list p { color: #b9c4d0; }

/* --------------------------------------------------------------- widget */

.x-instrument {
  border: 1px solid var(--hair-light);
  background: #0e1b28;
  padding: clamp(1.75rem, 4vw, 3rem);
  position: relative;
  border-radius: 2px;
  max-width: 780px;
}
.x-instrument::before,
.x-instrument::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--signal);
  opacity: .8;
}
.x-instrument::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.x-instrument::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* The card's internal hairlines are pseudo-elements rather than borders so
   the power-on sequence can draw them left to right. Statically identical. */
.x-instrument__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.35rem;
  position: relative;
}
.x-instrument__top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hair-light);
  transform-origin: 0 50%;
}
.x-instrument__label {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--graphite-lt);
  font-weight: 600;
}
.x-live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #cfd8e2;
  font-weight: 600;
}
.x-live__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(201, 80, 44, .55);
  animation: x-pulse 2.4s ease-out infinite;
}
.x-live--closed .x-live__dot { background: var(--graphite); animation: none; box-shadow: none; }
@keyframes x-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 80, 44, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(201, 80, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 80, 44, 0); }
}

.x-readout {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: clamp(3.4rem, 9vw, 6.2rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin: 1.9rem 0 1.1rem;
  display: block;
}
/* The unit span carries a real leading space (widget.js) so the readout's
   TEXT is "~15 minutes"; the margin only tops up the visual gap. */
.x-readout__unit { font-size: .32em; letter-spacing: .06em; color: var(--graphite-lt); margin-left: .18em; font-weight: 400; }

.x-promise { font-size: 1.1rem; color: #d7dee6; max-width: 48ch; margin-bottom: 1.5rem; }
.x-promise strong { color: #fff; font-weight: 600; }

.x-urgent {
  border-left: 2px solid var(--signal);
  padding: .35rem 0 .35rem 1rem;
  color: #c6d0da;
  font-size: .95rem;
  margin-bottom: 1.5rem;
  max-width: 52ch;
}

.x-meta {
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--graphite-lt);
  font-variant-numeric: tabular-nums;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hair-light);
  margin-bottom: 1.6rem;
}
.x-instrument .x-meta { border-top: 0; position: relative; }
.x-instrument .x-meta::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--hair-light);
  transform-origin: 0 50%;
}
.x-instrument .x-ctas .btn-secondary { color: #dbe3ea; border-color: rgba(255,255,255,.28); }
.x-instrument .x-ctas .btn-secondary:hover { border-color: #fff; color: #fff; }

/* count-up: the readout arrives rather than appears */
.x-readout[data-countup] { transition: none; }

/* ------------------------------------------------------------- quotes */

.x-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.x-quote { padding-top: 1.5rem; position: relative; }
.x-quote::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ink);
  transform-origin: 0 50%;
}
.x-quote blockquote {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
}
.x-quote figcaption { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--graphite); }

/* recent saves -- quieter than the quotes above it on purpose: hairlines and
   hanging numerals, body-size type, no cards */
.x-saves { margin-top: clamp(3.5rem, 8vw, 5.5rem); }
.x-saves__label {
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: .5rem;
}
.x-saves__list { list-style: none; margin: 0; padding: 0; }
.x-saves__list li {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  padding: 1.35rem 0;
  position: relative;
}
.x-saves__list li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hair);
  transform-origin: 0 50%;
}
.x-saves__list li:last-child { border-bottom: 1px solid var(--hair); }
.x-saves__n {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--signal);
  padding-top: .15rem;
}
.x-saves__list p { margin: 0; color: var(--graphite); max-width: 68ch; }
.x-saves .x-fine { margin-top: 1.1rem; }
/* single-story form used on the subpages */
.x-saves__single {
  border-top: 1px solid var(--hair);
  padding-top: 1.35rem;
  margin: 0;
  color: var(--graphite);
  max-width: 68ch;
}

/* ------------------------------------------------------------- pricing */

.x-price { max-width: 720px; }
.x-price__line {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin-bottom: 1.8rem;
}
.x-price__line strong { font-weight: 500; color: var(--signal); }
.x-price p { margin-bottom: 1.2rem; color: var(--graphite); }
.x-price .x-fine { font-size: .9rem; color: var(--graphite-lt); border-top: 1px solid var(--hair); padding-top: 1.2rem; }

/* --------------------------------------------------------------- team */

.x-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.x-team figure { background: var(--paper); padding: 1.25rem; margin: 0; }
.x-team img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter var(--med); border-radius: 2px; }
.x-team figure:hover img { filter: grayscale(0); }
.x-team figcaption { margin-top: .9rem; }
.x-team .x-team__name { font-family: var(--font-heading); font-weight: 500; font-size: 1.02rem; display: block; }
.x-team .x-team__role { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }

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

.site-footer { background: var(--ink); color: #97a3b0; border-top: 0; }
.site-footer h4 { font-family: var(--font-heading); font-weight: 500; color: #fff; letter-spacing: .04em; }
.site-footer a { color: #b9c4d0; transition: color var(--fast); }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid var(--hair-light); color: #6f7b88; }

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

[data-reveal] { opacity: 0; transform: translateY(10px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--med), transform var(--med); }

/* --------------------------------------------------------- carried pages */
/* The old pages keep their words. They do not keep the gradient cards. */

.hero-page { background: var(--ink); color: #e9edf2; padding: clamp(3.5rem, 9vh, 6rem) var(--gutter); }
.hero-page h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 400; }
.hero-page p { color: #b9c4d0; max-width: 55ch; margin: 1rem auto 0; }

.value-card, .mission-item, .team-member, .guarantee-card, .testimonial-card, .pricing-card, .highlight-box {
  box-shadow: none !important;
  border-radius: 2px;
}
.value-card, .mission-item, .guarantee-card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hair);
  padding: 1.4rem 0 0;
}
.value-card .icon { display: none; }          /* emoji glyphs, replaced by rules */
.value-card h3, .mission-item h3, .guarantee-card h3 { font-size: 1.15rem; font-weight: 500; }
.highlight-box { background: var(--bone); border-left: 2px solid var(--signal); }
.cert-badge { background: var(--bone); color: var(--graphite); border-radius: 2px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.member-photo { filter: none; border-radius: 0; }
.section-header h2 { font-weight: 400; }

/* --------------------------------------------------------------- mobile */

@media (max-width: 900px) {
  .x-hero__grid { grid-template-columns: 1fr; }
  .x-split { grid-template-columns: 1fr; }
  .x-split__head--sticky { position: static; }
  .x-band { grid-template-columns: repeat(2, 1fr); }
  .x-band > div { padding: 1rem 1rem 1rem 0; }
  .x-band > div + div { padding-left: 1rem; }
}
@media (max-width: 520px) {
  .x-band { grid-template-columns: 1fr; }
  .x-list li, .x-saves__list li { grid-template-columns: 2.25rem 1fr; gap: .75rem; }
  .x-ctas .btn-primary, .x-ctas .btn-secondary { width: 100%; text-align: center; }
  .x-instrument { padding: 1.5rem 1.25rem; }
}

/* ================================================================ v2.1
   Conversion + carried-page pass. Same tokens, hairlines and restraint as
   above, applied to (a) the pages that still wore the old gradient look,
   (b) the /quote flow, and (c) the breadth ("44%") evidence sections. */

/* Header sits sticky everywhere. The old fixed header needed margin-top
   hacks that came apart the moment the preview banner toggled. */
.site-header { position: sticky; top: 0; }
.page-hero, .hero-section { margin-top: 0; }

/* ---------------------------------------------------- fine print + links */

.x-fine { font-size: .9rem; color: var(--graphite-lt); }
.x-fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color var(--fast); }
.x-fine a:hover { color: var(--signal); }
.x-fine--onink { margin-top: 1.15rem; max-width: 52ch; }
.x-sec--ink .x-fine a:hover, .x-hero .x-fine a:hover { color: #fff; }
.x-fine--gap { margin-top: 2rem; }
.x-fine strong { font-weight: 600; color: inherit; }
.x-ctas--gap { margin-top: 2.25rem; }
.x-ctas--stack { flex-direction: column; align-items: flex-start; }
.x-aside { color: var(--graphite); margin: 0 0 1.5rem; max-width: 40ch; }
.x-aside strong { color: var(--ink); font-weight: 600; }
.x-plate--gap { margin-top: 2.25rem; }

/* ------------------------------------------- page hero, rewritten pages */

.x-pagehero {
  background: var(--ink);
  color: #b9c4d0;
  padding: clamp(3.5rem, 9vh, 6.5rem) 0 clamp(2.75rem, 6vh, 4.5rem);
}
.x-pagehero h1 {
  color: #fff;
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: .98;
  max-width: 20ch;
  margin-bottom: 1.4rem;
}
.x-pagehero .x-hero__line { margin-bottom: 1.4rem; }
.x-pagehero .x-hero__lead { margin-bottom: 0; }

/* ------------------------------------------------ breadth: the 44% card */

.x-breadth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  margin-top: 2.5rem;
}
.x-readout--flat { margin-top: .5rem; }
.x-meta--loose { margin-bottom: 0; }
.x-shares { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.x-shares li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .55rem 0;
  border-top: 1px solid var(--hair-light);
  color: #b9c4d0;
}
.x-shares li:last-child { border-bottom: 1px solid var(--hair-light); }
.x-shares .x-num { color: #fff; }
.x-shares__rest span:first-child { color: #fff; font-weight: 600; }
.x-shares__rest .x-num { color: var(--signal-lt); font-weight: 600; }

/* the long tail -- the mundanity is the argument; keep it plain */
.x-tail { margin-top: 3rem; border-top: 1px solid var(--hair-light); padding-top: 2rem; }
.x-tail__intro { color: #d7dee6; max-width: 52ch; margin-bottom: 1.4rem; }
.x-tail__list {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  columns: 3;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  font-size: .9rem;
  line-height: 1.45;
  color: #b9c4d0;
}
.x-tail__list li { break-inside: avoid; padding: .55rem 0; position: relative; }
.x-tail__list li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hair-light);
  transform-origin: 0 50%;
}

/* --------------------------------------- founder statement slot (S4) */

.x-founder-quote { margin: 2rem 0 0; border-left: 2px solid var(--signal); padding: .4rem 0 .4rem 1.2rem; }
.x-founder-quote blockquote {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.35rem;
  line-height: 1.3;
  margin: 0 0 .6rem;
}
.x-founder-quote figcaption { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--graphite); }

/* --------------------------------------------- quote page: the template */

.x-template { border: 1px solid var(--hair); background: var(--paper); border-radius: 2px; position: relative; }
.x-template::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 10px; height: 10px;
  border: 1px solid var(--signal);
  border-right: 0; border-bottom: 0;
  opacity: .8;
}
.x-template__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.4rem;
  border-bottom: 1px solid var(--hair);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 600;
}
.x-template dl { margin: 0; padding: .6rem 1.4rem 1.2rem; }
.x-template dt { font-weight: 600; color: var(--ink); font-size: .98rem; margin-top: .95rem; }
.x-template dd { margin: .1rem 0 0; color: var(--graphite-lt); font-size: .88rem; }

/* ------------------------------------- services: included vs separate */

.x-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.x-cols--pad { margin-top: 2.5rem; }
.x-cols h3 { font-size: 1.2rem; font-weight: 500; margin-bottom: .4rem; }
.x-check { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.x-check li { position: relative; padding: .85rem 0 .85rem 1.7rem; border-top: 1px solid var(--hair); color: var(--graphite); }
.x-check li:last-child { border-bottom: 1px solid var(--hair); }
.x-check li::before {
  content: "";
  position: absolute;
  left: .1rem; top: 1.35rem;
  width: .62rem; height: .3rem;
  border-left: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  transform: rotate(-45deg);
}
.x-check strong { color: var(--ink); font-weight: 600; }
.x-check--dash li::before { border-left: 0; border-bottom: 2px solid var(--graphite-lt); transform: none; top: 1.55rem; }

.x-tags { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 900px; }
.x-tags .industry-tag { flex: 0 0 auto; }

/* -------------------------------------------------- mobile quote bar */

.quote-bar { display: none; }
@media (max-width: 768px) {
  .quote-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 900;
    background: var(--ink);
    border-top: 1px solid var(--hair-light);
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    gap: .6rem;
  }
  .quote-bar a {
    flex: 1;
    text-align: center;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .95rem;
    padding: .85rem .5rem;
    border-radius: 2px;
    text-decoration: none;
    letter-spacing: .02em;
  }
  /* call leads and carries the fill; the quote flow follows it */
  .quote-bar__call { background: var(--signal); color: #fff; font-variant-numeric: tabular-nums; }
  .quote-bar__quote { border: 1px solid rgba(255, 255, 255, .28); color: #dbe3ea; }
  body:has(.quote-bar) .site-footer { padding-bottom: 6.5rem; }
}

/* ----------------------------------------- carried pages, full restyle */

/* centered display heroes on the pages that keep their old markup */
.page-hero, .hero-page {
  background: var(--ink);
  color: #b9c4d0;
}
.page-hero h1, .hero-page h1 {
  color: #fff;
  font-weight: 400;
  font-size: clamp(2.3rem, 5.2vw, 3.8rem);
  line-height: 1.02;
}
.page-hero p, .hero-page p { color: #b9c4d0; opacity: 1; max-width: 58ch; }

.section-header h2 { color: var(--ink); }
.section-header p { color: var(--graphite); }

/* numbered steps: hanging figures and hairlines, not circles and cards */
.steps-list li {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--hair);
  margin-bottom: 0;
  padding: 1.6rem 0 1.6rem 4.4rem;
}
.steps-list li:last-child { border-bottom: 1px solid var(--hair); }
.steps-list li::before {
  content: "0" counter(step);
  background: transparent;
  color: var(--signal);
  font-weight: 300;
  font-size: 1.1rem;
  width: auto; height: auto;
  border-radius: 0;
  left: 0; top: 1.8rem;
  font-variant-numeric: tabular-nums;
}
.steps-list h3 { color: var(--ink); font-weight: 500; font-size: 1.25rem; }

/* trust list: hairlines, not coral-edged cards */
.trust-list li {
  background: transparent;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--hair);
  margin-bottom: 0;
  padding: 1.3rem 0;
}
.trust-list li:last-child { border-bottom: 1px solid var(--hair); }
.trust-list strong { color: var(--ink); }

/* service cards and industry chips, if any page still carries them */
.service-card {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--hair);
  padding: 1.4rem 0 0;
}
.service-card:hover { transform: none; box-shadow: none; }
.service-card h3 { color: var(--ink); font-weight: 500; font-size: 1.25rem; }
.industry-tag {
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 2px;
  color: var(--ink);
  font-weight: 500;
  font-size: .95rem;
  padding: .85rem 1.1rem;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.industry-tag:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* resources: typographic cards, no stock photos, no lift */
.resources-grid { margin-top: 3rem; }
.resource-card { background: var(--paper); border: 1px solid var(--hair); border-radius: 2px; box-shadow: none; transition: border-color var(--fast); }
.resource-card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.resource-image { display: none; }
.resource-tag {
  background: transparent;
  color: var(--signal);
  padding: 0;
  border-radius: 0;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.resource-card h2 { color: var(--ink); font-weight: 500; font-size: 1.35rem; }
.read-more { color: var(--ink); }
.read-more:hover { color: var(--signal); }

/* article pages */
.lg-12 { background: transparent; color: var(--graphite-lt); padding: 0; border-radius: 0; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.blog-content h2, .blog-content h3 { color: var(--ink); font-weight: 500; }
.blog-content a { color: var(--navy); }
.blog-content a:hover { color: var(--signal); }
.blog-content blockquote, .callout {
  background: var(--bone);
  border-left: 2px solid var(--signal);
  border-radius: 2px;
  color: var(--ink);
  font-style: normal;
}
.callout p { color: var(--ink); }
.blog-content th { color: var(--ink); }
.blog-content tr:last-child td { border-bottom-color: var(--ink); }
.cta-box { background: var(--ink); border-radius: 2px; }
.cta-box a { background: var(--signal); border-radius: 2px; }
.cta-box a:hover { box-shadow: none; transform: translateY(-1px); }
.lg-16 { color: var(--navy); font-weight: 600; }
.lg-16:hover { color: var(--signal); }

/* why-us */
.reasons-section { background: var(--bone); }
.reason-block {
  background: transparent;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--hair);
  padding: 2.5rem 0 0;
  margin-bottom: 3.5rem;
}
.reason-block h2 { color: var(--ink); font-weight: 500; font-size: 1.6rem; }
.highlight {
  background: transparent;
  border-left: 2px solid var(--signal);
  border-radius: 0;
  padding: .4rem 0 .4rem 1.2rem;
  font-style: normal;
  color: var(--ink);
}
.belief-section { background: var(--ink); }
.cta-coral { background: var(--ink); }

/* adjacent dark sections need a seam or they read as one long field */
.x-sec--ink + .x-sec--ink,
.belief-section + .x-sec--ink,
.x-hero + .x-sec--ink { border-top: 1px solid var(--hair-light); }

/* about */
.mission-section, .values-section { background: var(--bone); }
.mission-tagline, .story-content h2 { color: var(--ink); font-weight: 400; }
.mission-subtitle { font-style: normal; color: var(--graphite); }
.team-section { background: var(--paper); }
.team-member {
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-align: left;
  border-top: 1px solid var(--hair);
  padding-top: 1.5rem;
}
.team-member:hover { transform: none; box-shadow: none; }
.member-photo {
  border: 1px solid var(--hair);
  border-radius: 2px;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0 0 1.25rem;
}
.team-member h3 { color: var(--ink); font-weight: 500; font-size: 1.3rem; }
.member-title { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); font-weight: 600; }
.member-certs { justify-content: flex-start; }
.member-bio { font-size: .98rem; color: var(--graphite); }
.linkedin-link { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.linkedin-link:hover { color: var(--signal); }

/* photo placeholder on light pages, matched to the register */
.photo-block--light {
  background: var(--bone-deep);
  border: 1px solid var(--hair);
  color: var(--graphite);
  border-radius: 2px;
}

/* ------------------------------------------------ v2.1 responsive */

@media (max-width: 900px) {
  .x-breadth { grid-template-columns: 1fr; }
  .x-tail__list { columns: 2; }
}
@media (max-width: 768px) {
  .x-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .x-tail__list { columns: 1; }
  .steps-list li { padding-left: 3.2rem; }
}

/* ================================================================ v2.2
   Conversion re-aim. The homepage now speaks to four situations -- the
   retiring IT person, the outgrown shop, the provider who is not good
   enough, and the mainland IT team with people here -- and the phone number
   is the first action rather than a button label. Same tokens, hairlines
   and restraint as everything above. */

/* ------------------------------------------------ hero call-to-action */

.x-callcta { margin: 0 0 1.6rem; }
.x-callcta__label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--graphite-lt);
  margin-bottom: .6rem;
}
.x-callcta__number {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--signal);
  transition: color var(--fast), border-color var(--fast);
}
.x-callcta__number:hover { color: var(--signal-lt); border-color: var(--signal-lt); }
/* (The one-line status readout that used to sit under this number is gone:
   one live state on the page -- the card -- not two.)
   The block itself remains as the card's stale-data understudy in the hero. */
.x-callcta[hidden] { display: none; }

/* -------------------------------------------- hero qualifying strip */
/* Four situations a visitor scans to find their own. Hairline rows, no
   cards, no icons -- recognition, not decoration. */

.x-qualify { margin-top: 1.75rem; }
.x-qualify__label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--graphite-lt);
  margin-bottom: .35rem;
}
.x-qualify__list { list-style: none; margin: 0; padding: 0; }
.x-qualify__list li {
  padding: .7rem 0;
  color: #d7dee6;
  font-size: .95rem;
  line-height: 1.45;
  position: relative;
}
.x-qualify__list li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--hair-light);
  transform-origin: 0 50%;
}
.x-qualify__list li:last-child { border-bottom: 1px solid var(--hair-light); }

/* --------------------------------------- header: persistent call link */
/* Grouped with the quote button so the nav's space-between still yields
   three blocks. The number stays visible after the nav collapses -- the
   desktop and tablet counterpart of the mobile bottom bar. */

.nav-actions { display: flex; align-items: center; gap: 1.15rem; }
.cta-header-call {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .93rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: color var(--fast);
}
.cta-header-call:hover { color: var(--signal); }
@media (max-width: 560px) {
  /* the bottom bar owns the call affordance on phones */
  .cta-header-call { display: none; }
}

/* mobile menu: call first, quote second and quieter */
.mobile-menu-cta { background: var(--signal); }
.mobile-menu-cta:hover { background: var(--signal-lt); }
.mobile-menu-cta--quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hair);
  margin-top: .6rem;
}
.mobile-menu-cta--quiet:hover { background: var(--bone); color: var(--ink); }

/* The fallback CTA cluster is hidden by widget.js while the live card is
   up; .x-ctas sets display:flex, which outranks the UA [hidden] rule, so
   say it explicitly. */
.x-ctas[hidden] { display: none; }

/* --------------------------------------------- the printer principle */
/* Nine words that carry the page. Display size, no accent fill -- the
   weight change on the second sentence is the only emphasis it needs. */

.x-principle {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.6vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #cfd8e2;
  max-width: 26ch;
  margin: 1rem 0 0;
  text-wrap: balance;
}
.x-principle strong { color: #fff; font-weight: 500; }

/* founder statement: three short paragraphs, the last one carrying the
   principle in his own words */
.x-founder-quote blockquote p { margin: 0 0 .9rem; }
.x-founder-quote blockquote p:last-child { margin-bottom: 0; }
.x-founder-quote blockquote strong { font-weight: 500; }

/* ------------------------------- merged concierge + breadth section */
/* The tail list rides the right-hand column now; the table it used to sit
   under moved to /services. */

.x-tail--col { margin-top: 0; border-top: 0; padding-top: 0; }
.x-tail__list--stack { columns: 1; }
.x-tail--col .x-fine { margin-top: 1.4rem; }

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .x-hero__line { animation: none; }
}

/* ================================================================ v2.3
   Motion + photography pass. One easing curve, short travel, everything
   eased out; the widget moves into the hero as the set piece. The register
   stays: no gradients as decoration, no shadows, one signal colour.

   The motion layer is progressive by construction. motion.js adds
   .motion-ready to <html> only when JS runs, IntersectionObserver exists and
   the visitor has not asked for reduced motion -- every pre-reveal "hidden"
   state below is scoped under it, so with no JS (or an observer that never
   fires -- elements are revealed once and never re-hidden) the page renders
   complete and at rest. */

/* ------------------------------------------------- hero: staged entrance */
/* Pure CSS keyframes, not the observer: the hero is above the fold, CSS is
   render-blocking (no flash), and it still plays if JS never arrives. */

@keyframes x-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.x-hero__copy > * { animation: x-rise 320ms var(--ease-out) both; }
.x-hero__copy > h1             { animation-delay: 0ms; }
.x-hero__copy > .x-hero__line  { animation: x-draw 620ms cubic-bezier(.2, .7, .2, 1) 90ms both; }
.x-hero__copy > .x-hero__lead  { animation-delay: 150ms; }

/* --------------------------------------------------- hero: live column */

.x-hero__side { min-width: 0; }
.x-hero__side .x-fine--onink { margin-top: 1.1rem; max-width: 46ch; }
.x-hero__side .x-instrument { padding: clamp(1.4rem, 2.2vw, 2.1rem); }
/* the copy column sits against the card's vertical middle */
.x-hero .x-hero__grid { align-items: center; }

/* the two-figure band -- four numbers under an instrument was noise */
.x-band--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }

/* the five real portraits, in the born-and-raised section */
.x-faces { margin-top: 2.1rem; }
.x-faces__row { display: flex; gap: .6rem; }
.x-faces__row img {
  width: clamp(48px, 5.6vw, 82px);
  height: clamp(48px, 5.6vw, 82px);
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
  border: 1px solid var(--hair);
  border-radius: 2px;
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--med);
}
.x-faces__row img:hover { filter: grayscale(0); }
.x-faces__caption {
  margin-top: .7rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--graphite);
}

/* qualifying strip as a row under the hero grid */
.x-qualify--row { margin-top: 3.25rem; }
@media (min-width: 901px) {
  .x-qualify--row .x-qualify__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 2rem;
  }
  .x-qualify--row .x-qualify__list li { border-bottom: 0 !important; padding-right: .5rem; }
}

/* ------------------------------------------- widget: promise vs measured */

.x-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: end;
  margin: 1.7rem 0 1.3rem;
}
.x-duo__key {
  display: block;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--graphite-lt);
  margin-bottom: .55rem;
}
.x-duo .x-readout { margin: 0; font-size: clamp(2.5rem, 4.6vw, 4rem); }
.x-duo .x-readout--sub {
  font-size: clamp(1.55rem, 2.4vw, 2.2rem);
  color: #cfd8e2;
}
.x-readout--sub .x-readout__unit { font-size: .5em; }
.x-duo__cell--measured { border-left: 1px solid var(--hair-light); padding-left: 1.4rem; }
@media (max-width: 560px) {
  .x-duo { grid-template-columns: 1fr; gap: 1rem; }
  .x-duo__cell--measured {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--hair-light);
    padding-top: 1rem;
  }
}

/* --------------------------------------------------- widget: power-on */
/* widget.js adds .x-power at render (motion available only), then .x-on when
   the card first enters view: frame rises, hairlines draw, corners light,
   dot begins pulsing, readouts count. Without motion neither class exists
   and the card is simply on. */

.x-instrument.x-power { opacity: 0; transform: translateY(14px); }
.x-instrument.x-power::before,
.x-instrument.x-power::after { opacity: 0; }
.x-instrument.x-power .x-instrument__top::after,
.x-instrument.x-power .x-meta::before { transform: scaleX(0); }
.x-instrument.x-power .x-duo__cell--measured { border-color: transparent; }
.x-instrument.x-power .x-live__dot { animation: none; box-shadow: none; }

.x-instrument.x-power.x-on {
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.x-instrument.x-power.x-on::before,
.x-instrument.x-power.x-on::after {
  opacity: .8;
  transition: opacity 260ms var(--ease-out) 200ms;
}
.x-instrument.x-power.x-on .x-instrument__top::after,
.x-instrument.x-power.x-on .x-meta::before {
  transform: scaleX(1);
  transition: transform 540ms var(--ease-out) 120ms;
}
.x-instrument.x-power.x-on .x-duo__cell--measured {
  border-color: var(--hair-light);
  transition: border-color 300ms var(--ease-out) 260ms;
}
.x-instrument.x-power.x-on .x-live:not(.x-live--closed) .x-live__dot {
  animation: x-pulse 2.4s ease-out .4s infinite;
}

/* ------------------------------------------------------- reveal system */
/* [data-reveal] rises alone (data-d="n" holds it n steps back);
   [data-stagger] containers land their children in sequence. Delay =
   --si (index, set by motion.js via CSSOM) x --step (60ms default,
   data-step overrides). Transform and opacity only. */

.motion-ready [data-reveal]:not(.is-in),
.motion-ready [data-stagger]:not(.is-in) > * {
  opacity: 0;
  transform: translateY(14px);
}
[data-reveal].is-in,
[data-stagger].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
  transition-delay: calc(var(--si, 0) * var(--step, 60ms));
}
/* photo plates get a slightly longer, softer landing -- still only fade+rise */
[data-reveal].photo-block.is-in { transition-duration: 420ms; }

/* row hairlines and the quote rules draw with their rows */
.motion-ready [data-stagger]:not(.is-in) > li::before,
.motion-ready [data-stagger]:not(.is-in) > .x-quote::before { transform: scaleX(0); }
[data-stagger].is-in > li::before,
[data-stagger].is-in > .x-quote::before {
  transform: scaleX(1);
  transition: transform 480ms var(--ease-out);
  transition-delay: calc(var(--si, 0) * var(--step, 60ms));
}

/* ------------------------------------------- dark fields: drifting grid */
/* A faint horizontal hairline grid on the two big ink fields, drifting a few
   pixels with scroll. CSS scroll-driven animation -- no JS, no scroll loop;
   browsers without animation-timeline get the static grid. Deliberately at
   the edge of perception. */

.x-field { position: relative; overflow: hidden; }
.x-field > * { position: relative; z-index: 1; }
.x-field::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0; right: 0;
  top: -40px; bottom: -40px;
  background: repeating-linear-gradient(180deg,
    var(--hair-faint) 0, var(--hair-faint) 1px,
    transparent 1px, transparent 148px);
  pointer-events: none;
}
@supports (animation-timeline: view()) {
  .x-field::after {
    animation: x-field-drift linear both;
    animation-timeline: view();
  }
}
@keyframes x-field-drift {
  from { transform: translateY(-14px); }
  to   { transform: translateY(14px); }
}

/* -------------------------------------------------------- photography */

.x-photoband { background: var(--paper); }
.x-photoband__frame {
  aspect-ratio: auto;
  height: clamp(200px, 30vw, 380px);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.x-photoband__frame .photo-block__img { height: 100%; }

.x-saves__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.x-saves__plate { aspect-ratio: 1 / 1; }
@media (max-width: 900px) {
  .x-saves__grid { grid-template-columns: 1fr; }
  .x-saves__plate { max-width: 420px; }
}

/* ------------------------------------------------------------- brand */

.logo { display: inline-flex; align-items: center; }
.logo__img { display: block; height: 30px; width: auto; }
@media (max-width: 560px) { .logo__img { height: 22px; } }

.footer-brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.footer-brand__wordmark { display: block; height: 30px; width: auto; }
.footer-brand__mark { display: block; height: 24px; width: auto; }

/* --------------------------------------------------- reduced motion */
/* Everything above renders at rest: no entrance, no counting (motion.js and
   widget.js both check the media query), no drift, no pulse. */

@media (prefers-reduced-motion: reduce) {
  .x-hero__copy > * { animation: none; }
  .x-field::after { animation: none; }
  .x-instrument.x-power { opacity: 1; transform: none; }
  .x-instrument.x-power::before,
  .x-instrument.x-power::after { opacity: .8; }
  .x-instrument.x-power .x-instrument__top::after,
  .x-instrument.x-power .x-meta::before { transform: none; }
  .x-instrument.x-power .x-duo__cell--measured { border-color: var(--hair-light); }
  .motion-ready [data-reveal]:not(.is-in),
  .motion-ready [data-stagger]:not(.is-in) > * { opacity: 1; transform: none; }
  .motion-ready [data-stagger]:not(.is-in) > li::before,
  .motion-ready [data-stagger]:not(.is-in) > .x-quote::before { transform: none; }
}

/* ----------------------------------------------------- fewer-words layer */
/* Patterns added 2026-09-01 when prose sections were converted to graphics:
   a process strip, share bars, a 30-day strip, and coverage bars. Same
   vocabulary as the rest of the file: one accent, hairlines, tabular nums. */

/* A process told as a row of numbered steps, not paragraphs. */
.x-steps {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: step;
}
.x-steps li { padding-top: .9rem; border-top: 1px solid var(--hair); }
.x-steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: .35rem;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.x-steps h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
.x-steps p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--graphite); }
@media (max-width: 720px) { .x-steps { grid-template-columns: repeat(2, 1fr); } }

/* Category shares as bars. Width per row via --w, scaled to the largest
   category, so the 44% row reads as the argument it is. */
.x-shares--bars li { position: relative; }
.x-shares--bars li::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 3px;
  width: var(--w, 0%);
  background: var(--graphite-lt);
  opacity: .65;
}
.x-shares--bars .x-shares__rest::after { background: var(--signal-lt); opacity: 1; }

/* The first 30 days as a strip: one narrow day, two wide fortnights. */
.x-days {
  display: grid;
  grid-template-columns: 1.4fr 2fr 2fr;
  gap: 2px;
  margin-top: 2rem;
}
.x-days > div { background: var(--bone); padding: 1.05rem 1.15rem; }
.x-sec--bone .x-days > div { background: var(--paper); }
.x-days__label {
  display: block;
  margin-bottom: .4rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--signal);
}
.x-days p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--graphite); }
@media (max-width: 720px) { .x-days { grid-template-columns: 1fr; } }

/* Coverage bars: one measure across entities, us emphasized, direct-labelled. */
.x-cover {
  list-style: none;
  margin: 2rem 0 .5rem;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.x-cover li {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) 1fr 3.2rem;
  gap: .8rem;
  align-items: center;
  font-size: .9rem;
}
.x-cover__who { text-align: right; color: var(--graphite); line-height: 1.25; }
.x-cover__bar { height: 12px; border-radius: 2px; background: var(--graphite-lt); opacity: .7; }
.x-cover__pct { font-variant-numeric: tabular-nums; color: var(--ink); }
.x-cover--us .x-cover__who { color: var(--ink); font-weight: 600; }
.x-cover--us .x-cover__bar { background: var(--signal); opacity: 1; }
.x-cover--us .x-cover__pct { font-weight: 600; }

/* x-band--light sits on paper, where the band background reads as a solid
   strip across the padding area. Pad inside the cells instead, so the
   background only ever shows as the 1px hairlines between them. */
.x-band--light { padding-top: 0; border-top: 0; }
.x-band--light > div { padding-top: 1.6rem; border-top: 1px solid var(--hair); }

/* October 2026 -- shared public-site refresh.
   Conventional typography; the homepage is built around our own people and work. */
:root {
  --font-heading: var(--font-sans);
  --ink: #19354e; --navy: #193f60; --navy-deep: #102d47;
  --bone: #f1f5f7; --bone-deep: #e5edf2;
  --graphite: #4b5c69; --graphite-lt: #596b79;
  --signal: #126998; --signal-lt: #0c527b;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}
html { scroll-padding-top: 100px; }
body { font-size: 1.0625rem; line-height: 1.6; }
h1, h2, h3, h4, .display { font-weight: 650; line-height: 1.15; letter-spacing: -.02em; }
main h2, .x-split h2 { font-size: clamp(1.85rem, 3vw, 2.55rem); }
main h3 { line-height: 1.25; }
main a { color: #126998; text-underline-offset: .2em; }
main a:hover { text-decoration-thickness: 2px; }
:where(a, button, summary, input, textarea, select):focus-visible { outline: 3px solid #1680b3; outline-offset: 4px; }
[hidden] { display: none !important; }
.x-wrap { max-width: 1320px; }
.x-sec { padding: clamp(3rem, 6vw, 5rem) 0; }
.x-split { gap: clamp(2rem, 5vw, 4.5rem); }
.x-split__head--sticky { position: static; }
.x-eyebrow, .home-label { font-size: .95rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--signal); margin: 0 0 .8rem; text-transform: none; }
.x-fine, .x-meta, .x-faces__caption { color: var(--graphite); }
.x-pagehero { background: var(--navy-deep); padding: clamp(2.5rem, 5vw, 4rem) 0; color: #fff; }
.x-pagehero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.6rem); max-width: 26ch; line-height: 1.12; font-weight: 650; }
.x-pagehero .x-hero__lead { max-width: 66ch; color: #e0eaf2; margin: 1.25rem 0 0; }
.x-pagehero .x-hero__lead strong, .x-pagehero .x-eyebrow { color: #fff; }
.x-pagehero .x-hero__line { display: none; }
main .hero-page { background: var(--navy-deep); padding-top: 3.5rem; padding-bottom: 3.5rem; }
main .hero-page h1, main .hero-page p { color: #fff; }
main .hero-page h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.15; }
.x-sec--ink, .x-sec--navy { color: #fff; }
.x-sec--ink a, .x-sec--navy a, .x-hero a { color: #bce3f6; }
.x-sec--ink .x-fine, .x-sec--ink .x-meta, .x-sec--ink .x-eyebrow, .x-sec--ink .x-prose p, .x-fine--onink { color: #d6e4ef; }
.x-field::before, .x-field::after { display: none; }
[data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
.btn-primary, .btn-secondary, .cta-header, .mobile-menu-cta, .submit-btn { border-radius: 3px; font-weight: 600; letter-spacing: 0; text-decoration: none; box-shadow: none; }
main .btn-primary, .nav-actions .cta-header, .mobile-menu-cta, .submit-btn { color: #fff; background: var(--signal); border-color: var(--signal); }
main .btn-primary:hover, .nav-actions .cta-header:hover, .submit-btn:hover { color: #fff; background: var(--signal-lt); border-color: var(--signal-lt); transform: none; box-shadow: none; }
main .btn-secondary { color: var(--ink); border: 1px solid #8d9faa; background: transparent; opacity: 1; }
.x-sec--ink .btn-secondary, .x-sec--navy .btn-secondary, .x-hero .btn-secondary { color: #fff; border-color: #97adb8; }
.site-header { background: #fff; backdrop-filter: none; box-shadow: none; border-bottom: 1px solid #dce4ea; }
.nav-container { min-height: 92px; max-width: 1440px; gap: 1.5rem; padding: 1rem 2.25rem; }
.logo__img { width: 156px; height: auto; }
.site-header .nav-links { display: flex; align-items: center; gap: 1.75rem; }
.nav-links a, .nav-group summary { font-family: var(--font-sans); color: var(--ink); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-decoration: none; }
.nav-actions { gap: 1.25rem; }
.cta-header-call { font-size: 1rem; }
.site-header .cta-header { padding: .75rem 1.1rem; font-size: 1rem; }
.nav-group { position: relative; }
.nav-group summary { display: flex; gap: .5rem; align-items: center; cursor: pointer; list-style: none; padding: .5rem 0; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary span { font-size: .85em; }
.nav-dropdown { position: absolute; top: 100%; left: -1rem; z-index: 40; width: 250px; padding: .6rem; background: #fff; border: 1px solid #d9e2e8; box-shadow: 0 8px 16px #19354e18; }
.nav-dropdown a { display: block; padding: .6rem .75rem; }
.nav-dropdown a:hover { background: var(--bone); }
.mobile-menu, .hamburger { display: none; }

/* A photograph of our team occupies the masthead, with a dark reading area.
   Keep faces unobscured on the right; stack the original photograph on phones. */
.home-masthead { position: relative; isolation: isolate; background: #081e30; color: #fff; overflow: hidden; }
.home-masthead__image { position: absolute; inset: 0 0 0 44%; z-index: -1; }
.home-masthead__image img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 45%; }
.home-masthead__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #081e30 0%, #081e3020 16%, #081e3000 35%); }
.home-masthead__inner { position: relative; padding-top: 4.1rem; padding-bottom: 4.5rem; min-height: 560px; display: flex; align-items: center; }
.home-masthead__copy { width: 48%; max-width: 600px; }
.home-location { font-size: .96rem; font-weight: 500; margin: 0 0 1.5rem; color: #d5e7f4; }
.home-masthead h1 { font-size: clamp(3.1rem, 4.5vw, 4.2rem); line-height: 1.07; font-weight: 650; color: #fff; letter-spacing: -.035em; margin: 0 0 1.6rem; text-wrap: initial; }
.home-masthead__lead { font-size: 1.25rem; line-height: 1.5; max-width: 35ch; margin-bottom: 1rem; }
.home-masthead__detail { font-size: 1.04rem; color: #d5e7f4; max-width: 39ch; }
.home-masthead__reassurance { font-size: .88rem; color: #d5e7f4; margin-top: .75rem; }
.home-masthead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 1.85rem; }
.home-masthead .btn-primary { background: #fff; color: var(--navy-deep); border-color: #fff; padding: .85rem 1.5rem; }
.home-masthead .btn-primary:hover { background: #e4f0f7; border-color: #e4f0f7; }
.home-masthead__phone { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.home-masthead__phone:hover { text-decoration: underline; }
.home-masthead__caption { position: absolute; bottom: 1.2rem; right: var(--gutter); padding: .25rem .6rem; background: #102d47d9; font-size: .8rem; }
.home-service-desk { border-bottom: 1px solid #dce4ea; background: #fff; }
.home-service-desk__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.home-service-desk__metric { display: flex; gap: 1rem; align-items: center; }
.home-service-desk__metric > strong { color: var(--signal); font-size: 2.7rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 650; }
.home-service-desk__metric b, .home-service-desk__metric span { display: block; }
.home-service-desk__metric b { font-weight: 600; }
.home-service-desk__metric span, .home-service-desk__explain { font-size: .9rem; color: var(--graphite); }
.home-link, .home-textlink { display: inline-flex; align-items: center; gap: .7rem; font-size: 1rem; font-weight: 600; color: var(--signal); text-decoration: none; padding: .3rem 0; }
.home-link:hover, .home-textlink:hover { text-decoration: underline; }
.home-section { padding: 4.5rem 0; }
.home-service-layout { display: grid; grid-template-columns: 1fr 1.65fr; gap: 5rem; }
.home-section-intro h2 { margin-bottom: 1.25rem; }
.home-section-intro > p:not(.home-label) { color: var(--graphite); max-width: 33ch; margin-bottom: 1.5rem; }
.home-service-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; row-gap: 2rem; }
.home-service-list article { padding-top: 1.1rem; border-top: 2px solid #d4e0e8; }
.home-service-list h3 { font-size: 1.35rem; margin-bottom: .65rem; }
.home-service-list h3 a { display: flex; justify-content: space-between; gap: .7rem; color: var(--ink); text-decoration: none; }
.home-service-list h3 a:hover { color: var(--signal); text-decoration: underline; }
.home-service-list h3 span { color: var(--signal); }
.home-service-list p { font-size: 1rem; line-height: 1.6; color: var(--graphite); }
.home-projects { border-top: 1px solid #dce4ea; padding-top: 1.4rem; margin-top: 2.5rem; font-size: .95rem; color: var(--graphite); }
.home-projects a { margin-left: .3rem; }
.home-team { background: #fff; padding: 3.75rem 0; }
.home-team__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-bottom: 2rem; }
.home-team__intro > div > p:not(.home-label) { color: var(--graphite); margin-bottom: .7rem; }
.home-team__portraits { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.home-team__portraits img { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; }
.home-team__portraits figcaption { padding-top: .75rem; }
.home-team__portraits strong { display: block; font-size: 1.15rem; font-weight: 650; }
.home-team__portraits span { display: block; font-size: .88rem; color: var(--graphite); line-height: 1.35; margin-top: .15rem; }
.home-sectors { background: #193f60; padding: 3.5rem 0; color: #fff; }
.home-sectors h2 { color: #fff; }
.home-sectors .home-label { color: #c4e5f5; }
.home-sectors__inner { display: grid; grid-template-columns: 1fr 1.65fr; gap: 5rem; }
.home-sectors__links a { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1.5rem; color: #fff; padding: 1rem 0; border-bottom: 1px solid #ffffff35; text-decoration: none; }
.home-sectors__links a:first-child { padding-top: 0; }
.home-sectors__links strong { font-size: 1.3rem; font-weight: 600; }
.home-sectors__links span { grid-row: 2; font-size: .95rem; color: #dbe8f1; }
.home-sectors__links b { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.3rem; font-weight: 400; }
.home-sectors__links a:hover strong { text-decoration: underline; }
.home-results { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: start; padding-top: 2.5rem; border-top: 1px solid #cbd5d9; }
.home-results__story h2 { font-size: 2.1rem; margin-bottom: 1.25rem; }
.home-results__story > p:not(.home-label) { color: var(--graphite); max-width: 48ch; }
.home-small { font-size: .87rem; }
.home-timeline { display: flex; gap: 2.5rem; margin: 1.6rem 0; }
.home-timeline div + div { padding-left: 2.5rem; border-left: 1px solid #cbd5d9; }
.home-timeline dt { font-size: 1.65rem; font-weight: 650; }
.home-timeline dd { color: var(--graphite); font-size: .95rem; }
/* Keep the original customer wording visible, without a carousel. */
.home-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin: 2rem 0 3rem; }
.home-reviews figure { margin: 0; padding-top: 1.25rem; border-top: 1px solid #cbd5d9; }
.home-reviews blockquote { margin: 0; font-family: var(--font-sans); font-size: 1.15rem; line-height: 1.65; font-weight: 400; color: var(--ink); }
.home-reviews figcaption { margin-top: 1rem; font-size: 1rem; font-weight: 650; color: var(--signal); }
.home-case { border-top: 1px solid #cbd5d9; }
.home-case summary, .home-questions summary { cursor: pointer; padding: 1.1rem 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.home-case .home-results { border: 0; padding-top: 1rem; }
.home-questions { background: var(--bone); }
.home-questions__list details { border-top: 1px solid #cbd5d9; }
.home-questions__list details:last-child { border-bottom: 1px solid #cbd5d9; }
.home-questions__list p { margin: 0 0 1.25rem; color: var(--graphite); max-width: 62ch; }
#results { background: #0a263b; color: #fff; }
#results h2, #results .home-reviews blockquote, #results .home-case summary, #results .home-timeline dt { color: #fff; }
#results .home-label, #results .home-reviews figcaption { color: #9cddfa; }
#results .home-reviews figure, #results .home-case, #results .home-timeline div + div { border-color: #ffffff45; }
#results .home-results__story > p:not(.home-label), #results .home-timeline dd { color: #d6e6ef; }
.about-office { margin: 2.5rem auto 0; }
.about-office__frame { aspect-ratio: 2 / 1; overflow: hidden; }
.about-office img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.about-office figcaption { padding-top: .75rem; font-size: .95rem; color: var(--graphite); }
.home-close { background: var(--navy-deep); padding: 3rem 0; color: #fff; }
.home-close h2 { color: #fff; }
.home-close__inner { display: flex; justify-content: space-between; gap: 3rem; align-items: center; }
.home-close p { color: #d5e7f4; margin-top: .75rem; }
.home-close__actions { display: flex; align-items: center; gap: 1.4rem; }
.home-close__actions > a { color: #fff; white-space: nowrap; }
.home-close .btn-primary { background: #fff; border-color: #fff; color: var(--navy-deep); }
.home-close .btn-primary:hover { background: #e4f0f7; border-color: #e4f0f7; }

/* Keep the numbers in the requested rate sheet; the homepage leads with fit. */
#pricing { background: #fff; border-top: 1px solid #dce4ea; }
#pricing .pg { max-width: none; }
#pricing .pg__lead { font-size: 1.05rem; margin-bottom: 1rem; }
#pricing .pg__row { max-width: 740px; }
#pricing .pg__label { font-size: .9rem; letter-spacing: 0; text-transform: none; }
#pricing .pg__fine { color: var(--graphite); }
.automation-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 2rem 0; }
.automation-examples article { border-top: 1px solid #ffffff45; padding-top: 1.5rem; }
.automation-examples h3 { color: #fff; font-size: 1.4rem; margin-bottom: 1rem; }
.automation-examples p { font-size: 1rem; color: #d2e0e6; margin: .75rem 0; }
.site-footer { background: #0b2337; color: #d2e0e6; padding-top: 3.5rem; }
.site-footer h4 { font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: #fff; }
.site-footer a, .footer-fineprint { color: #d2e0e6; }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; max-width: 1320px; gap: 2.5rem; padding: 0 var(--gutter); }
.footer-brand__mark { display: none; }
.footer-brand__wordmark { width: 160px; height: auto; }
.footer-links li { margin: .55rem 0; }
.footer-bottom { max-width: 1320px; margin: 2.5rem auto 0; padding: 1.25rem var(--gutter); color: #d2e0e6; }
.quote-bar { background: var(--navy-deep); padding-bottom: max(.65rem, env(safe-area-inset-bottom)); }
.quote-bar a { font-size: 1rem; border-radius: 3px; }
.quote-bar__call { background: var(--signal); }
.quote-bar__quote { color: #fff; }
@media (max-width: 1100px) {
  .site-header .nav-links, .nav-actions { display: none; }
  .hamburger { display: flex; }
  .nav-container { min-height: 76px; padding: .9rem 1.5rem; }
  .logo__img { width: 136px; }
  .mobile-menu.is-open { display: block; position: fixed; inset: 76px 0 0; overflow-y: auto; background: #fff; padding: .5rem 1.5rem max(6rem, env(safe-area-inset-bottom)); z-index: 99; }
  .mobile-menu-links > li { border-bottom: 1px solid #dce2e3; }
  .mobile-menu-links a, .mobile-menu-links summary { padding: .9rem 0; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
  .mobile-menu-links summary { justify-content: space-between; }
  .mobile-menu-links .nav-group ul { list-style: none; padding: 0 0 .75rem 1rem; }
  .mobile-menu-links .nav-group a { padding: .5rem 0; font-size: 1rem; }
  .mobile-menu-cta { display: block; margin: 1rem 0; text-align: center; padding: .8rem; }
  .mobile-menu-cta--quiet { color: var(--ink); background: transparent; border: 1px solid #a4b1b6; }
  .home-masthead__copy { width: 51%; }
  .home-masthead h1 { font-size: 3.3rem; }
  .home-masthead__lead { font-size: 1.12rem; max-width: 29ch; }
  .home-service-desk__explain { display: none; }
  .home-service-layout, .home-sectors__inner { grid-template-columns: 1fr 1.5fr; gap: 2.5rem; }
  .home-service-list { gap: 1.5rem; }
  .home-team__intro, .home-results { gap: 2.5rem; }
  .home-close__actions { flex-direction: column; gap: .8rem; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 85px; }
  .home-masthead { display: flex; flex-direction: column; }
  .home-masthead__inner { min-height: 0; padding-top: 2.1rem; padding-bottom: 2rem; }
  .home-masthead__copy { width: 100%; max-width: none; }
  .home-location { font-size: .88rem; margin-bottom: 1.2rem; }
  .home-masthead h1 { font-size: clamp(2.55rem, 9vw, 3.5rem); margin-bottom: 1.2rem; }
  .home-masthead__lead { font-size: 1.14rem; max-width: 38ch; }
  .home-masthead__detail { font-size: 1rem; max-width: 44ch; }
  .home-masthead__actions { margin-top: 1.4rem; gap: 1rem; }
  .home-masthead .btn-primary { padding: .8rem 1.2rem; }
  .home-masthead__image { position: relative; inset: auto; order: 2; z-index: 0; }
  .home-masthead__image img { aspect-ratio: 1.5; height: auto; object-position: center; }
  .about-office__frame { aspect-ratio: 1.5; }
  .home-masthead__image::after, .home-masthead__caption { display: none; }
  .home-service-desk__inner { flex-wrap: wrap; gap: .7rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .home-service-desk__metric > strong { font-size: 2.2rem; min-width: 5.5rem; }
  .home-service-desk__metric span { font-size: .8rem; }
  .home-service-desk .home-link { font-size: .94rem; }
  .home-section, .home-team, .home-sectors { padding: 2.75rem 0; }
  .home-service-layout, .home-team__intro, .home-sectors__inner, .home-results { grid-template-columns: 1fr; gap: 1.8rem; }
  .home-section-intro > p:not(.home-label) { max-width: 45ch; margin-bottom: .8rem; }
  .home-service-list { grid-template-columns: 1fr; gap: 1.4rem; }
  .home-service-list article { padding-top: 1rem; }
  .home-projects { margin-top: 1.7rem; }
  .home-team__intro { gap: 1rem; }
  .home-team__portraits { grid-template-columns: repeat(3, 1fr); gap: 1.2rem .75rem; }
  .home-team__portraits span { font-size: .78rem; }
  .home-results__story h2 { font-size: 1.9rem; }
  .home-reviews { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
  .home-timeline { gap: 1.5rem; }
  .home-timeline div + div { padding-left: 1.5rem; }
  .home-close__inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .home-close__actions { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
  .automation-examples { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .site-footer { padding-bottom: 80px; }
  .x-pagehero { padding: 2rem 0; }
  .x-pagehero h1 { font-size: 2.35rem; }
  .x-sec { padding: 2.5rem 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


.admin-alert.error { color: #8b2525; background: #fceaea; }
.admin-alert.success { color: #21543c; background: #e5f3eb; }

/* Portrait files share a crop and color treatment; keep every frame identical. */
.home-team__photo { overflow: clip; aspect-ratio: 1; background: #e5e5e0; }
.home-team__photo img { display: block; height: 100%; object-fit: cover; }
.team-grid--profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-grid--profiles .member-photo { border: 0; border-radius: 0; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #e5e5e0; }

/* Photographs sit alongside the work they show, without another block of copy. */
.work-photos { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem; margin-top: 2.75rem; }
.work-photos figure, .about-story__photo, .service-work { margin: 0; }
.work-photos__frame { height: clamp(240px, 27vw, 360px); overflow: hidden; }
.work-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-photos figcaption, .about-story__photo figcaption, .service-work figcaption { padding-top: .75rem; font-size: .9rem; line-height: 1.4; color: var(--graphite); }
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-story__photo img { display: block; width: 100%; height: auto; }
.service-work { margin-top: 2rem; max-width: 370px; }
.service-work img { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) {
  .team-grid--profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-story { gap: 2rem; }
}
@media (max-width: 760px) {
  .work-photos, .about-story { grid-template-columns: 1fr; gap: 1.5rem; }
  .work-photos__frame { height: auto; aspect-ratio: 3 / 2; }
  .work-photos img { height: 100%; }
  .service-work { max-width: 320px; }
}
@media (max-width: 520px) {
  .team-grid--profiles { grid-template-columns: minmax(0, 1fr); }
}

/* Use Chiara's original photograph; frame it in CSS without changing her face. */
.member-photo--original { overflow: clip; }
.member-photo--original img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-original { transform: scale(1.4); transform-origin: 50% 33%; }
/* Inner-page artwork: one projection, a restrained palette, readable HTML legends. */
.page-story__layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.page-story__copy { min-width: 0; text-align: left; }
.page-story h1 { font-size: clamp(2.25rem, 3.8vw, 3.45rem); max-width: 19ch; }
.page-story .x-hero__lead { font-size: 1.16rem; line-height: 1.65; max-width: 46ch; }
.page-visual { margin: 0; min-width: 0; }
.page-visual figcaption { padding: .9rem 0 0; font-size: .88rem; line-height: 1.5; color: #b8ccd7; }
.page-visual__photograph { position: relative; border-bottom: 4px solid #9bbcac; }
.page-visual__photograph::after { content: ''; position: absolute; inset: 0; border: 1px solid #ffffff24; pointer-events: none; }
.page-visual--photo img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }
.page-visual .photo-caption { display: flex; flex-direction: column; gap: .4rem; padding-top: 1rem; }
.photo-caption__place { font-size: .66rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #8eabbc; }
.service-art { background: #16384e; border: 1px solid #ffffff16; }
.service-art__heading { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.5rem; border-bottom: 1px solid #ffffff13; font-size: .88rem; font-weight: 500; letter-spacing: .02em; color: #d7e4e9; }
.service-art__index { color: #b7d2c7; font-size: 1.05rem; font-weight: 600; letter-spacing: -.08em; }
.service-art__index > span { color: #648c9e; margin-left: .2rem; }
.service-art__scene { display: block; width: 100%; height: auto; overflow: hidden; }
.service-art__scene path, .service-art__scene polygon { stroke-linejoin: round; }
.service-art__scene text { font-family: var(--font-body, 'Source Sans 3', sans-serif); }
.service-art__track-key { display: none; }
.service-art__legend { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 1rem 1.4rem 1.2rem; gap: 1rem; border-top: 1px solid #ffffff13; }
.service-art__legend--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-art__legend li { color: #e4eeee; font-size: .86rem; line-height: 1.4; }
.service-art__legend li > span { display: block; color: #91b2b8; font-size: .65rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; margin-bottom: .25rem; }
.art-ground { fill: #0b293d; opacity: .65; }
.art-ground-solid { fill: #244c61; stroke: #5b8092; stroke-width: 1.2; }
.art-guide { fill: none; stroke: #7195a7; stroke-opacity: .27; stroke-width: 1; stroke-dasharray: 4 7; }
.art-side { fill: #53778a; stroke: #89a7b2; stroke-width: 1.2; }
.art-deep { fill: #294d63; stroke: #6e929f; stroke-width: 1.2; }
.art-cap { fill: #c2d5d4; stroke: #dae6e1; stroke-width: 1.2; }
.art-surface { fill: #b8ced0; stroke: #c5dcd9; stroke-width: 1.4; }
.art-layer--1 .art-surface { fill: #88aab3; }
.art-layer--2 .art-surface { fill: #608696; }
.art-layer--3 .art-surface { fill: #3e687e; }
.art-layer--3 .art-side { fill: #345d72; }
.art-layer--2 .art-side { fill: #406c80; }
.art-leader { fill: none; stroke: #8eafba; stroke-width: 1.5; }
.art-marker { fill: #183b50; stroke: #92b3bd; stroke-width: 1.4; }
.art-number { fill: #eff4ef; font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.art-equipment { fill: #a4bdc5; stroke: #d4e4e3; stroke-width: 1.4; }
.art-equipment-line { fill: none; stroke: #97bac3; stroke-width: 1.5; }
.art-server-slot { fill: #406779; stroke: #6e929f; stroke-width: 1; }
.art-light { fill: #b4d7bd; }
.art-edge { fill: #9ebac3; stroke: #d6e6e5; stroke-width: 1.3; }
.art-screen { fill: #183b50; stroke: #537d92; stroke-width: 1; }
.art-screen-line { fill: none; stroke: #91c3be; stroke-width: 2; }
.art-seal { fill: #699e90; stroke: #a6c9b8; stroke-width: 1.5; }
.art-white-line { fill: none; stroke: #eff5ed; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art-registration { fill: none; stroke: #86a8b2; stroke-opacity: .5; stroke-width: 1; }
.art-paper { fill: #edf1e9; stroke: #a5bdc4; stroke-width: 1.5; }
.art-fold { fill: none; stroke: #9cb4bd; stroke-width: 1.5; }
.art-ink { fill: none; stroke: #72929f; stroke-width: 2; }
.art-ink--strong { stroke: #315e71; stroke-width: 3; }
.art-flow-under { fill: none; stroke: #234b60; stroke-width: 12; }
.art-flow { fill: none; stroke: #a2c6bd; stroke-width: 2.5; }
.art-arrow { fill: none; stroke: #a2c6bd; stroke-width: 2.5; }
.art-orbit { fill: #21485f; stroke: #729aaa; stroke-width: 1.5; }
.art-symbol { fill: none; stroke: #d7e7e1; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art-micro { fill: #a6c1ca; font-size: 13px; letter-spacing: 1.8px; }
.art-overlap-edge { fill: none; stroke: #9fc6bc; stroke-width: 1.3; }
.art-chart-rule { fill: none; stroke: #688d9f; stroke-width: 1.4; }
.art-chart-label { fill: #b7cbd4; font-size: 25px; }
.art-label-backing { fill: #16384e; }
.art-chart-label--bright { fill: #e6eee8; font-size: 29px; font-weight: 600; }
.art-track { fill: none; stroke-width: 18; }
.art-track--old { stroke: #748f9e; }
.art-track--new { stroke: #a9cdbb; }
.art-track-end { fill: #d2dfe2; }
.art-arrow--light { stroke: #a9cdbb; stroke-width: 3; }
.art-note { fill: #b9d1d5; font-size: 20px; }
.art-building-front { fill: #afc4ca; stroke: #d2dfdf; stroke-width: 1.5; }
.art-building-side { fill: #6f93a5; stroke: #a6c1ca; stroke-width: 1.5; }
.art-building-roof { fill: #d8e3dc; stroke: #eff4eb; stroke-width: 1.5; }
.art-window { fill: #355c71; stroke: #7e9fae; stroke-width: 1; }
.art-window--lit { fill: #d4c7a1; }
.art-window-side { fill: #1d445b; stroke: #537d91; stroke-width: 1; }
.art-door { fill: #21475c; stroke: #7496a8; stroke-width: 1; }
.art-paving { fill: none; stroke: #53768b; stroke-width: 1.1; }
.art-signal { fill: none; stroke: #add3c3; stroke-width: 2; }
.art-landscape { fill: none; stroke: #83ad9e; stroke-width: 2.3; }
.art-folder-back { fill: #436e80; stroke: #759aaa; stroke-width: 1.5; }
.art-folder-front { fill: #8cb3b3; stroke: #c3d9cd; stroke-width: 1.5; }
.art-folder-rule { fill: none; stroke: #6b929b; stroke-width: 1.4; }
.art-folder-label { fill: #dae5db; }
.art-lens { fill: #1a4056; fill-opacity: .92; stroke: #d2e4dd; stroke-width: 5; }
.art-access-seal { fill: #426f70; stroke: #b9d6c7; stroke-width: 2; }
.art-lens-inner { fill: none; stroke: #7fa7b2; stroke-width: 1.5; }
.art-lens-handle { fill: none; stroke: #9cbfbe; stroke-width: 14; stroke-linecap: round; }
.art-lens-detail { fill: none; stroke: #bdd5cf; stroke-width: 3; }
.art-cloud { fill: #d6e4de; stroke: #f3f6ed; stroke-width: 1.5; }
.art-cloud-label { fill: #244d63; font-size: 40px; font-weight: 600; letter-spacing: -1px; }
.art-clock { fill: #234e64; stroke: #bdd5cf; stroke-width: 2; }
.art-clock-ticks { fill: none; stroke: #8fb5b6; stroke-width: 1.5; }
.art-priority { fill: #adcdbb; stroke: #c4decc; stroke-width: 1; }
.art-priority--1 { fill: #6e9b9c; stroke: #9bbeb8; }
.art-priority--2 { fill: #476f83; stroke: #7297a4; }
.enquiry-photo { margin: 2rem 0 0; max-width: 420px; border-bottom: 3px solid #9bbcac; }
.enquiry-photo img { display: block; width: 100%; height: auto; }
.enquiry-photo figcaption { margin: 0; padding: .65rem 0; color: var(--graphite); font-size: .9rem; }
main .hero-page.page-story { text-align: left; }
main .hero-page.page-story h1 { margin-left: 0; }
main .hero-page.page-story p { margin-left: 0; font-size: 1.16rem; }
@media (max-width: 1100px) {
  .page-story__layout { gap: 2rem; }
  .page-story h1 { font-size: 2.6rem; }
  .service-art__heading { padding: 1rem; }
  .service-art__legend { padding: 1rem; gap: .65rem; }
}
@media (max-width: 900px) {
  .enquiry-photo { display: none; }
}
@media (max-width: 760px) {
  .page-story__layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .page-story h1 { font-size: 2.3rem; max-width: 23ch; }
  .page-story .x-hero__lead { font-size: 1.08rem; }
  .page-visual { width: 100%; max-width: 620px; }
  .service-art__heading { font-size: .82rem; padding: .85rem 1rem; }
  .service-art__legend { gap: .8rem 1rem; padding: .9rem 1rem 1rem; }
  .service-art__legend--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-art__legend li { font-size: .8rem; }
  .service-art__legend li > span { font-size: .61rem; }
  .service-art__scene .art-number { font-size: 24px; }
  .service-art__scene .art-marker { r: 21px; }
  .service-art__scene .art-micro { display: none; }
  .page-visual--handover .art-chart-label, .page-visual--handover .art-label-backing, .page-visual--handover .art-note { display: none; }
  .service-art__track-key { display: flex; gap: 1.1rem; padding: 1rem 1rem 0; color: #dce8e9; font-size: .8rem; }
  .service-art__track-key > span::before { content: ''; display: inline-block; width: .8rem; height: .35rem; margin-right: .4rem; background: #748f9e; vertical-align: middle; }
  .service-art__track-key > span + span::before { background: #a9cdbb; }
  .photo-caption__place { font-size: .62rem; }
  .resources-grid, .x-split { grid-template-columns: minmax(0, 1fr); }
  .x-list li > div { min-width: 0; overflow-wrap: anywhere; }
}