/* ============================================================================
   BASE                                client-sites/_engine/assets/css/base.css

   Byte identical on every client. Reset, shell, type scale, grid rules,
   breakpoints, the no-js fallback and the reveal.

   Every colour, size and radius is a custom property defined in css/theme.css,
   which is the only per client stylesheet. There is not one literal colour in
   this file, on purpose: a literal here is a colour that cannot be rebranded.
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--body-fs);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,picture,svg,iframe{max-width:100%}
img{height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand-action);outline-offset:3px;border-radius:2px}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--border);margin:0}

/* ---- type ---------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:var(--lh-heading);
  text-transform:var(--tt-heading);
  margin:0 0 .5em;
  letter-spacing:normal;
}
h1{font-size:var(--fs-h1);font-weight:var(--fw-h1)}
h2{font-size:var(--fs-h2);font-weight:var(--fw-h2)}
h3{font-size:var(--fs-h3);font-weight:var(--fw-h3)}
h4{font-size:calc(var(--fs-h3) * .82);font-weight:var(--fw-h3)}
small,.small{font-size:var(--fs-small);line-height:var(--lh-small)}
strong,b{font-weight:700}

/* ---- the shell ----------------------------------------------------------- */
.shell{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--shell-x);
}
.band{
  position:relative;
  padding-block:var(--shell-y);
  background:var(--surface);
  color:var(--ink);
}
.band[data-ground="dark"]{background:var(--brand-dark);color:#FFFFFF}
.band--alt{background:var(--surface-alt)}
.band--tint{background:var(--brand-tint,var(--surface-alt))}
.band__title{margin:0 0 var(--gap);text-align:center}
.band__title--left{text-align:left}
.band__head{text-align:center;margin-bottom:calc(var(--gap) * 1.6)}
.band__head--left{text-align:left}
.eyebrow{
  font-family:var(--font-display);
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand-action-ink);
  margin:0 0 .5em;
}
.band[data-ground="dark"] .eyebrow{color:var(--brand-action-on-dark)}
.lede{font-size:calc(var(--fs-body) * 1.06);max-width:62ch}
.prose p{max-width:70ch}

/* ---- grid ---------------------------------------------------------------- */
.cards{display:grid;gap:var(--gap-cards);grid-template-columns:1fr}
/* 35px 30px is the MEASURED card grid, and it is a two axis figure: 35px between
   rows, 30px between columns. On a phone the grid is one column, so the row gap
   is doing both jobs and three of them stack up inside one band. 22px keeps the
   cards clearly apart and keeps a four card band inside the measured 2,200px
   ceiling; at 28px the homepage services band measured 2,222px on a 390 wide
   phone once the lede ran to a fourth line. The ceiling wins, as it did for the
   card photo band in GAP-016. */
@media (max-width:767px){.cards{gap:22px}}
.split{display:grid;gap:calc(var(--gap) * 2);align-items:start}

/* ---- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 26px;
  font-family:var(--font-display);
  font-size:var(--fs-btn);font-weight:var(--fw-btn);
  line-height:var(--lh-btn);
  text-transform:var(--tt-btn);
  border-radius:var(--radius);
  border:2px solid transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
  cursor:pointer;
}
.btn--sm{min-height:44px;padding:10px 18px}
.btn--primary{background:var(--brand-action);color:var(--on-action);border-color:var(--brand-action)}
.btn--primary:hover{background:var(--brand-dark);color:#FFFFFF;border-color:var(--brand-dark)}
.btn--ghost{background:transparent;color:currentColor;border:var(--cta-border)}
.band[data-ground="light"] .btn--ghost{border:3px double var(--brand-action);color:var(--brand-action-ink)}
.btn--ghost:hover{background:var(--brand-action);color:var(--on-action);border-color:var(--brand-action)}

/* ---- reveal, with the no-js fallback -------------------------------------- */
/* The rule is scoped to html.js. With the script blocked, missing or still on
   the wire, nothing is ever hidden, so a no-JS crawler sees the whole page.
   The one line that flips no-js to js runs in <head> before first paint. */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---- utility -------------------------------------------------------------- */
.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}
.center{text-align:center}

/* ---- breakpoints ---------------------------------------------------------- */
@media (min-width:768px){
  .cards--2,.cards--3,.cards--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1025px){
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .cards--4{grid-template-columns:repeat(4,1fr)}
  .split{grid-template-columns:var(--hero-text-col) 1fr}
  .split--form{grid-template-columns:1fr 1fr}
}

/* the fixed call bar exists only on a phone, so only a phone pays for it */
@media (max-width:767px){
  body{padding-bottom:var(--cta-bar-h)}
}