/* ==========================================================================
   caresolutions.com — static rebuild
   All values extracted from the live site, not estimated.
   ========================================================================== */

/* Roboto is served by Google as a single VARIABLE font file, so one file
   covers 400/500/700. The live site only loads weight 400 and lets the
   browser fake its bolds; self-hosting the variable font gives real ones. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-variable.woff2") format("woff2");
}

:root {
  --navy:       #16263C;  /* nav text, headings, dark bands */
  --blue:       #406BAB;  /* links, accents */
  --blue-light: #B1D2ED;
  --green:      #7FBE41;  /* brand curve / accent */
  --orange:     #FF7B09;  /* active nav item */
  --text:       #333333;
  --muted:      #888888;
  --gray-dark:  #494C4F;
  --gray-line:  #DDDEDF;
  --white:      #FFFFFF;

  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* The live site is a 1140px content column with 30px gutters either side,
     so the outer box is 1200px. Header logo, footer logo and page content all
     line up on the same left edge because of it — keep these two together. */
  --wrap: 1200px;        /* outer box: 1140 content + 2x30 gutter */
  --gutter: 30px;
  --header-h: 100px;
}

* { box-sizing: border-box; }

/* Sticky header means in-page anchors (#solutions, the case-study rails)
   would otherwise land underneath it. Live sets exactly this. */
html { scroll-padding-top: 160px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 27px;
  color: var(--text);
  background: var(--white);
}

img { max-width: 100%; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------------------------------------------------- */
/* All measured off live. Two variants, identical layout — only the bar
   colour, the logo file and the text colour differ:
     .site-header--home      navy bar, reversed logo, white nav
     .site-header--interior  white bar, standard logo, navy nav

   Live is position:fixed with a second, in-flow copy acting as a spacer.
   position:sticky gives the same result from one copy, so the header is
   pinned AND takes up its own 97px without a spacer element.

   Total height 97.2px = 74.2 of content plus 23px of bottom padding. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
}

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 23px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
}

/* The logo sits on the BOTTOM of the 74.2px band, not centred in it. */
.site-logo { display: flex; align-items: flex-end; flex: 0 0 auto; }
.site-logo img { width: 228px; height: auto; }

/* Utility row on top, nav underneath, both hard right. */
.site-header__right {
  min-height: 74.2px;
  padding: 5px 0 0 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.site-utility {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 17px;
}

.site-utility a { padding: 3px 0; font-size: 16px; line-height: 19.2px; font-weight: 400; }
/* Needs `.site-utility a.…` to outrank `.site-utility a`, which sets the 3px
   the Careers link wants — otherwise the icon is 28px tall and drags the
   whole utility row down with it. */
.site-utility a.site-utility__linkedin { display: inline-flex; padding: 0; }
/* Live colours this icon --blue, not --green. Measured on the <i> itself, not
   the <a> around it: the anchor computes green, but a more specific rule paints
   the glyph #406BAB. An earlier pass read the anchor and got it wrong. */
.site-utility__linkedin svg { width: 22px; height: 22px; fill: var(--blue); }
.site-utility__linkedin:hover svg { fill: #31538a; }

.site-header--home { background: var(--navy); }
.site-header--interior { background: var(--white); }

/* ---- Home header: navy -> white on scroll -------------------------------
   Live does this with Elementor's sticky "effects" at a 200px offset and a
   0.3s background transition; main.js adds .is-scrolled at the same point.
   The two logos both sit in the markup and are shown one at a time, so the
   dark one is already decoded before the first swap and cannot flicker. */

.site-header { transition: background-color .3s ease; }
.site-header .site-utility a,
.site-header .nav > ul > li > a { transition: color .3s ease; }

.site-logo__dark { display: none; }

.site-header--home.is-scrolled { background: var(--white); }
.site-header--home.is-scrolled .site-logo__rev { display: none; }
.site-header--home.is-scrolled .site-logo__dark { display: block; }

.site-header--home.is-scrolled .site-utility a,
.site-header--home.is-scrolled .nav-toggle,
.site-header--home.is-scrolled .nav > ul > li > a { color: var(--navy); }

/* The current-page and hover states must still outrank the swapped navy. */
.site-header--home.is-scrolled .site-utility a:hover,
.site-header--home.is-scrolled .nav > ul > li > a:hover,
.site-header--home.is-scrolled .nav > ul > li.is-current > a { color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .site-utility a,
  .site-header .nav > ul > li > a { transition: none; }
}

/* ---------- Primary nav ---------------------------------------------- */

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 8px;
}

.nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 40px;
  /* 18px, not the body's 27px: the <li> would otherwise be 27 tall and the
     18px link would centre 5px above where live puts it. */
  line-height: 18px;
}

/* inline-flex, not inline: as an inline-block the caret sits on the text
   baseline and pushes the line box ~7px taller, which lifts the whole nav
   row off the bottom of the header. */
.nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}

/* Colour the TOP LEVEL only. Scoping this to `> ul > li > a` is what keeps
   the dropdown links readable — a blanket `.nav a` rule paints them white
   too, and they sit on a white panel. */
.site-header--home .site-utility a,
.site-header--home .nav-toggle,
.site-header--home .nav > ul > li > a { color: var(--white); }

.site-header--interior .site-utility a,
.site-header--interior .nav-toggle,
.site-header--interior .nav > ul > li > a { color: var(--navy); }

.site-utility a:hover,
.nav > ul > li > a:hover,
.nav > ul > li.is-current > a { color: var(--orange); text-decoration: none; }

/* Caret on the three items that have a dropdown. Drawn with borders so it
   inherits the link colour and stays hand-editable. */
.nav__has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  flex: 0 0 auto;
}

/* dropdowns */
.nav li { position: relative; }

.nav li > ul {
  list-style: none;
  margin: 10px 0 0;          /* live drops the panel 10px below the bar */
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 245px;
  background: var(--white);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.1);
  display: none;
  z-index: 200;
}

/* Invisible bridge across that 10px gap. Live has the gap with nothing in it,
   which means the pointer leaves the item on the way down and the panel can
   snap shut; this keeps the gap looking identical but hoverable. */
.nav li > ul::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.nav li:hover > ul,
.nav li:focus-within > ul { display: block; }

/* The separator is a 2px brand-blue rule on the <li>, NOT on the <a> — the
   anchor's own border computes to `0px none`, which is what made this easy to
   miss. Last item has none. */
.nav li > ul > li { border-bottom: 2px solid var(--blue); }
.nav li > ul > li:last-child { border-bottom: 0; }

/* Always navy: the panel is white under both header variants. */
.nav li > ul a {
  display: block;
  padding: 15px 0 15px 20px;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  color: var(--navy);
  white-space: normal;
}

/* Live changes only the TEXT colour on hover — to orange, the same colour it
   uses for the current item — and leaves the row's background alone. We had a
   pale tint plus blue text, which was wrong on both counts. Verified from live's
   own token: --e-global-color-8043eb2 = #FF7B09. */
.nav li > ul a:hover,
.nav li > ul a:focus-visible,
.nav li > ul li.is-current > a { color: var(--orange); }

/* The dropdown panel is white under the home header but pale blue under the
   interior one — live defines it per header template, not per page. #B1D2ED
   appears only in the interior template's CSS, and is already our --blue-light.
   Note this keys off the header VARIANT, so a scrolled home header (which turns
   white) still shows the white panel, as live does. */
.site-header--home .nav li > ul { background: var(--white); }
.site-header--interior .nav li > ul { background: var(--blue-light); }

/* ---------- Footer ---------------------------------------------------- */

/* Grey background matches live (measured #DDDEDF, the same token used by every
   other grey band). The layout inside it does NOT match live — David prefers
   this arrangement; see the note in _partials/footer.html. */
.site-footer {
  color: var(--text);
  padding: 44px 0 28px;
  background: var(--gray-line);
}

.site-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

/* Logo, address and WOSB badge stack together in one left column. */
.site-footer__brand {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.site-footer__brand img { width: 228px; height: auto; }

/* Blue, matching live. The footer inherits --text, so this needs saying
   explicitly - QC, 2026-08-25. */
.site-footer__address { margin: 0; font-size: 16px; line-height: 24px; color: var(--blue); }
.site-footer__wosb { margin: 0; }
.site-footer__wosb img { width: 53px; height: auto; }

/* The whole menu sits on ONE row, spread across the remaining width so it has
   room to breathe. nowrap is the point — without it Careers and LinkedIn drop
   onto second and third lines, which is what David asked to fix. */
.site-footer__nav { flex: 1 1 auto; }

.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 24px;
}

/* 600, matching live - the header nav and this were both inheriting 400. */
.site-footer__nav a { color: var(--navy); font-size: 16px; font-weight: 600; white-space: nowrap; }
.site-footer__nav a:hover { color: var(--orange); text-decoration: none; }

/* The LinkedIn mark, 22px like live. fill:currentColor means it inherits the
   navy above and turns orange on hover along with its sibling links — no extra
   colour rules needed. inline-flex stops it sitting on the text baseline and
   adding descender space to the row. */
.site-footer__linkedin { display: inline-flex; align-items: center; }
.site-footer__linkedin svg { width: 22px; height: 22px; fill: currentColor; }

.site-footer__copyright {
  max-width: var(--wrap);
  margin: 28px auto 0;
  padding: 16px 20px 0;
  /* A --gray-line rule would be invisible against the grey background, so this
     is a shade darker. */
  border-top: 1px solid #C7C9CA;
  font-size: 14px;
  color: var(--gray-dark);
}

/* ==========================================================================
   PAGE SECTIONS — the repeating patterns used across the site
   ========================================================================== */

/* Full-bleed hero photo band. Height varies per page, set inline.
   Every hero on live carries an Elementor background overlay, which is easy
   to miss because it is a ::before rather than part of the background. This
   one — navy fading in from 55% across, at 80% — is on all twelve interior
   heroes and on /careers/. Without it the white heading has nothing to sit
   against on the right. */
.hero-band {
  position: relative;
  min-height: 350px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-band::before,
.car-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(22,38,60,0) 55%, #16263C 100%);
  opacity: .8;
  pointer-events: none;
}

/* Blue title bar under the hero, with the dot motif at its right edge. */
.title-bar {
  background-color: var(--blue);
  background-image: url("../images/csi_web_dots_tall_r.png");
  background-position: 100% 0%;
  background-repeat: no-repeat;
  min-height: 93px;
  display: flex;
  align-items: center;
}

/* .wrap is a flex item in here, so without an explicit width it shrinks to
   fit the heading text and the auto margins then centre it. */
.title-bar > .wrap { width: 100%; }

.title-bar h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--white);
}

/* Navy full-width band holding one centred statement. */
.statement-band {
  background: var(--navy);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.statement-band p,
.statement-band h2 {
  margin: 0;
  max-width: 832px;
  text-align: center;
  font-size: 27px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--white);
}

/* Section heading in brand blue — live marks these up as H1s, we use H2
   so each page keeps a single H1. Visually identical. */
.section-heading {
  margin: 0 0 18px;
  font-size: 27px;
  line-height: 1.35;      /* 36.45px — measured on live */
  font-weight: 400;
  color: var(--blue);
}

/* Two-column content row. Column widths are set inline per page because they
   vary; the gap is 8% of the 1140 column, matching live. Note flex-GROW is 0 —
   live leaves the leftover space empty rather than stretching the columns, and
   with grow:1 the inline flex-basis gets overrun (570 became 644). */
.two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 8%;
  align-items: center;
  padding: 60px 0 70px;
}

.two-col__text { flex: 0 1 460px; min-width: 0; }

/* 14.4px on EVERY paragraph including the last — that is the theme default on
   live, and zeroing the last one leaves the column ~11px short. */
.two-col__text p { margin: 0 0 14.4px; }
.two-col__text .section-heading { margin-bottom: 20px; }

/* Variant with a photo column: full-bleed height, no vertical padding, and
   shifted 15px left because live drops the section's left padding. */
.two-col--photo {
  position: relative;
  left: -15px;
  align-items: stretch;
  padding: 0;
}

.two-col--photo .two-col__text { padding: 80px 0 50px; }

/* A column whose entire content is a photo, applied as a background so the
   art-directed offsets from Elementor can be reproduced exactly. */
.photo-col {
  flex: 0 1 460px;
  min-width: 0;
  align-self: stretch;
  min-height: 320px;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Navy callout card sitting inside a content row. */
.callout {
  background: var(--navy);
  color: var(--white);
  padding: 40px 40px 0;      /* no bottom padding — the button sits flush */
  flex: 0 1 456px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.callout p { margin: 0 0 14.4px; color: var(--white); }

/* Same 20px overhang as the other navy cards — the callout has no bottom
   padding, so the button hangs below its edge. */
.callout .btn { margin-bottom: -20px; }

/* ---------- Service (Solutions) page template ------------------------ */
/* Six pages share this exact layout; only copy and photography differ.
   Re-measured against live 2026-08-07 — the first pass had verified the copy
   and the assets but never the geometry, so the heading size, the card
   padding and the overhang were all wrong. */

/* Light-grey intro band. The navy card is pulled UP out of it by 250px, so
   it overhangs the hero above rather than the band below — that is why the
   feature block underneath needs no clearance padding. */
.svc-intro { background: var(--gray-line); }

.svc-intro__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
}

.svc-intro__card {
  flex: 0 0 38.78%;           /* 442.1 of the 1140 column */
  min-width: 0;
  background-color: var(--navy);
  background-image: url("../images/csi_web_dots_bl_l.png");
  background-position: top left;
  background-repeat: no-repeat;
  color: var(--white);
  padding: 57px;
  /* Live finishes the card with a thick blue rule along the bottom. It is part
     of the card's box, which is why live measures 410 tall against our 400
     content box — adding it lands us on live exactly. */
  border-bottom: 10px solid var(--blue);
  margin-top: -250px;         /* the overhang, upward into the hero */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.svc-intro__card h1 {
  margin: 0;
  font-size: 50px;            /* live's .solution-title h1 — theme custom CSS */
  line-height: 60px;
  font-weight: 600;
  color: var(--white);
}

/* 27px, not the 18px body size — measured on live. It is what makes the card
   409px tall rather than 308. */
.svc-intro__card p {
  margin: 0;
  font-size: 27px;
  line-height: 36.45px;
  color: var(--white);
}

/* flex-basis 0, not auto: with `auto` the basis is the paragraph's max-content
   width, which overflows the row and wraps the column onto its own line. */
.svc-intro__lead {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 42px;
  padding: 0 20px;
}

.svc-intro__lead p { margin: 0 0 14.4px; color: #000; }

/* Centred feature block. The copy column is 1048.8 wide inside the 1140, so
   45.6px of inset on each side on top of the gutter. */
.svc-feature {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 50px calc(var(--gutter) + 45.6px) 60px;
  text-align: center;
}

.svc-feature h2 { margin: 0 0 20px; }
.svc-feature p  { margin: 0 0 20px; }

.svc-bullets {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
}

/* Live marks these with a green Font Awesome check, not a dot — measured at
   14px in an 18x14 box, colour #7FBE41, with the item as a centred flex row.
   Inlined as SVG like every other icon on the site, so no icon font loads. */
.svc-bullets li {
  display: flex;
  align-items: center;
  gap: 5px;
}
.svc-bullets li svg {
  flex: 0 0 auto;
  width: 14px;
  height: 11px;
  fill: var(--green);
}

/* Blue band: statement plus the green curve on the left, copy on the right. */
.svc-band { background: var(--blue); color: var(--white); }

.svc-band__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 50px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 3%;
}

.svc-band__lead {
  flex: 0 0 42%;              /* 478.8 of 1140 */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.svc-band__lead h2 { margin: 0; color: var(--white); font-size: 27px; line-height: 36.45px; font-weight: 400; }
.svc-band__curve { width: 45.6px; flex: 0 0 45.6px; height: 255.9px; }

.svc-band__copy {
  flex: 0 0 54%;              /* 615.6 of 1140 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.svc-band__copy p { margin: 0; color: var(--white); }

/* Photo + copy row — same shape as .two-col--photo, only the text column's
   bottom padding differs (20 here, 50 on /about/). */
.svc-detail {
  position: relative;
  left: -15px;
  align-items: flex-start;
  padding: 0;
}

.svc-detail .two-col__text { padding: 80px 0 20px; }

/* Inset navy "next solution" card, nudged 45px left of centre.
   Live separates this band from the detail row above with 50px and from the
   footer below with 70px (it carries those as margins on the section itself).
   We had neither, so the card sat flush against both. */
.svc-next {
  max-width: var(--wrap);
  margin: 50px auto 70px;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: center;
}

.svc-next__card {
  width: 80%;                 /* 912 of 1140 */
  margin-left: -45px;
  background: var(--navy);
  padding: 50px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.svc-next__card h2 {
  margin: 0;
  flex: 1 1 480px;
  color: var(--white);
  font-size: 27px;
  line-height: 36.45px;
  font-weight: 400;
}

/* Live hangs this button off the card's right edge by 42px (its column carries
   margin-right:-90px). Our card has 50px of right padding, so pulling the
   button 92px right puts it in the same place. Same trick as the We Serve CTA
   overhanging the bottom of its card. */
.svc-next__card .btn { margin-right: -92px; }

/* ---------- We Serve child page template ----------------------------- */
/* Six pages share this layout; only the copy, the subject icon and the
   photograph change. Every measurement came off the live page. */

.ws-hero {
  background-color: var(--navy);
  background-image: url("../images/csi_web_dots_tall_r.png");
  background-position: 100% 0%;
  background-repeat: no-repeat;
  min-height: 180px;
  display: flex;
  align-items: center;
}

.ws-hero__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ws-hero h1 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 36px;
  line-height: 43.2px;
  font-weight: 400;
  color: var(--white);
}

/* Live wraps the second line in <b> — the title reads as one sentence with
   the subject emphasised. */
.ws-hero h1 b { font-weight: 700; }

.ws-hero__icon { flex: 0 0 224px; margin: 0; text-align: right; }
.ws-hero__icon img { width: 165px; height: auto; margin-left: auto; }

/* Grey band, full-bleed: photograph flush to the left edge, copy inset. The
   percentages are of the viewport, matching Elementor's own output.
   No height of its own — the copy beside it sets the band's height, exactly
   as on live, so the band is 354px on short pages and 408px on long ones. */
.ws-photo-band {
  display: flex;
  align-items: stretch;
  background: var(--gray-line);
}

.ws-photo-band__photo {
  flex: 0 0 30%;
  background-size: cover;
  background-repeat: no-repeat;
}

.ws-photo-band__copy {
  flex: 0 0 70%;
  min-width: 0;
  margin: 40px 0;
  padding: 0 10% 0 4%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ws-photo-band__copy h2 { margin: 0; }
.ws-photo-band__copy p { margin: 0 0 14.4px; }

/* White band: heading, lead paragraph, then the centred check list. */
.ws-solutions {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 60px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ws-solutions__intro { display: flex; flex-direction: column; gap: 20px; }
.ws-solutions__intro h2 { margin: 0; }
.ws-solutions__intro p  { margin: 0; }

/* 844px wide and centred inside the 1140 column. */
.ws-checklist {
  list-style: none;
  width: 844px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

.ws-checklist li {
  display: flex;
  align-items: center;      /* live centres the tick against the whole item */
  padding: 0 0 30px;
  color: var(--navy);
}

/* Elementor's "space between items" setting — 21px, first item exempt.
   Missing this cost 84px on a five-item list. */
.ws-checklist li + li { margin-top: 21px; }

/* Green rule between items (Elementor's icon-list "divider"). It sits on the
   item's own bottom edge, so the 30px padding above and the 21px sibling margin
   below are what space it. Last item gets none. */
.ws-checklist li:not(:last-child) { border-bottom: 1px solid var(--green); }

/* Font Awesome's fa-check, inlined as SVG so no icon font is needed. */
.ws-checklist svg {
  flex: 0 0 17.5px;
  width: 17.5px;
  height: 14px;
  margin-right: 14px;
  fill: var(--green);
}

.ws-checklist__text { padding-left: 5px; }

.ws-checklist h3 {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 21.6px;
  font-weight: 700;
  color: var(--navy);
}

/* Blue band: "Success in Action" plus the green curve, then the story. */
.ws-band { background: var(--blue); }

.ws-band__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 35px var(--gutter) 45px;
  display: flex;
  align-items: center;
  gap: 3%;
}

.ws-band__lead {
  flex: 0 0 276px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ws-band__lead h2 { margin: 0; color: var(--white); }
.ws-band__curve { width: 23px; height: 119px; }

.ws-band__copy { flex: 1 1 auto; min-width: 0; }
.ws-band__copy p { margin: 0; color: var(--white); }

/* White band: reasons list on the left, navy call-to-action card right. */
.ws-why {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 60px var(--gutter) 70px;
  display: flex;
  align-items: center;
  gap: 8%;
}

/* A flex column, not a plain block: that stops the first <h3>'s top margin
   collapsing into the heading's, which is what keeps this 8px taller and in
   step with live (Elementor uses flex gaps here, and flex never collapses). */
.ws-why__reasons {
  flex: 0 0 624px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ws-why__reasons h2 { margin: 0; }

/* Live keeps the browser's default disc bullets and black text here. */
.ws-why__reasons ul { margin: 0; padding: 0 0 0 40px; color: #000; }
.ws-why__reasons h3 {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 21.6px;
  font-weight: 700;
  color: #000;
}

/* The card's bottom padding really is zero on live, so the button hangs
   20px below the navy block. Reproduced deliberately — see the notes. */
.ws-cta {
  flex: 0 0 425px;
  min-width: 0;
  align-self: flex-start;
  background: var(--navy);
  padding: 45.6px 45.6px 0 57px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ws-cta__copy { display: flex; flex-direction: column; }

.ws-cta h2 {
  margin: 0;
  font-size: 27px;
  line-height: 36.45px;
  font-weight: 700;
  color: var(--white);
}

.ws-cta p {
  margin: 0;
  font-size: 27px;
  line-height: 36.45px;
  color: var(--white);
}

.ws-cta .btn { align-self: flex-start; margin-bottom: -20px; }

/* ---------- Case study page template --------------------------------- */
/* Five pages share this: a narrow left rail carrying the label and the
   in-page nav, beside a wide content column. Column widths are 19% / 76%
   with a 5% gap, which is how Elementor expresses them on live. */

.cs-hero {
  background-color: var(--gray-line);
  background-image: url("../images/csi_web_dots_tall_r.png");
  background-position: 100% 0%;
  background-repeat: no-repeat;
}

.cs-hero__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 350px;
  display: flex;
  align-items: center;
  gap: 5%;
}

/* "Case Study" and the tall green curve, pushed to the rail's two edges. */
.cs-hero__label {
  flex: 0 0 19%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-hero__label h2 {
  margin: 0;
  font-size: 36px;
  line-height: 43.2px;
  font-weight: 800;
  color: var(--navy);
  /* "Case Study" needs 183px and the 19% rail leaves it 181.6px once the 35px
     curve is accounted for — a 1.4px shortfall that wrapped it onto two lines.
     Live lets this heading take its natural width instead of squeezing it. */
  white-space: nowrap;
}

.cs-hero__curve { width: 35px; height: 194px; }

.cs-hero__title { flex: 0 0 76%; min-width: 0; }

.cs-hero__title h1 {
  margin: 0;
  font-size: 36px;
  line-height: 43.2px;
  font-weight: 400;
  color: var(--navy);
}

.cs-body { margin: 50px 0 60px; }

.cs-body__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: 5%;
}

/* In-page nav. Plain anchors, each underlined by a hairline rule — that is
   what live's "grayline" class amounts to. */
.cs-rail { flex: 0 0 19%; min-width: 0; padding-top: 10px; }

.cs-rail__label { margin: 0 0 14.4px; }

.cs-rail a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-line);
  color: #000;
  font-size: 18px;
  line-height: 23.4px;
}

.cs-rail a:hover { color: var(--blue); text-decoration: none; }

.cs-content {
  flex: 0 0 76%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #000;
}

.cs-content section { display: flex; flex-direction: column; gap: 20px; }
.cs-content h2 { margin: 0; }
.cs-content p  { margin: 0 0 14.4px; }
.cs-content ul,
.cs-content ol { margin: 0; padding: 0 0 0 40px; }
.cs-content li { margin: 0; }

/* "Key Outcomes" is called out as a blue card on every one of the five. */
.cs-highlight {
  background: var(--blue);
  padding: 40px;
  margin: 20px 0;
}

.cs-highlight h2,
.cs-highlight p,
.cs-highlight li { color: var(--white); }
.cs-highlight li { margin-bottom: 10px; }

/* Navy closing band. The button stack is pulled 20px above the band's top
   edge on live, so the first button straddles it — kept as-is. */
.cs-next { background: var(--navy); }

.cs-next__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.cs-next__actions {
  width: 33%;
  margin: -20px 0 80px;
  padding: 0 4%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* ---------- /we-serve/ landing page ---------------------------------- */

.serve-intro__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 60px var(--gutter) 70px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.serve-intro__inner h2 { margin: 0; }
.serve-intro__inner p  { margin: 0; color: #000; }

/* Navy band holding the six-card grid. */
.serve-grid { background: var(--navy); }

.serve-grid__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 55px var(--gutter) 65px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.serve-grid__heading {
  width: 89%;
  margin: 0;
  font-size: 36px;
  line-height: 43.2px;
  font-weight: 600;
  color: var(--white);
}

/* Three cards per row: 29.333% each with a 6% gap sums to exactly 100%. */
.serve-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 6%;
}

.serve-card {
  flex: 0 0 29.333%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--white);
}

/* The icons carry transparent padding, so live nudges them 8px left to line
   the artwork up with the text below. */
.serve-card img { width: 102.72px; height: auto; margin-left: -8px; }

.serve-card h3 {
  margin: 0;
  font-size: 27px;
  line-height: 36.45px;
  font-weight: 400;
  color: var(--white);
}

.serve-card p { margin: 0; color: var(--white); }
.serve-card .btn { align-self: flex-start; }

/* Centred closing statement plus button. */
.serve-close__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 50px var(--gutter);
  display: flex;
  justify-content: center;
}

.serve-close__block {
  width: 69%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: center;
}

.serve-close__block h2 { margin: 0; text-align: center; }
.serve-close__block .btn { align-self: center; }

/* ---------- Homepage -------------------------------------------------- */
/* Homepage headings are 36px/600, not the 27px .section-heading used on the
   interior pages. Colour varies with the band, so it is set per section. */
.home-h2 {
  margin: 0;
  font-size: 36px;
  line-height: 43.2px;
  font-weight: 600;
}

/* Hero: copy on the left, the tall green curve to its right, photo behind. */
.home-hero {
  position: relative;
  min-height: 490px;
  background-image: url("../images/cs_hdr_home4-scaled.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
}

/* The homepage overlay runs the opposite way to the interior heroes: black
   fading OUT from 24%, at 120deg and 86%, so the white heading has a dark
   left side to sit on. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(120deg, #000 24%, rgba(22,38,60,0) 60%);
  opacity: .86;
  pointer-events: none;
}

.home-hero > * { position: relative; z-index: 1; }

.home-hero__copy { width: 40%; display: flex; flex-direction: column; gap: 20px; }

.home-hero__copy h1 {
  margin: 0;
  font-size: 46.8px;
  line-height: 60.84px;
  font-weight: 300;
  color: var(--white);
}

.home-hero__copy h1 b { font-weight: 700; }
.home-hero__copy .btn { align-self: flex-start; }

/* The curve tucks 50px back under the copy column. */
.home-hero__curve { width: 8%; margin: 30px 0 30px -50px; }
.home-hero__curve img { width: 100%; height: auto; }

/* Both of these live in the theme's own custom CSS on the live site, not in
   Elementor's settings:
     @media (min-width:1200px) .home-hero  { padding-left:8% }
     @media (min-width:1500px) .home-curve { width:5% }
   The 5% is what stops the hero ballooning on a wide monitor. The curve is
   sized by WIDTH and its height follows the aspect ratio (204x1144), so an
   8% column at 1855px makes the image 752px tall and drags the hero to 812.
   These must come AFTER the 8% rule above — same specificity, source order
   decides. */
@media (min-width: 1200px) {
  .home-hero { padding-left: 8%; }
}

@media (min-width: 1500px) {
  .home-hero__curve { width: 5%; }
}

/* Full-width bands. Blue carries the dot motif; grey and green do not. */
.home-band__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-band--blue {
  background-color: var(--blue);
  background-image: url("../images/csi_web_dots_tall_r.png");
  background-position: 100% 0%;
  background-repeat: no-repeat;
}

.home-band--blue .home-band__inner { padding: 50px var(--gutter) 40px; }
.home-band--blue .home-h2 { color: var(--white); }
.home-band--blue p { margin: 0 0 14.4px; color: var(--white); }

.home-band--gray { background: var(--gray-line); }
.home-band--gray .home-band__inner { padding: 50px var(--gutter); }
.home-band--gray .home-h2 { color: var(--blue); }
.home-band--gray p { margin: 0 0 14.4px; color: #000; max-width: 912px; }
.home-band--gray .btn { align-self: flex-start; }

/* The one green band on the site. Its column is 1200 wide, not 1140. */
.home-green { background: var(--green); }

.home-green__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 36px var(--gutter);
  text-align: center;
}

/* 6.4px, not 0: live keeps the paragraph's usual 14.4px trailing margin and
   Elementor's own wrapper pulls 8px of it back. */
.home-green__inner p {
  margin: 0 0 6.4px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 300;
  font-style: italic;          /* live italicises this whole sentence */
  color: var(--white);
}

/* Solutions grid: two rows of three navy cards. */
.home-solutions__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 50px var(--gutter) 60px;
  display: flex;
  flex-direction: column;
  row-gap: 50px;
}

.home-solutions__inner > .home-h2 { color: var(--blue); }

/* Live keeps this on the last row too, so the section's bottom gap is
   35 + 60. Don't "tidy" it away with :last-child. */
.sol-row { margin-bottom: 35px; }

.sol-cards { display: flex; gap: 20px 40px; }

/* The blue bottom rule is live's `.solution-border`.
   Live fixes the card height at 473.5px and pins the button, so cards with a
   three-line description simply fill the space up to it rather than growing.
   Reproduced the same way — letting the button flow instead would make three
   of the six cards 27px taller and drag the whole grid with them. The height
   is safe to hard-code because the card is always 353px wide above 1200px;
   below 1024px the mobile rules put everything back into normal flow. */
.sol-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 473.5px;
  background: var(--navy);
  border-bottom: 10px solid var(--blue);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Photo restored: configured in Elementor but not rendering on live, which
   leaves an empty 353x214 navy block at the top of every card. */
.sol-card__photo {
  position: relative;
  flex: 0 0 214px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Each card photo has a full-strength navy gradient over it on live. */
.sol-card__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(22,38,60,0) 30%, #16263C 100%);
}

.sol-card__body {
  padding: 14.125px 35.33px 42.39px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sol-card__body h3 {
  margin: 0;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  color: var(--white);
}

.sol-card__body p { margin: 0; color: var(--white); }

/* Taken out of flow and pinned, matching live: the button sits at the same
   height in every card and overhangs the bottom edge by ~25px. */
.sol-card__cta {
  position: absolute;
  left: 35.33px;
  top: 453px;
}

/* Client logo strip: four of six visible, arrows either side. */
.home-clients__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 50px var(--gutter) 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-clients__inner > .home-h2 { color: var(--blue); }

.logo-strip { position: relative; }

.logo-strip__viewport { width: 90%; margin: 0 auto; overflow: hidden; }

.logo-strip__track {
  display: flex;
  gap: 60px;
  transition: transform .5s ease;
}

/* Four across the 90% viewport: (100% - 3 gaps) / 4. */
.logo-strip__slide {
  flex: 0 0 calc((100% - 180px) / 4);
  height: 80px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.logo-strip__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.logo-strip__nav--prev { left: 10px; }
.logo-strip__nav--next { right: 10px; }

/* Closing row: copy left, lifestyle photo bleeding 30px off the right. */
.home-contact { margin-bottom: 50px; }

.home-contact__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 8%;
}

.home-contact__copy {
  width: 40%;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.home-contact__copy .home-h2 { color: var(--blue); }
.home-contact__copy p { margin: 0; color: #000; }

/* Photo restored: configured in Elementor but not rendering on live. */
.home-contact__photo {
  width: 60%;
  margin-right: -30px;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---------- /glasswing/ ---------------------------------------------- */

.gw-intro__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 50px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gw-intro__inner h2 { margin: 0; }

/* Live gives every <p> a 14.4px bottom margin. Whether a block ends up with
   one therefore depends on whether Elementor wrapped the text at all — see
   the generator note. Don't "tidy" this to 0. */
.gw-intro__inner p  { margin: 0 0 14.4px; color: #000; }

/* Navy "Why Glasswing?" band: the ticked curve beside the heading, then four
   equal columns. 4 x 255 + 3 x 40 gap = the 1140 column exactly. */
.gw-why { background: var(--navy); }

.gw-why__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 50px var(--gutter) 70px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.gw-why__head { display: flex; align-items: center; gap: 20px; }
.gw-why__head img { width: 72px; height: auto; }

.gw-why__head h2 {
  margin: 0;
  font-size: 36px;
  line-height: 43.2px;
  font-weight: 600;
  color: var(--white);
}

.gw-why__cols { display: flex; align-items: flex-start; gap: 40px; }

/* Colour goes on the COLUMN, not on a `p`. Elementor emits single-paragraph
   text with no <p> wrapper and we mirror that, so the body copy here is a bare
   text node — a `.gw-col p` rule matches nothing and the text falls back to the
   body's dark --text against this navy band. */
.gw-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; color: var(--white); }

.gw-col h3 {
  margin: 0;
  font-size: 27px;
  line-height: 36.45px;
  font-weight: 400;
  color: var(--white);
}

.gw-col p { margin: 0; color: var(--white); }

/* Closing row. The 60/40 bases plus an 8% gap overflow by design; flex-shrink
   pulls them back to 629/420, which is exactly what live renders. */
.gw-close__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 45px var(--gutter) 70px;
  display: flex;
  align-items: center;
  gap: 8%;
}

.gw-close__main { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.gw-close__cta  { flex: 1 1 40%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.gw-close__inner h2 { margin: 0; }
.gw-close__inner p  { margin: 0; color: #000; }

/* ---------- /impact/ -------------------------------------------------- */

.imp-intro__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 50px var(--gutter) 20px;
}

.imp-intro__inner p { margin: 0 0 14.4px; color: #000; }

/* Bulleted copy blocks on the left, the case-study list boxed on the right.
   70/30 bases with a 40px gap; flex-shrink lands them on 769/331 like live. */
.imp-main__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 50px var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.imp-main__cols { flex: 1 1 70%; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.imp-block { display: flex; flex-direction: column; gap: 20px; }
.imp-block h2 { margin: 0; }

/* Shared with /glasswing/: wider bullet spacing than the site default. */
.impact-bullets ul { margin: 0; padding: 0 0 0 40px; color: #000; }
.impact-bullets li { margin: 0 0 20px; }
.impact-bullets p  { margin: 0 0 14.4px; color: #000; }

.imp-cases {
  flex: 1 1 30%;
  min-width: 0;
  background-color: var(--gray-line);
  background-image: url("../images/csi_web_dots_tall_r.png");
  background-position: 100% 0%;
  background-repeat: no-repeat;
  padding: 25px 20px 45px 25px;
}

.imp-cases h2 {
  margin: 0;
  font-size: 27px;
  line-height: 36.45px;
  font-weight: 400;
  color: var(--navy);
}

/* Same idea as the case-study rail, but the hairline is white on grey. */
.imp-cases a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--white);
  color: #000;
  font-size: 18px;
  line-height: 23.4px;
}

.imp-cases a:hover { color: var(--blue); text-decoration: none; }

.imp-commit { background: var(--navy); }

.imp-commit__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 35px var(--gutter) 45px;
  min-height: 180px;      /* careers' copy is short enough to need it */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.imp-commit__inner h2 {
  width: 90%;
  margin: 0;
  font-size: 27px;
  line-height: 36.45px;
  font-weight: 400;
  text-align: center;
  color: var(--white);
}

/* Closing row. The section has no left padding, so the photo sits 15px
   further left than the usual column — that is deliberate on live. */
.imp-close { padding: 0 var(--gutter) 0 0; margin-bottom: 70px; }

.imp-close__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  /* Centred against the 428px photo rather than pinned to its top - QC,
     2026-08-25. There is no live reference for this one: the photo is
     configured in Elementor but does not render on live, so we restored it. */
  align-items: center;
  gap: 8%;
}

/* Photo restored: configured in Elementor but not rendering on live. */
.imp-close__photo {
  flex: 1 1 60%;
  min-width: 0;
  min-height: 428px;
  background-size: cover;
  background-repeat: no-repeat;
}

.imp-close__text { flex: 1 1 40%; min-width: 0; padding: 20px 0; }
.imp-close__text h2 { margin: 0; }

/* Live marks these seven items up as a genuine <ul> with native disc bullets:
   margin 0, padding-left 40px, 18/27, which makes the block exactly 189px. Our
   extraction had flattened them into seven <p> tags, which is why QC reported
   "bullets are missing". Measured on live before writing this. */
.plain-bullets {
  list-style: disc outside;
  /* 14.4px below, which live does NOT have - its list and the following
     paragraph both sit at margin 0, so the copy butts straight against the last
     bullet. David asked for the gap on 2026-08-25; 14.4px rather than an
     arbitrary value because that is the bottom margin every paragraph on this
     site uses, including live's own paragraph directly above this list. A
     deliberate one-item divergence, and it makes this band 14.4px taller than
     live. */
  margin: 0 0 14.4px;
  padding: 0 0 0 40px;
  font-size: 18px;
  line-height: 27px;
}
.plain-bullets li { margin: 0; padding: 0; }

/* ---------- /careers/ ------------------------------------------------- */

/* Hero photo is anchored left so the navy card can sit over its right side.
   Its gradient overlay is defined with .hero-band's, further up. */
.car-hero {
  position: relative;
  min-height: 350px;
  background-position: center left;
  background-size: cover;
  background-repeat: no-repeat;
  padding-right: 3%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* above the hero's gradient overlay */
.car-hero > * { position: relative; z-index: 1; }

/* Navy "apply" card. Used twice; its green button overhangs the bottom by
   20px because the card has no bottom padding — same as live. */
.job-card {
  background: var(--navy);
  padding: 40px 40px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.job-card p { margin: 0; color: var(--white); }
.job-card .btn { margin-bottom: -20px; }
.car-hero .job-card { width: 400px; }

.car-benefits__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 60px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.car-benefits__inner > h2 { margin: 0; }

.car-benefits__row {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 8%;
}

.car-benefits__lead { flex: 1 1 50%; min-width: 0; padding: 0 4%; }
.car-benefits__lead p { margin: 0 0 14.4px; color: #000; }

.car-benefits__pack { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.car-benefits__pack > p { margin: 0 0 14.4px; color: #000; }

/* Same inlined tick as the We Serve lists, tighter spacing, and 375px wide
   rather than the full column — both measured on live. */
.car-checklist { list-style: none; width: 375px; max-width: 100%; margin: 0; padding: 0; }
.car-checklist li { display: flex; align-items: center; padding: 0 0 5.5px; }
.car-checklist li + li { margin-top: 5.5px; }
.car-checklist li:last-child { padding-bottom: 0; }

.car-checklist svg {
  flex: 0 0 17.5px;
  width: 17.5px;
  height: 14px;
  fill: var(--green);
}

.car-checklist span { padding-left: 5px; }

/* Quote bands: a silhouette in a narrow column bleeding sideways across the
   panel beside it. The figure is 440px wide in a 215px slot, so a -225px
   margin keeps it from widening the column. z-index keeps it above the
   panel's background — without it the later sibling paints over the image. */
.car-quote {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.car-quote__figure {
  width: 20%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

.car-quote__slot { width: 215px; }
.car-quote__slot img { width: 440px; max-width: none; }

.car-quote__panel {
  width: 80%;
  padding: 35px 30px 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Two nested widths, and they matter: a 786px block inside the panel, with
   561px paragraphs pushed to one end of it. That is what keeps the copy
   clear of the silhouette bleeding in from the side. */
.car-quote__text { width: 786px; max-width: 100%; display: flex; flex-direction: column; }
.car-quote__text p { width: 561px; max-width: 100%; margin: 0 0 14.4px; }

/* Left variant: figure bleeds right, grey panel, copy pushed right. */
.car-quote--left .car-quote__slot { align-self: flex-end; }
.car-quote--left .car-quote__slot img { margin-right: -225px; }
.car-quote--left .car-quote__panel {
  background: var(--gray-line);
  align-items: flex-start;
  min-height: 280px;      /* live sets this on the grey panel only */
}
.car-quote--left .car-quote__text { align-items: flex-end; }
.car-quote--left .car-quote__text p { color: var(--navy); }

/* Right variant: blue panel with copy left, figure bleeding left over it. */
.car-quote--right { margin-top: -50px; }
.car-quote--right .car-quote__slot { align-self: flex-start; }
.car-quote--right .car-quote__slot img { margin-left: -225px; }
.car-quote--right .car-quote__panel { background: var(--blue); align-items: flex-end; }
.car-quote--right .car-quote__text { align-items: flex-start; }
.car-quote--right .car-quote__text p { color: var(--white); }

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

.car-values__heading h2 { margin: 0; }

.car-values__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2%;
}

.car-values__list { flex: 1 1 70%; min-width: 0; margin-top: 20px; display: flex; align-items: center; }
.car-values__curve { width: 14%; }
.car-values__curve img { width: 100%; height: auto; }

.car-values__rows { width: 86%; display: flex; flex-direction: column; gap: 2px; }

/* The 4% indent applies to EVERY row, including the first.

   Live indents every row BUT the first, which leaves the "I" row - initial and
   body text alike - sitting 4% to the left of C, A, R and E. We reproduced that
   faithfully, then QC flagged it: "The 'I' in iCARE and its text seems to be 1-2
   characters to the left of the rest. This is also true on the live site. I don't
   think we meant to do that, so let's try to align it." Confirmed as a live
   defect to correct rather than copy - David, 2026-08-25.

   The initials were never the problem: .icare-row__initial is a uniform 16%
   centred column, so all five letters were already aligned to each other. */
.icare-row { display: flex; align-items: center; gap: 10px; padding: 0 4%; }

.icare-row__initial {
  width: 16%;
  margin: 0;
  font-size: 100px;
  line-height: 120px;
  font-weight: 400;
  text-align: center;
  color: var(--navy);
}

.icare-row__body { flex: 1 1 auto; min-width: 0; color: var(--blue); }
.icare-row__body p { margin: 0; color: var(--blue); }

.icare-heading {
  margin: 0 0 6.4px !important;
  font-size: 30px;
  line-height: 27px;
  font-weight: 600;
  color: var(--blue);
}

.car-values__inner .job-card { flex: 1 1 30%; min-width: 0; align-self: center; }

/* ---------- /contact/ and /thank-you/ shared layout ------------------ */
/* Both pages put the same navy contact card on the left; only the right
   column differs (the form on one, the confirmation on the other). */

.contact-row__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

/* 32% + 60% leaves slack, and space-between opens it up to ~91px. */
.contact-card {
  width: 32%;
  background: var(--navy);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-card p { margin: 0 0 14.4px; color: var(--white); }
.contact-card a { color: var(--green); }
.contact-card a:hover { text-decoration: underline; }

/* Font Awesome's linkedin-in on a rounded blue tile, inlined as SVG.
   It is a direct flex child of the card on purpose: inside a <p> the
   inline-flex box sits on a text baseline and the card grows 2px. */
.contact-social {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--blue);
  border-radius: 10%;
}

.contact-social svg { width: 20px; height: 20px; fill: var(--white); }
.contact-social:hover { background: #35598f; }

.contact-body {
  width: 60%;
  padding: 40px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-body h2 { margin: 0; }
.contact-body p  { margin: 0 0 14.4px; color: #000; }

/* Contact form. Plain HTML replacing Fluent Forms; the field names are kept
   the same as live so the Azure Function receives what the old handler did. */
.contact-form__row { display: flex; gap: 15px; }
.contact-form__group { margin: 0 0 20px; }
.contact-form__row .contact-form__group { flex: 1 1 0; min-width: 0; }

.contact-form label {
  display: inline-block;
  margin: 0 0 7px;
  font-size: 18px;
  line-height: 27px;
  color: #000;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  height: 42px;
  padding: 10px;
  border: 1px solid #DADBDD;
  border-radius: 0;
  background: var(--white);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}

.contact-form textarea { height: 90px; resize: vertical; }

.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; }

.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 20px;
  min-height: 44px;
  font-size: 18px;
  line-height: 22px;
  color: var(--text);
}

/* 22px, so the two-line consent text occupies live's 44px. */
.contact-form__consent label { margin: 0; font-size: 18px; line-height: 22px; }
.contact-form__consent input { margin: 4px 0 0; }

/* Live's submit is 48px tall: 16px text on a 24px line plus 12px padding.
   The 20px below it is the form-group margin live puts on every row. */
.contact-form .btn {
  font-size: 16px;
  line-height: 24px;
  padding: 12px 30px;
  margin-bottom: 20px;
  letter-spacing: .48px;
}

/* Spam trap. Never shown, never focusable; a filled value means a bot. */
/* Honeypot wrapper. MUST be display:none, not an off-screen position.
   Off-screen fields are still "real" to password managers, which fill them —
   and a filled honeypot makes us discard a genuine message silently. Managers
   skip display:none inputs, while spam bots parsing the HTML still find it. */
.contact-form__trap { display: none; }

.contact-form__status { margin: 0 0 20px; font-weight: 500; }
.contact-form__status[hidden] { display: none; }

/* Orange, per QC 2026-08-25: the page jumps to this message, and they wanted it
   to read as the reason. #FF7B09 is the exact orange live uses for its required
   asterisks (measured on live's own form), which is what David asked for.

   Note it is 2.9:1 on white, under the 4.5:1 WCAG minimum for body text, so the
   error is deliberately NOT signalled by colour alone: the message is bolded,
   the offending field gets an orange border, and each field carries its own
   role="alert" message. Colour is the last of four cues, not the only one. */
/* Scoped under .contact-form deliberately. `.contact-body p { color: #000 }`
   further up is (0,1,1) and would beat a bare (0,1,0) class selector no
   matter what order they appear in - the font-weight landed but the colour
   silently lost. Do not "simplify" this back to one class. */
.contact-form .contact-form__status--error { color: var(--orange); font-weight: 600; }

/* The asterisk on a required field's label. Live paints this #FF7B09 via
   label::after on Email and Message; ours is applied by contact.js to the label
   of every field carrying `required`, so the markup stays the single source of
   truth - add or remove `required` and the marker follows. */
.contact-form label.is-required::after {
  content: " *";
  color: var(--orange);
  font-weight: 600;
}

/* Per-field message. Hidden until the field actually fails. */
.contact-form .contact-form__error {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: var(--orange);
}
.contact-form .contact-form__error[hidden] { display: none; }

/* The field itself also turns orange, so the failure is not colour-of-text
   alone and is visible to someone who never reads the message. */
/* input/textarea named explicitly to match the specificity of the base rule
   above (.contact-form input[type="email"] is 0,2,1 - the element component beat
   a bare 0,2,0 attribute selector). Equal specificity, declared later, so this
   wins on order. Second time the same trap bit in this file. */
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] { border-color: var(--orange); }

/* reCAPTCHA v3: Google's floating badge is left VISIBLE bottom-right, which is
   David's call (2026-08-13) and the default behaviour. Because the badge shows,
   the page does NOT need the "protected by reCAPTCHA" attribution line —
   Google only requires that text if you hide the badge. If it ever gets hidden,
   the attribution must be added back at the same time. */

/* ---------- /team/ ---------------------------------------------------- */
/* Replaces the TeamPress plugin: a four-column card grid with a category
   select, a text search and a click-to-open lightbox — all client-side.
   The hover-swap second photo is deliberately dropped (14 of the 25 are
   missing from the server, so it is broken on live too). */

.team-page__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.team-page__inner > h1 { margin: 0; font-size: 36px; line-height: 43.2px; font-weight: 600; color: var(--blue); }

/* 1150px of grid inside the 1140 column, so the 5px cell padding reads as a
   10px gutter and the outer cards still line up with the column edges. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  margin: 0 -5px;
}

.team-cell { padding: 5px; }
.team-cell[hidden] { display: none; }

.team-card {
  margin: 0;
  background: var(--white);
  padding: 15px;
  text-align: center;
}

/* 1px #ddd border — live's .tpstyle-10-image. It is why the photo box is
   247.5px while the image inside is 245.5px. */
.team-card__photo { display: block; overflow: hidden; border: 1px solid #ddd; }
.team-card__photo img { width: 100%; height: auto; }

.team-card figcaption { padding: 20px 15px 26px; }

/* Live styles the name blue and bold — 20px/24px, weight 700, #406BAB. Measured
   on the <a> that used to wrap it, not the <h3>: the h3 itself computes to the
   body's dark colour, which is what an earlier pass read and copied. Now that
   the name is plain text (the lightbox trigger is gone) the h3 carries it. */
.team-card h3 { margin: 0 0 5px; font-size: 20px; line-height: 24px; font-weight: 700; color: var(--blue); }
.team-card h5 { margin: 0; font-size: 14px; line-height: 16.8px; font-weight: 700; color: var(--muted); }


/* Buttons ------------------------------------------------------------- */
/* EVERY button on live is this one: green, 17px/22.1 weight 500, uppercase,
   .51px letter-spacing, 12px 30px padding. There is no blue variant — an
   earlier pass had the base button blue at 14px 26px, which was wrong on the
   /about/ callout and the Solutions "Partner with us". `.btn--green` is kept
   as a no-op alias so the existing markup does not all have to change. */
.btn {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  font-size: 17px;
  font-weight: 500;
  line-height: 22.1px;
  letter-spacing: .51px;
  padding: 12px 30px;
  border: 0;
  text-align: center;
}

/* Live turns buttons ORANGE on hover, not a darker green — David, 2026-08-12.
   One rule covers every button on the site: all the .btn variants elsewhere only
   adjust layout (margin/alignment), none of them restyle the background. The
   arrow SVG uses fill:currentColor, so it follows the white text automatically. */
.btn:hover,
.btn:focus-visible { background: var(--orange); color: var(--white); text-decoration: none; }

.btn--caps { text-transform: uppercase; }
.btn--green { /* alias — the base button is already green */ }

/* "Explore Glasswing" on the homepage is the ONLY filled button live paints
   blue - every other one (Get Started, Learn More x6, Contact Us) is green.
   Verified across live's homepage before adding this, because applying blue
   globally would have wrecked eight buttons. Hover stays orange like the
   rest, which is what QC meant by "at rest should be blue". */
.btn--blue { background: var(--blue); }

/* Buttons that carry a trailing arrow. Live uses Font Awesome's fa-arrow-right
   at 17px; this is the same glyph inlined as SVG so no icon font is loaded,
   matching how the checklist ticks and the LinkedIn mark are done. Flex rather
   than inline-block so the arrow centres against the text instead of sitting on
   its baseline. */
.btn--arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn--arrow svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ---------- Brand dot motif ------------------------------------------
   The dotted texture is part of CSI's branding, so it belongs everywhere the
   live site shows it (David, 2026-08-12). Two mirrored variants: *_tall_r sits
   top-right, *_tall_l2 top-left.

   Deliberately grouped here, at the end, rather than folded into each section's
   own rule. Two reasons: the whole set is visible in one place, and every one of
   these sections sets `background:` as a SHORTHAND earlier in the file — a
   shorthand resets background-image, so declaring the image before it would
   silently wipe it. Longhand after shorthand keeps both the colour and the image.

   Not additional motifs: csi_web_dots_l.png and CSI_web_dots_r.png are just
   Elementor's responsive variants of these same two, which is why they sit in
   _unused/ for this desktop-focused build. */

.statement-band,          /* /about/ — "Inspiring potential" and "Our Purpose" */
.ws-band,                 /* We Serve x6 — "Success in Action" blue band       */
.svc-band,                /* Solutions x6 — the blue statement band            */
.imp-commit,              /* /impact/ and /careers/ — the commitment band      */
.car-quote--right .car-quote__panel,  /* /careers/ — the blue PANEL, not the row */
.cs-next {                /* case studies x5 — the navy closing band          */
  background-image: url("../images/csi_web_dots_tall_l2.png");
  background-position: top left;
  background-repeat: no-repeat;
}

.home-band--gray {        /* homepage — "The Power Behind our Solutions"       */
  background-image: url("../images/csi_web_dots_tall_r.png");
  background-position: 100% 0%;
  background-repeat: no-repeat;
}

/* ---------- Mobile --------------------------------------------------- */

@media (max-width: 1024px) {
  /* Header collapses to logo + Menu button; the utility row tucks in beside
     it. The panel is always white with navy links, under both variants. */
  /* Wrap rather than overflow. A fixed 180px logo + 24px gap + the 173px
     utility/burger group needs ~377px, but a 360px phone only offers ~320px
     inside the gutters, so every page scrolled sideways by 47px.

     Live solves this by stacking the whole header into a 253px-tall centred
     column. That is a lot of a phone screen to spend on chrome, and our compact
     single row is a deliberate choice, so this wraps only when it has to: one
     row where it fits, two centred rows where it does not. */
  .site-header__inner {
    padding: 14px var(--gutter);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .site-header__right { min-height: 0; padding: 0; flex-direction: row; align-items: center; gap: 18px; }
  .site-logo img { width: 180px; }

  .nav-toggle { display: block; }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-line);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    z-index: 300;
  }

  .nav.is-open { display: block; }

  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }

  .nav > ul > li > a,
  .site-header--home .nav > ul > li > a,
  .site-header--interior .nav > ul > li > a {
    display: block;
    padding: 14px 20px;
    border-bottom: 1px solid var(--gray-line);
    color: var(--navy);
  }

  /* No caret once the sub-lists are expanded inline. */
  .nav__has-sub > a::after { display: none; }

  /* nested lists render inline on mobile rather than as hover flyouts */
  .nav li > ul {
    position: static;
    display: block;
    width: auto;
    margin: 0;
    box-shadow: none;
    background: #F7F9FB;
  }

  .nav li > ul::before { display: none; }
  .nav li > ul > li { border-bottom: 0; }

  .nav li > ul a { padding-left: 38px; }
}

@media (max-width: 1024px) {
  /* The next-solution button's overhang only makes sense while the card is
     inset from the viewport; once things stack it would hang off-screen. */
  .svc-next__card .btn { margin-right: 0; }

  /* Footer: the single-row menu only fits on a full-width desktop column, so
     below this let it wrap again rather than overflow. */
  .site-footer__inner { flex-wrap: wrap; gap: 32px; }
  .site-footer__nav ul { flex-wrap: wrap; justify-content: flex-start; gap: 12px 26px; }

  /* service template: drop the card overhang, stack everything */
  .svc-intro__inner { flex-direction: column; gap: 0; min-height: 0; }
  .svc-intro__card { flex: 1 1 auto; width: 100%; margin-bottom: 0; padding: 32px 28px; }
  .svc-intro__card h1 { font-size: 28px; }
  .svc-intro__lead { padding: 28px 0; }
  .svc-feature { padding: 44px 20px; }
  .svc-band__inner { flex-direction: column; gap: 24px; padding: 40px 20px; }
  .svc-band__lead, .svc-band__copy { flex: 1 1 auto; width: 100%; }
  .svc-band__lead h2 { font-size: 23px; }
  .svc-detail { padding: 40px 0; }
  .svc-next__card { padding: 28px; }
  .svc-next__card h2 { flex: 1 1 auto; font-size: 22px; }

  /* /team/: two columns, then one on small phones */
  .team-grid { grid-template-columns: repeat(2, 1fr); }

  /* Homepage: hero stacks, cards go one-up, logo strip shows two */
  .home-hero { flex-direction: column; align-items: stretch; padding: 40px var(--gutter); }
  .home-hero::before { background-image: linear-gradient(160deg, #000 33%, rgba(22,38,60,0) 72%); }
  .home-hero__copy { width: 100%; }
  .home-hero__copy h1 { font-size: 32px; line-height: 1.25; }
  .home-hero__curve { display: none; }

  .home-band--blue .home-band__inner,
  .home-band--gray .home-band__inner { padding: 40px var(--gutter); }
  .home-h2 { font-size: 26px; line-height: 1.2; }
  .home-green__inner p { font-size: 22px; line-height: 1.35; }

  .home-solutions__inner { padding: 40px var(--gutter); row-gap: 32px; }
  .sol-cards { flex-direction: column; gap: 28px; }
  /* back to normal flow once stacked: fixed heights and a pinned button
     would collide with the next card */
  .sol-card { flex: 1 1 auto; height: auto; padding-bottom: 28px; }
  .sol-card__photo { flex: 0 0 auto; min-height: 200px; }
  .sol-card__cta { position: static; padding-left: 35.33px; }

  .logo-strip__viewport { width: 100%; }
  .logo-strip__slide { flex: 0 0 calc((100% - 60px) / 2); }
  .logo-strip__nav { display: none; }

  .home-contact__inner { flex-direction: column; gap: 0; padding: 0; }
  .home-contact__copy { width: 100%; padding: 40px var(--gutter); }
  .home-contact__photo { width: 100%; margin-right: 0; min-height: 260px; }

  /* /careers/: stack everything; the silhouettes stop bleeding */
  .car-hero { padding: 24px var(--gutter); justify-content: center; }
  .car-hero .job-card { width: 100%; max-width: 420px; padding: 28px 28px 0; }
  .car-benefits__inner { padding: 40px var(--gutter) 0; }
  .car-benefits__row { flex-direction: column; gap: 28px; }
  .car-benefits__lead, .car-benefits__pack { flex: 1 1 auto; }
  .car-benefits__lead { padding: 0; }

  .car-quote, .car-quote--right { flex-direction: column; align-items: stretch; margin-top: 0; }
  .car-quote__figure, .car-quote__panel { width: 100%; }
  .car-quote__figure { align-items: center; }
  .car-quote__slot { width: auto; }
  .car-quote--left .car-quote__slot, .car-quote--right .car-quote__slot { align-self: center; }
  .car-quote__slot img { width: 100%; max-width: 320px; }
  .car-quote--left .car-quote__slot img,
  .car-quote--right .car-quote__slot img { margin: 0; }
  .car-quote__panel { padding: 28px var(--gutter); align-items: stretch !important; }

  .car-values__heading { padding: 40px var(--gutter) 0; }
  .car-values__inner { flex-direction: column; align-items: stretch; gap: 32px; padding: 16px var(--gutter) 0; }
  .car-values__list { flex: 1 1 auto; }
  .car-values__curve { display: none; }
  .car-values__rows { width: 100%; gap: 20px; }
  .icare-row { padding: 0; }        /* no indent once stacked */
  /* flex: 0 0 72px, not width: 72px. A flex item defaults to flex-shrink: 1, so
     at 360px the five initials were shrinking to their own glyph widths - 39, 51,
     44, 42, 39 - which pushed each body text to a different x and reproduced the
     very misalignment QC asked us to fix, only worse. Fixing the desktop indent
     alone would have left this. */
  .icare-row__initial { flex: 0 0 72px; font-size: 60px; line-height: 72px; }
  .car-values__inner .job-card { flex: 1 1 auto; padding: 28px 28px 0; }

  /* /contact/ + /thank-you/: card above the body */
  .contact-row__inner { flex-direction: column; gap: 28px; padding: 0 var(--gutter) 32px; }
  .contact-card, .contact-body { width: 100%; }
  .contact-card { padding: 28px; }
  .contact-body { padding: 8px 0 0; }
  .contact-form__row { flex-direction: column; gap: 0; }

  /* /impact/: stack the copy and the case-study box, then the closing row */
  .imp-intro__inner { padding: 40px var(--gutter) 16px; }
  .imp-main__inner { flex-direction: column; align-items: stretch; gap: 32px; padding: 40px var(--gutter); }
  .imp-main__cols, .imp-cases { flex: 1 1 auto; }
  .imp-commit__inner { padding: 32px var(--gutter); }
  .imp-commit__inner h2 { width: 100%; font-size: 22px; line-height: 1.35; }
  .imp-close { padding: 0; margin-bottom: 40px; }
  .imp-close__inner { flex-direction: column; gap: 0; }
  .imp-close__photo { flex: 1 1 auto; min-height: 260px; background-position: center center !important; }
  .imp-close__text { flex: 1 1 auto; padding: 28px var(--gutter); }

  /* /glasswing/: stack the four columns and the closing row */
  .gw-intro__inner { padding: 40px var(--gutter); }
  .gw-why__inner { padding: 40px var(--gutter); gap: 32px; }
  .gw-why__head h2 { font-size: 26px; line-height: 1.2; }
  .gw-why__cols { flex-direction: column; gap: 32px; }
  .gw-close__inner { flex-direction: column; align-items: stretch; gap: 32px; padding: 40px var(--gutter); }
  .gw-close__main, .gw-close__cta { flex: 1 1 auto; }

  /* /we-serve/: cards stack one per row */
  .serve-intro__inner { padding: 40px var(--gutter); }
  .serve-grid__inner { padding: 40px var(--gutter); gap: 32px; }
  .serve-grid__heading { width: 100%; font-size: 26px; line-height: 1.2; }
  .serve-row { flex-direction: column; gap: 36px; }
  .serve-card { flex: 1 1 auto; width: 100%; }
  .serve-close__inner { padding: 40px var(--gutter); }
  .serve-close__block { width: 100%; gap: 28px; }

  /* case study template: rail above the content, full width */
  .cs-hero__inner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px var(--gutter); min-height: 0; }
  .cs-hero__label, .cs-hero__title, .cs-rail, .cs-content { flex: 1 1 auto; width: 100%; }
  .cs-hero__label { justify-content: flex-start; gap: 24px; }
  .cs-hero__label h2, .cs-hero__title h1 { font-size: 28px; line-height: 1.2; }
  .cs-hero__curve { height: 120px; }
  .cs-body { margin: 32px 0 40px; }
  .cs-body__inner { flex-direction: column; gap: 32px; }
  .cs-highlight { padding: 28px; }
  .cs-next__actions { width: 100%; padding: 0; margin: -20px 0 40px; }

  /* we serve template: stack the split bands, drop the button overhang */
  .ws-hero__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px var(--gutter); }
  .ws-hero h1 { font-size: 28px; line-height: 1.2; }
  .ws-hero__icon { flex: 0 0 auto; }

  .ws-photo-band { flex-direction: column; }
  .ws-photo-band__photo { flex: 1 1 auto; min-height: 240px; background-position: center center !important; }
  .ws-photo-band__copy { flex: 1 1 auto; margin: 0; padding: 32px var(--gutter); }

  .ws-solutions { padding: 44px var(--gutter); gap: 28px; }
  .ws-checklist li { align-items: flex-start; }
  .ws-checklist svg { margin-top: 12px; }

  .ws-band__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px var(--gutter); }
  .ws-band__lead { flex: 1 1 auto; width: 100%; gap: 30px; justify-content: flex-start; }

  .ws-why { flex-direction: column; align-items: stretch; gap: 32px; padding: 44px var(--gutter); }
  .ws-why__reasons, .ws-cta { flex: 1 1 auto; }
  .ws-cta { padding: 32px 28px; }
  .ws-cta h2, .ws-cta p { font-size: 22px; line-height: 1.35; }

  /* stack content rows; photo columns keep a sensible height once stacked */
  .two-col { flex-direction: column; gap: 28px; padding: 40px 0; }
  .two-col__text, .photo-col, .callout { flex: 1 1 auto; width: 100%; }
  .photo-col { min-height: 250px; background-position: center center !important; }
  .hero-band { min-height: 240px; }
  .title-bar h1 { font-size: 28px; }
  .statement-band p, .statement-band h2 { font-size: 22px; }
  .section-heading { font-size: 23px; }
}

@media (max-width: 640px) {
  .team-grid { grid-template-columns: 1fr; }
  .site-footer__inner { flex-direction: column; gap: 24px; }
  .title-bar { min-height: 76px; }
  .title-bar h1 { font-size: 24px; }
}