/* ==========================================================================
   Intuitive IT Solutions — Conference Resources
   site.css  ·  VERSION 2  ·  25 Aug 2026

   Built to the REVISED draft brand direction, which supersedes the 2026
   style guide PDF. Key changes from v1:

     · Palette replaced. Royal blue #35308E is the primary. The retired
       values are #06038D (navy), #0356B7 (mid blue) and #6EE0E1 — note
       that #00A9E0 was NOT retired and survives here as --grad-mid.
     · Typography replaced. Trebuchet MS / Verdana system stack — no
       webfonts at all, so nothing to self-host and nothing to 404.
     · Diamond motif is now a structural element, not decoration.

   CSP NOTE: the site enforces style-src 'self'. All styling must live in
   this file. Do not add a <style> block or a style="" attribute to any
   page — it will be blocked and fail silently.
   ========================================================================== */

:root {

  /* --- Primary --------------------------------------------------------
     Royal blue carries every dark UI role: headings, nav, footer, and
     the dark fields. 10.69:1 on white.                                */
  --royal:        #35308E;

  /* --- Diamond gradient ramp (accent + graphic use only) ------------- */
  --grad-deep:    #00188E;   /* 13.80:1 on white — safe as text        */
  --grad-mid:     #00A9E0;   /*  2.71:1 — GRAPHIC ONLY                 */
  --grad-light:   #6EE0FF;   /*  1.53:1 on white — never text there,
                                 but 7.01:1 on royal, so it carries the
                                 eyebrow, footer note and tagline accent */

  /* --- Light blue accent ---------------------------------------------
     2.71:1 on white — graphic use only, never body text on a light
     background. Currently used in one place (the event-card hover
     border on the landing page); --grad-light won the footer accent
     when it was matched to the "prepared for" note. Kept because the
     revised brand direction names it, not because the build leans on
     it.                                                               */
  --accent:       #47A6DC;

  /* --- Legacy ---------------------------------------------------------
     #2A357B (dark indigo) is within 1.04:1 of royal blue — the two are
     indistinguishable on screen and cannot hold separate UI roles. It
     lives in the logo artwork and nowhere else. Do not introduce it as
     a token; it will read as a rendering fault next to royal.         */

  /* --- Neutrals ------------------------------------------------------- */
  --ink:          #22243A;
  --ink-soft:     #565a75;
  --rule:         #dfe3ef;
  --paper:        #ffffff;
  --paper-tint:   #f4f6fc;

  /* --- Type ------------------------------------------------------------
     Trebuchet MS headlines, Verdana bold subheads, Verdana body.
     All system faces — no @font-face anywhere in this build.
     Verdana runs wide with a tall x-height, so the base size is a
     little smaller than a Segoe/Roboto build would use and the
     letter-spacing on uppercase labels is lighter than usual.        */
  --font-head: "Trebuchet MS", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-sub:  Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
  --font-body: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;

  /* --- Layout --------------------------------------------------------- */
  --wrap-max:  1120px;
  --wrap-pad:  1.5rem;
  --radius:    10px;
  --shadow-sm: 0 1px 3px rgba(53, 48, 142, .08);
  --shadow-md: 0 10px 30px rgba(53, 48, 142, .16);

  /* The motif's colour ramp as a gradient, for fills that are drawn in
     CSS rather than loaded as SVG: card keylines, the footer band, and
     the small rotated squares used as section and list markers.       */
  --diamond-grad: linear-gradient(45deg,
                    var(--grad-deep) 0%,
                    var(--grad-mid) 55%,
                    var(--grad-light) 100%);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

/* color-scheme declares which system schemes this page is DESIGNED for.
   It is not dark-mode support — the site does not read prefers-color-scheme
   at all. Every page is light by brand decision, not by user preference.

   Declaring "light" matters because Chrome on Android can algorithmically
   invert light pages ("auto dark theme"). This page's contrast pairings
   were all hand-checked; an automatic inversion would undo that work in a
   way you would never see on your own devices. The declaration also gives
   the scrollbars and any UA widgets the right rendering.

   Nothing overrides this now that the blue treatment has been dropped. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

/* Column layout so the footer can be pushed to the bottom of the viewport
   on short pages (the landing page is one screen of content) while still
   sitting in normal flow on long ones. 100dvh rather than 100vh so mobile
   browsers measure it against the visible area, not the area behind the
   address bar. */
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: .95rem;          /* Verdana reads ~1 step larger than most */
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
}

/* The growing element. Everything else in the column keeps its own height. */
main { flex: 1 0 auto; }
.site-header, .hero, .site-footer { flex: 0 0 auto; }

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--royal); text-underline-offset: .18em; }
a:hover, a:focus { color: var(--grad-deep); }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--royal);
  line-height: 1.15;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(1.95rem, 4.2vw, 2.9rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); letter-spacing: -.01em; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }

/* Two-tone focus ring. --grad-mid alone is 2.71:1 on white, which fails
   WCAG 1.4.11's 3:1 minimum for non-text contrast, so royal blue
   (10.69:1) carries the visibility and the cyan hugs the element.
   Do not reduce this to a single cyan ring. */
:focus-visible {
  outline: 3px solid var(--royal);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--grad-mid);
  border-radius: 3px;
}
.hero :focus-visible, .site-footer :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 2px var(--grad-light);
}

/* Uppercase label treatment — Verdana bold per the brand direction.
   Verdana is already wide, so tracking is lighter than a narrower face
   would need. */
.label {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

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

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--royal); color: #fff;
  padding: .75rem 1.25rem; z-index: 100; text-decoration: none;
  font-family: var(--font-sub); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: .8rem;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   Header
   Clearspace: padding is at least x, the cap height of the "Intuitive IT"
   lettering — roughly 15px at a 44px lockup, so 22px here clears it.

   PROVENANCE: this rule came from the 2026 style guide PDF, which has
   since been withdrawn as out of date. The revised brand direction
   supplied so far covers colour, type and the diamond motif, and says
   nothing about logo clearspace. The rule is kept because it is sound
   and nothing has replaced it — but it is unconfirmed. Check it against
   the new guide when that lands.
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1.375rem; padding-bottom: 1.375rem;
}

.brand { display: flex; align-items: center; gap: 1.65rem; }

.brand-logo-link { display: block; text-decoration: none; border-radius: 4px; }
.brand-logo { height: 44px; width: auto; flex: 0 0 auto; }

.brand-tagline {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .68rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  padding-left: 1.65rem;
  border-left: 1px solid var(--rule);
}
.brand-tagline:hover, .brand-tagline:focus { color: var(--royal); }

.site-nav { display: flex; gap: 1.6rem; align-items: center; }

/* In-page jump links are MOBILE-ONLY, which inverts the usual responsive
   pattern on purpose.

   The normal reason nav collapses on small screens is a SPACE problem.
   There isn't one here — two short uppercase labels fit on their own row
   under the logo. What there is instead is a DISTANCE problem: this page
   is about 2,100px on a desktop (two screens, anchors save nothing) and
   about 3,000px on a 390px phone (four or five screens, anchors save real
   scrolling). The sticky header keeps them reachable from anywhere.

   Nothing is lost on desktop: every anchor target is a visible section
   heading roughly one screen away. The markup stays in place either way,
   so screen readers and the anchors themselves are unaffected.

   Scoped to a[href^="#"] rather than to .site-nav itself. Every link in
   this nav is now an in-page jump, so the two are equivalent today — but
   the selector keeps its meaning if a real link is ever added here, which
   would then stay visible at all widths instead of vanishing on desktop. */
@media (min-width: 861px) {
  .site-nav a[href^="#"] { display: none; }
}

.site-nav a {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .72rem;
  text-decoration: none;
  color: var(--royal);
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus { border-bottom-color: var(--grad-mid); }

@media (max-width: 680px) {
  .header-inner { justify-content: center; }
  .brand { gap: 1rem; }
  .brand-logo { height: 36px; }
  .brand-tagline { padding-left: 1rem; }
  .site-nav { width: 100%; justify-content: center; gap: 1.25rem; }
}
@media (max-width: 420px) { .brand-tagline { display: none; } }

/* --------------------------------------------------------------------------
   Hero — royal blue field with the diamond cluster as a structural mark
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--royal) 0%, var(--grad-deep) 100%);
  color: #fff;
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: clamp(3rem, 7vw, 4.75rem);
  padding-bottom: clamp(3rem, 7vw, 4.75rem);
}

/* 28ch (~722px) is the outer BOUND, not the line-break rule.

   text-wrap: balance is what actually decides where the break falls. It
   asks the browser to even out the line lengths using whatever font is
   really installed, instead of letting the text fill line one and orphan
   whatever is left onto line two.

   That distinction matters here because the break is font-dependent and
   this build ships no webfonts. Trebuchet MS is narrower than the
   fallbacks, so a machine WITH Trebuchet fits more on line one and strands
   the last word ("...Vendor Safeguard / Kit"); a machine without it breaks
   somewhere else entirely. No max-width value can be right for both.
   balance sidesteps the problem rather than tuning a number for one
   machine.

   Support: Chrome 114+, Safari 17.5+, Firefox 121+. Everywhere else it is
   ignored and you get today's plain wrapping — no fallback needed.

   The lede stays at 54ch (inside the 45-75 character band for readable
   prose) and takes text-wrap: pretty, which is the lighter-touch relative:
   it only avoids leaving a single word on the last line. */
.hero h1 {
  color: #fff;
  max-width: 28ch;
  text-wrap: balance;
}

.hero-eyebrow {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .7rem;
  color: var(--grad-light);      /* 7.01:1 on royal, 9.05:1 on deep */
  margin: 0 0 .85rem;
  text-wrap: balance;
}

/* The date range is one unit: it must never break as "AUGUST 27-" / "28,
   2026". The whole span wraps to its own line on a phone instead, which is
   why the middot lives inside it — a dangling separator at the end of the
   first line would look like a typo. */
.eyebrow-date { white-space: nowrap; }

.hero-lede {
  text-wrap: pretty;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .95);
  max-width: 54ch;
  margin: 0;
}


@media (max-width: 860px) {
  .hero h1 { max-width: none; }
}

/* --------------------------------------------------------------------------
   Corner motif — matches the printed handouts
   ...........................................................................
   The handouts bleed a dark cluster off the TOP-RIGHT of the page and a
   light one off the BOTTOM-LEFT, cropped by the page edge. Those belong to
   the page's frame, not its content, so on the site they live in the hero
   band and the footer — never in a body section.

   WHY NOT THE STICKY HEADER: the top-right corner of that bar is where the
   nav sits. A cluster behind RESOURCES / SOURCES / CONTACT drops their
   contrast and the bar is only ~70px tall, so all you would see is a
   sliver. The hero is the page's header band and takes it cleanly.

   Both are decorative, so they are background images on pseudo-elements
   with no markup and no alt text. The parents carry overflow:hidden, which
   crops them the way a page edge does and stops any horizontal scrollbar.
   -------------------------------------------------------------------------- */

/* Top-right, dark — hero band */
.hero::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  top: -168px; right: -150px;
  /* The lighter ramp, because this cluster sits on the royal hero field in
     every variant. The full-range file bottoms out at #00188E, which is
     DARKER than royal and reads as a hole punched in the field; the booth
     art never does that — its darkest measured value is around #3D9CD4,
     comfortably lighter than the background.

     scaleX(-1) mirrors the ramp so dark lands on the EAST edge. The
     backdrop puts dark toward the outer page edge and light toward the
     content, and this cluster is the top-RIGHT one. The footer cluster is
     bottom-left and uses the same file unmirrored. */
  background: url("../img/diamond-cluster-light.svg") no-repeat center / contain;
  transform: scaleX(-1);
  /* Full strength, matching the booth kit rather than the faint wash this
     used to be. That is only safe because the cluster sits entirely
     outside the text column — white copy over the motif's lightest stop
     would be 3.69:1. The @media rules below keep it clear at every width;
     re-check overlap before moving or enlarging it. */
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* Bottom-left, light — footer. The footer field is royal, so the light
   ramp reads against it without needing extra opacity.

   MEASURED DEFECT, fixed 26 Aug 2026. This cluster used to be 340px at
   left:-140/bottom:-165, which put visible art out to x=190 — well inside
   the text column, whose left edge is x=24 on a 1120px window. The footer
   text is left-aligned, so the motif and the copy were competing for the
   same corner and the copy lost: the disclaimer's rgba(#fff,.72) measured
   **1.56:1** against the motif's light stop. That is the "not legal advice,
   not a HIPAA certification" line — the one sentence on the page that has
   to be readable.

   The fix is the one the hero already uses at narrow widths: give the motif
   its own band with no text in it, rather than fading it to a wash. The
   footer's bottom padding opens up and the cluster is cropped into it, so
   it still bleeds off the corner the way the booth backdrop does.

   SIZING, second pass. The first fix cleared the text but shrank the motif
   to a 96x78px sliver that read as a stray blue shape rather than the
   cluster. The thing to understand: inside the band there is NO text, so
   the cluster's WIDTH is unconstrained — only its TOP edge matters. Growing
   the square and pushing it further down therefore buys visible area almost
   for free, at the cost of a little more band. 340px at bottom:-230 shows
   roughly 210x110px, about 2.5x the area of the first attempt.

   The geometry is coupled: visible art top sits (height - |bottom|) above
   the footer's bottom edge, and .footer-disclaimer's padding-bottom must
   exceed that. Change one, re-check the other, and re-run BOTH measurements
   — the glyph-level contrast check AND the visible-art-area check. Element
   boxes will tell you the contrast is fine when it is not, and the contrast
   check alone will happily pass a motif you can barely see. */
.site-footer::after {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  left: -118px; bottom: -230px;   /* art top ≈ 110px above the footer bottom */
  /* Bottom-left corner: dark on the WEST edge, so the file is used as
     drawn, no mirror. */
  background: url("../img/diamond-cluster-light.svg") no-repeat center / contain;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

.site-footer > .wrap { position: relative; z-index: 1; }

/* Narrow viewports: the text column widens to nearly the full page, so
   there is no clear space to the right of the headline any more. Rather
   than fade the cluster back to a wash, it moves ABOVE the copy — the
   hero's top padding opens up and the diamond is cropped into that band,
   which is what the retractable banner does in the same situation.
   Verified clear of every hero glyph down to 360px. */
@media (max-width: 860px) {
  .hero-inner { padding-top: 7.5rem; }
  .hero::after { width: 190px; height: 190px; top: -95px; right: -70px; }
  /* Same band logic as the desktop rule above: art top ≈ 85px above the
     footer bottom, cleared by .footer-disclaimer's padding-bottom. */
  .site-footer::after { width: 250px; height: 250px; left: -90px; bottom: -165px; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding-top: clamp(2.75rem, 6vw, 4rem);
  padding-bottom: clamp(2.75rem, 6vw, 4rem);
}

/* The tinted band that used to separate this section is gone by request.
   Section rhythm is carried by the heading markers and spacing instead.
   Kept as an empty hook so the class on the markup still resolves. */
.section-alt { background: transparent; }

/* Section heading gets a small diamond rather than a plain rule */
.section-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }

.section-head h2 { margin: 0; }

.diamond-bullet {
  width: 15px; height: 15px;
  flex: 0 0 15px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--diamond-grad);
}

.section-intro {
  max-width: 64ch;
  color: var(--ink-soft);
  margin: 0 0 2.25rem;
}

/* --------------------------------------------------------------------------
   Resource cards
   -------------------------------------------------------------------------- */

/* TWO columns, not auto-fit. With three cards and the questionnaire spanning
   the full width, auto-fit opened a third 340px track on wide screens and
   left it empty — the two reference cards sat squeezed against the left edge
   with a hole beside them. A fixed pair keeps the bottom row balanced and
   gives each reference card room to breathe.

   Single column below 760px, where two would be too narrow to read. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
}
@media (min-width: 760px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Gradient keyline across the top — the motif's ramp, not a flat rule */
.card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--diamond-grad);
}

.card-type {
  align-self: flex-start;
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .62rem;
  color: #fff;
  background: var(--royal);          /* white on royal = 10.69:1 */
  border-radius: 4px;
  padding: .28rem .6rem;
  margin-bottom: .7rem;
}

.card h3.card-title { margin: 0 0 .45rem; line-height: 1.28; }

.card-desc { color: var(--ink-soft); margin: 0; }

.card-actions {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .65rem;
}

/* The questionnaire card spans the full grid width: it carries two buttons
   and the password note, so it outgrows a third of the row, and it is the
   thing the printed QR actually promises. The two reference PDFs share the
   row beneath it.

   1 / -1 resolves against the tracks auto-fit created, so this collapses to
   a normal single-column card on narrow screens with no media query. */
@media (min-width: 760px) {
  .card-wide { grid-column: 1 / -1; }
}

/* Password callout. Deliberately plain and in the open — see the comment in
   index.htm. Tinted rather than bordered so it reads as a footnote to the
   buttons above it, not as a warning. */
.card-note {
  margin: 1.1rem 0 0;
  padding: .85rem 1.05rem;
  background: var(--paper-tint);
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 78ch;    /* the wide card is ~1070px; unchecked, this note runs
                         past a comfortable measure on a desktop screen */
}
.card-note strong {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--font-sub);
  color: var(--royal);          /* 10.69:1 on white, 9.9:1 on the tint */
}

/* The password itself. Monospace so O/0 and I/l cannot be misread when
   someone retypes it, and selectable as one word. */
.pw {
  font-family: Consolas, "DejaVu Sans Mono", Menlo, monospace;
  font-size: 1.05em;
  letter-spacing: .04em;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .05em .4em;
}

/* Version stamp. Files are uploaded under unversioned names so the URLs stay
   stable, which means this line is the ONLY place a reader sees the version
   — keep it current when the downloads are replaced. */
.card-version {
  margin: .9rem 0 0;
  font-family: var(--font-sub);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);       /* 6.34:1 on white */
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .72rem;
  text-decoration: none;
  padding: .72rem 1.25rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.button-primary { background: var(--royal); color: #fff; }
.button-primary:hover, .button-primary:focus {
  background: var(--grad-deep); color: #fff;
}

.button-secondary {
  background: transparent; color: var(--royal); border-color: var(--royal);
}
.button-secondary:hover, .button-secondary:focus {
  background: var(--royal); color: #fff;
}

/* --------------------------------------------------------------------------
   Notes
   -------------------------------------------------------------------------- */

.note {
  position: relative;
  margin: 2.25rem 0 0;
  padding: 1.15rem 1.35rem 1.15rem 2.9rem;
  background: var(--paper-tint);
  border-radius: var(--radius);
  max-width: 80ch;
}

/* Diamond in place of a left border */
.note::before {
  content: "";
  position: absolute;
  left: 1.15rem; top: 1.45rem;
  width: 13px; height: 13px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: var(--diamond-grad);
}

.note strong { color: var(--royal); }
.note-inline { background: #fff; border: 1px solid var(--rule); margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   Source library disclosure — native <details>, no JavaScript
   (CSP is script-src 'none'; a JS accordion would never open)
   -------------------------------------------------------------------------- */

.disclosure {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.disclosure > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 1.4rem;
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .74rem;
  color: var(--royal);
  display: flex; align-items: center; gap: .85rem;
  border-radius: var(--radius);
}
.disclosure > summary::-webkit-details-marker { display: none; }

/* Diamond marker that rotates on open */
.disclosure > summary::before {
  content: "";
  width: 13px; height: 13px; flex: 0 0 13px;
  border-radius: 3px;
  background: var(--diamond-grad);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.disclosure[open] > summary::before { transform: rotate(135deg) scale(.85); }
.disclosure > summary:hover { background: var(--paper-tint); }

.disclosure-body { padding: .25rem 1.4rem 1.5rem; border-top: 1px solid var(--rule); }

.disclosure-body h3 {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .74rem;
  color: var(--royal);
  margin: 1.6rem 0 .65rem;
}

.source-list { margin: 0; padding-left: 1.15rem; }
.source-list li { margin-bottom: .45rem; }

/* --------------------------------------------------------------------------
   Contact — information, not lead capture. Phone and web only.
   -------------------------------------------------------------------------- */

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }

.contact-list li { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

.contact-label {
  min-width: 5.5rem;
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .66rem;
  color: var(--royal);
}

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

.site-footer {
  position: relative;
  background: var(--royal);
  color: rgba(255, 255, 255, .88);
  font-size: .82rem;
  overflow: hidden;
}

/* Gradient band instead of a flat top border */
.site-footer::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--diamond-grad);
}

/* No logo down here. The header lockup is sticky, so it is on screen for
   the entire visit — repeating it in the footer added nothing and pushed
   the tagline off to one side. */
.footer-inner {
  padding-top: 2.4rem; padding-bottom: 2.4rem;
}
.footer-inner p { margin: 0; }

.footer-meta { text-align: left; }

.footer-tagline {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;          /* styling only — see .tagline-accent */
  color: #fff;
  margin-bottom: .3rem !important;
}

/* "Connected Care." matches the "PREPARED FOR..." note below it, so the
   footer carries one accent rather than two similar blues.

   This is --grad-light (#6EE0FF), not the handout's #47A6DC. The document
   sets that line on white; here it sits on the royal field, where #47A6DC
   is only 3.95:1 and would need large-text sizing to pass AA. #6EE0FF is
   7.01:1 and passes at any size, so the tagline size above is now a free
   design choice rather than an accessibility constraint. */
.tagline-accent { color: var(--grad-light); }

.footer-note {
  font-family: var(--font-sub);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .62rem;
  color: var(--grad-light);
  margin-top: .3rem !important;
}

/* This padding is the clear band the footer's diamond cluster sits in — see
   the .site-footer::after comment. It is not decorative spacing; shrinking it
   puts the motif back under the disclaimer text at 1.56:1. */
.footer-disclaimer { padding-bottom: 7.5rem; }
@media (max-width: 860px) { .footer-disclaimer { padding-bottom: 5.75rem; } }
.footer-disclaimer p {
  margin: 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: .74rem;
  color: rgba(255, 255, 255, .72);
  max-width: 92ch;
}

@media (max-width: 680px) {
  .footer-meta { text-align: center; }
}

/* --------------------------------------------------------------------------
   Print / motion
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .site-nav, .skip-link, .hero::after { display: none; }
  .hero { background: none; color: #000; }
  .hero h1, .hero-lede, .hero-eyebrow { color: #000; }
  .site-footer { background: none; color: #000; }
  .site-footer::before { display: none; }
  body { font-size: 10.5pt; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .disclosure > summary::before { transition: none; }
}

/* Contact links carry no underline, by request. Safe here because each one
   sits immediately beside its PHONE / WEB label, so the link is not
   identified by colour alone — which is what WCAG 1.4.1 actually cares
   about. The underline returns on hover and focus, and if those labels are
   ever dropped it has to come back permanently. */
.contact-list a { text-decoration: none; }
.contact-list a:hover, .contact-list a:focus { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Anchor landing offset
   ...........................................................................
   The header is position:sticky, so a plain #fragment jump puts the target
   heading UNDERNEATH it — measured at 44px from the top of the viewport
   against a 136px header, i.e. completely hidden. The jump links would
   have been broken in exactly the case they were added for.

   scroll-margin-top holds the target clear. The value tracks the header,
   which changes height as the logo, descriptor and nav re-wrap:

       >= 701px   89px      one row
       681-700px  144px     nav wrapped, mobile rules not yet applied
       <= 680px   136px     mobile header
       <= 360px   155px     descriptor wraps too

   Erring high is safe (the heading sits a little lower than necessary);
   erring low re-hides it. Re-measure if the header's padding or the
   lockup height changes.
   -------------------------------------------------------------------------- */

:root { --header-h: 89px; }
@media (max-width: 700px) { :root { --header-h: 144px; } }
@media (max-width: 360px) { :root { --header-h: 155px; } }

.section, .hero, main { scroll-margin-top: calc(var(--header-h) + 1rem); }