:root{
  --plum:#4E2170;
  --plum-deep:#2E0F42;
  --plum-mid:#63308A;
  --gold:#8C610E;
  --gold-bright:#E8B54B;
  --ink:#191221;
  --slate:#5C5366;
  --paper:#FFFFFF;
  --mist:#F6F3F9;
  --line:#E2DAE9;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 22px}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.021em;font-weight:700}
h1{font-size:clamp(1.95rem,4.6vw,3.15rem);letter-spacing:-.028em}
h2{font-size:clamp(1.5rem,3.1vw,2.15rem);margin-bottom:.55em}
h3{font-size:1.1rem;letter-spacing:-.012em}
p{max-width:70ch}
a{color:inherit}
section{padding:clamp(48px,6.5vw,82px) 0}
.eyebrow{font-size:.83rem;font-weight:600;color:var(--gold);margin-bottom:12px}
.lead{color:var(--slate);font-size:1.05rem}

/* ---------- announcement ---------- */
.announce{background:var(--plum-deep);color:#E6D9EF;font-size:.82rem;padding:8px 0}
.announce .wrap{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;justify-content:space-between}
.announce a{color:#fff;font-weight:600;text-decoration:none}
.announce a:hover{text-decoration:underline}

/* ---------- header ---------- */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:70px}
.logo{display:flex;align-items:center;text-decoration:none;white-space:nowrap}
.logo img{display:block;height:32px;width:auto}
.anniv-mark{display:none;height:46px;width:auto;margin-left:14px;padding-left:14px;border-left:1px solid var(--line)}
@media(min-width:560px){.anniv-mark{display:block}}
@media(min-width:1000px){.logo img{height:36px}.anniv-mark{height:52px}}

/* ---------- footer brand lockup (real logo now works here, it's transparent) ---------- */
footer.site .brand-logo-link{display:block;width:fit-content;margin-bottom:14px}
footer.site .brand-logo{height:30px;width:auto;display:block;margin-bottom:0}
nav.main{margin-left:auto;display:none;align-items:center;gap:4px}
nav.main .item{position:relative}
nav.main .item>a,nav.main .item>button{
  display:block;padding:10px 13px;font-size:.93rem;font-weight:500;color:var(--ink);
  text-decoration:none;background:none;border:0;font-family:inherit;cursor:pointer
}
nav.main .item:hover>a,nav.main .item:hover>button{color:var(--plum)}
.drop{
  position:absolute;top:100%;left:0;min-width:238px;background:#fff;
  border:1px solid var(--line);box-shadow:0 12px 30px rgba(40,12,60,.13);
  padding:8px;display:none
}
nav.main .item:hover .drop,nav.main .item:focus-within .drop{display:block}
nav.main .item.open .drop{display:block}
.drop a{display:block;padding:8px 11px;font-size:.9rem;text-decoration:none;color:var(--slate);border-radius:3px}
.drop a:hover{background:var(--mist);color:var(--plum)}
.quote{background:var(--gold-bright)!important;color:#33143F!important;padding:11px 20px!important;border-radius:3px;font-weight:600!important}
.quote:hover{background:#F4C76A!important}
.burger{
  margin-left:auto;background:none;border:1px solid var(--line);
  width:42px;height:38px;padding:0;cursor:pointer;border-radius:3px;
  display:inline-flex;align-items:center;justify-content:center;flex:none
}
.burger-bars{position:relative;width:19px;height:13px;display:inline-block}
.burger-bars span{
  position:absolute;left:0;width:100%;height:2px;border-radius:1px;background:var(--ink);
  transition:transform .2s ease,opacity .15s ease,top .2s ease
}
.burger-bars span:nth-child(1){top:0}
.burger-bars span:nth-child(2){top:5.5px}
.burger-bars span:nth-child(3){top:11px}
.burger[aria-expanded="true"] .burger-bars span:nth-child(1){top:5.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger-bars span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-bars span:nth-child(3){top:5.5px;transform:rotate(-45deg)}
@media(min-width:1000px){nav.main{display:flex}.burger{display:none}}
@media(min-width:1000px){
  .drop-industries{
    min-width:0;width:460px;display:none;
    grid-template-columns:repeat(2,1fr);gap:2px 6px
  }
  nav.main .item:hover .drop-industries,
  nav.main .item:focus-within .drop-industries,
  nav.main .item.open .drop-industries{display:grid}
}

/* ---------- mobile nav panel (JS-driven, see /assets/js/main.js) ---------- */
@media(max-width:999px){
  nav.main.nav-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(40,12,60,.14);
    max-height:calc(100vh - 70px);overflow-y:auto;z-index:60
  }
  nav.main.nav-open .item{width:100%;position:static}
  nav.main.nav-open .item>a,nav.main.nav-open .item>button{
    width:100%;text-align:left;padding:15px 22px;border-bottom:1px solid var(--line);
    font-size:1rem
  }
  nav.main.nav-open .item>button{display:flex;justify-content:space-between;align-items:center}
  nav.main.nav-open .quote{margin:14px 22px;text-align:center;border-bottom:0!important}
  nav.main.nav-open .drop{
    display:none;position:static;min-width:0;width:100%;box-shadow:none;
    border:0;border-radius:0;background:var(--mist);padding:6px 0
  }
  nav.main.nav-open .item.open .drop{display:block}
  nav.main.nav-open .drop a{padding:12px 34px;border-radius:0}
}

/* ---------- breadcrumb ---------- */
.crumb{background:var(--mist);font-size:.83rem;color:var(--slate);padding:11px 0;border-bottom:1px solid var(--line)}
.crumb a{text-decoration:none;color:var(--plum);font-weight:500}
.crumb a:hover{text-decoration:underline}

/* ---------- hero ---------- */
.hero{
  position:relative;color:#fff;
  background:linear-gradient(112deg,var(--plum-deep) 0%,var(--plum) 52%,var(--plum-mid) 100%);
  padding:clamp(52px,7vw,86px) 0 clamp(40px,5vw,56px);
  overflow:hidden
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 380px at 88% 12%,rgba(232,181,75,.20),transparent 62%);
  pointer-events:none
}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:21ch}
.hero .lead{color:#E0D1EC;margin-top:18px;max-width:60ch;font-size:clamp(1rem,1.9vw,1.14rem)}
.hero .eyebrow{color:var(--gold-bright)}

/* ---------- hero color variants (visual-signature pass) ----------
   The first step in giving each secondary page its own visual signature
   (Part 7/9's post-launch item), so switching between industries reads as
   a real page change, not a reload of the same header. Built only from the
   two approved brand colors and their already-derived shades (Part 5),
   never a new hue: each variant just changes the gradient's angle, which
   shade leads, and where the gold glow sits. Plain .hero (Ambulatory
   Surgery Centers, Funeral Homes, Law Enforcement) keeps the original
   look; the other 15 industries cycle through v2-v6 below so no two
   alphabetically-adjacent industries in the nav dropdown render the same
   wallpaper. Photo-backed heroes are a separate, later step, see the
   brain doc note on this. */
.hero-v2{background:linear-gradient(72deg,var(--plum-mid) 0%,var(--plum) 55%,var(--plum-deep) 100%)}
.hero-v2::after{background:radial-gradient(620px 360px at 14% 86%,rgba(232,181,75,.20),transparent 62%)}
.hero-v3{background:linear-gradient(160deg,var(--plum-deep) 0%,var(--plum-mid) 60%,var(--plum) 100%)}
.hero-v3::after{background:radial-gradient(680px 380px at 50% 100%,rgba(232,181,75,.18),transparent 60%)}
.hero-v4{background:linear-gradient(205deg,var(--plum) 0%,var(--plum-deep) 55%,var(--plum-mid) 100%)}
.hero-v4::after{background:radial-gradient(600px 340px at 90% 90%,rgba(232,181,75,.20),transparent 62%)}
.hero-v5{background:linear-gradient(48deg,var(--plum-deep) 0%,var(--plum-mid) 50%,var(--plum) 100%)}
.hero-v5::after{background:radial-gradient(640px 360px at 8% 10%,rgba(232,181,75,.22),transparent 62%)}
.hero-v6{background:linear-gradient(135deg,var(--plum-mid) 0%,var(--plum-deep) 60%,var(--plum) 100%)}
.hero-v6::after{background:radial-gradient(700px 400px at 96% 96%,rgba(232,181,75,.18),transparent 60%)}
/* hero-v7 is Home's own, not reused anywhere else: a 4-stop loop instead of
   a straight 3-stop blend, and the gold glow centered high instead of in a
   corner, so the homepage never reads as just another industry page. */
.hero-v7{background:linear-gradient(96deg,var(--plum-deep) 0%,var(--plum) 45%,var(--plum-mid) 78%,var(--plum-deep) 100%)}
.hero-v7::after{background:radial-gradient(760px 420px at 50% 0%,rgba(232,181,75,.24),transparent 65%)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-block;padding:14px 26px;border-radius:3px;font-weight:600;font-size:1rem;text-decoration:none;transition:background .15s,color .15s}
.btn-gold{background:var(--gold-bright);color:#33143F}
.btn-gold:hover{background:#F4C76A}
.btn-line{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.13)}

/* ---------- hero grid + dispatch panel ---------- */
.hero-grid{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:900px){.hero-grid{grid-template-columns:1.3fr 1fr;align-items:start}}
.panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:22px;backdrop-filter:blur(2px)}
.panel-head{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;font-size:.98rem;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.16)}
.panel-head .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-bright);flex:none}
.panel-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.92rem}
.panel-row:last-of-type{border-bottom:0}
.panel-row dt{color:#C9B3DA;margin:0}
.panel-row dd{margin:0;color:#fff;font-weight:600;text-align:right}
.panel-note{margin:14px 0 0;font-size:.84rem;color:#C9B3DA;line-height:1.5}

/* ---------- hero stats bar ---------- */
.hero-stats{position:relative;z-index:1;margin-top:40px;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(2,1fr)}
.hero-stats div{padding:20px 18px;border-right:1px solid rgba(255,255,255,.12)}
.hero-stats div:last-child{border-right:0}
.hero-stats strong{display:block;font-weight:700;font-size:1.55rem;color:#fff;letter-spacing:-.02em;line-height:1}
.hero-stats span{display:block;font-size:.79rem;color:#C9B3DA;margin-top:5px}
@media(min-width:760px){.hero-stats{grid-template-columns:repeat(5,1fr)}}

/* ---------- hero dispatch panel: clickable category rows ----------
   Replaces the hero's original "What 'local support' actually means" fact
   table on Home only (Sep 23): Matthew asked for the new category links to
   live in this same panel slot instead of as a separate section below the
   hero, matching how the True IP Solutions reference site puts its own
   category panel directly in the hero. Reuses .panel/.panel-head from the
   shared hero-grid styles above; .panel-link-row is new, a clickable
   variant of .panel-row for links instead of static fact rows.
   "Unified Communications" is used here as this panel's label for the
   Telecommunications row only; the real category name, URL and every
   existing nav/footer/cross-link stays "Telecommunications" everywhere
   else, per the approved decision (see brain doc). */
.panel-links{display:flex;flex-direction:column}
.panel-link-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.92rem;font-weight:600;color:#fff;text-decoration:none;
  transition:color .15s ease,padding-left .15s ease
}
.panel-link-row:last-of-type{border-bottom:0}
.panel-link-desc{color:#C9B3DA;font-weight:400;font-size:.84rem;text-align:right}
@media(hover:hover) and (pointer:fine){
  .panel-link-row:hover{color:var(--gold-bright);padding-left:4px}
}
@media(hover:none){
  .panel-link-row:active{color:var(--gold-bright)}
}

/* ---------- technology partner strip (auto-scrolling marquee) ----------
   Current practice for a trust-logo row like this on B2B sites is a slow,
   continuous auto-scroll rather than manual next/prev arrows or dots: it
   needs no interaction (important on mobile, where tap targets for arrows
   are one more thing to get right), never gets "stuck" on one slide, and
   scales to any number of logos without adding pagination UI. Built in
   pure CSS: the logo row is duplicated once in the markup and the pair
   scrolls left as a unit, looping seamlessly at the halfway point. No JS. */
.partners{padding:34px 0 30px;border-bottom:1px solid var(--line);background:#fff}
.partners p{text-align:center;font-size:.85rem;color:var(--slate);margin-bottom:22px}

.partner-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
}
.partner-track{display:flex;width:max-content;animation:partner-scroll 54s linear infinite}
.partners:hover .partner-track{animation-play-state:paused}
.partner-row{display:flex;align-items:center;gap:44px;padding:0 22px;flex-shrink:0}
.partner-row img{
  height:30px;width:auto;max-width:120px;object-fit:contain;
  opacity:.68;filter:grayscale(1);transition:opacity .15s ease,filter .15s ease
}
.partner-row img:hover{opacity:1;filter:grayscale(0)}

@keyframes partner-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media(max-width:640px){
  .partner-row{gap:30px;padding:0 15px}
  .partner-row img{height:24px;max-width:96px}
  .partner-track{animation-duration:34s}
  .partner-marquee{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)
  }
}

/* Anyone with motion sensitivity set at the OS level gets a plain wrapped
   row instead, no exceptions: this is not just a nice-to-have, WCAG calls
   out auto-scrolling content as something that must be able to stop. */
@media(prefers-reduced-motion:reduce){
  .partner-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .partner-track{animation:none;width:auto}
  .partner-track .partner-row:last-child{display:none}
  .partner-row{flex-wrap:wrap;justify-content:center}
}

/* ---------- comparison table ---------- */
.compare-wrap{margin-top:30px}
.compare{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
.compare th,.compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem}
.compare thead th{background:var(--plum-deep);color:#fff;font-weight:700;font-size:.9rem;border-bottom:0}
.compare thead th:nth-child(2){background:var(--plum)}
.compare tbody th{font-weight:600;color:var(--plum-deep);width:28%;background:var(--mist)}
.compare td:nth-child(2){font-weight:600;color:var(--plum-deep);background:#FBF7FD}
.compare td:last-child{color:var(--slate)}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}

/* Below 640px the 3-column table becomes a stack of cards instead of forcing
   a horizontal scroll: each row's th becomes a card heading, each td shows
   its own column label (from data-label, set in the page's markup) above
   its value. Any future industry page built by copying healthcare.njk's
   table keeps this automatically since the data-label attributes copy too. */
@media(max-width:640px){
  .compare{border:0;min-width:0}
  .compare thead{display:none}
  .compare tbody{display:block}
  .compare tr{display:block;margin-bottom:14px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
  .compare tr:last-child{margin-bottom:0}
  .compare th,.compare td{display:block;width:100%;border-bottom:1px solid var(--line)}
  .compare tbody th{background:var(--plum-deep);color:#fff;width:100%}
  .compare td:nth-child(2){background:#FBF7FD}
  .compare td::before{
    content:attr(data-label);display:block;font-size:.72rem;font-weight:700;
    letter-spacing:.03em;text-transform:uppercase;color:var(--gold);margin-bottom:5px
  }
  .compare td:nth-child(2)::before{color:var(--plum)}
  .compare tr:last-child th,.compare tr:last-child td{border-bottom:1px solid var(--line)}
  .compare tr:last-child td:last-child{border-bottom:0}
}

/* ---------- industries grid ---------- */
.inds{display:grid;grid-template-columns:1fr;gap:0;margin-top:28px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.inds a,.inds span{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none}
.inds a{position:relative;transition:transform .18s ease,box-shadow .18s ease,background .15s ease,color .15s ease}
.inds a:hover{background:var(--mist)}
@media(hover:hover) and (pointer:fine){
  .inds a:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(46,15,66,.14);color:var(--plum);z-index:1}
}
@media(hover:none){
  .inds a:active{background:var(--mist)}
}
.inds span{color:var(--slate);font-weight:500}
.inds small{color:var(--slate);font-weight:400;font-size:.8rem;text-align:right}
@media(min-width:640px){.inds{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.inds{grid-template-columns:repeat(3,1fr)}}

/* ---------- testimonial / proof ---------- */
.quote-block{border-left:3px solid var(--gold);padding:4px 0 4px 26px;max-width:62ch}
.quote-block blockquote{margin:0;font-weight:600;font-size:1.28rem;line-height:1.4;color:var(--plum-deep);letter-spacing:-.01em}
.quote-block cite{display:block;margin-top:14px;font-style:normal;font-size:.9rem;color:var(--slate)}
.placeholder-tag{border:1.5px dashed var(--gold);background:#FDF7E8;border-radius:3px;padding:4px 10px;font-size:.75rem;color:#8A6A1E;font-weight:600;display:inline-block;margin-bottom:12px}

/* ---------- at a glance ---------- */
.glance{background:var(--plum-deep);color:#fff;padding:0}
.glance .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.16)}
.glance .cell{background:var(--plum-deep);padding:20px 20px 22px}
.glance .k{font-size:.78rem;color:#BCA6CE;font-weight:600;display:block;margin-bottom:3px}
.glance .v{font-size:1.02rem;font-weight:600;line-height:1.3;display:block}
@media(min-width:760px){.glance .grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- intro ---------- */
.intro{padding:clamp(40px,5vw,60px) 0}
.intro p{font-size:clamp(1.04rem,2vw,1.18rem);color:var(--ink);max-width:74ch;line-height:1.6}

/* ---------- check lists ---------- */
.checks{list-style:none;margin-top:22px;max-width:74ch}
.checks li{position:relative;padding:9px 0 9px 32px;font-size:.99rem;border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:0}
.checks li::before{
  content:"✓";position:absolute;left:0;top:9px;
  color:var(--gold);font-weight:700;font-size:1rem
}
.checks strong{font-weight:600}

/* ---------- card grid ---------- */
.cards{display:grid;gap:18px;margin-top:34px;grid-template-columns:1fr}
.card{
  border:1px solid var(--line);border-top:3px solid var(--plum);
  padding:24px 22px 22px;background:#fff;display:flex;flex-direction:column
}
.card h3{margin-bottom:9px;color:var(--plum);transition:color .15s ease}
.card p{font-size:.95rem;color:var(--slate);margin:0;flex:1}
.card .more{margin-top:14px;font-size:.9rem;font-weight:600;color:var(--plum);text-decoration:none}
.card .more:hover{text-decoration:underline}
@media(min-width:680px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}

/* The whole card is one click target (stretched-link pattern): the card's
   one real link, .more, gets a ::after that covers the entire box, so
   clicking/tapping anywhere on the card follows it, not just the "Learn
   more" text. Desktop pointers get a lift-and-highlight hover; touch skips
   the lift entirely and gets a plain tap-press instead, since a hover state
   can get stuck open after a tap with no mouse to move away and clear it
   (the same class of bug already hit and fixed in the mobile nav dropdowns,
   see the brain doc's Part 9). */
.card{position:relative;transition:transform .18s ease,box-shadow .18s ease}
.card .more::after{content:"";position:absolute;inset:0}
@media(hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(46,15,66,.16)}
  .card:hover h3{color:var(--gold)}
}
@media(hover:none){
  .card:active{background:var(--mist)}
}

/* ---------- tinted band ---------- */
.tint{background:var(--mist)}

/* ---------- chain ---------- */
.chain{display:grid;gap:16px;margin-top:32px;grid-template-columns:1fr}
.link{background:#fff;border:1px solid var(--line);padding:22px 20px;position:relative}
.link .no{font-size:1.75rem;font-weight:700;color:var(--gold);line-height:1;display:block;margin-bottom:10px;letter-spacing:-.03em}
.link h3{margin-bottom:6px}
.link p{font-size:.93rem;color:var(--slate);margin:0}
@media(min-width:640px){.chain{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.chain{grid-template-columns:repeat(4,1fr)}}

/* ---------- process ---------- */
.proc{display:grid;gap:26px;margin-top:34px;grid-template-columns:1fr}
.proc .st .n{font-size:.85rem;font-weight:700;color:var(--gold);display:block;margin-bottom:8px}
.proc .st h3{margin-bottom:7px}
.proc .st p{font-size:.95rem;color:var(--slate);margin:0}
.proc .st{border-top:2px solid var(--plum);padding-top:16px}
@media(min-width:760px){.proc{grid-template-columns:repeat(3,1fr);gap:30px}}
@media(min-width:1000px){.proc-5{grid-template-columns:repeat(5,1fr)}}

/* ---------- faq ---------- */
.faq{margin-top:28px;max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:18px 34px 18px 0;font-weight:600;font-size:1.01rem;
  list-style:none;position:relative
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:16px;font-size:1.4rem;
  color:var(--gold);font-weight:400;line-height:1
}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 20px;color:var(--slate);font-size:.98rem}

/* ---------- cta band ---------- */
.ctaband{background:var(--plum);color:#fff}
.ctaband h2{color:#fff;max-width:22ch}
.ctaband p{color:#E0D1EC;margin-top:12px}
.ctaband .btns{margin-top:26px}

/* ---------- contact form ---------- */
.contact-form{margin-top:30px}
.form-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.form-grid{grid-template-columns:repeat(2,1fr)}}
.form-field{margin-top:18px}
.form-grid .form-field{margin-top:0}
.form-field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--ink)}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:3px;
  font-family:var(--sans);font-size:.97rem;color:var(--ink);background:#fff
}
.form-field textarea{resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(78,33,112,.12)
}
.form-field--checkbox{display:flex;align-items:flex-start;gap:10px;margin-top:22px}
.form-field--checkbox input{margin-top:4px;width:auto}
.form-field--checkbox label{font-weight:500;font-size:.9rem;color:var(--slate);margin-bottom:0}
.contact-form button[type="submit"]{margin-top:26px;border:0;cursor:pointer}

/* ---------- contact CTA (dark panel + white card) ---------- */
.contact-cta{
  background:linear-gradient(112deg,var(--plum-deep) 0%,var(--plum) 60%,var(--plum-mid) 100%);
  color:#fff;
}
.contact-cta-grid{display:grid;gap:40px;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.contact-cta-grid{grid-template-columns:1fr 1.05fr;align-items:center;gap:56px}}
.contact-cta-copy .eyebrow{color:var(--gold-bright)}
.contact-cta-copy h2{color:#fff;max-width:16ch}
.contact-cta-copy h2 .accent-gold{color:var(--gold-bright)}
.contact-cta-copy .lead{color:#E0D1EC;max-width:46ch}
.contact-cta-phone{margin-top:22px}
.contact-cta-phone a{font-size:1.7rem;font-weight:700;color:var(--gold-bright);text-decoration:none;letter-spacing:-.01em}
.contact-cta-phone a:hover{text-decoration:underline}
.contact-cta-note{margin-top:8px;color:#C9B3DA;font-size:.88rem}

.contact-cta-card{
  background:#fff;color:var(--ink);border-radius:10px;
  padding:clamp(24px,3vw,36px);box-shadow:0 18px 50px rgba(15,4,26,.35);
}
.contact-cta-card h3{color:var(--plum-deep);font-size:1.25rem}
.contact-cta-card-note{color:var(--slate);font-size:.85rem;margin-top:4px}
.contact-cta-card-note--bottom{margin-top:12px;text-align:center}
.contact-cta-card .contact-form{margin-top:24px}
.contact-cta-submit{width:100%;text-align:center;font-size:1.02rem;padding:15px 26px}
@media(max-width:640px){.contact-cta-card{padding:22px}}

/* ---------- footer ---------- */
footer.site{background:var(--plum-deep);color:#BCA6CE;font-size:.91rem;padding:48px 0 26px}
footer.site .cols{display:grid;gap:32px;grid-template-columns:1fr}
footer.site .foot-heading{color:#fff;font-size:.93rem;margin-bottom:12px;font-weight:600}
footer.site a{color:#D6C4E4;text-decoration:none;display:block;padding:4px 0}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .brand{font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:-.03em;margin-bottom:10px}
footer.site .brand span{color:var(--gold-bright)}
.footer-location{margin-top:16px}
.footer-location-name{color:#fff;font-size:.83rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.footer-location-address{color:#BCA6CE;margin-bottom:2px}
.footer-location-phone{font-size:.85rem}
.footer-location-phone a{display:inline;padding:0}
.legal{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:.83rem;display:flex;flex-direction:column;gap:10px}
.legal-row{display:flex;flex-direction:column;gap:8px}
.legal-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.legal-links a{display:inline;padding:0;color:#D6C4E4;text-decoration:none}
.legal-links a:hover{color:#fff;text-decoration:underline}
@media(min-width:760px){.legal-row{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:20px}}
@media(min-width:760px){footer.site .cols{grid-template-columns:2fr 1fr 1fr 1fr}}

a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px}

/* ---------- visually-hidden text (screen-reader-only, e.g. descriptive link suffixes) ---------- */
.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 (keyboard-only bypass of header/nav) ---------- */
.skip-link{
  position:absolute;left:0;top:0;transform:translateY(-120%);
  background:var(--plum);color:#fff;padding:12px 20px;z-index:1000;
  font-weight:600;text-decoration:none;border-radius:0 0 4px 0;
  transition:transform .15s ease
}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--gold-bright);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}