/* ==========================================================================
   base.css
   Reset, typography and element defaults. Unclassed HTML must look correct
   before a single component class is applied, because scaffolded pages carry
   placeholder prose and nothing else.

   Every rule here appeared byte-identically in both homepage-v1.html and
   managed-services-page-v7.html unless noted.
   ========================================================================== */

*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;   /* homepage only. Reverted under reduced-motion */
}

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--text);
  font-size:17px;
  line-height:1.6;
}

/* ---------- headings ----------
   Asap Bold is display only: h1 and anything explicitly marked .disp. h2 and
   h3 are Open Sans Bold, per the brand guidelines. */
h1,.disp{font-family:var(--disp);font-weight:700;letter-spacing:.01em}
h2,h3{font-family:var(--text);font-weight:700;color:var(--title)}
h2{font-size:1.65rem;line-height:1.2;margin:0 0 .5em;letter-spacing:-.005em}
h3{font-size:1.1rem;line-height:1.3;margin:0 0 .3em}

/* Hairline rule beneath section titles, light blue. Opt out with .bare. */
h2::after{content:"";display:block;width:72px;height:1px;background:var(--blue);margin-top:14px}
h2.bare::after{display:none}

/* ---------- line breaking ----------
   Added 25 September 2026 for the widow words: a paragraph ending on one word
   alone, "accumulate." under four full lines on the homepage conviction block
   and "staff." under two in the hero.

   text-wrap:pretty is the property for exactly that. It costs the browser one
   extra pass and it degrades to today's greedy wrap where it is not supported,
   so there is nothing to feature-detect and no fallback to write. balance is
   the heading equivalent and evens the lines of a short block rather than
   filling each one: it is capped at a handful of lines by every engine that
   implements it, which is why it is on headings and pretty is on prose.

   NOT DONE WITH NON-BREAKING SPACES. Holding a line with   before the last
   word is the third lever and it is the only one that touches copy. It would
   mean an editor deciding line breaks for a viewport they cannot see, on 195
   pages, and it produces a WORSE break the moment the measure changes. These
   two declarations need no page edited at all. */
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}

/* ---------- text ---------- */
p{margin:0 0 1em;max-width:66ch}
a{color:var(--navy)}
a:hover{color:var(--blue)}

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

/* Section rhythm. Off-white is the brand default background, so the navy tint
   carries the alternating bands and .panel lifts a section to white.
   The homepage set section{background:var(--navy-tint)} inline; the managed
   services page set it in a trailing override block. Same result, declared
   once here.

   The first content section below the hero is always white on every page.
   That is a layout decision, not a CSS one: every template opens its chain
   with panel=true and alternates from there, so nothing here special-cases
   the first section and no adjacent-sibling rule can fight a block that
   declares its own band (.proofband, .conviction, .close). If a page ever
   opens tint below the hero, the fix is in that page's layout, not here. */
section{padding:var(--section-y) 0;background:var(--navy-tint)}
section.panel{background:var(--white)}

/* ---------- accessibility ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip link. Hidden until focused, then it has to be visible, or it is not a
   skip link. .sr alone cannot do this: it stays clipped through focus. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--white);text-decoration:none;
  font-family:var(--text);font-weight:700;font-size:14px;padding:12px 20px}
.skip:focus{left:0;color:var(--white)}

*:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Blue on navy is 3.5:1, so dark panels take a white focus ring instead. */
.hero *:focus-visible,
.close *:focus-visible,
.conviction *:focus-visible,
.callout *:focus-visible,
.foot *:focus-visible{outline-color:var(--white)}

/* ---------- disclosure ----------
   Used for FAQ blocks and, in the header, for the mobile drawer. Both mockups
   styled bare details/summary rather than a component class, so it stays an
   element default. */
details{border-bottom:1px solid var(--line);padding:16px 0;background:transparent}
summary{font-family:var(--text);font-size:1.05rem;font-weight:700;cursor:pointer;color:var(--navy)}
summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
details p{margin:10px 0 0;font-size:16px;color:var(--body);max-width:76ch}

/* The header drawer reuses details/summary for the mobile accordion, where
   none of the FAQ chrome applies. Unset it rather than raising specificity
   inside the nav component. */
.fd-drawer details{border-bottom:0;padding:0}

/* ---------- tables ----------
   Managed services page only. Kept as an element default because a comparison
   table should be correct without a wrapper class. */
table{width:100%;border-collapse:collapse;font-size:16px;background:var(--white)}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line)}
thead th{background:var(--paper);color:var(--navy);font-family:var(--text);
  font-size:15px;font-weight:700;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
thead th.col{text-align:center;width:150px}
tbody th{font-weight:400;color:var(--body)}
tbody th small{display:block;color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:3px}
td.col{text-align:center}
tr:hover td,tr:hover th{background:var(--paper)}
thead tr:hover th{background:var(--paper)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  thead th.col{width:78px;font-size:13px}
  th,td{padding:12px 8px}
  table{min-width:660px}
}
@media (max-width:560px){
  section{padding:var(--section-y-sm) 0}
}