/* ceecoequipment.com - rebuilt front end.
   Every colour, size and word here comes from the CMS's own publicstyle.css or
   its page markup; the layout is new, the design is not.

   Palette as the CMS set it:
     header / h2 / buttons   #024685   links #024686   footer rule #034786
     body ink #555555 on #ffffff       subfooter band #ededed
   The CMS's three HOVER colours (#00CCCC, #3399FF, #0099FF) are 2.3-3.0:1 on
   white - below AA - so hover is expressed as an underline and a darker blue
   instead. See NOTES.md.                                                     */

:root {
  --brand: #024685;
  --brand-link: #024686;
  --brand-hover: #012f5c;
  --ink: #555555;
  --ink-strong: #2b2b2b;
  --paper: #ffffff;
  --band: #ededed;
  --rule: #cdcdcd;

  --shell: 1200px;
  --read: 74ch;
  --gutter: 24px;

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;

  --head-real: 156px;          /* JS overwrites this from the real rect */
  --tile-gap: 20px;
}

/* ---------------------------------------------------------------- fonts   */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/assets/fonts/montserrat-400.woff") format("woff");
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/assets/fonts/montserrat-600.woff") format("woff");
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/assets/fonts/montserrat-700.woff") format("woff");
}

/* ---------------------------------------------------------------- base    */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  overflow-x: hidden;
  /* An e-mail address is one unbreakable 27-character token. In a narrow
     column it runs straight out of its grid track and under the photograph
     beside it - and a rect walk does NOT see that, because the <p>'s own box
     stays inside the track. Only opening the page finds it. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.2; font-weight: 400; }
h1 { font-family: var(--display); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.25rem); color: #fff; }
h2 { font-family: var(--display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.625rem); color: var(--brand); margin-top: 1.25em; }
h3 { font-size: 1.0625rem; color: var(--brand-link); margin-bottom: .3em; }

p { margin: 0 0 1em; }
img, picture, svg, iframe { max-width: 100%; }
/* <picture> is display:inline by default, so it does not fill a grid or flex
   item and it carries a baseline gap under every image. */
picture { display: block; }
img { height: auto; }

a { color: var(--brand-link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--brand-hover); text-decoration: underline; }

:focus-visible { outline: 3px solid #f6a800; outline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

.ce-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--brand); color: #fff; padding: .75rem 1.25rem;
}
.ce-skip:focus { left: 0; }

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

.ce-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- header  */
.ce-head { position: sticky; top: 0; z-index: 1200; background: var(--brand); }

.ce-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 100px;
}
.ce-logo { display: inline-flex; }
.ce-logo img { display: block; width: 330px; height: 69px; max-width: min(330px, 58vw); }

/* `a { color: ... }` targets the element directly, so it beats a colour
   INHERITED from .ce-social - set it on the anchor or the header icon comes
   out brand-blue on the brand-blue bar, i.e. invisible. */
.ce-head .ce-social a { color: #fff; --knock: #024685; }
.ce-foot .ce-social a { color: var(--brand-link); --knock: #fff; }
.ce-social { display: inline-flex; align-items: center; gap: 12px; }
.ce-social a { display: inline-flex; border-radius: 50%; }
.ce-social svg, .ce-social img { width: 35px; height: 35px; display: block; }
.ce-social a:hover svg { opacity: .82; }

/* the nav band --------------------------------------------------------- */
.ce-navbar { background: #fff; border-bottom: 1px solid var(--rule); }
.ce-nav > ul {
  display: flex; align-items: stretch; flex-wrap: nowrap;
  list-style: none; margin: 0; padding: 0;
}
.ce-nav > ul > li { position: relative; }
.ce-nav a, .ce-nav .ce-top {
  display: flex; align-items: center; gap: .4em;
  font: 400 15px/1 var(--sans); letter-spacing: .04em;
  color: var(--brand); text-transform: uppercase;
  padding: 20px 14px; white-space: nowrap; background: none; border: 0;
}
.ce-nav > ul > li > a:hover, .ce-nav > ul > li > .ce-top:hover,
.ce-nav > ul > li > a:focus-visible, .ce-nav > ul > li > .ce-top:focus-visible {
  background: var(--band); color: var(--brand-hover); text-decoration: none;
}
.ce-nav [aria-current="page"] { box-shadow: inset 0 -4px 0 var(--brand); font-weight: 600; }
.ce-top { cursor: pointer; font-family: var(--sans); }
.ce-caret { width: .6em; height: .6em; flex: none; transition: transform .18s ease; }
.ce-top[aria-expanded="true"] .ce-caret { transform: rotate(180deg); }

.ce-sub {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 280px; max-width: min(360px, 92vw);
  margin: 0; padding: 6px 0; list-style: none; background: #fff;
  border: 1px solid var(--rule); box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  z-index: 20;
}
/* :hover and :focus-within give the panel a complete keyboard path with no
   script at all - the toggle button is focusable while the panel is display:none,
   and its links then hold it open. The JS click handling is an enhancement.  */
.ce-nav > ul > li:hover > .ce-sub,
.ce-nav > ul > li:focus-within > .ce-sub,
.ce-nav > ul > li > .ce-top[aria-expanded="true"] + .ce-sub { display: block; }
/* the last two panels open leftward, or a 300px dropdown hung off an item
   near the right edge pushes the page wide at the narrow end of the bar tier */
.ce-nav > ul > li:nth-last-child(-n+2) > .ce-sub { left: auto; right: 0; }
.ce-nav-drawer .ce-sub { left: 0 !important; right: auto !important; }
.ce-sub a {
  padding: 11px 18px; text-transform: none; letter-spacing: 0;
  font-size: 15px; white-space: normal; color: var(--brand-link);
}
.ce-sub a:hover, .ce-sub a:focus-visible { background: var(--band); text-decoration: underline; }

.ce-burger {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  background: transparent; border: 1px solid rgba(255, 255, 255, .55);
  color: #fff; cursor: pointer;
}
.ce-burger:hover { background: rgba(255, 255, 255, .12); }
.ce-burger svg { width: 24px; height: 24px; }
.ce-backdrop { display: none; }

/* ---------------------------------------------------------------- hero    */
.ce-hero { position: relative; background: #0b1b2a; isolation: isolate; }
.ce-hero picture, .ce-hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; z-index: -2;
}
.ce-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .22) 100%);
}
.ce-hero-inner { min-height: 200px; display: flex; align-items: center; }
.ce-hero-inner h1 { margin: 0; padding: 2.25rem 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }

.ce-hero-home .ce-shell { padding-block: clamp(3rem, 8vw, 7.5rem); }
.ce-hero-panel { max-width: 33rem; background: rgba(0, 0, 0, .7); padding: clamp(1.5rem, 3vw, 2.5rem); }
.ce-hero-panel h1 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.25rem); line-height: 1.05; margin-bottom: 1rem; }
.ce-hero-panel p { color: #fff; margin-bottom: 1.5rem; }
.ce-hero-home::after { background: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .1) 60%); }

/* a plain heading band for the two pages the CMS gave no slideshow */
.ce-pagehead { background: var(--band); border-bottom: 1px solid var(--rule); }
.ce-pagehead .ce-shell { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.ce-pagehead h1 { color: var(--brand); margin: 0; }

/* ---------------------------------------------------------------- buttons */
.ce-btn {
  display: inline-block; font: 400 17px/1.2 var(--sans);
  padding: 15px 36px; text-align: center; cursor: pointer;
  background: var(--brand-link); color: #fff; border: 2px solid var(--brand-link);
}
.ce-btn:hover, .ce-btn:focus-visible { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; text-decoration: underline; }
.ce-btn-ghost { background: transparent; border-color: #fff; color: #fff; }
.ce-btn-ghost:hover, .ce-btn-ghost:focus-visible { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.ce-btn-sm { padding: 10px 20px; font-size: 15px; }

/* ---------------------------------------------------------------- main    */
.ce-main { display: block; }
.ce-section { padding-block: clamp(2rem, 4vw, 3rem); }
.ce-prose { max-width: var(--read); }
.ce-prose ul { padding-left: 1.25em; }
.ce-prose li { margin-bottom: .25em; }

.ce-split { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr) 325px; align-items: start; }
.ce-aside { background: var(--brand); color: #fff; text-align: center; padding: 20px; }
.ce-aside b { display: block; font-size: 24px; font-family: var(--display); margin-bottom: 10px; font-weight: 400; }

/* ------------------------------------------------------- home: the reel   */
.ce-reel { background: var(--paper); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.ce-reel { --reel-gap: 12px; }
.ce-reel-mask { overflow: hidden; }
.ce-track { display: flex; gap: var(--reel-gap); width: max-content;
            animation: ce-marquee 90s linear infinite; }
.ce-reel:hover .ce-track, .ce-reel:focus-within .ce-track { animation-play-state: paused; }
.ce-track figure { margin: 0; width: 300px; flex: none; }
.ce-track img { display: block; width: 300px; height: 400px; object-fit: cover; }
/* The track holds the fifteen tiles twice. One cycle is 15 x (tile + gap), but
   -50% of the track is 15 tiles + 14.5 gaps - half a gap short, so the loop
   jumps 6px every time round. Take the half-gap off explicitly. */
@keyframes ce-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--reel-gap) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
  .ce-reel-mask { overflow: visible; }
  .ce-track { animation: none; width: auto; max-width: 100%;
              overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .ce-track figure { scroll-snap-align: start; }
  .ce-track [aria-hidden="true"] { display: none; }
}
.ce-reel-pause { margin-top: 14px; }

/* ------------------------------------------------------- home: state grid */
.ce-tiles { background: var(--band); }
.ce-tiles ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tile-gap);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ce-tiles li { display: grid; }
/* labels run to one, two or three lines, so align them to their own baseline
   and let the images all start on the same row - otherwise a two-line caption
   pushes its tile 22px below its neighbours and the grid reads as ragged. */
.ce-tiles a { display: grid; grid-template-rows: 1fr auto; align-content: end;
              color: var(--brand); text-align: center; }
.ce-tiles a > span { align-self: end; }
/* the source tiles are 235px wide and there is no larger original, so cap
   them there rather than upscaling a soft image across a one-column phone */
.ce-tiles img { display: block; width: 100%; max-width: 235px; margin: 10px auto 0;
                aspect-ratio: 235 / 300; object-fit: cover; transition: transform .4s ease; }
.ce-tiles a:hover img, .ce-tiles a:focus-visible img { transform: scale(1.05); }
.ce-tiles span { display: block; font-family: var(--display); font-size: clamp(.9rem, .75rem + .4vw, 1.125rem); line-height: 1.25; }

/* --------------------------------------------------- home: mission band   */
.ce-mission { position: relative; color: #fff; background: #0d2136; }
.ce-mission > picture, .ce-mission > picture img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.ce-mission .ce-shell { position: relative; z-index: 2; padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.ce-mission::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(4, 24, 43, .72); }
.ce-mission h2 { color: #fff; margin-top: 0; }
.ce-mission-cols { display: grid; gap: clamp(1.5rem, 5vw, 4rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-mission a { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- CTA band */
.ce-cta { background: var(--brand); color: #fff; }
.ce-cta .ce-shell { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 30px; }
.ce-cta h2 { color: #fff; margin: 0; }

/* --------------------------------------------------------- lines / cards  */
.ce-leader { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
              grid-template-columns: 235px minmax(0, 1fr) 380px; align-items: center; }
.ce-leader .ce-portrait img { width: 235px; height: 300px; object-fit: cover; }
.ce-leader-meta p { margin: 0; }
.ce-leader-meta .ce-who { font-family: var(--display); font-size: 1.125rem; color: #034786; line-height: 1.3; margin-bottom: .5rem; }
/* A minmax(0,380px) track next to a 1fr collapses to ZERO once the <picture>
   is display:block - the same trap as "width:100% inside an auto track". Give
   the track a definite width and the image width:100%; and never pair a
   max-height with width:100%, which squashes the map rather than bounding it. */
.ce-statemap { width: 380px; max-width: 100%; justify-self: center; }
.ce-statemap img { display: block; width: 100%; height: auto; }

.ce-principals { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.ce-principal { display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: 300px minmax(0, 1fr); align-items: start; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.ce-principal:last-child { border-bottom: 0; }
.ce-principal img { width: 300px; max-width: 100%; height: auto; display: block; }
.ce-principal h3 { font-family: var(--display); font-size: 1.125rem; color: var(--ink-strong); margin-bottom: .4em; }
.ce-principal ul { margin: 0; padding-left: 1.15em; }
.ce-principal li { margin-bottom: .2em; }

/* ---------------------------------------------------------------- offices */
.ce-offices { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ce-office h2 { margin-top: 0; }
.ce-office-head { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 20px; align-items: start; }
.ce-office-head img { width: 180px; height: 230px; object-fit: cover; display: block; }
.ce-map { position: relative; margin-top: 16px; aspect-ratio: 4 / 3; background: var(--band); }
.ce-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- docs    */
/* five documents, a known count - auto-fit settles on four and strands the
   fifth on a row of its own. Write the count at each tier instead. */
.ce-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px;
           grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ce-doc { border: 1px solid var(--rule); padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.ce-doc svg { width: 56px; height: 72px; flex: none; color: var(--brand); }
.ce-doc-t { display: flex; flex-direction: column; gap: 8px; }
.ce-doc a { font-family: var(--display); }
.ce-doc .ce-meta { font-size: .8125rem; color: #6a6a6a; }
@media (max-width: 1023.98px) { .ce-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699.98px)  { .ce-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Below 560px a two-up card leaves 120px for a five-word document title and a
   one-up card is 400px of mostly white space, so the card turns on its side:
   icon left, title right, full width. */
@media (max-width: 559.98px) {
  .ce-docs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ce-doc { flex-direction: row; text-align: left; align-items: center; padding: 14px 16px; }
  .ce-doc svg { width: 34px; height: 44px; }
  .ce-doc-t { flex: 1; gap: 4px; }
}


/* ---------------------------------------------------------------- gate    */
.ce-gate-intro { max-width: var(--read); }
.ce-gate-intro h2 { margin-top: 0; }
.ce-gate-cols {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: start;
  margin-top: 1.5rem;
}
.ce-gate-form { max-width: 26rem; }
.ce-field { margin: 0 0 1rem; }
.ce-field label { display: block; font-size: .9375rem; margin-bottom: .35em; color: var(--ink-strong); }
.ce-field .ce-opt { color: #6a6a6a; font-size: .875em; }
.ce-field input {
  display: block; width: 100%; font: inherit; color: var(--ink-strong);
  /* 1.4.11 wants 3:1 on a non-text UI boundary, and a DOM contrast sweep only
     looks at TEXT - #9a9a9a on white is 2.81:1 and nothing would have said so. */
  padding: 11px 12px; border: 1px solid #767676; background: #fff; border-radius: 0;
}
.ce-field input:focus-visible { border-color: var(--brand); }
.ce-field input::placeholder { color: #6a6a6a; }
/* a <button> does not inherit the page font */
.ce-gate-form button { font: inherit; }
.ce-gate-note { font-size: .8125rem; color: #6a6a6a; max-width: 26rem; }

/* the honeypot: off the page, never announced, never tabbable. `display:none`
   would let a bot skip it, so it is positioned away instead. */
.ce-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ce-err, .ce-ok { padding: 14px 18px; margin: 0 0 1.25rem; border-left: 4px solid; }
.ce-err { background: #fdf2f2; border-color: #a8232f; color: #7a1a23; }
.ce-err p { margin: 0 0 .4em; }
.ce-err ul { margin: 0; padding-left: 1.2em; }
.ce-ok { background: #eef5fb; border-color: var(--brand); color: var(--ink-strong); }

.ce-gate-list { background: var(--band); padding: clamp(1.25rem, 3vw, 1.75rem); }
.ce-gate-list h3 { margin-top: 0; font-family: var(--display); color: var(--brand); }
.ce-gate-list ul { list-style: none; margin: 0; padding: 0; }
.ce-gate-list li { padding: .6em 0; border-bottom: 1px solid #dcdcdc; }
.ce-gate-list li:last-child { border-bottom: 0; }
.ce-doc-name { display: block; color: var(--ink-strong); }
.ce-gate-list .ce-meta { font-size: .8125rem; color: #6a6a6a; }

.ce-gate-open h2 { margin-top: 0; }

@media (max-width: 767.98px) {
  .ce-gate-cols { grid-template-columns: minmax(0, 1fr); }
  .ce-gate-form { max-width: none; }
}

/* ---------------------------------------------------------------- forms   */
/* the Zoho form lays itself out wider than 820px and then scrolls inside the
   frame, so give it the full content column as the CMS did */
.ce-embed { position: relative; width: 100%; }
.ce-embed iframe { width: 100%; min-height: 760px; border: 0; display: block; background: #fff; }

.ce-leaders { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 12px; }
.ce-leader-row { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: stretch; gap: 12px; }
.ce-leader-row .ce-terr { background: var(--brand); color: #fff; padding: 12px 16px; font-family: var(--display); }
.ce-leader-row .ce-terr b { display: block; font-weight: 600; }
.ce-leader-row .ce-mail { display: flex; align-items: center; padding: 12px 0; word-break: break-word; }

/* ---------------------------------------------------------------- footer  */
.ce-foot { background: #fff; padding-block: 32px; border-top: 3px solid var(--brand); }
.ce-foot-grid { display: grid; gap: 28px; grid-template-columns: 320px repeat(5, minmax(0, 1fr)); }
.ce-foot-brand img { width: 305px; max-width: 100%; height: auto; display: block; }
.ce-foot-brand .ce-social { margin-top: 18px; }
.ce-foot h2 { font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--brand-link); margin: 0 0 .5em; text-transform: uppercase; line-height: 1.25; }
.ce-foot address { font-style: normal; font-size: 12px; line-height: 1.5; }
.ce-foot .ce-mailbtn { margin-top: 12px; }
.ce-mailbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--brand-link); color: #fff; font: 600 12px/1 var(--sans);
  letter-spacing: .06em; padding: 9px 14px; text-transform: uppercase;
}
.ce-mailbtn:hover, .ce-mailbtn:focus-visible { background: var(--brand-hover); color: #fff; text-decoration: underline; }
.ce-mailbtn svg { width: 15px; height: 15px; flex: none; }
.ce-colophon { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rule); text-align: center; font-family: var(--display); font-size: 15px; color: #034786; }
.ce-colophon a { color: #034786; }

/* ================================================================ responsive
   Widths below come from measuring the bar, not from round numbers.        */
@media (max-width: 1199.98px) {
  .ce-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ce-foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 1023.98px) {
  .ce-leader { grid-template-columns: 200px minmax(0, 1fr); }
  .ce-leader .ce-portrait img { width: 200px; height: 256px; }
  .ce-leader { grid-template-columns: 200px minmax(0, 1fr); }
  .ce-statemap { grid-column: 1 / -1; width: 320px; }
  .ce-offices { grid-template-columns: minmax(0, 1fr); }
  .ce-tiles ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- The burger tier, derived from a MEASUREMENT, not a round number.
   The six root items measure 74+103+112+128+121+136 = 674px at their real
   sizing; plus two 24px gutters that is 722px, so the bar fits to about 740.
   The breakpoint sits at 860 to leave slack for a machine with no Segoe UI
   (Arial sets these labels wider), and it belongs on the BAR side of the
   boundary - hence 859.98, not 860, or the two swap one pixel early and a
   probe's "exactly one of them is visible" check fails on the boundary width. */
@media (max-width: 859.98px) {
  .ce-burger { display: inline-flex; }
  .ce-navbar { display: none; }

  .ce-nav-drawer {
    display: block; position: fixed; top: var(--head-real); left: 0; right: 0;
    bottom: 0; background: #fff; z-index: 1400; overflow-y: auto;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s .25s;
    -webkit-overflow-scrolling: touch;
  }
  .ce-nav-drawer[data-open="true"] { transform: none; visibility: visible; transition: transform .25s ease; }
  .ce-nav-drawer .ce-nav { display: block; }
  .ce-nav-drawer .ce-nav > ul { display: block; }
  .ce-nav-drawer .ce-nav > ul > li { border-bottom: 1px solid var(--rule); }
  .ce-nav-drawer .ce-nav a,
  .ce-nav-drawer .ce-nav .ce-top { padding: 16px 22px; font-size: 16px; width: 100%; justify-content: space-between; }
  .ce-nav-drawer .ce-sub {
    display: none; position: static; border: 0; box-shadow: none;
    background: var(--band); min-width: 0; max-width: none; padding: 0;
  }
  .ce-nav-drawer .ce-nav > ul > li:hover > .ce-sub,
  .ce-nav-drawer .ce-nav > ul > li:focus-within > .ce-sub { display: none; }
  .ce-nav-drawer .ce-nav > ul > li > .ce-top[aria-expanded="true"] + .ce-sub { display: block; }
  .ce-nav-drawer .ce-sub a { padding-left: 38px; }

  /* the backdrop must NOT cover the masthead: the burger is the close
     control, and under the backdrop every tap on it hits the backdrop instead,
     so aria-expanded never flips back. document.elementFromPoint() over the
     burger is the only check that sees this - element.click() passes anyway. */
  .ce-head { z-index: 1500; }
  .ce-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
    z-index: 1300; opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  .ce-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
  body[data-locked="true"] { overflow: hidden; }
}

@media (min-width: 860px) {
  /* everything the drawer owns must be display:none at every width where the
     bar is showing, or it renders inside the desktop header (mainlyart).   */
  .ce-nav-drawer { display: none; }
}

@media (max-width: 899.98px) {
  .ce-split { grid-template-columns: minmax(0, 1fr); }
  .ce-aside { max-width: 325px; }
  .ce-mission-cols { grid-template-columns: minmax(0, 1fr); }
  .ce-principal { grid-template-columns: 200px minmax(0, 1fr); }
  .ce-principal img { width: 200px; }
}

@media (max-width: 767.98px) {
  :root { --gutter: 18px; }
  .ce-tiles ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-leader { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .ce-leader .ce-portrait img { width: 200px; height: 256px; }
  .ce-statemap { justify-self: start; width: 280px; }
  .ce-office-head { grid-template-columns: minmax(0, 1fr) 140px; }
  .ce-office-head img { width: 140px; height: 180px; }
  .ce-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-cta .ce-shell { flex-direction: column; align-items: flex-start; }
  .ce-track img { width: 240px; height: 320px; }
  .ce-track figure { width: 240px; }
}

@media (max-width: 559.98px) {
  :root { --gutter: 16px; }
  .ce-bar { min-height: 84px; }
  .ce-logo img { width: auto; height: 46px; max-width: 62vw; }
  .ce-principal { grid-template-columns: minmax(0, 1fr); }
  .ce-principal img { width: 240px; }
  .ce-foot-grid { grid-template-columns: minmax(0, 1fr); }
  .ce-leader-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ce-btn { padding: 14px 22px; }
}

@media (max-width: 419.98px) {
  /* 166px of logo + 95px of icons + gutters does not fit a 320px line, and
     hiding the phone-sized header's controls is not an option - so the
     LinkedIn mark steps aside here. It is still in the footer on every page. */
  .ce-head .ce-social a[href*="linkedin"] { display: none; }
  .ce-logo img { height: 42px; }
}

/* One column of 235px tiles adds ~1900px of scrolling to every page, and 375
   and 390 are the commonest phone widths - so two columns hold to 360, where
   the labels would start wrapping to five lines. */
@media (max-width: 359.98px) {
  .ce-tiles ul { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .ce-head, .ce-cta, .ce-reel, .ce-backdrop, .ce-nav-drawer { display: none !important; }
  body { color: #000; }
}