/* SEE Change Happen – connect pages */
:root{
  --violet:#3A1A6E; --ink:#2A0F55; --muted:#5A4A78; --line:#E3DAF0; --paper:#FBF8F4;
  --orange:#F7931E; --teal:#1FC2B0; --pink:#E0409F; --gold:#FFB547; --mint:#7FE6DA;
  --accent:#C0268F; --cta:#0E8074;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Figtree',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.4}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:480px;margin:0 auto;background:var(--paper);min-height:100vh;display:flex;flex-direction:column}
@media (min-width:520px){body{background:#ECE6F4}.wrap{box-shadow:0 0 0 1px var(--line),0 20px 60px rgba(42,15,85,.12)}}

/* Header */
.hero{position:relative;overflow:hidden;background:var(--violet);color:#fff;padding:40px 24px 32px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;opacity:.9}
.hero::before{width:170px;height:170px;right:-60px;top:-60px;background:var(--orange)}
.hero::after{width:110px;height:110px;left:-50px;top:150px;background:var(--pink)}
.hero>*{position:relative;z-index:1}
.photo{width:136px;height:136px;border-radius:50%;border:5px solid var(--teal);background:#F3EEF9;object-fit:cover;display:flex;align-items:center;justify-content:center;color:var(--violet);font-size:12px;font-weight:800;letter-spacing:1px}
.sig{width:230px;height:auto;margin-top:18px}
.hero h1{margin:6px 0 0;font-size:32px;font-weight:800;line-height:1.1}
.role{margin-top:6px;font-size:13px;font-weight:800;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase}
.sub{margin-top:4px;font-size:15px;font-weight:600}
.pronouns{margin-top:12px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:1.2px}
.pronouns svg{width:22px;height:14px}
.creds{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.creds span{padding:4px 10px;border-radius:20px;border:1.5px solid rgba(255,255,255,.55);font-size:11px;font-weight:800;letter-spacing:1px}
.motto{margin-top:12px;font-size:13px;font-weight:800;letter-spacing:1.4px;color:var(--mint)}
.stripe{height:8px;display:flex}.stripe i{flex:1}.stripe i:nth-child(1){background:var(--orange)}.stripe i:nth-child(2){background:var(--teal)}.stripe i:nth-child(3){background:var(--pink)}

/* Sections */
section{padding:24px 20px 8px;display:flex;flex-direction:column;gap:10px}
section:last-of-type{padding-bottom:32px}
h2{margin:0 0 2px;font-size:13px;font-weight:800;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase}
.btn{border-radius:var(--radius);background:#fff;border:1.5px solid var(--line);display:flex;align-items:center;gap:12px;font-weight:800;transition:border-color .15s,transform .15s}
.btn:hover,.btn:focus-visible{border-color:var(--accent);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn svg{flex:none}
.save{height:58px;justify-content:center;gap:10px;background:var(--cta);border-color:var(--cta);color:#fff;font-size:17px}
.save:hover,.save:focus-visible{border-color:var(--ink)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{height:60px;justify-content:center;gap:8px;font-size:16px}
.tile svg{stroke:var(--accent)}
.row{min-height:56px;padding:12px 18px;font-size:16px}
.row svg{stroke:var(--violet)}
/* Social links: compact 4-up boxes, personal first then company */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.soc{height:74px;flex-direction:column;justify-content:center;gap:6px;padding:8px 4px;font-size:12px;letter-spacing:.2px}
.soc svg{stroke:var(--accent)}
.soc.co svg{stroke:var(--violet)}
.soc span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:64px;padding:10px 14px}
.site .t{font-size:14px;line-height:1.2;white-space:nowrap}
.site .d{font-size:12px;font-weight:600;color:var(--muted)}
/* An odd box out at the end of a 2-up grid spans both columns, so it reads as intended */
.grid2 > .site:last-child:nth-child(odd){grid-column:1/-1}
.card{padding:16px 18px}
.card .txt{flex:1;display:flex;flex-direction:column;gap:3px}
.card .t{font-size:17px}
.card .d{font-size:14px;font-weight:400;color:var(--muted)}
.card .go{stroke:var(--cta)}
.feature{background:var(--accent);border-color:var(--accent);color:#fff}
.feature .d{color:#fff;opacity:.92}
.feature .go{stroke:#fff}
.feature:hover,.feature:focus-visible{border-color:var(--ink)}
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.services div{height:92px;border-radius:var(--radius);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:1px}
.services div:nth-child(1){background:var(--orange)}.services div:nth-child(2){background:var(--teal)}.services div:nth-child(3){background:var(--pink)}

/* Footer */
footer{flex-grow:1;background:var(--violet);color:#fff;padding:32px 24px 40px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
footer img{width:170px}
footer .tag{font-size:14px;font-weight:800;color:var(--mint)}
footer .bars{display:flex;gap:4px;margin-top:6px}
footer .bars i{width:28px;height:4px;border-radius:2px}
footer .bars i:nth-child(1){background:var(--orange)}footer .bars i:nth-child(2){background:var(--teal)}footer .bars i:nth-child(3){background:var(--pink)}
footer small{font-size:12px;opacity:.8;margin-top:8px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}