/* ==========================================================================
   WOLF CROSKEY FOR PITTSBURG CITY COUNCIL 2026 — #DIFFERENT
   Custom design system. Hand-built. No framework, no template.
   Brand: #6b30c9 (purple) / #3a1670 (deep purple) / #ffffff / near-black
   Signature motifs: italic serif display (per logo), skewed "sign bar"
   highlight, offset drop-shadow lettering, diagonal section seams.
   ========================================================================== */

/* ---------- Fonts (self-hosted, subset, woff2 only) ---------- */
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-900-italic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-700-italic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --purple:#6b30c9;
  --purple-deep:#3a1670;
  --purple-ink:#241046;          /* darkest — hero shadows, footer */
  --purple-tint:#f4effc;         /* section wash */
  --purple-mid:#8b5cf6;          /* hover/accents on dark */
  --paper:#faf8f5;               /* warm off-white, from logo plate */
  --white:#ffffff;
  --ink:#1a0f26;                 /* body text, near-black w/ purple cast */
  --ink-soft:#4b3a63;
  --ok:#1a7f4e;
  --err:#b3261e;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --skew:-8deg;
  --maxw:72rem;
  --radius:.375rem;
  --shadow:0 .25rem 1.5rem rgba(58,22,112,.14);
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--paper)}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;margin:0 0 .5em;color:var(--purple-deep);text-wrap:balance}
h1{font-size:clamp(2.4rem,6.5vw,4.25rem);font-style:italic;font-weight:900}
h2{font-size:clamp(1.8rem,4vw,2.75rem);font-style:italic}
h3{font-size:clamp(1.25rem,2.5vw,1.6rem)}
p{margin:0 0 1em}
a{color:var(--purple);text-underline-offset:.15em}
a:hover{color:var(--purple-deep)}
strong{color:var(--purple-deep)}
ul{padding-left:1.2em}
::selection{background:var(--purple);color:#fff}

/* Accessibility */
.skip-link{position:absolute;left:-999px;top:0;background:var(--purple-deep);color:#fff;padding:.75rem 1.25rem;z-index:200;font-weight:700}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:2px}
.header :focus-visible,.on-dark :focus-visible{outline-color:#fff}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Signature motifs ---------- */
/* The "sign bar": white skewed plate, straight text inside (like the logo) */
.signbar{display:inline-block;background:var(--white);color:var(--ink);padding:.12em .5em;transform:skewX(var(--skew));box-shadow:.35rem .35rem 0 var(--purple-ink)}
.signbar>span{display:inline-block;transform:skewX(calc(var(--skew) * -1))}
.signbar--purple{background:var(--purple);color:#fff}
/* Offset shadow lettering (like WOLF in the logo) */
.shadowed{color:#fff;text-shadow:.045em .045em 0 var(--purple-ink)}
/* Skewed kicker chip above headings */
.kicker{display:inline-block;font-family:var(--body);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;background:var(--purple-deep);color:#fff;padding:.35em .9em;transform:skewX(var(--skew));margin-bottom:1rem}
.kicker>span{display:inline-block;transform:skewX(calc(var(--skew) * -1))}
.on-tint .kicker{background:var(--purple)}
/* Diagonal seam between sections */
.seam{height:3.5rem;background:linear-gradient(to bottom right,transparent 49.6%,var(--purple-deep) 50%)}
.seam--up{background:linear-gradient(to top right,transparent 49.6%,var(--purple-deep) 50%)}
.seam--tint{background:linear-gradient(to bottom right,transparent 49.6%,var(--purple-tint) 50%)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
.section{padding:4rem 0}
.section--tint{background:var(--purple-tint)}
.section--dark{background:var(--purple-deep);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark a{color:#d9c8ff}
.grid{display:grid;gap:1.5rem}
@media(min-width:44rem){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ---------- Header ---------- */
.header{background:var(--purple);color:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(36,16,70,.35)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;font-family:var(--display);font-style:italic;font-weight:900;font-size:1.35rem;line-height:1}
.brand img{width:2.4rem;height:2.4rem}
.brand .b-plate{background:var(--white);color:var(--ink);padding:.06em .35em;transform:skewX(var(--skew));display:inline-block}
.brand .b-plate span{display:inline-block;transform:skewX(8deg)}
.nav{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;padding:.5rem .65rem;border-radius:var(--radius)}
.nav a:hover,.nav a:focus-visible{background:rgba(255,255,255,.16);color:#fff}
.nav a[aria-current="page"]{background:var(--purple-deep)}
.nav .nav-cta{background:#fff;color:var(--purple-deep);font-weight:800;transform:skewX(var(--skew));margin-left:.35rem}
.nav .nav-cta span{display:inline-block;transform:skewX(8deg)}
.nav .nav-cta:hover{background:var(--paper);color:var(--purple)}
.nav-toggle{display:none;background:none;border:2px solid #fff;color:#fff;border-radius:var(--radius);padding:.45rem .7rem;font-size:1rem;font-weight:700;cursor:pointer}
@media(max-width:56rem){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--purple-deep);flex-direction:column;align-items:stretch;padding:.75rem;gap:.15rem}
  .nav.open{display:flex}
  .nav a{padding:.85rem 1rem;font-size:1.05rem}
  .nav .nav-cta{margin:. 5rem 0 0;text-align:center}
}
.lang-switch{position:relative}
.lang-switch summary{list-style:none;cursor:pointer;color:#fff;font-weight:700;padding:.5rem .65rem;border-radius:var(--radius);display:flex;align-items:center;gap:.3rem}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch summary:hover{background:rgba(255,255,255,.16)}
.lang-switch[open] summary{background:var(--purple-deep)}
.lang-menu{position:absolute;right:0;top:100%;background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);min-width:11rem;padding:.4rem;z-index:60}
.lang-menu a{display:block;padding:.55rem .8rem;text-decoration:none;color:var(--ink);border-radius:.25rem;font-size:.95rem}
.lang-menu a:hover{background:var(--purple-tint);color:var(--purple-deep)}
@media(max-width:56rem){.lang-switch{order:-1}.lang-menu{right:auto;left:0}}

/* ---------- Hero ---------- */
.hero{background:var(--purple);color:#fff;overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:var(--purple-ink);clip-path:polygon(0 62%,100% 12%,100% 100%,0 100%);opacity:.5;pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-top:4.5rem;padding-bottom:5.5rem}
.hero-name{font-family:var(--display);font-style:italic;font-weight:900;line-height:.95;margin:0}
.hero-name .first{display:block;font-size:clamp(3.2rem,11vw,7rem);color:#fff;text-shadow:.045em .045em 0 var(--purple-ink)}
.hero-name .last{display:inline-block;background:var(--white);color:var(--ink);font-size:clamp(2.2rem,7.5vw,4.6rem);padding:.1em .45em;transform:skewX(var(--skew));box-shadow:.5rem .5rem 0 var(--purple-ink);margin-top:.18em}
.hero-name .last span{display:inline-block;transform:skewX(8deg)}
.hero-tag{font-family:var(--display);font-style:italic;font-weight:700;font-size:clamp(1.1rem,2.6vw,1.6rem);letter-spacing:.06em;margin:1.4rem 0 .4rem}
.hero-sub{font-size:clamp(1.05rem,2.2vw,1.35rem);max-width:38em;margin:.75rem 0 2rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem}
.hero-count{margin-top:2.25rem;font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:#e5d9ff}
.hero-count strong{color:#fff;font-size:1.2em}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-weight:800;font-size:1.05rem;text-decoration:none;padding:.8rem 1.6rem;transform:skewX(var(--skew));border:3px solid transparent;cursor:pointer;font-family:var(--body);line-height:1.2}
.btn>span{display:inline-block;transform:skewX(8deg)}
.btn-solid{background:var(--white);color:var(--purple-deep);box-shadow:.4rem .4rem 0 var(--purple-ink)}
.btn-solid:hover{background:var(--paper);color:var(--purple);translate:0 -2px}
.btn-purple{background:var(--purple);color:#fff;box-shadow:.4rem .4rem 0 var(--purple-ink)}
.btn-purple:hover{background:var(--purple-deep);color:#fff;translate:0 -2px}
.btn-ghost{border-color:#fff;color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.15);color:#fff}
.btn-ghost-purple{border-color:var(--purple);color:var(--purple);background:transparent}
.btn-ghost-purple:hover{background:var(--purple-tint)}
.btn:active{translate:.15rem .15rem;box-shadow:.25rem .25rem 0 var(--purple-ink)}

/* ---------- Receipts ticker ---------- */
.ticker{background:var(--purple-ink);color:#fff;overflow:hidden;padding:.7rem 0;border-top:3px solid var(--purple);border-bottom:3px solid var(--purple)}
.ticker-track{display:flex;gap:3.5rem;white-space:nowrap;animation:tick 42s linear infinite;width:max-content}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-track span{font-weight:700;font-size:.95rem}
.ticker-track b{color:#cdb4ff}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;white-space:normal;width:auto;padding:0 1.25rem}}

/* ---------- Cards ---------- */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.75rem;border-top:5px solid var(--purple)}
.section--dark .card{background:rgba(255,255,255,.07);border-top-color:var(--purple-mid);color:#fff}
.card h3{margin-top:0}
.pillar-num{font-family:var(--display);font-style:italic;font-weight:900;font-size:2.6rem;color:var(--purple);line-height:1;margin-bottom:.35rem}

/* ---------- Purple story ---------- */
.story-swatches{display:flex;gap:.75rem;margin:1.25rem 0;flex-wrap:wrap}
.swatch{width:3.4rem;height:3.4rem;border-radius:50%;border:3px solid #fff;box-shadow:var(--shadow);transform:rotate(-4deg)}
.swatch--black{background:#111}
.swatch--orange{background:#f97316}
.swatch--red{background:#d63c3c}
.swatch--blue{background:#2b5fd9}
.swatch--purple{background:var(--purple);width:4.4rem;height:4.4rem}
.story-plus{align-self:center;font-family:var(--display);font-weight:900;font-size:1.6rem;color:var(--purple-deep)}

/* ---------- Events ---------- */
.event{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;align-items:center;border-left:6px solid var(--purple)}
.event-date{text-align:center;font-family:var(--display);min-width:4.6rem;background:var(--purple-tint);border-radius:var(--radius);padding:.6rem .4rem}
.event-date .d{font-size:1.9rem;font-weight:900;font-style:italic;color:var(--purple);line-height:1}
.event-date .m{font-family:var(--body);font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;color:var(--purple-deep)}
.event h3{margin:0 0 .2rem}
.event p{margin:0;color:var(--ink-soft);font-size:.98rem}
.empty-state{background:#fff;border:2px dashed var(--purple);border-radius:var(--radius);padding:2rem;text-align:center;color:var(--ink-soft)}
.section--dark .empty-state,{background:transparent;color:#e7ddfa}

/* ---------- Endorsement wall ---------- */
.wall{columns:1;column-gap:1.5rem}
@media(min-width:44rem){.wall{columns:2}}
@media(min-width:64rem){.wall{columns:3}}
.tcard{break-inside:avoid;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin:0 0 1.5rem;border-top:5px solid var(--purple)}
.tcard figure{margin:0}
.tcard img{width:4.25rem;height:4.25rem;object-fit:cover;border-radius:50%;border:3px solid var(--purple-tint)}
.tcard blockquote{margin:.9rem 0;font-family:var(--display);font-style:italic;font-size:1.12rem;line-height:1.45;color:var(--purple-deep)}
.tcard figcaption{font-weight:700}
.tcard .t-city{color:var(--ink-soft);font-weight:400;font-size:.9rem;display:block}

/* ---------- Forms ---------- */
.form-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;border-top:6px solid var(--purple)}
.field{margin-bottom:1.15rem}
label{display:block;font-weight:700;margin-bottom:.3rem;color:var(--purple-deep)}
label .opt{font-weight:400;color:var(--ink-soft);font-size:.9rem}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{width:100%;padding:.75rem .9rem;font:inherit;border:2px solid #cbbfe2;border-radius:var(--radius);background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--purple);outline:2px solid var(--purple);outline-offset:1px}
textarea{min-height:7.5rem;resize:vertical}
.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;margin-bottom:.6rem}
.check input{width:1.25rem;height:1.25rem;margin-top:.2rem;flex:none;accent-color:var(--purple)}
.hint{font-size:.9rem;color:var(--ink-soft);margin-top:.3rem}
.form-msg{padding:1rem 1.25rem;border-radius:var(--radius);font-weight:600;margin-top:1rem}
.form-msg.ok{background:#e7f6ee;color:var(--ok);border:2px solid var(--ok)}
.form-msg.err{background:#fdeceb;color:var(--err);border:2px solid var(--err)}
.req-note{font-size:.9rem;color:var(--ink-soft)}
/* honeypot */
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
fieldset{border:2px solid var(--purple-tint);border-radius:var(--radius);padding:1rem 1.25rem;margin:0 0 1.15rem}
legend{font-weight:800;color:var(--purple-deep);padding:0 .5rem}

/* ---------- Video facades ---------- */
.yt{position:relative;aspect-ratio:16/9;background:var(--purple-ink);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;border:0;padding:0;width:100%;display:block}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.85}
.yt::after{content:"";position:absolute;inset:0;margin:auto;width:4.5rem;height:3.2rem;background:var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/1.9rem no-repeat;border-radius:.6rem;box-shadow:.3rem .3rem 0 var(--purple-ink);transform:skewX(var(--skew))}
.yt:hover::after,.yt:focus-visible::after{background-color:var(--purple-deep)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Photo gallery ---------- */
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
.gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding:.6rem .9rem;font-size:.9rem;color:var(--ink-soft)}
.ph-placeholder{aspect-ratio:4/3;display:grid;place-items:center;background:repeating-linear-gradient(-45deg,var(--purple-tint),var(--purple-tint) 12px,#ece2fa 12px,#ece2fa 24px);color:var(--purple-deep);font-weight:700;text-align:center;padding:1rem}

/* ---------- Donate ---------- */
.limit-box{background:var(--purple-tint);border-left:6px solid var(--purple);padding:1.25rem 1.5rem;border-radius:var(--radius);font-size:.95rem}
.donate-amounts{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}
.donate-amounts .btn{font-size:1.15rem}

/* ---------- Record page ---------- */
.record-item{border-left:4px solid var(--purple);padding:.25rem 0 .25rem 1.4rem;margin-bottom:2rem}
.record-item h3{margin-bottom:.25rem}
.record-item .years{font-weight:700;color:var(--purple);font-size:.95rem;letter-spacing:.03em}

/* ---------- Footer ---------- */
.footer{background:var(--purple-ink);color:#e7ddfa;padding:3.5rem 0 2rem;font-size:.95rem}
.footer a{color:#fff}
.footer h3{color:#fff;font-size:1.05rem;font-family:var(--body);font-style:normal;text-transform:uppercase;letter-spacing:.1em}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.5rem}
.fppc{margin-top:2.5rem;padding:1rem 1.25rem;border:2px solid var(--purple);border-radius:var(--radius);text-align:center;font-weight:700;color:#fff;background:rgba(107,48,201,.18)}
.footer-base{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.15);padding-top:1.25rem}
.socials{display:flex;gap:.9rem}
.socials a{display:grid;place-items:center;width:2.6rem;height:2.6rem;background:var(--purple);border-radius:50%}
.socials a:hover{background:var(--purple-mid)}
.socials svg{width:1.3rem;height:1.3rem;fill:#fff}

/* ---------- CTA band ---------- */
.cta-band{background:var(--purple);color:#fff;text-align:center;padding:4rem 1rem}
.cta-band h2{color:#fff;font-size:clamp(2rem,5vw,3.2rem)}
.cta-band .hero-ctas{justify-content:center;margin-top:1.75rem}

/* ---------- Utilities ---------- */
.lead{font-size:1.2rem;color:var(--ink-soft)}
.center{text-align:center}
.mt-2{margin-top:2rem}
.mb-0{margin-bottom:0}
.pill-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
.pill{background:var(--purple-tint);color:var(--purple-deep);font-weight:700;font-size:.85rem;padding:.3em .9em;border-radius:99px}

/* ---------- RTL (Farsi) ---------- */
[dir="rtl"] .signbar,[dir="rtl"] .kicker,[dir="rtl"] .btn,[dir="rtl"] .hero-name .last{transform:skewX(8deg)}
[dir="rtl"] .signbar>span,[dir="rtl"] .kicker>span,[dir="rtl"] .btn>span,[dir="rtl"] .hero-name .last span{transform:skewX(var(--skew))}
[dir="rtl"] .event{border-left:0;border-right:6px solid var(--purple)}
[dir="rtl"] .record-item{border-left:0;border-right:4px solid var(--purple);padding:.25rem 1.4rem .25rem 0}

/* ---------- Print ---------- */
@media print{
  .header,.footer,.hero-ctas,.ticker,.nav,.btn,.seam{display:none!important}
  body{background:#fff;color:#000}
  a::after{content:" (" attr(href) ")";font-size:.85em}
}

/* ==========================================================================
   V2 ELEVATION LAYER — texture, depth, typographic drama
   ========================================================================== */

/* Grain + hatch textures (tiny inline SVGs, zero requests) */
:root{
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
body{background-image:var(--noise);background-attachment:fixed}

/* Hero: layered light, diagonal energy, ghost tag wall */
.hero{background:
  radial-gradient(120% 90% at 18% 8%, #7d43dd 0%, var(--purple) 46%, #5c25b4 100%)}
.hero::before{content:"#DIFFERENT #DIFFERENT #DIFFERENT #DIFFERENT #DIFFERENT #DIFFERENT #DIFFERENT #DIFFERENT #DIFFERENT";
  position:absolute;inset:-2rem -5vw auto;transform:rotate(-8deg);
  font-family:var(--display);font-style:italic;font-weight:900;
  font-size:clamp(4rem,9vw,7.5rem);line-height:1.06;color:rgba(255,255,255,.045);
  white-space:normal;word-break:break-word;pointer-events:none;user-select:none}
.hero::after{background:var(--purple-ink);opacity:.55;
  background-image:repeating-linear-gradient(-35deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px)}
.hero .wrap{isolation:isolate}
.hero-name .last{box-shadow:.5rem .5rem 0 var(--purple-ink), .5rem .5rem 0 3px rgba(255,255,255,.25)}

/* Dark sections + ticker: hatch texture and edge glow */
.section--dark,.ticker{background-image:repeating-linear-gradient(-35deg,rgba(255,255,255,.035) 0 2px,transparent 2px 16px)}
.section--dark{background-color:var(--purple-deep);position:relative;overflow:hidden}
.section--dark::after{content:"";position:absolute;right:-8rem;top:-8rem;width:26rem;height:26rem;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.35),transparent 65%);pointer-events:none}

/* Tint sections get a faint mega-W typographic watermark */
.section--tint{position:relative;overflow:hidden}
.section--tint::before{content:"W";position:absolute;right:-4rem;bottom:-14rem;
  font-family:var(--display);font-style:italic;font-weight:900;font-size:42rem;line-height:1;
  color:rgba(107,48,201,.055);pointer-events:none;user-select:none}
.section--tint>.wrap{position:relative}

/* Bigger, tighter display type */
h2{font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:-.01em}
.lead{font-size:1.25rem}

/* Cards: gradient rule, lift, numbered depth */
.card{transition:transform .18s ease,box-shadow .18s ease;position:relative;overflow:hidden;
  border-top:0;box-shadow:0 .25rem 1.5rem rgba(58,22,112,.14),inset 0 5px 0 var(--purple)}
.card::before{content:"";position:absolute;inset:0 0 auto;height:5px;
  background:linear-gradient(90deg,var(--purple),var(--purple-mid) 60%,var(--purple-deep))}
.card:hover{transform:translateY(-4px);box-shadow:0 .9rem 2.2rem rgba(58,22,112,.22),inset 0 5px 0 var(--purple)}
.pillar-num{font-size:4.2rem;opacity:.92;
  background:linear-gradient(180deg,var(--purple) 30%,var(--purple-mid));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Buttons: sheen sweep */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-12deg);transition:left .35s ease}
.btn:hover::after{left:115%}

/* #DIFFERENT marquee divider band */
.diff-band{background:var(--purple-ink);color:#fff;overflow:hidden;padding:.55rem 0;
  border-top:3px solid var(--purple);border-bottom:3px solid var(--purple)}
.diff-track{display:flex;gap:2.6rem;width:max-content;white-space:nowrap;animation:tick 30s linear infinite;
  font-family:var(--display);font-style:italic;font-weight:900;font-size:1.15rem;letter-spacing:.08em}
.diff-track span:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55)}
@media (prefers-reduced-motion:reduce){.diff-track{animation:none}}

/* Photo slots: brand-duotone treatment, auto-applies when real photos land */
.gallery img{filter:contrast(1.06) saturate(1.05);transition:transform .25s ease,filter .25s ease}
.gallery figure{position:relative}
.gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(107,48,201,.18),transparent 55%);
  pointer-events:none;mix-blend-mode:multiply}
.gallery figure:hover img{transform:scale(1.04)}
.ph-placeholder{background:
  repeating-linear-gradient(-45deg,rgba(107,48,201,.12) 0 14px,rgba(107,48,201,.05) 14px 28px),
  radial-gradient(120% 120% at 20% 10%,#efe6fb,#e2d3f7)}

/* Endorsement cards: display-quote mark */
.tcard{position:relative}
.tcard::before{content:"“";position:absolute;top:-.4rem;right:.9rem;font-family:var(--display);font-style:italic;
  font-weight:900;font-size:5rem;line-height:1;color:rgba(107,48,201,.16);pointer-events:none}

/* Scroll reveal (JS adds .rv; motion-safe only) */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
  .rv.rv-in{opacity:1;transform:none}
}

/* CTA band: depth */
.cta-band{background:
  radial-gradient(90% 130% at 50% -20%, #7d43dd, var(--purple) 55%, #5c25b4),
  var(--purple)}