/* =====================================================================================
   ELEVATION LAYER — Manner Health Solutions
   -------------------------------------------------------------------------------------
   Mark's standard, 2026-09-20: "every button every link every page to be our best in
   class which means unique paid structures lots of cool animation beautiful photos".

   Loaded AFTER site.css and deliberately kept separate, so the base stylesheet — whose
   every colour pair was computed and whose two contrast landmines are recorded in it —
   is not rewritten to add composition.

   Nothing here weakens the accessibility work underneath it: every new colour pair was
   computed, every new motion sits inside the prefers-reduced-motion guard at the bottom,
   and every new interactive element keeps a visible focus ring.
   ===================================================================================== */

/* =====================================================================================
   CONTRAST CORRECTIONS
   -------------------------------------------------------------------------------------
   The first draft of this layer used --tan and --sand as TEXT colours. Both are recorded
   in site.css as DECORATIVE ONLY, and using them as text produced 179 measured AA
   failures across 28 route/width combinations - one mistake repeated in six places.
   The numeral tokens below exist so there is a correct answer to reach for instead.
   ===================================================================================== */
:root{
  --numeral-s:#33463A;   /* small numerals on light   7.65 paper / 10.11 white (AA 4.5) */
  --numeral-l:#557363;   /* LARGE numerals on light   3.95 paper / 5.23 white  (AA 3.0) */
  --numeral-d:#9DB8A5;   /* numerals on dark          5.78 on --forest                  */
}

/* ── scroll progress ────────────────────────────────────────────────────────────── */
.scrollbar{
  position:fixed;top:0;left:0;height:3px;z-index:95;width:100%;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--action),var(--tan),var(--moss));
}

/* ── comp imagery ───────────────────────────────────────────────────────────────── */
.shot{
  position:relative;overflow:hidden;border-radius:var(--r-l);
  background:var(--paper-2);box-shadow:var(--sh-2);
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot-tall{aspect-ratio:4/5}
.shot-wide{aspect-ratio:16/10}
.shot-band{aspect-ratio:18/7;border-radius:0;box-shadow:none}
.shot-sq{aspect-ratio:1/1}
/* Parallax: the image is oversized and translated against the scroll. Subtle by design —
   large parallax on a marketing page reads as a gimmick within about two seconds. */
.shot-px img{height:116%;will-change:transform}
.shot-note{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(20,18,16,.84);color:var(--sand);
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;
}

/* ── editorial primitives ───────────────────────────────────────────────────────── */
.kicker{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--moss);
}
.kicker::before{
  content:"";width:34px;height:1.5px;background:var(--tan);flex-shrink:0;
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out) .12s;
}
.in .kicker::before,.kicker.in::before{transform:scaleX(1)}
/* .qhero left this group 2026-09-21: it is a LIGHT band now, and --sage-light on
   --paper-2 measures 1.82. Its own rule is below. */
.band-forest .kicker,.band-ink .kicker{color:var(--sage-light)}
.qhero .kicker{color:var(--brand-soft)}                 /* 7.53 on --paper-2 */
.band-forest .kicker::before,.band-ink .kicker::before{
  background:var(--tan-light)}

.pullquote{
  font-family:var(--serif);font-size:clamp(1.45rem,3vw,2.3rem);line-height:1.27;
  color:var(--brand);border-left:3px solid var(--tan);padding:8px 0 8px 28px;
  margin:38px 0;max-width:26ch;font-weight:400;
}
.dropcap::first-letter{
  font-family:var(--serif);float:left;font-size:4em;line-height:.84;
  padding:.05em .09em 0 0;color:var(--maroon);font-weight:500;
}
.rule-dots{display:flex;gap:7px;align-items:center;margin:0 0 22px}
.rule-dots i{width:5px;height:5px;border-radius:50%;background:var(--tan);font-size:0;
  opacity:.45;animation:twinkle 3.4s var(--ease) infinite}
.rule-dots i:nth-child(2){animation-delay:-1.1s}
.rule-dots i:nth-child(3){animation-delay:-2.2s}

/* ── stat band ──────────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.stat{background:var(--paper);padding:clamp(22px,3vw,34px);text-align:center;
  transition:background-color .4s var(--ease)}
.stat:hover{background:var(--paper-2)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(1.9rem,3.8vw,2.9rem);
  color:var(--brand);line-height:1;margin-bottom:9px;font-variant-numeric:tabular-nums}
.stat span{font-size:.8rem;color:var(--muted);letter-spacing:.04em;line-height:1.4;
  display:block}
.band-forest .stats{background:rgba(191,169,140,.3);border-color:rgba(191,169,140,.3)}
.band-forest .stat{background:var(--forest)}
.band-forest .stat:hover{background:var(--forest-2)}
.band-forest .stat b{color:var(--paper)}
.band-forest .stat span{color:var(--tan-light)}

/* ── STICKY SCROLL SEQUENCE — home services ─────────────────────────────────────── */
.seq{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,76px);
  align-items:start}
.seq-sticky{position:sticky;top:110px;align-self:start}
.seq-visual{position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-3);background:var(--paper-2)}
.seq-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);
  transition:opacity .72s var(--ease-out),transform .95s var(--ease-out)}
.seq-visual img.on{opacity:1;transform:none}
.seq-panels{display:grid;gap:clamp(18px,2.6vw,28px)}
.seq-panel{
  padding:clamp(22px,2.8vw,34px);border-radius:var(--r-l);border:1px solid var(--line);
  background:var(--white);box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease-out),
             transform .45s var(--ease-out);
}
.seq-panel::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--tan);
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease-out);
}
.seq-panel.on{border-color:var(--sage);box-shadow:var(--sh-2);transform:translateX(4px)}
.seq-panel.on::after{transform:scaleY(1)}
.seq-panel .num{
  font-family:var(--serif);font-size:.92rem;color:var(--numeral-s);letter-spacing:.1em;
  display:block;margin-bottom:10px;font-variant-numeric:tabular-nums;
}
.seq-panel h3{font-size:1.32rem;margin-bottom:9px}

/* ── SCROLL-SPY INDEX — services + legal ────────────────────────────────────────── */
.idx{position:sticky;top:110px;align-self:start}
.idx ol{list-style:none;margin:0;padding:0;border-left:1.5px solid var(--line)}
.idx li{display:flex}
.idx a{
  display:flex;gap:12px;align-items:baseline;padding:11px 0 11px 18px;width:100%;
  font-size:.9rem;color:var(--muted);text-decoration:none;position:relative;
  min-height:44px;line-height:1.35;box-shadow:none;background-image:none;
  transition:color .28s var(--ease),padding-left .28s var(--ease-out);
}
.idx a::before{
  content:"";position:absolute;left:-1.5px;top:6px;bottom:6px;width:1.5px;
  background:var(--maroon);transform:scaleY(0);transform-origin:top;
  transition:transform .35s var(--ease-out);
}
.idx a:hover{color:var(--brand);padding-left:22px}
.idx a[aria-current="true"]{color:var(--brand);font-weight:600}
.idx a[aria-current="true"]::before{transform:scaleY(1)}
.idx .n{font-family:var(--serif);font-size:.8rem;color:var(--numeral-s);flex-shrink:0;
  font-variant-numeric:tabular-nums;min-width:1.6em}
.idx h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  font-family:var(--sans);font-weight:700;margin-bottom:14px}

/* ── DEEP PANELS — services ─────────────────────────────────────────────────────── */
.deep{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);
  align-items:center;padding:clamp(44px,6vw,82px) 0;border-top:1px solid var(--line);
  scroll-margin-top:120px;
}
.deep:first-of-type{border-top:0;padding-top:0}
.deep.flip > *:first-child{order:2}
.deep-figure{position:relative}
.deep-figure .badge-num{
  position:absolute;top:-18px;left:-14px;z-index:3;
  width:64px;height:64px;border-radius:50%;background:var(--action);color:var(--paper);
  display:grid;place-items:center;font-family:var(--serif);font-size:1.35rem;
  box-shadow:var(--sh-2);
}

/* ── FEATURE SPOTLIGHT — carriers ───────────────────────────────────────────────── */
.spot{
  position:relative;padding:clamp(24px,3vw,36px);border-radius:var(--r-l);
  background:var(--white);border:1px solid var(--line);overflow:hidden;
  box-shadow:var(--sh-1);min-height:232px;display:flex;flex-direction:column;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),
             border-color .35s var(--ease);
}
.spot::before{
  content:"";position:absolute;width:250px;height:250px;border-radius:50%;
  right:-115px;top:-115px;pointer-events:none;
  background:radial-gradient(circle,rgba(169,140,107,.22),transparent 70%);
  transform:scale(.4);opacity:0;
  transition:transform .6s var(--ease-out),opacity .5s var(--ease);
}
.spot:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--sage)}
.spot:hover::before{transform:scale(1);opacity:1}
.spot .mark{
  font-family:var(--serif);font-size:1.55rem;color:var(--brand);line-height:1.16;
  margin-bottom:12px;position:relative;max-width:12ch;
}
.spot .rank{
  position:absolute;top:16px;right:20px;font-family:var(--serif);font-size:2.5rem;
  color:var(--numeral-l);line-height:1;pointer-events:none;font-variant-numeric:tabular-nums;
  transition:color .4s var(--ease),transform .5s var(--ease-out);
}
.spot:hover .rank{color:var(--bark);transform:translateY(-3px)}
.spot p{position:relative;margin-top:auto;font-size:.92rem}

.logowall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;
}
.logo-cell{
  background:var(--paper);padding:28px 24px;min-height:134px;
  display:flex;flex-direction:column;justify-content:center;position:relative;
  transition:background-color .38s var(--ease);
}
.logo-cell:hover,.logo-cell:focus-within{background:var(--paper-2)}
.logo-cell b{font-family:var(--serif);font-size:1.1rem;color:var(--brand);
  font-weight:500;line-height:1.22}
.logo-cell span{
  font-size:.77rem;color:var(--muted);margin-top:8px;line-height:1.45;
  opacity:0;transform:translateY(6px);
  transition:opacity .38s var(--ease),transform .38s var(--ease-out);
}
.logo-cell:hover span,.logo-cell:focus-within span{opacity:1;transform:none}

/* ── EDITORIAL LIST — expectations ──────────────────────────────────────────────── */
.edlist{display:grid}
.edrow{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,50px);
  padding:clamp(28px,3.8vw,48px) 0;border-top:1px solid var(--line);align-items:start;
  position:relative;transition:padding-left .45s var(--ease-out);
}
.edrow:last-child{border-bottom:1px solid var(--line)}
.edrow::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--maroon);
  transition:width .7s var(--ease-out);
}
.edrow:hover{padding-left:12px}
.edrow:hover::before{width:100%}
.edrow .ed-n{
  font-family:var(--serif);font-size:clamp(2.3rem,4.6vw,3.7rem);color:var(--numeral-l);
  line-height:.9;font-variant-numeric:tabular-nums;
  transition:color .45s var(--ease),transform .5s var(--ease-out);
}
.edrow:hover .ed-n{color:var(--bark);transform:translateY(-4px)}
.edrow h3{font-size:clamp(1.18rem,2.1vw,1.55rem);margin-bottom:10px}

/* ── TIMELINE — about ───────────────────────────────────────────────────────────── */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1.5px;
  background:var(--line)}
.tl-line{position:absolute;left:8px;top:8px;width:1.5px;background:var(--maroon);
  height:0;transition:height .16s linear;z-index:1}
.tl-item{position:relative;padding-bottom:clamp(34px,4.5vw,56px)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-31px;top:10px;width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:2px solid var(--sage);z-index:2;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),
             transform .4s var(--ease-out);
}
.tl-item.in::before{background:var(--maroon);border-color:var(--maroon);transform:scale(1.2)}
.tl-item h3{font-size:clamp(1.22rem,2.2vw,1.6rem);margin-bottom:12px}

/* ── FULL-BLEED QUALIFIER HERO — states ─────────────────────────────────────────── */
/* MOOD CORRECTION 2026-09-21. Mark: "it looks almost like doom and gloom... this site is
   not all that inviting." This band was 1094px of dark forest green sitting immediately
   under the splash - 12.3% of the homepage and the first thing after the hero. It is now
   a warm light ground. The palette is unchanged; what changed is which end of it carries
   the weight. Contrast recomputed, not assumed. */
.qhero{
  background:var(--paper-2);color:var(--body);
  padding:clamp(48px,6.5vw,86px) 0 clamp(58px,7.5vw,100px);
  position:relative;overflow:hidden;
}
.qhero::before{
  content:"";position:absolute;inset:0;opacity:.32;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(169,140,107,.42) 1px,transparent 0);
  background-size:30px 30px;
  animation:pandrift 34s linear infinite;
}
.qhero h1,.qhero h2{color:var(--brand)}
.qhero .lede{color:var(--body)}
.qhero .wrap{position:relative;z-index:1}

/* ── DOCUMENT BLOCK — credentials ───────────────────────────────────────────────── */
.docblock{
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  background:var(--white);box-shadow:var(--sh-1);
}
.docblock .dochead{
  background:var(--paper-2);padding:16px 26px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:11px;
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bark);
}
.docblock dl{margin:0;padding:6px 26px 18px}
.docrow{
  display:grid;grid-template-columns:minmax(148px,.42fr) 1fr;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.docrow:last-child{border-bottom:0}
.docrow dt{font-size:.82rem;color:var(--muted);letter-spacing:.03em}
.docrow dd{margin:0;font-weight:600;color:var(--brand)}

/* ── LEGAL shell ────────────────────────────────────────────────────────────────── */
.legal-shell{display:grid;grid-template-columns:248px 1fr;gap:clamp(30px,4.5vw,62px);
  align-items:start}
.legal-shell .legal{max-width:70ch}
.legal h2{scroll-margin-top:120px}

/* ── micro-interactions ─────────────────────────────────────────────────────────── */
/* Inline prose links get a sweeping underline instead of the browser default. */
.legal a,.lede a,.prose a,p a:not(.btn):not(.chip):not(.idx a){
  text-decoration:none;
  background-image:linear-gradient(var(--maroon),var(--maroon));
  background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;
  box-shadow:inset 0 -1.5px 0 var(--line);
  transition:background-size .38s var(--ease-out),color .28s var(--ease);
}
.legal a:hover,.lede a:hover,.prose a:hover,p a:not(.btn):not(.chip):hover{
  background-size:100% 1.5px;color:var(--maroon);
}
/* Buttons lean very slightly toward the cursor. 6px maximum — enough to feel alive,
   not enough to feel like a toy. Off under reduced motion and on touch. */
.btn{--mx:0px;--my:0px}
@media (hover:hover) and (pointer:fine){
  .btn.magnet{transform:translate(var(--mx),var(--my))}
  .btn.magnet:hover{transform:translate(var(--mx),calc(var(--my) - 2px))}
}
/* Cards pick up a soft warm glow that follows the cursor. */
.card,.spot{--gx:50%;--gy:50%}
.card::after,.spot::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;
  background:radial-gradient(420px circle at var(--gx) var(--gy),
             rgba(169,140,107,.14),transparent 62%);
  transition:opacity .4s var(--ease);
}
.card:hover::after,.spot:hover::after{opacity:1}
.card > *,.spot > *{position:relative;z-index:1}

/* ── directional reveals ────────────────────────────────────────────────────────── */
.rev-l{opacity:0;transform:translateX(-30px);
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out)}
.rev-r{opacity:0;transform:translateX(30px);
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out)}
.rev-z{opacity:0;transform:scale(.95);
  transition:opacity .78s var(--ease-out),transform .78s var(--ease-out)}
.rev-l.in,.rev-r.in,.rev-z.in{opacity:1;transform:none}

/* ── responsive ─────────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .seq{grid-template-columns:1fr}
  .seq-sticky{position:static}
  .seq-visual{aspect-ratio:16/10;margin-bottom:22px}
  .legal-shell{grid-template-columns:1fr}
  .idx{position:static;margin-bottom:30px}
  .idx ol{display:grid;grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .deep{grid-template-columns:1fr;gap:26px}
  .deep.flip > *:first-child{order:0}
  .deep-figure .badge-num{width:52px;height:52px;font-size:1.1rem;top:-14px;left:-8px}
  .edrow{grid-template-columns:1fr;gap:8px}
  .edrow .ed-n{font-size:2.1rem}
  .idx ol{grid-template-columns:1fr}
  .pullquote{font-size:1.3rem;padding-left:18px;margin:26px 0}
  .tl{padding-left:26px}
  .tl-item::before{left:-24px;width:11px;height:11px}
  .docrow{grid-template-columns:1fr;gap:4px}
}
@media (max-width:640px){
  .stats{grid-template-columns:1fr}
  .logowall{grid-template-columns:1fr}
  .logo-cell span{opacity:1;transform:none}   /* no hover on touch — always show it */
  .spot .rank{font-size:1.9rem}
}

/* ── motion ─────────────────────────────────────────────────────────────────────── */
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.9;transform:scale(1.4)}}
@keyframes pandrift{from{background-position:0 0}to{background-position:30px 30px}}
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* Reduced motion: everything above is switched off, and — the part that actually
   matters — every reveal variant is forced visible so nothing is left blank. */
@media (prefers-reduced-motion:reduce){
  .rev-l,.rev-r,.rev-z{opacity:1 !important;transform:none !important}
  .seq-visual img.on{opacity:1}
  .shot-px img{height:100%;transform:none !important}
  .scrollbar{display:none}
  .qhero::before{animation:none}
  .rule-dots i{animation:none;opacity:.5}
  .btn.magnet{transform:none !important}
  .tl-line{transition:none}
}


/* =====================================================================================
   SURFACE RESET FOR CARDS ON DARK BANDS
   A .card inside .band-forest / .band-ink kept its white background but inherited the
   band's on-dark text colours - measured h3 at 1.07:1 and list text at 1.36:1, both
   effectively invisible. A card is its own surface, so it restates its colours.
   ===================================================================================== */
.band-forest .card,.band-ink .card,.qhero .card{
  background:var(--white);color:var(--body);
}
.band-forest .card h1,.band-forest .card h2,.band-forest .card h3,.band-forest .card h4,
.band-ink .card h1,.band-ink .card h2,.band-ink .card h3,.band-ink .card h4,
.qhero .card h3{color:var(--brand)}
.band-forest .card .lede,.band-ink .card .lede,.qhero .card .lede{color:var(--body)}
.band-forest .card .meta,.band-ink .card .meta,.qhero .card .meta{color:var(--muted)}
.band-forest .card .ticks li,.band-ink .card .ticks li{color:var(--body)}
.band-forest .card .ticks li span,.band-ink .card .ticks li span{color:var(--body)}
.band-forest .card .eyebrow,.band-ink .card .eyebrow,
.band-forest .card .kicker,.band-ink .card .kicker{color:var(--moss)}
.band-forest .card .kicker::before,.band-ink .card .kicker::before{background:var(--tan)}

/* h1 was missing from the on-dark heading rules, so the /carriers hero rendered forest
   green on near-black at 1.51:1. Every heading level is named now, not just h2 and h3. */
/* .qhero removed here too - this rule sits AFTER .qhero h1{color:var(--brand)} and
   was overriding it to --paper on --paper-2: a 1.10 ratio, i.e. invisible. */
.band-forest h1,.band-ink h1{color:var(--paper)}

/* Step numerals on a dark band: --numeral is tuned for --sand (3.30) and measures only
   2.75 on --forest. The on-dark variant is used when the rail sits on a dark band. */
.band-forest .step .n,.band-ink .step .n{color:var(--numeral-d)}
.qhero .step .n{color:var(--numeral-s)}                 /* light-band variant */
.band-forest .step:hover .n,.band-ink .step:hover .n{color:var(--tan-light)}
.band-forest .step,.band-ink .step{border-top-color:rgba(191,169,140,.26)}
.band-forest .step:last-child,.band-ink .step:last-child{
  border-bottom-color:rgba(191,169,140,.26)}
.band-forest .step:hover,.band-ink .step:hover{background:rgba(191,169,140,.07)}
.band-forest .step p,.band-ink .step p{color:var(--sand)}

/* A horizontal reveal offset is 30px of real layout width until the element reveals.
   body{overflow-x:hidden} hides it visually but scrollWidth still reported 400 in a
   390 viewport. Below the tablet breakpoint every reveal becomes vertical, which is
   the right choice on a narrow screen anyway. */
@media (max-width:820px){
  .rev-l,.rev-r{transform:translateY(24px)}
  .rev-l.in,.rev-r.in{transform:none}
}

/* =====================================================================================
   REAL PHOTOGRAPHY
   Andres's client-supplied headshot arrived 2026-09-20 and replaced the comp in the
   hero and on /about. Two things change when a real photograph lands in a frame that
   held a flat generated comp, and both are contrast problems:
   ===================================================================================== */
.shot-photo{background:var(--sand)}          /* tone-matched while the image decodes */
.shot-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* 1. ANYTHING SITTING ON THE PHOTO MUST STOP BEING TRANSLUCENT.
      The floating badges were rgba(232,223,207,.93). Over a flat comp that composites
      to a known colour; over a PHOTOGRAPH it composites to whatever pixels happen to be
      underneath, which is unknowable in advance and changes the moment the client sends
      a different frame. Opaque means the ratio is a fact rather than a hope - and it
      reads better against a real image anyway. */
.badge{
  background:var(--paper);
  border-color:var(--line);
  box-shadow:0 4px 12px rgba(20,18,16,.10), 0 18px 40px -22px rgba(30,58,47,.45);
}

/* 2. A photograph has its own edge contrast against the page. A hairline keeps the
      frame deliberate where the comp's flat fill used to do that job. */
.shot-photo{border:1px solid var(--line)}

/* --- the SECOND client-supplied slot, still pending ---------------------------------
   Deliberately NOT a comp. A comp stands in for something we will license; this stands
   in for something only Andres can supply, so it says so rather than letting the gap
   read as a design choice or inviting someone to drop a stock model in. */
.shot-pending{
  background:
    repeating-linear-gradient(135deg,
      var(--paper-2) 0 14px, var(--sand) 14px 28px);
  border:1.5px dashed var(--bark);
  display:grid;place-items:center;text-align:center;box-shadow:none;
}
.pending-in{max-width:34ch;padding:26px}
.pending-in svg{width:40px;height:40px;color:var(--bark);margin:0 auto 12px;display:block}
.pending-in b{display:block;font-family:var(--serif);font-size:1.12rem;color:var(--brand);
  margin-bottom:7px}
.pending-in span{font-size:.84rem;color:var(--bark);line-height:1.55;display:block}


/* =====================================================================================
   MOBILE TYPE FLOOR  (2026-09-21)
   Measured on Android/Edge: the carrier "Priority" badge rendered 10.0px, the footer
   column headings 11.0px and the carrier-wall label 11.0px. All pass contrast and all are
   deliberate micro-type rather than body copy - but 10px is small on a phone, and Mark
   tests on a phone. Lifted on small screens only; desktop typography is untouched.
   This lives in elevation.css rather than site.css because site.css loads FIRST and the
   equivalent rules there lost on cascade order - verified by computed style, not assumed.
   ===================================================================================== */
@media (max-width:900px){
  .flag{font-size:11.5px}
  .site-foot h2{font-size:12px}
  .wall-label{font-size:13.5px}
  /* Found on the LIVE site, 2026-09-22: the contents-rail heading was still 11.0px,
     below this block's own floor, on all six legal pages at every phone width. The
     floor is only a floor if everything is measured against it. */
  .idx h2{font-size:11.5px}
  /* .docblock .dochead is 0,2,0 and beat a bare .dochead no matter where it sat -
     the cascade lost on SPECIFICITY this time, not on order. Measured after the
     first attempt still computed 11px on the live site. */
  .docblock .dochead{font-size:11.5px}
}

/* =====================================================================================
   LONG CARRIER NAMES  (2026-09-22)
   Measured on the live site at 360/412/430: "UnitedHealthcare" rendered 187px wide in a
   169px card and spilled 18px past its own edge. overflow was visible, so nothing was
   cut off - it simply ran outside the card, which reads as broken on a phone.
   Two rules, because the first fixes THIS name and the second fixes the next one:
   a small type reduction at phone width, and a break of last resort for any carrier
   name longer than the box. Desktop is untouched.
   ===================================================================================== */
@media (max-width:480px){
  .spot p{font-size:.84rem}
}
.spot p{overflow-wrap:anywhere}

/* =====================================================================================
   2026-10-15 — Andres's punch list
   ===================================================================================== */

/* ── WHAT I HELP WITH as a mind map: one root, two branches ─────────────────────────
   Connectors are pure CSS. Desktop: a stem drops from the root to a crossbar, and a
   short drop runs from the crossbar to each branch. Phone: a vertical spine on the left
   with a tick into each branch, which reads as the same tree without needing width. */
.mm{--mm-line:var(--sage);max-width:960px;margin:0 auto}
.mm-root,.mm-node{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(22px,2.8vw,32px);box-shadow:var(--sh-1);position:relative;
}
.mm-root{max-width:560px;margin:0 auto;text-align:center;border-top:4px solid var(--brand)}
.mm-root .ic,.mm-node .ic{
  width:48px;height:48px;border-radius:14px;display:inline-grid;place-items:center;
  margin-bottom:14px;background:var(--paper-2);color:var(--brand);border:1px solid var(--line);
}
.mm-root .ic svg,.mm-node .ic svg{width:23px;height:23px}
.mm-root h3{font-size:clamp(1.4rem,2.4vw,1.75rem);margin-bottom:10px}
.mm-node h3{font-size:1.32rem;margin-bottom:8px}
.mm-node{border-top:4px solid var(--maroon)}
.mm-branches{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);
  position:relative;padding-top:64px}
/* stem from the root down to the crossbar */
.mm-branches::before{content:"";position:absolute;top:0;left:50%;width:2px;height:32px;
  background:var(--mm-line);transform:translateX(-1px)}
/* crossbar between the two branch centres */
.mm-branches::after{content:"";position:absolute;top:32px;height:2px;background:var(--mm-line);
  left:calc(25% - clamp(18px,3vw,40px)/4);right:calc(25% - clamp(18px,3vw,40px)/4)}
/* drop from the crossbar into each branch */
.mm-node::before{content:"";position:absolute;top:-36px;left:50%;width:2px;height:32px;
  background:var(--mm-line);transform:translateX(-1px)}
.mm-node::after{content:"";position:absolute;top:-8px;left:50%;width:10px;height:10px;
  border-radius:50%;background:var(--brand);transform:translate(-5px,-50%)}
@media (max-width:700px){
  .mm-root{text-align:left;margin:0}
  .mm-branches{grid-template-columns:1fr;padding:22px 0 0 28px;gap:18px}
  .mm-branches::before{left:12px;top:0;height:calc(100% - 40px);transform:none}
  .mm-branches::after{display:none}
  .mm-node::before{top:38px;left:-16px;width:16px;height:2px;transform:none}
  .mm-node::after{top:39px;left:-21px;transform:translateY(-50%)}
}

/* ── clickable licensing map ──────────────────────────────────────────────────────── */
.usmap{margin:0;max-width:980px}
.usmap svg{width:100%;height:auto;display:block;overflow:visible}
.usmap .st-off{fill:#CBC5BA;stroke:var(--paper);stroke-width:1.1;stroke-linejoin:round}
.usmap .st-on path{fill:#3D6B4F;stroke:var(--paper);stroke-width:1.1;stroke-linejoin:round;
  transition:fill .2s var(--ease);cursor:pointer}
.usmap .st-on:hover path,.usmap .st-on:focus path{fill:var(--gold)}
.usmap .st-on:focus{outline:none}
.usmap .st-on:focus-visible path{fill:var(--gold);stroke:var(--ink);stroke-width:2.2}
.usmap-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  margin-top:16px;font-size:.95rem;color:var(--body)}
.usmap-read{font-weight:600;color:var(--brand);min-height:1.6em}
.usmap-key{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.88rem}
.usmap-key i{display:inline-block;width:14px;height:14px;border-radius:4px}
.usmap-key .k-on{background:#3D6B4F}
.usmap-key .k-off{background:#CBC5BA;margin-left:12px}
.usmap-alt{margin-top:10px}

/* ── /about captive-vs-independent comparison ─────────────────────────────────────── */
.cmp{width:100%;border-collapse:collapse;font-size:.93rem;line-height:1.45}
.cmp th,.cmp td{text-align:left;padding:11px 10px;border-top:1px solid var(--line);
  vertical-align:top}
.cmp thead th{border-top:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.cmp tbody th{font-weight:600;color:var(--brand);width:34%}
.cmp td:last-child{color:var(--brand);font-weight:600}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}