/* ==========================================================================
   Placement Review — Brand palette (Branding Palette.pdf, Placement Review row)
   660e60 · 893f71 · ac6f82 · cfa093 · f3d0a4
   ========================================================================== */

:root {
  --plum-deep:  #660E60;          /* deepest navy — headings, dark backgrounds */
  --plum:       #893F71;          /* medium blue — primary CTA / accent */
  --plum-soft:  #AC6F82;          /* light blue — secondary accent */
  --plum-hover: #4A0A45;          /* derived darker for hover */
  --warm:     #CFA093;          /* golden yellow — highlight/accent complement */
  --warm-soft:#F3D0A4;          /* lighter yellow for subtle accents */
  --warm-deep:#AC6F82;          /* deeper yellow for hover states */

  /* legacy variable names kept so the rest of the stylesheet didn't have to
     be rewritten — they now resolve to the blue palette */
  --navy:       var(--plum-deep);
  --navy-deep:  var(--plum-deep);
  --navy-soft:  var(--plum);
  --accent:     var(--plum);
  --accent-hover:var(--plum-deep);
  --teal:       var(--plum-soft);


  --bg:         #FBF7FA;
  --surface:    #FFFFFF;
  --surface-2:  #F4ECF1;
  --text:       #2E1B2B;          /* deep navy for body */
  --text-muted: #6B5563;
  --border:     #E6D8E1;
  --border-strong:#C9AEBF;

  --shadow-sm:  0 1px 2px rgba(102,14,96,.06), 0 1px 3px rgba(102,14,96,.04);
  --shadow-md:  0 6px 24px rgba(102,14,96,.10), 0 2px 6px rgba(102,14,96,.06);
  --shadow-lg:  0 24px 60px rgba(102,14,96,.16), 0 8px 24px rgba(102,14,96,.08);

  --radius:     14px;
  --radius-sm:  10px;
  --radius-lg:  20px;
  --maxw:       1180px;
  --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Charter", Georgia, serif;
}

/* Reset --------------------------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--plum-deep);text-decoration:none}
a:hover{color:var(--plum)}
button{font-family:inherit;cursor:pointer}

/* Typography ---------------------------------------------------------------*/
h1,h2,h3,h4{
  font-family:var(--font);
  color:var(--plum-deep);
  line-height:1.15;
  letter-spacing:-0.02em;
  margin:0 0 .6em;
  font-weight:700;
}
h1{font-size:clamp(2.2rem, 4.6vw, 3.8rem)}
h2{font-size:clamp(1.7rem, 3vw, 2.4rem);letter-spacing:-0.015em}
h3{font-size:1.25rem;letter-spacing:-0.01em}
h4{font-size:1rem;letter-spacing:0}
p{margin:0 0 1em}
.eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--plum);
  background:rgba(137,63,113,.10);
  border:1px solid rgba(137,63,113,.25);
  padding:.35em .85em;
  border-radius:999px;
  margin-bottom:1.25rem;
}
.lead{font-size:1.15rem;color:var(--text-muted);max-width:62ch}

/* Layout -------------------------------------------------------------------*/
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}
section{padding:80px 0}
section.tight{padding:56px 0}

/* ==========================================================================
   NAV
   ========================================================================== */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,250,.88);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex;align-items:center;gap:32px;
  height:144px;
}
.nav-brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--plum-deep);font-size:1.05rem}
.nav-brand img{height:88px;width:auto;display:block}
.nav-links{
  display:flex;align-items:center;gap:6px;margin-left:auto;
  list-style:none;padding:0;margin:0 0 0 auto;
}
.nav-links > li{position:relative}
.nav-links a{
  display:inline-block;
  padding:8px 14px;
  font-size:.95rem;font-weight:500;
  color:var(--plum-deep);
  border-radius:8px;
  transition:background .2s, color .2s;
}
.nav-links a:hover{background:var(--surface-2);color:var(--plum)}
.nav-links a.active{color:var(--plum)}
.nav-dropdown > a::after{
  content:"";display:inline-block;
  width:7px;height:7px;margin-left:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.nav-dropdown:hover .submenu,
.nav-dropdown:focus-within .submenu{display:block}
.submenu{
  display:none;
  position:absolute;top:calc(100% + 4px);left:0;min-width:220px;
  list-style:none;padding:8px;margin:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-md);
}
.submenu a{display:block;padding:8px 12px;border-radius:8px;font-size:.92rem}
.nav-cta{margin-left:6px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;
  font-size:.95rem;font-weight:600;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
  white-space:nowrap;cursor:pointer;
}
/* Primary / register buttons — explicit white text in every link state */
.btn-primary,
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited{
  background:var(--plum);
  color:#FFFFFF;
  box-shadow:0 4px 14px rgba(137,63,113,.35);
}
.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:focus,
.btn-primary:focus-visible,
a.btn-primary:focus-visible,
.btn-primary:active,
a.btn-primary:active{
  background:var(--plum-deep);
  color:#FFFFFF;
  transform:translateY(-1px);
}
.btn-secondary{
  background:transparent;color:var(--plum-deep);border-color:var(--border-strong);
}
.btn-secondary:hover{background:var(--surface-2);color:var(--plum)}
.btn-dark{background:var(--plum-deep);color:#fff}
.btn-dark:hover{background:var(--plum);color:#fff}
.btn-lg{padding:14px 28px;font-size:1rem}

.mobile-toggle{
  display:none;background:none;border:0;padding:10px;margin-left:auto;
}
.mobile-toggle span{
  display:block;width:22px;height:2px;background:var(--plum-deep);margin:4px 0;
  transition:transform .2s, opacity .2s;
}

@media (max-width:980px){
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:0 16px;gap:2px;
    max-height:0;overflow:hidden;
    transition:max-height .3s ease, padding .3s ease;
  }
  .nav-links.open{max-height:80vh;overflow-y:auto;padding:12px 16px 20px}
  .nav-links a{padding:12px 14px}
  .submenu{position:static;display:block;box-shadow:none;border:0;background:transparent;padding-left:14px}
  .mobile-toggle{display:block}
  .nav-cta{margin:8px 0 0}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding:100px 0 80px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(172,111,130,.14), transparent 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(137,63,113,.12), transparent 65%),
    var(--bg);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:60px;align-items:center;
}
.hero h1{margin-bottom:.5em}
/* "with confidence" highlight — golden yellow per brand direction */
.hero h1 .hl{
  color:var(--warm-deep);
}
.hero .lead{font-size:1.2rem;margin-bottom:1.8em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:2.2em}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:18px 28px;
  font-size:.92rem;color:var(--text-muted);
}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust .dot{
  width:6px;height:6px;border-radius:50%;background:var(--warm);
  box-shadow:0 0 0 4px rgba(207,160,147,.20);
}

.hero-visual{position:relative}
.device-stack{position:relative;aspect-ratio: 5 / 4}
.device-card{
  position:absolute;
  background:var(--surface);
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.device-card.main{top:0;left:0;right:8%;bottom:14%}
.device-card.float{right:0;bottom:0;width:42%;box-shadow:var(--shadow-lg)}
.device-head{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.device-head i{width:10px;height:10px;border-radius:50%;background:#DECBD6;display:inline-block}
.device-head i:nth-child(1){background:var(--plum)}
.device-head i:nth-child(2){background:var(--warm)}
.device-head i:nth-child(3){background:var(--plum-deep)}
.device-body{padding:16px;height:calc(100% - 38px);overflow:hidden}

/* shared mini-UI building blocks */
.mini-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px}
.mini-row + .mini-row{margin-top:6px}
.mini-row.alt{background:var(--surface-2)}
.mini-pill{
  display:inline-block;font-size:.72rem;font-weight:600;
  padding:3px 8px;border-radius:999px;
  background:rgba(172,111,130,.20);color:var(--plum-deep);
}
.mini-pill.warn{background:rgba(207,160,147,.22);color:#7A3A28}
.mini-pill.ok{background:rgba(102,14,96,.10);color:var(--plum-deep)}
.mini-bar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;flex:1}
.mini-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--plum-soft),var(--plum-deep))}
.mini-title{font-weight:700;color:var(--plum-deep);font-size:.95rem;margin-bottom:10px}
.mini-sub{font-size:.78rem;color:var(--text-muted)}
.mini-label{font-size:.84rem;color:var(--plum-deep);font-weight:500;flex:1}

@media (max-width:900px){
  .hero{padding:64px 0 40px}
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .device-stack{max-width:520px;margin:0 auto}
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust-strip{
  background:var(--plum-deep);color:#EBD9E4;
  padding:24px 0;
}
.trust-strip .container{
  display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:center;text-align:center;
}
.trust-strip span{font-size:.92rem;letter-spacing:.02em;opacity:.92}
.trust-strip .sep{opacity:.35}

/* ==========================================================================
   FEATURE SHOWCASE (tabs)
   ========================================================================== */
.showcase h2{text-align:center}
.showcase .lead{margin:0 auto 40px;text-align:center}
.tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-bottom:36px;
}
.tabs button{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--plum-deep);
  padding:10px 18px;
  border-radius:999px;
  font-weight:500;font-size:.92rem;
  transition:all .18s;
}
.tabs button:hover{border-color:var(--border-strong);color:var(--plum)}
.tabs button[aria-selected="true"]{
  background:var(--plum-deep);color:#fff;border-color:var(--plum-deep);
}
.tab-panels{position:relative}
.tab-panel{display:none}
.tab-panel.active{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.tab-panel h3{font-size:1.5rem;margin-bottom:.4em}
.tab-panel ul{list-style:none;padding:0;margin:18px 0 0}
.tab-panel li{position:relative;padding:8px 0 8px 28px;color:var(--text)}
.tab-panel li::before{
  content:"";position:absolute;left:0;top:14px;
  width:14px;height:14px;border-radius:50%;
  background:rgba(137,63,113,.15);
  border:2px solid var(--plum);
}
.preview-frame{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.preview-frame .device-head{padding:12px 16px}
.preview-frame .device-body{padding:24px;height:auto;min-height:340px}

@media (max-width:840px){
  .tab-panel.active{grid-template-columns:1fr;gap:28px}
}

/* ==========================================================================
   PROBLEM / VALUE
   ========================================================================== */
.problem{
  background:var(--surface-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.problem-grid h2{margin-bottom:.6em}
.arrow-list{list-style:none;padding:0;margin:20px 0 0}
.arrow-list li{
  display:flex;gap:14px;padding:14px 18px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  margin-bottom:12px;
  font-size:1.02rem;
}
.arrow-list li::before{
  content:"→";color:var(--plum);font-weight:700;font-size:1.2rem;line-height:1.4;
}
@media (max-width:840px){.problem-grid{grid-template-columns:1fr;gap:24px}}

/* ==========================================================================
   AUDIENCE CARDS
   ========================================================================== */
.audience h2{text-align:center}
.audience .lead{margin:0 auto 48px;text-align:center}
.audience-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.audience-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 28px;
  display:flex;flex-direction:column;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.audience-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}
.audience-card .icon{
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(137,63,113,.10);color:var(--plum);
  margin-bottom:18px;
}
.audience-card.teal .icon{background:rgba(172,111,130,.15);color:var(--plum-soft)}
.audience-card.navy .icon{background:rgba(102,14,96,.08);color:var(--plum-deep)}
.audience-card h3{font-size:1.2rem;margin-bottom:.5em}
.audience-card ul{list-style:none;padding:0;margin:0 0 22px;font-size:.96rem;color:var(--text-muted)}
.audience-card li{padding:6px 0;position:relative;padding-left:22px}
.audience-card li::before{
  content:"✓";position:absolute;left:0;color:var(--plum);font-weight:700;
}
.audience-card .more{
  margin-top:auto;font-weight:600;color:var(--plum-deep);font-size:.95rem;
}
.audience-card .more:hover{color:var(--plum)}
@media (max-width:840px){.audience-grid{grid-template-columns:1fr}}

/* ==========================================================================
   PARTNERS
   ========================================================================== */
.partners{background:var(--bg)}
.partners h2{text-align:center;margin-bottom:.5em}
.partners .lead{margin:0 auto 36px;text-align:center}
.partner-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px;text-align:center;
}
.partner-card img{margin:0 auto;max-width:100%}
.partners-list{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px;
  margin-top:26px;
}
.partners-list a{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 12px;border:1px solid var(--border);background:var(--surface);
  border-radius:var(--radius-sm);
  font-weight:600;color:var(--plum-deep);font-size:.92rem;
  transition:all .18s;
}
.partners-list a:hover{border-color:var(--plum);color:var(--plum);transform:translateY(-2px)}
.partners-list small{font-weight:500;color:var(--text-muted);font-size:.74rem;text-align:center;letter-spacing:0}
@media (max-width:680px){.partners-list{grid-template-columns:repeat(2, 1fr)}}

/* ==========================================================================
   CALLOUT
   ========================================================================== */
.callout{
  background:var(--plum-deep);color:#E2CCDA;
  border-radius:var(--radius-lg);
  padding:48px 40px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
  margin:0 0 80px;
}
.callout h2{color:#fff}
.callout p{color:#D8BCCF}
.callout .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.callout .chips span{
  font-size:.85rem;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#EBD9E4;
}
.callout-visual{
  background:linear-gradient(135deg, rgba(137,63,113,.22), rgba(172,111,130,.20));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:24px;
}
@media (max-width:840px){
  .callout{grid-template-columns:1fr;padding:32px;text-align:center}
  .callout .chips{justify-content:center}
}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.cta-final{
  text-align:center;background:var(--bg);
  padding:80px 0;
}
.cta-final h2{margin-bottom:.4em}
.cta-final p{color:var(--text-muted);max-width:50ch;margin:0 auto 1.8em;font-size:1.1rem}
.cta-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{
  background:var(--plum-deep);color:#D8BCCF;
  padding:54px 0 24px;font-size:.92rem;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:36px;
  margin-bottom:36px;
}
.foot-brand{display:flex;align-items:center;gap:10px;font-weight:700;color:#fff;font-size:1.05rem;margin-bottom:14px}
.foot-brand img{
  height:72px;width:auto;display:block;
  background:#fff;padding:6px 12px;border-radius:8px;
}
.foot-col h4{color:#fff;font-size:.95rem;margin-bottom:14px;letter-spacing:.04em}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin:7px 0}
.foot-col a{color:#D8BCCF;font-size:.92rem}
.foot-col a:hover{color:#fff}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:20px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  color:#B08FA2;font-size:.86rem;
}
@media (max-width:840px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   PAGE HEADERS (interior pages)
   ========================================================================== */
.page-head{
  padding:88px 0 56px;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(172,111,130,.14), transparent 65%),
    var(--bg);
  border-bottom:1px solid var(--border);
}
.page-head .container{max-width:880px;text-align:center}
.page-head h1{font-size:clamp(2rem, 4vw, 3rem);margin-bottom:.4em}
.page-head .lead{margin:0 auto;font-size:1.15rem}

/* Content page generic */
.content{padding:64px 0}
.content .container{max-width:880px}
.content h2{margin-top:1.6em;font-size:1.7rem}
.content h3{margin-top:1.4em;font-size:1.2rem;color:var(--plum)}
.content p, .content li{color:var(--text);line-height:1.75}
.content ul, .content ol{padding-left:22px;margin-bottom:1.2em}
.content li{margin-bottom:.5em}
.content a{color:var(--plum);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.domain-list{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 32px;
  margin:24px 0;
}
.domain-list ol{margin:0;padding-left:22px}
.domain-list li{margin:6px 0;color:var(--plum-deep);font-weight:500}

.note{
  background:rgba(137,63,113,.08);
  border-left:3px solid var(--plum-soft);
  padding:16px 20px;border-radius:8px;
  margin:24px 0;font-size:.96rem;color:var(--text);
}

.figure{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  margin:28px 0;
  text-align:center;
}
.figure img{margin:0 auto;border-radius:8px}
.figure figcaption{font-size:.85rem;color:var(--text-muted);margin-top:10px}

.publications{counter-reset:pub;list-style:none;padding:0}
.publications li{
  counter-increment:pub;
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:18px 22px 18px 60px;
  margin-bottom:12px;
  font-size:.96rem;line-height:1.6;
}
.publications li::before{
  content:counter(pub);
  position:absolute;left:18px;top:18px;
  font-weight:700;color:var(--plum);
  font-size:.95rem;
  background:rgba(137,63,113,.10);
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}

/* FAQ accordion */
.faq-section h2{font-size:1.5rem;color:var(--plum-deep);margin-top:2em}
.faq-section h2:first-child{margin-top:0}
details.faq{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  margin-bottom:10px;
  overflow:hidden;
}
details.faq[open]{box-shadow:var(--shadow-sm)}
details.faq summary{
  list-style:none;
  cursor:pointer;
  padding:16px 24px 16px 22px;
  font-weight:600;color:var(--plum-deep);
  display:flex;align-items:center;gap:14px;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{
  content:"";
  width:10px;height:10px;
  border-right:2px solid var(--plum);
  border-bottom:2px solid var(--plum);
  transform:rotate(-45deg);
  transition:transform .2s;
  flex-shrink:0;
}
details.faq[open] summary::before{transform:rotate(45deg)}
details.faq .faq-body{padding:0 24px 18px 46px;color:var(--text);font-size:.96rem;line-height:1.7}
details.faq .faq-body p:last-child{margin-bottom:0}
details.faq .faq-body ol{padding-left:22px}

.video-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;
  margin-bottom:32px;
}
.video-grid a{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:18px 20px;
  display:flex;align-items:center;gap:12px;
  font-weight:500;color:var(--plum-deep);
  transition:all .18s;
}
.video-grid a:hover{border-color:var(--plum);color:var(--plum);transform:translateY(-2px)}
.video-grid .play{
  width:32px;height:32px;border-radius:50%;
  background:var(--plum);color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

/* Misc */
.text-center{text-align:center}
.mt-2{margin-top:2em}
.mb-2{margin-bottom:2em}

/* ==========================================================================
   v3 ADDITIONS — photography, hero badge, role columns, institution list
   ========================================================================== */

/* Duotone photography (matches the house image treatment) */
.photo-frame{
  width:100%;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
  overflow:hidden;
}
.photo-frame img, img.photo-frame{display:block;width:100%;height:auto;border-radius:inherit}

/* Hero */
.hero-visual{position:relative}
.hero-badge{
  position:absolute;left:-18px;bottom:-18px;
  width:172px;height:172px;border-radius:50%;
  background:var(--warm-soft);
  color:var(--plum-deep);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:700;font-size:1.12rem;line-height:1.25;
  padding:18px;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(102,14,96,.10);
}
@media (max-width:900px){
  .hero-badge{width:132px;height:132px;font-size:.95rem;left:-10px;bottom:-10px}
}

.tool-links{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:0 0 1.6em;font-size:1.05rem;
}
.tool-links .label{color:var(--text-muted)}
.tool-links a{
  font-weight:700;color:var(--plum);
  border-bottom:2px solid var(--warm);
  padding-bottom:1px;
}
.tool-links a:hover{color:var(--plum-deep);border-bottom-color:var(--plum)}
.tool-links .sep{color:var(--border-strong)}

/* Two-column role panels ("How it works") */
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.role-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px 28px;
  border-top:3px solid var(--plum);
}
.role-card.alt{border-top-color:var(--warm)}
.role-card h3{font-size:1.15rem;margin-bottom:.7em}
.role-card ul{list-style:none;padding:0;margin:0}
.role-card li{position:relative;padding:7px 0 7px 26px;color:var(--text);font-size:.98rem}
.role-card li::before{
  content:"";position:absolute;left:0;top:15px;
  width:9px;height:9px;border-radius:50%;
  background:var(--plum);
}
.role-card.alt li::before{background:var(--warm-deep)}
@media (max-width:840px){.role-grid{grid-template-columns:1fr}}

/* Institution list */
.inst-list{
  columns:2;column-gap:36px;
  list-style:none;padding:0;margin:18px 0 0;
}
.inst-list li{
  break-inside:avoid;padding:6px 0 6px 22px;position:relative;
  font-size:.96rem;color:var(--text);
}
.inst-list li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:2px;background:var(--warm)}
@media (max-width:680px){.inst-list{columns:1}}

/* Wide banner figure */
.banner{margin:0;padding:0}
.banner img{width:100%;height:auto;display:block}
.banner-wrap{
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-md);
  margin-bottom:8px;
}

/* Partner logo strip */
.logo-strip{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;text-align:center;
}
.logo-strip img{margin:0 auto;max-width:100%}

/* Partner page helpers */
.partner-mark{
  width:120px;height:120px;object-fit:contain;margin:0 auto 22px;display:block;
}
.link-list{list-style:none;padding:0;margin:14px 0 0}
.link-list li{
  padding:12px 16px;margin-bottom:8px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:.96rem;
}
.link-list li::before{content:"↓ ";color:var(--plum);font-weight:700}
.contact-line{
  background:rgba(137,63,113,.06);
  border-left:3px solid var(--plum);
  padding:16px 20px;border-radius:8px;margin:26px 0 0;font-size:.97rem;
}
.supporter{
  text-align:center;font-weight:600;color:var(--plum);
  padding:22px;margin-top:34px;
  border-top:1px solid var(--border);
}

/* ==========================================================================
   Responsive brand sizing + overflow guard
   (the wordmark is ~4.8:1, so it must scale down on narrow viewports)
   ========================================================================== */
html,body{max-width:100%;overflow-x:hidden}
.nav-brand img{max-width:min(58vw, 300px);height:auto}
.nav-inner{height:auto;min-height:96px;padding-top:14px;padding-bottom:14px}
.foot-brand img{max-width:min(70vw, 260px);height:auto}

@media (max-width:980px){
  .nav-inner{min-height:80px;gap:12px}
  .nav-brand img{max-width:min(60vw, 240px)}
}
@media (max-width:560px){
  .nav-brand img{max-width:min(64vw, 200px)}
  .hero h1{font-size:clamp(1.9rem, 8.2vw, 2.6rem)}
  .page-head h1{font-size:clamp(1.7rem, 7.4vw, 2.4rem)}
  .tool-links{font-size:.98rem}
  .container{padding:0 18px}
}
/* keep long publication URLs and emails from forcing width */
.publications li, .content p, .content li, .contact-line, .link-list li{overflow-wrap:anywhere}
.trust-strip .container{gap:10px 22px}

/* ==========================================================================
   IMAGE CORNER RADIUS
   Matched to the "Registration" button. The buttons are pills
   (border-radius:999px); the nav Registration button measures 48.31px tall,
   so the curve you actually see on it is 24px. That value is used for every
   content image so the corner language is consistent across the site.
   ========================================================================== */
:root{ --radius-img: 24px; }

.photo-frame,
img.photo-frame,
.photo-frame img,
.figure img,
.banner-wrap,
.banner-wrap img,
.logo-strip img,
.partner-mark{
  border-radius:var(--radius-img);
}
/* the frame clips its own picture/img children */
.photo-frame, .banner-wrap{ overflow:hidden; }

/* ==========================================================================
   FOOTER — acknowledgement block
   Mirrors the lower half of the Engageable footer (structure, spacing and
   type scale identical); colours use the Placement Review plum footer tones.
   ========================================================================== */
.foot-values{
  border-top:1px solid rgba(255,255,255,.08);
  padding:20px 0;
  font-size:.86rem;color:#B08FA2;line-height:1.7;
}
.foot-values p{margin:0 0 12px}
.foot-values p:last-child{margin-bottom:0}
.foot-flags{height:36px;width:auto;margin:4px 0 14px;display:block;border-radius:0}
/* footer bottom links must not inherit the dark plum link colour on a dark plum band */
.foot-bottom a{color:#fff}
.foot-bottom a:hover{color:var(--warm-soft)}
/* training-video cards are buttons, not body links — drop the inherited underline */
.video-grid a, .video-grid a:hover{text-decoration:none}