/* ============================================================
   CPNW — design-system effects layer  (v2, post design-review)
   Reusable classes for treatments Elementor controls can't express:
   geometric patterns, multi-stop overlays, transform-based hover
   zooms, the eyebrow rule-line, italic-gold <em> accents, the hero
   sound/scroll UI. Structure, spacing, colour and type are set
   natively in Elementor; this file only adds what the panel cannot.
   ============================================================ */
:root{
  --cpnw-slate:#4C5A70; --cpnw-slate-900:#28303C; --cpnw-slate-100:#EBEDF1;
  --cpnw-gold:#D9C684; --cpnw-gold-soft:#E7D8AC; --cpnw-gold-line:#CBB061; --cpnw-gold-deep:#A0812F;
  --cpnw-ink:#252C36; --cpnw-ink-soft:#5A6373; --cpnw-line:#E5E8EE; --cpnw-cream:#F4F6F9;
  --cpnw-ease:cubic-bezier(.2,.7,.2,1);
  --cpnw-geo:repeating-linear-gradient(60deg,rgba(255,255,255,.06) 0 1px,transparent 1px 46px),
             repeating-linear-gradient(-60deg,rgba(255,255,255,.06) 0 1px,transparent 1px 46px),
             repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 40px);
  --cpnw-sh:0 26px 60px -30px rgba(40,48,60,.42);
  --cpnw-sh-sm:0 2px 14px rgba(40,48,60,.07);
}
body{-webkit-font-smoothing:antialiased}

/* ---------- global spacing hygiene ----------
   Browser default <p> margins under headings/subtitles were adding
   phantom vertical space everywhere; all spacing is authored on the
   widgets themselves, so zero the inner paragraph margins. */
.elementor-widget-text-editor p{margin-block-start:0;margin-block-end:0}
/* inline svg icons embedded in heading text */
.elementor-heading-title svg{width:1em;height:1em;vertical-align:-0.125em;fill:currentColor}
/* belt-and-braces: our icon widgets always paint glyphs with currentColor */
.cpnw-fic .elementor-icon svg,.cpnw-ivic .elementor-icon svg,.cpnw-ii .elementor-icon svg,
.cpnw-sound .elementor-icon svg,.cpnw-blink .elementor-icon svg,.cpnw-fsoc .elementor-icon svg{fill:currentColor}

/* ---------- geometric pattern overlay ---------- */
.cpnw-pattern,.cpnw-pattern-l,.cpnw-pattern-br{position:relative;overflow:hidden}
.cpnw-pattern::before,.cpnw-pattern-l::before,.cpnw-pattern-br::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:var(--cpnw-geo)}
.cpnw-pattern::before{-webkit-mask:linear-gradient(135deg,#000 0%,transparent 58%);mask:linear-gradient(135deg,#000 0%,transparent 58%)}
.cpnw-pattern-l::before{-webkit-mask:linear-gradient(225deg,#000 0%,transparent 58%);mask:linear-gradient(225deg,#000 0%,transparent 58%)}
.cpnw-pattern-br::before{-webkit-mask:linear-gradient(315deg,#000 0%,transparent 58%);mask:linear-gradient(315deg,#000 0%,transparent 58%)}
.cpnw-pattern>.e-con-inner,.cpnw-pattern-l>.e-con-inner,.cpnw-pattern-br>.e-con-inner{position:relative;z-index:1}

/* ---------- hero ---------- */
.cpnw-hero{position:relative}
.cpnw-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,48,60,.5) 0%,rgba(40,48,60,.22) 40%,rgba(40,48,60,.5) 100%)}
.cpnw-hero>*{position:relative;z-index:2}
.cpnw-hero .elementor-background-video-container{z-index:0}
.cpnw-hero-logo img{filter:drop-shadow(0 6px 24px rgba(0,0,0,.4));opacity:.96}
.cpnw-kicker{text-shadow:0 2px 18px rgba(0,0,0,.5)}

/* sound toggle — design .sound-btn */
.cpnw-sound{position:absolute;right:32px;bottom:32px;z-index:3;margin:0!important}
.cpnw-sound .elementor-icon{width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);
  background:rgba(40,48,60,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;transition:.25s;cursor:pointer}
.cpnw-sound .elementor-icon:hover{background:var(--cpnw-gold);color:var(--cpnw-slate-900)!important;border-color:var(--cpnw-gold)}
.cpnw-sound .elementor-icon:hover svg{fill:var(--cpnw-slate-900)!important}

/* scroll cue — design .scroll-cue */
.cpnw-scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;margin:0!important;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.cpnw-scroll-cue::after{content:"";width:1px;height:38px;
  background:linear-gradient(rgba(255,255,255,.7),transparent);animation:cpnw-cue 2s var(--cpnw-ease) infinite}
@keyframes cpnw-cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(prefers-reduced-motion:reduce){.cpnw-scroll-cue::after{animation:none}}

/* ---------- eyebrow rule-line ---------- */
.cpnw-eyebrow .elementor-heading-title{display:inline-flex;align-items:center;gap:12px}
.cpnw-eyebrow .elementor-heading-title::before{content:"";width:30px;height:1.5px;background:var(--cpnw-gold-line);display:inline-block;flex-shrink:0}
.cpnw-eyebrow--light .elementor-heading-title::before{background:var(--cpnw-gold)}

/* ---------- italic-gold <em> accents ---------- */
/* design .intro h1{max-width:16ch} — ch must resolve against the TITLE's own
   font size (Elementor's width control targets the wrapper, where ch = body 17px) */
.cpnw-h1 .elementor-heading-title{max-width:16ch;margin-inline:auto}
.cpnw-h1 em{font-style:italic;color:var(--cpnw-gold-soft)}
.cpnw-h2 em{font-style:italic;color:var(--cpnw-gold-deep)}
.cpnw-wwd .cpnw-h2 em,.cpnw-involve .cpnw-h2 em,.cpnw-subscribe .cpnw-h2 em{color:var(--cpnw-gold-soft)}
.cpnw-lead-line em{font-style:italic;color:var(--cpnw-gold-deep)}
.cpnw-lead-line .elementor-heading-title{text-wrap:balance}

/* ---------- buttons: slide-up fill on hover ---------- */
.cpnw-btn .elementor-button{position:relative;overflow:hidden;border-radius:2px;z-index:0;transition:.28s var(--cpnw-ease)}
.cpnw-btn .elementor-button::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .34s var(--cpnw-ease)}
.cpnw-btn--gold .elementor-button::before{background:var(--cpnw-gold-soft)}
.cpnw-btn--slate .elementor-button::before{background:var(--cpnw-slate-900)}
.cpnw-btn--ghost .elementor-button::before{background:rgba(255,255,255,.14)}
.cpnw-btn--outline .elementor-button::before{background:var(--cpnw-slate)}
.cpnw-btn--outline:hover .elementor-button{color:#fff!important}
.cpnw-btn--outline .elementor-button:hover .elementor-button-icon {    filter: brightness(6.5);}
.cpnw-btn .elementor-button:hover::before{transform:translateY(0)}
.cpnw-btn .elementor-button:hover .elementor-button-icon{transform:translateX(4px)}
.cpnw-btn .elementor-button-icon{transition:transform .28s var(--cpnw-ease)}
.cpnw-btn--sm .elementor-button{padding:12px 22px;font-size:14px}

/* ---------- story flow ---------- */
.cpnw-fic .elementor-icon{width:60px;height:60px;border-radius:8px;background:var(--cpnw-slate);color:var(--cpnw-gold);
  display:flex;align-items:center;justify-content:center;transition:.3s var(--cpnw-ease)}
.cpnw-flow-step:hover .cpnw-fic .elementor-icon{background:var(--cpnw-gold);color:var(--cpnw-slate-900);transform:translateY(-3px)}
/* Elementor emits a high-specificity per-element svg{fill:var(--gold)} rule;
   without !important the glyph stays gold on the gold hover box (invisible) */
.cpnw-flow-step:hover .cpnw-fic .elementor-icon svg{fill:var(--cpnw-slate-900)!important}
.cpnw-fword{display:block;font-family:"Baskervville",Georgia,serif;font-size:clamp(28px,3vw,38px);color:var(--cpnw-slate-900);line-height:1;margin-top:8px;font-weight:400;letter-spacing:-.01em}
.cpnw-flow-step{position:relative}
/* connector arrow — inline svg data-uri (FA font is never loaded; e_font_icon_svg) */
.cpnw-flow-step:not(:last-child)::after{content:"";position:absolute;right:-13px;top:64px;z-index:2;
  width:26px;height:26px;border-radius:50%;background:var(--cpnw-gold)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%2328303C'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E")
  center/11px no-repeat}
@media(max-width:1080px){.cpnw-flow-step:not(:last-child)::after{display:none}}

/* ---------- statstrip ---------- */
/* separators between stats only — nothing after the last (design .s:last-child{border:none}) */
.cpnw-stat+.cpnw-stat{border-left:1px solid rgba(255,255,255,.1)}
.cpnw-stat .elementor-counter-title{margin-top:8px}
@media(max-width:1080px) and (min-width:641px){
  .cpnw-stat:nth-child(3){border-left:0}
  .cpnw-stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.1)}
}
@media(max-width:640px){
  .cpnw-stat+.cpnw-stat{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
}

/* ---------- membership (wwd) image cards ---------- */
.cpnw-wwd-card{position:relative;border-radius:8px;overflow:hidden;min-height:440px;isolation:isolate}
/* media layer: real <img>, GPU transform zoom (design: .wwd-card:hover img{scale(1.06)}) */
.cpnw-wwd-img{position:absolute!important;inset:0;z-index:0;margin:0!important}
.cpnw-wwd-img{height:100%}
.cpnw-wwd-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--cpnw-ease);will-change:transform}
.cpnw-wwd-card:hover .cpnw-wwd-img img{transform:scale(1.06)}
/* gradient veil above the image, below the copy */
.cpnw-wwd-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,48,60,0) 30%,rgba(40,48,60,.5) 62%,rgba(40,48,60,.92) 100%)}
.cpnw-wwd-body{position:relative;z-index:2;margin-top:auto}
.cpnw-textlink .elementor-heading-title{display:inline-flex;align-items:center;gap:9px}
.cpnw-textlink .elementor-heading-title::after{content:"";width:13px;height:13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23E7D8AC'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--cpnw-ease)}
.cpnw-wwd-card:hover .cpnw-textlink .elementor-heading-title::after{transform:translateX(4px)}

/* ---------- impact composite ---------- */
.cpnw-impact-top{align-items:center}
.cpnw-impact-photo{position:relative}
.cpnw-impact-main img{border-radius:8px;width:100%;height:540px;object-fit:cover;box-shadow:var(--cpnw-sh)}
.cpnw-impact-sub{position:absolute;right:-26px;bottom:-26px;width:230px;z-index:2;margin:0!important}
.cpnw-impact-sub img{width:230px;height:200px;object-fit:cover;border-radius:6px;border:6px solid var(--cpnw-cream);box-shadow:var(--cpnw-sh)}
.cpnw-impact-float{position:absolute;left:-26px;top:34px;z-index:3;background:var(--cpnw-gold);
  border-radius:6px;box-shadow:var(--cpnw-sh);max-width:180px}
.cpnw-ii .elementor-icon{width:46px;height:46px;border-radius:7px;background:#fff;color:var(--cpnw-gold-deep);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--cpnw-sh-sm)}
@media(max-width:640px){
  .cpnw-impact-main img{height:380px}
  .cpnw-impact-sub{position:static;width:auto;margin-top:16px!important}
  .cpnw-impact-sub img{width:60%}
  .cpnw-impact-float{  top: unset !important;   bottom: -30px;     left: unset !important;        right: -10px;}
}

/* ---------- board cards ---------- */
.cpnw-bcard{transition:.32s var(--cpnw-ease)}
.cpnw-bcard:hover{transform:translateY(-6px);box-shadow:var(--cpnw-sh);border-color:transparent}
.cpnw-bphoto{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cpnw-slate-100)}
.cpnw-bphoto-img{height:100%}
.cpnw-bphoto-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--cpnw-ease);will-change:transform}
.cpnw-bcard:hover .cpnw-bphoto-img img{transform:scale(1.05)}
.cpnw-blink{position:absolute;right:14px;bottom:14px;z-index:3;width:38px;height:38px;margin:0!important;
  opacity:0;transform:translateY(8px);transition:.3s var(--cpnw-ease)}
.cpnw-blink .elementor-icon{width:38px;height:38px;border-radius:50%;background:var(--cpnw-slate);color:#fff;
  display:flex;align-items:center;justify-content:center}
.cpnw-bcard:hover .cpnw-blink{opacity:1;transform:none}

/* ---------- event cards ---------- */
.cpnw-ecard{transition:.32s var(--cpnw-ease)}
.cpnw-ecard:hover{transform:translateY(-8px);box-shadow:var(--cpnw-sh);border-color:var(--cpnw-gold-line)!important}
.cpnw-ep{position:relative;height:300px;overflow:hidden;background:var(--cpnw-slate-900)}
.cpnw-ep-img{height:100%}
.cpnw-ep-img img{width:100%;height:300px;object-fit:cover;transition:transform .7s var(--cpnw-ease);will-change:transform}
.cpnw-ecard:hover .cpnw-ep-img img{transform:scale(1.07)}
.cpnw-eb{flex-grow:1}
.cpnw-efoot{margin-top:auto!important}
/* icon-list fine-tuning (eloc / emeta / micro) */
.cpnw-eloc .elementor-icon-list-item,.cpnw-emeta .elementor-icon-list-item{align-items:center}
.cpnw-micro .elementor-icon-list-items{justify-content:center;display:flex}

/* ---------- involve glass cards ---------- */
.cpnw-ivcard{border:1px solid rgba(255,255,255,.14);background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  transition:.3s var(--cpnw-ease)}
.cpnw-ivcard:hover{transform:translateY(-8px);border-color:rgba(217,198,132,.55);
  background:linear-gradient(165deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
.cpnw-ivcard--feature{background:linear-gradient(165deg,var(--cpnw-gold),var(--cpnw-gold-line))!important;border:none!important}
/* normal cards: gold box, dark glyph · feature card: dark box, gold glyph */
.cpnw-ivic .elementor-icon{width:64px;height:64px;border-radius:9px;background:var(--cpnw-gold);
  display:flex;align-items:center;justify-content:center;transition:.3s var(--cpnw-ease)}
.cpnw-ivcard--feature .cpnw-ivic .elementor-icon{background:var(--cpnw-slate-900)}
.cpnw-ivcard:hover .cpnw-ivic .elementor-icon{transform:translateY(-3px)}

/* ---------- community gallery (design .ggrid mosaic) ---------- */
.cpnw-ggrid{grid-auto-rows:212px}
.cpnw-gitem{overflow:hidden;border-radius:6px;position:relative;cursor:pointer;margin:0!important}
.cpnw-gitem{height:100%}
.cpnw-gitem a{display:block;height:100%}
.cpnw-gitem img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--cpnw-ease);will-change:transform}
.cpnw-gitem:hover img{transform:scale(1.08)}
.cpnw-gitem::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(40,48,60,.42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") center/36px no-repeat;
  opacity:0;transition:.3s}
.cpnw-gitem:hover::after{opacity:1}
.cpnw-gitem--a{grid-column:span 2;grid-row:span 2}
.cpnw-gitem--wide{grid-column:span 2}
@media(max-width:640px){.cpnw-ggrid{grid-auto-rows:170px}}

/* ---------- subscribe inline form ----------
   Elementor nests fields in .elementor-form-fields-wrapper — style THAT as the
   white pill so the email field actually flexes (design .subform) */
/* Elementor prints widget CSS inline in the body (after this sheet), so ties
 * lose — the pill cap needs !important to hold */
.e-con .elementor-widget.cpnw-subform{width:100%;max-width:540px!important}
.cpnw-subform .elementor-form-fields-wrapper{margin:36px auto 0;width:100%;
  display:flex;flex-wrap:nowrap;align-items:center;background:#fff;border-radius:4px;padding:7px;gap:7px}
.cpnw-subform .elementor-field-group{margin:0!important;padding:0!important}
.cpnw-subform .elementor-field-group-email{flex:1 1 auto!important;width:auto!important;min-width:0}
.cpnw-subform .elementor-field-group.elementor-field-type-submit{flex:0 0 auto!important;width:auto!important}
.cpnw-subform .elementor-field-label{display:none!important}
.cpnw-subform input[type=email]{border:none!important;outline:none;box-shadow:none!important;
  padding:14px 18px!important;background:none!important;font-size:15px;color:var(--cpnw-ink);width:100%;min-width:0}
/* button sits flush inside the pill: fixed 46px height, matched radius */
.cpnw-subform .elementor-button{border-radius:3px;white-space:nowrap;height:46px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 26px;font-size:15px}
.cpnw-subform .elementor-button .elementor-button-icon svg{width:13px;height:13px}
.cpnw-micro svg{margin-right:6px;color:var(--cpnw-gold)}

/* ============================================================
   HEADER — transparent over hero, solid (cream) once stuck
   ============================================================ */
.cpnw-header{transition:background .35s var(--cpnw-ease),box-shadow .35s var(--cpnw-ease),backdrop-filter .35s;z-index:70}
.cpnw-header.elementor-sticky--effects{
  background:rgba(251,249,244,.96)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 30px -24px rgba(40,48,60,.5);border-bottom:1px solid var(--cpnw-line)}
.cpnw-logo-solid{display:none}
.cpnw-header.elementor-sticky--effects .cpnw-logo-trans{display:none}
.cpnw-header.elementor-sticky--effects .cpnw-logo-solid{display:block}
.cpnw-login a{transition:color .2s}
.cpnw-header.elementor-sticky--effects .cpnw-login a{color:var(--cpnw-slate)}

/* ---------- MEGA MENU (design nav.main + .dropdown) ----------
 * The widget is driven by its own CSS custom properties (it sets defaults like
 * --n-menu-title-color-normal:#1f2124 in late-loaded widget CSS, which wins
 * specificity ties). Setting the SAME variables at .cpnw-header .cpnw-mm
 * outranks the defaults deterministically in every state. */
.cpnw-header .cpnw-mm{
  --n-menu-title-color-normal:#fff;
  --n-menu-title-color-hover:var(--cpnw-gold);
  --n-menu-title-color-active:var(--cpnw-gold);
  --n-menu-title-hover-color-fallback:var(--cpnw-gold);
  --n-menu-dropdown-indicator-color-normal:rgba(255,255,255,.7);
  --n-menu-dropdown-indicator-color-hover:var(--cpnw-gold);
  --n-menu-dropdown-indicator-color-active:var(--cpnw-gold);
  --n-menu-dropdown-indicator-size:10px;
  --n-menu-toggle-icon-color:#fff;
  --n-menu-toggle-icon-color-hover:var(--cpnw-gold);
  --n-menu-toggle-icon-color-active:#fff;
  --n-menu-toggle-icon-size:24px;
}
.cpnw-header.elementor-sticky--effects .cpnw-mm{
  --n-menu-title-color-normal:var(--cpnw-slate);
  --n-menu-title-color-hover:var(--cpnw-gold);
  --n-menu-title-color-active:var(--cpnw-gold);
  --n-menu-title-hover-color-fallback:var(--cpnw-gold);
  --n-menu-dropdown-indicator-color-normal:rgba(76,90,112,.75);
  --n-menu-dropdown-indicator-color-hover:var(--cpnw-gold);
  --n-menu-dropdown-indicator-color-active:var(--cpnw-gold);
  --n-menu-toggle-icon-color:var(--cpnw-slate);
  --n-menu-toggle-icon-color-hover:var(--cpnw-gold);
  --n-menu-toggle-icon-color-active:var(--cpnw-slate);
}
.cpnw-mm .e-n-menu-title{padding:11px 15px;border-radius:3px;transition:.2s;background:transparent!important}
.cpnw-mm .e-n-menu-title-text{font-family:"Figtree",sans-serif;font-weight:600;font-size:15.5px;transition:.2s;white-space:nowrap}
.cpnw-mm .e-n-menu-dropdown-icon-closed,.cpnw-mm .e-n-menu-dropdown-icon-opened{transition:.25s}

/* dropdown rows — design .dropdown a / .di / .dt / .dd */
.cpnw-mm-link{margin:0!important}
.cpnw-mm-link .elementor-icon-box-wrapper{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:4px;transition:.2s;text-align:left}
.cpnw-mm-link:hover .elementor-icon-box-wrapper{background:var(--cpnw-cream)}
.cpnw-mm-link .elementor-icon-box-icon{margin:0!important;flex-shrink:0}
.cpnw-mm-link .elementor-icon{width:40px;height:40px;border-radius:5px;background:var(--cpnw-cream);
  display:flex;align-items:center;justify-content:center;transition:.25s}
.cpnw-mm-link:hover .elementor-icon{background:var(--cpnw-slate)}
.cpnw-mm-link:hover .elementor-icon svg{fill:var(--cpnw-gold)!important}
.cpnw-mm-link .elementor-icon-box-content{display:flex;flex-direction:column;justify-content:center}
.cpnw-mm-link .elementor-icon-box-title{margin:0}
.cpnw-mm-link .elementor-icon-box-description{margin:3px 0 0}

/* icon square glyph (Elementor's per-element css binds fill to global primary) */
.cpnw-mm-link .elementor-icon svg{fill:var(--cpnw-gold-deep)!important}

/* ---------- MOBILE / TABLET HEADER — full-screen overlay menu (<1080) ----------
 * The widget shows/hides via --n-menu-wrapper-display (display:none→flex — which
 * cannot animate). We keep the wrapper permanently rendered and animate
 * opacity/transform from the widget's own aria-expanded state, so open/close is
 * genuinely smooth while all behaviour stays native. */
@media(max-width:1080px){
  /* CRITICAL: backdrop-filter on the sticky header creates a CSS containing
     block for fixed descendants — the full-screen overlay would size itself to
     the 80px header instead of the viewport once scrolled. The solid bg is 96%
     opaque, so dropping the blur below desktop costs nothing visually. */
  .cpnw-header.elementor-sticky--effects{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  /* ONE 80px row: logo | cta | toggle — Elementor defaults --flex-wrap-mobile:wrap */
  .cpnw-header{flex-wrap:nowrap!important;--flex-wrap-mobile:nowrap}
  .cpnw-header>.e-con-inner{flex-wrap:nowrap!important}
  .cpnw-logo{order:1;flex-shrink:0!important;flex-grow:0!important;width:max-content!important;--width:max-content}
  .cpnw-navcta{order:2;margin-left:auto;flex-shrink:0!important;flex-grow:0!important;width:auto!important}
  /* the widget must NOT flex-grow — it swallows the free space, defeating the
     CTA's margin-left:auto and pressing Donate against the logo */
  .e-con .elementor-widget.cpnw-mm{order:3;width:auto!important;max-width:none!important;
    flex-grow:0!important;flex-shrink:0!important;margin-left:14px}
  .cpnw-header .cpnw-mm{--n-menu-toggle-align:flex-end}
  .cpnw-logo img{height:38px!important;width:auto!important;max-width:none!important}
  /* Log In lives inside the page/menu context below desktop; keeps the bar clean */
  .cpnw-login{display:none}

  /* toggle: 48px touch target */
  .cpnw-mm .e-n-menu-toggle{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:none;background:none;position:relative;cursor:pointer}
  /* ---- sleek CSS hamburger: two thin lines that morph into an X ----
     hide the native filled glyph; draw our own so it's crisp + fully animatable */
  .cpnw-mm .e-n-menu-toggle i,.cpnw-mm .e-n-menu-toggle svg,
  .cpnw-mm .e-n-menu-toggle .e-font-icon-svg{opacity:0!important}
  .cpnw-mm .e-n-menu-toggle::before,.cpnw-mm .e-n-menu-toggle::after{
    content:"";position:absolute;left:13px;right:13px;height:1.6px;border-radius:2px;
    background:var(--n-menu-toggle-icon-color,#fff);
    transition:transform .34s var(--cpnw-ease),top .34s var(--cpnw-ease),bottom .34s var(--cpnw-ease),background .3s}
  .cpnw-mm .e-n-menu-toggle::before{top:18px}
  .cpnw-mm .e-n-menu-toggle::after{bottom:18px}
  /* open → X, always white on the dark overlay */
  .cpnw-mm .e-n-menu-toggle[aria-expanded="true"]::before{top:50%;transform:translateY(-50%) rotate(45deg);background:#fff}
  .cpnw-mm .e-n-menu-toggle[aria-expanded="true"]::after{bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg);background:#fff}
  .cpnw-mm .e-n-menu-toggle:active::before,.cpnw-mm .e-n-menu-toggle:active::after{transform:scaleX(.85)}
  .cpnw-mm .e-n-menu-toggle[aria-expanded="true"]:active::before{transform:translateY(-50%) rotate(45deg)}
  .cpnw-mm .e-n-menu-toggle[aria-expanded="true"]:active::after{transform:translateY(-50%) rotate(-45deg)}

  /* ---- the overlay ----
     the widget's [data-layout=dropdown] rules set position:absolute + transparent
     bg at higher specificity — match its selector and pin the criticals */
  .cpnw-mm .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper,
  .cpnw-mm .e-n-menu-wrapper{
    display:flex!important;position:fixed!important;inset:0!important;z-index:60;
    width:100%!important;height:100%!important;max-height:none!important;
    background-color:var(--cpnw-slate-900)!important;background-image:var(--cpnw-geo)!important;
    padding:calc(96px + var(--wp-admin--admin-bar--height,0px)) 26px 32px!important;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transform:translateY(-14px);pointer-events:none;
    transition:opacity .45s var(--cpnw-ease),transform .45s var(--cpnw-ease),visibility 0s linear .45s}
  .cpnw-mm .e-n-menu-toggle[aria-expanded="true"]+.e-n-menu-wrapper{
    opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
  /* keep the header row (logo, Donate, X) above the overlay */
  .cpnw-header{z-index:70}
  .cpnw-logo,.cpnw-navcta{position:relative;z-index:65}
  .cpnw-mm .e-n-menu-toggle{position:relative;z-index:65}

  /* heading becomes a simple column inside the overlay — width/margins pinned so
     the widget's dropdown-mode stretch vars can't push separators full-bleed */
  .cpnw-mm .e-n-menu-heading{position:static!important;background:transparent;box-shadow:none;
    border:none;padding:0!important;max-height:none;overflow:visible;flex-direction:column;align-items:stretch;
    width:100%!important;max-width:560px!important;margin:0 auto!important;left:auto!important;right:auto!important}
  /* widget's dropdown-mode css sets li width to the stretch width (100vw) and
     wins the specificity tie — clamp so separators respect the side padding */
  .cpnw-mm .e-n-menu-wrapper .e-n-menu-item{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important}

  /* items: display typography, staggered entrance */
  .cpnw-mm .e-n-menu-item{border-bottom:1px solid rgba(255,255,255,.12);justify-content:flex-start;padding-left:0!important;
    opacity:0;transform:translateY(14px);transition:opacity .5s var(--cpnw-ease),transform .5s var(--cpnw-ease)}
  .cpnw-mm .e-n-menu-toggle[aria-expanded="true"]+.e-n-menu-wrapper .e-n-menu-item{opacity:1;transform:none}
  .cpnw-mm .e-n-menu-toggle[aria-expanded="true"]+.e-n-menu-wrapper .e-n-menu-item:nth-child(1){transition-delay:.08s}
  .cpnw-mm .e-n-menu-toggle[aria-expanded="true"]+.e-n-menu-wrapper .e-n-menu-item:nth-child(2){transition-delay:.16s}
  .cpnw-mm .e-n-menu-toggle[aria-expanded="true"]+.e-n-menu-wrapper .e-n-menu-item:nth-child(3){transition-delay:.24s}
  .cpnw-mm .e-n-menu-toggle[aria-expanded="true"]+.e-n-menu-wrapper .e-n-menu-item:nth-child(4){transition-delay:.32s}
  .cpnw-mm .e-n-menu-item:last-child{border-bottom:none}

  /* the WHOLE row is a tap target: the title link stretches across the row
     (tap anywhere toggles the dropdown, not just the exact text), and the
     chevron gets its own 44px hit area pinned to the right edge */
  .cpnw-mm .e-n-menu-title{display:flex;align-items:center;gap:10px;justify-content:flex-start!important;
    --n-menu-title-justify-content:flex-start;width:100%;padding:12px 4px;min-height:56px;background:transparent!important}
  .cpnw-mm .e-n-menu-title-container{justify-content:flex-start!important;flex:1 1 auto!important;width:auto!important;min-width:0;padding:0!important;margin:0!important;min-height:44px;align-items:center;display:flex}
  .cpnw-mm .e-n-menu-dropdown-icon{flex:0 0 auto;width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-left:auto}
  /* overlay is dark in BOTH header states — pin the item/indicator colours */
  .cpnw-header .cpnw-mm .e-n-menu-wrapper{
    --n-menu-title-color-normal:#fff;
    --n-menu-title-color-hover:var(--cpnw-gold);
    --n-menu-title-color-active:var(--cpnw-gold);
    --n-menu-title-normal-color-dropdown:#fff;
    --n-menu-title-hover-color-dropdown:var(--cpnw-gold);
    --n-menu-title-active-color-dropdown:var(--cpnw-gold);
    --n-menu-dropdown-indicator-color-normal:rgba(255,255,255,.65);
    --n-menu-dropdown-indicator-color-hover:var(--cpnw-gold);
    --n-menu-dropdown-indicator-color-active:var(--cpnw-gold);
    --n-menu-dropdown-indicator-size:13px}
  .cpnw-mm .e-n-menu-wrapper .e-n-menu-title-text{
    font-family:"Baskervville",Georgia,serif;font-weight:400;font-size:clamp(24px,5.5vw,30px);letter-spacing:.01em}

  /* submenu canvases: dark glass groups, white icon squares, gold glyphs */
  .cpnw-mm-panel{border:1px solid rgba(255,255,255,.1)!important;box-shadow:none!important;
    background:rgba(255,255,255,.05)!important;border-radius:10px!important;margin:2px 0 18px!important;min-width:0!important}
  .cpnw-mm-link .elementor-icon-box-wrapper{padding:12px;min-height:52px;
    flex-direction:row!important;text-align:left!important;align-items:center!important}
  .cpnw-mm-link:hover .elementor-icon-box-wrapper{background:rgba(255,255,255,.07)}
  .cpnw-mm-link .elementor-icon{background:rgba(255,255,255,.1)}
  .cpnw-mm-link .elementor-icon svg{fill:var(--cpnw-gold)!important}
  .cpnw-mm-link:hover .elementor-icon{background:var(--cpnw-gold)}
  .cpnw-mm-link:hover .elementor-icon svg{fill:var(--cpnw-slate-900)!important}
  .cpnw-mm-link .elementor-icon-box-title,.cpnw-mm-link .elementor-icon-box-title span{color:#fff!important}
  .cpnw-mm-link .elementor-icon-box-description{color:#AEB6C2!important}

  /* impact list rows: icon + text stay on one line */
  .cpnw-impact-item{flex-wrap:nowrap!important;--flex-wrap-mobile:nowrap}
  .cpnw-impact-item>.e-con{width:auto;flex:1 1 0;min-width:0}
}
@media(max-width:640px){
  .cpnw-navcta .cpnw-btn--sm .elementor-button{padding:10px 16px;font-size:13.5px}
  .cpnw-logo img{height:30px!important}
}
@media(prefers-reduced-motion:reduce){
  .cpnw-mm .e-n-menu-wrapper,.cpnw-mm .e-n-menu-item{transition:none!important}
}

/* ============================================================
   FOOTER
   ============================================================ */
.cpnw-flink a{color:#C2C9D4;text-decoration:none;display:inline-block;
  transition:color .28s var(--cpnw-ease),transform .28s var(--cpnw-ease)}
/* Elementor sets `.elementor-heading-title[class*="size-"] > a{color:inherit}`
   at (0,3,1); the heading-title selector below matches that so the hover wins */
.cpnw-flink .elementor-heading-title a:hover,.cpnw-flink a:hover{color:var(--cpnw-gold);transform:translateX(5px)}
/* contact rows (icon-list): gold glyph centred in a rounded-square chip */
.cpnw-fcontact-list .elementor-icon-list-item{align-items:center}
.cpnw-fcontact-list .elementor-icon-list-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);
  display:flex!important;align-items:center;justify-content:center;flex-shrink:0;text-align:center;
  padding:0!important} /* Elementor puts the text-indent as right-padding here, pushing the glyph off-centre */
.cpnw-fcontact-list .elementor-icon-list-icon svg{margin:0;display:block}
.cpnw-fcontact-list .elementor-icon-list-text{margin-left:5px}
.cpnw-fcontact-list a{transition:color .25s}
.cpnw-fcontact-list a:hover .elementor-icon-list-text{color:#fff}
.cpnw-fsoc .elementor-icon{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;transition:.25s var(--cpnw-ease)}
.cpnw-fsoc .elementor-icon:hover{background:var(--cpnw-gold);color:var(--cpnw-slate-900)!important;transform:translateY(-2px)}
.cpnw-fsoc .elementor-icon:hover svg{fill:var(--cpnw-slate-900)!important}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
:root{--cpnw-sh-lg:0 50px 100px -40px rgba(40,48,60,.5)}
/* founder heading em is gold-soft (dark section), like wwd/involve/subscribe */
.cpnw-founder .cpnw-h2 em{color:var(--cpnw-gold-soft)}

/* ---- hero ---- */
.cpnw-crumbs .elementor-heading-title{display:inline-flex;align-items:center;gap:2px}
.cpnw-crumbs a{color:var(--cpnw-gold-soft);text-decoration:none}
.cpnw-crumb-sep{display:inline-flex;align-items:center;margin:0 8px;opacity:.6}
.cpnw-crumb-sep svg{width:9px;height:9px;fill:currentColor}
.cpnw-pretitle{text-transform:none}

/* ---- mission value rows (icon-box) ---- */
.cpnw-mv{margin:0!important}
.cpnw-mv .elementor-icon-box-wrapper{display:flex;align-items:flex-start;gap:15px;text-align:left}
.cpnw-mv .elementor-icon-box-icon{margin:0!important;flex-shrink:0}
.cpnw-mv .elementor-icon{width:44px;height:44px;border-radius:8px;background:var(--cpnw-slate);
  display:flex;align-items:center;justify-content:center}
.cpnw-mv .elementor-icon svg{fill:var(--cpnw-gold)!important}
.cpnw-mv .elementor-icon-box-content{display:flex;flex-direction:column;justify-content:center}
.cpnw-mv .elementor-icon-box-title{margin:0}
.cpnw-mv .elementor-icon-box-description{margin:2px 0 0}

/* ---- mission photo composite ---- */
.cpnw-mission-photo{position:relative}
.cpnw-mission-img img{border-radius:12px;width:100%;height:480px;object-fit:cover;box-shadow:var(--cpnw-sh)}
.cpnw-streaks{position:absolute;right:-38px;top:40px;width:132px;height:154px;z-index:-1;pointer-events:none;
  background:var(--cpnw-gold);
  -webkit-mask:url("/wp-content/uploads/2026/07/cpnw-brandmark.svg") center/contain no-repeat;
  mask:url("/wp-content/uploads/2026/07/cpnw-brandmark.svg") center/contain no-repeat}
.cpnw-mission-tag{position:absolute;left:-26px;bottom:-24px;z-index:2;background:var(--cpnw-gold);
  border-radius:8px;box-shadow:var(--cpnw-sh);max-width:230px}

/* ---- founder ---- */
.cpnw-founder-grid{position:relative;z-index:2}
.cpnw-founder-photo{position:sticky;top:110px}
.cpnw-fimg img{border-radius:12px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;box-shadow:var(--cpnw-sh-lg)}
.cpnw-fcap{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px}
.cpnw-fbadges{margin-top:0}
.cpnw-fbadge .elementor-heading-title{font-weight:600;color:#d6dbe3;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);padding:5px 11px;border-radius:999px;display:inline-block}
.cpnw-fb-p em{color:var(--cpnw-gold-soft);font-style:italic}

/* ---- FAQ (nested accordion) — one border treatment, generous rhythm ---- */
.cpnw-faq .e-n-accordion{display:flex;flex-direction:column;gap:18px}
.cpnw-faq .e-n-accordion-item{background:#fff;border:1px solid var(--cpnw-line)!important;border-radius:12px;
  margin:0!important;overflow:hidden;box-shadow:none;
  transition:box-shadow .35s var(--cpnw-ease),border-color .35s var(--cpnw-ease)}
.cpnw-faq .e-n-accordion-item[open]{border-color:var(--cpnw-gold-line)!important;box-shadow:0 18px 44px -26px rgba(40,48,60,.35)}
.cpnw-faq .e-n-accordion-item:hover:not([open]){border-color:var(--cpnw-slate-100)!important;box-shadow:0 10px 28px -22px rgba(40,48,60,.25)}
.cpnw-faq .e-n-accordion-item-title{padding:26px 28px;display:flex;align-items:center;gap:20px;cursor:pointer;text-align:left;
  font-family:"Baskervville",Georgia,serif;font-size:clamp(19px,2.1vw,23px);color:var(--cpnw-slate-900);font-weight:400;
  border:none!important;box-shadow:none!important;background:transparent!important}
.cpnw-faq .e-n-accordion-item[open] .e-n-accordion-item-title{padding-bottom:14px}
.cpnw-faq .e-n-accordion-item-title-text{flex:1;text-align:left;color:var(--cpnw-slate-900);display:flex;align-items:baseline;gap:20px}
/* gold zero-padded number via CSS counter (design .qnum), hidden on mobile */
.cpnw-faq{counter-reset:cpnw-faq}
.cpnw-faq .e-n-accordion-item-title-text::before{counter-increment:cpnw-faq;content:counter(cpnw-faq,decimal-leading-zero);
  font-family:"Figtree",sans-serif;font-weight:700;font-size:13px;color:var(--cpnw-gold-deep);flex:0 0 30px}
/* icon: 38px circle, rotates + inverts when open */
.cpnw-faq .e-n-accordion-item-title-icon{flex-shrink:0}
.cpnw-faq .e-n-accordion-item-title-icon .e-opened,
.cpnw-faq .e-n-accordion-item-title-icon .e-closed{width:38px;height:38px;border-radius:50%;background:var(--cpnw-slate-50);
  display:flex;align-items:center;justify-content:center;transition:.3s var(--cpnw-ease)}
.cpnw-faq .e-n-accordion-item-title-icon svg{width:16px;height:16px;fill:var(--cpnw-slate)!important;transition:transform .3s var(--cpnw-ease)}
.cpnw-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon .e-opened{background:var(--cpnw-slate)}
.cpnw-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon svg{fill:var(--cpnw-gold)!important;transform:rotate(180deg)}
/* answer: no divider lines — it fades and settles in under the question */
.cpnw-faq-body{border:none!important}
.cpnw-faq .e-n-accordion-item[open] .cpnw-faq-body{animation:cpnw-faq-in .35s var(--cpnw-ease)}
@keyframes cpnw-faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* answer ink is set per-widget in Elementor (--ink-soft); nothing needed here */
.cpnw-faq-body a{color:var(--cpnw-gold-deep);font-weight:600}
.cpnw-faq-body ol{margin:0;padding-left:20px}
.cpnw-faq-body ol li{margin-bottom:8px}
@media(prefers-reduced-motion:reduce){.cpnw-faq .e-n-accordion-item[open] .cpnw-faq-body{animation:none}}
.cpnw-faq-note a{color:var(--cpnw-gold-deep);font-weight:700;text-decoration:none}

/* ---------- responsive ---------- */
html,body{overflow-x:hidden}
@media(max-width:1080px){
  /* impact: content first, photo composite below — grid placement honours order */
  .cpnw-impact-text{order:1}
  .cpnw-impact-photo{order:2;margin-top:8px}
  /* ---- About page responsive ---- */
  .cpnw-mission-photo{max-width:560px;margin-inline:auto}
  .cpnw-mission-img img{height:440px}
  .cpnw-mission-tag{left:0}
  .cpnw-streaks{display:none}
  /* tablet/mobile: founder image spans the full column width (requested) */
  .cpnw-founder-photo{position:static;max-width:none;width:100%}
  .cpnw-fimg{width:100%}
  .cpnw-fimg img{width:100%;aspect-ratio:4/5;max-height:640px;object-fit:cover}
  /* value rows stay icon-left on mobile (icon-box defaults to icon-top/centred) */
  .cpnw-mv .elementor-icon-box-wrapper{flex-direction:row!important;text-align:left!important;align-items:flex-start!important}
  .cpnw-faq .e-n-accordion-item-title-text{white-space:normal}
  .cpnw-faq .e-n-accordion-item-title-text::before{display:none}
  .cpnw-faq-body{padding-left:28px!important}
  /* keep the composite cohesive when stacked: pull the offsets inside the column */
  .cpnw-impact-sub{right:0;bottom:-20px}
  .cpnw-impact-float{left:0;top:20px}
}
@media(max-width:640px){
  /* footer bottom bar: centred stack (containers read flex from CSS vars) */
  .cpnw-fbar{--flex-direction:column;--align-items:center;--justify-content:center;--gap:6px 6px;text-align:center}
  .cpnw-fbar .elementor-widget-text-editor,.cpnw-fbar p{text-align:center!important}
  .cpnw-subform .elementor-form-fields-wrapper{flex-direction:column;align-items:stretch}
  .cpnw-btn{width:100%!important}
  .cpnw-btn .elementor-button{width:100%;justify-content:center}
  .cpnw-navcta .cpnw-btn{width:auto!important}
  .cpnw-navcta .cpnw-btn .elementor-button{width:auto}
  .cpnw-header{padding-left:10px!important;padding-right:10px!important}
  .cpnw-kicker{font-size:12px!important;letter-spacing:.16em!important}
  .elementor img{max-width:100%}
  .cpnw-h1,.cpnw-lead,.cpnw-lead-line,.cpnw-sec-p,.cpnw-h2,.cpnw-eyebrow,.cpnw-kicker,
  .cpnw-micro,.cpnw-fword{max-width:100%!important;width:100%!important}
  .cpnw-eyebrow .elementor-heading-title{flex-wrap:wrap;justify-content:center}
  .cpnw-sound{right:16px;bottom:16px}
}

/* ============================================================
   FOUNDATION PAGE
   ============================================================ */
/* --slate-50 was already referenced by the FAQ icon chip but never defined;
   declaring it here fixes that too. --slate-800 / --mist are new to this page. */
:root{--cpnw-slate-50:#F4F5F8; --cpnw-slate-800:#333D4C; --cpnw-mist:#F3F6F9}

/* ---- verse band ---- */
/* NB: the e_optimized_markup experiment is active, so widgets render without
   their .elementor-widget-container wrapper — target the widget element. */
.cpnw-verse-quote p{text-wrap:balance}

/* ---- donate band ---- */
/* underlined "employer matches" link — icon-list, gold-on-gold band so the
   glyph inherits the slate ink rather than the usual gold */
.cpnw-fd-match .elementor-icon-list-item{align-items:center}
.cpnw-fd-match .elementor-icon-list-text{text-decoration:underline;text-underline-offset:3px}
.cpnw-fd-match a:hover .elementor-icon-list-text{color:var(--cpnw-slate)}

/* ---- mentorship band ---- */
.cpnw-mentor-img img{border-radius:12px;box-shadow:var(--cpnw-sh-lg)}
/* "what our students want to learn" pills, authored as spans in a text editor */
.cpnw-learn-chips{display:flex;flex-wrap:wrap;gap:9px}
.cpnw-learn-chips span{font-size:13px;font-weight:600;color:var(--cpnw-slate-800);background:var(--cpnw-slate-50);
  border:1px solid var(--cpnw-line);padding:7px 14px;border-radius:999px;line-height:1.3}
/* meta rows — same 40px slate chip as the About page value rows */
.cpnw-mentor-meta .elementor-icon-list-item{align-items:center}
.cpnw-mentor-meta .elementor-icon-list-icon{width:40px;height:40px;border-radius:8px;background:var(--cpnw-slate);
  display:flex!important;align-items:center;justify-content:center;flex-shrink:0;padding:0!important}
.cpnw-mentor-meta .elementor-icon-list-icon svg{margin:0;display:block;fill:var(--cpnw-gold)!important}
.cpnw-mentor-meta .elementor-icon-list-text{margin-left:12px}

/* ---- metrics ---- */
.cpnw-metric{transition:.3s var(--cpnw-ease)}
.cpnw-metric:hover{border-color:var(--cpnw-gold-line)!important;transform:translateY(-3px)}
.cpnw-metrics-note b{color:var(--cpnw-slate-900)}
.cpnw-metrics-note em{font-style:italic}

/* ---- Atlanta resource directory ---- */
/* category head is an icon-box (icon + title, no description) */
.cpnw-dir-head{margin:0!important}
/* row direction, vertical alignment and icon spacing are the icon-box's own
   controls (Position / Vertical Alignment / Icon Spacing) — Elementor emits
   those at (0,4,0), so anything set here would only ever be a dead rule. */
.cpnw-dir-head .elementor-icon-box-icon{margin:0!important;flex-shrink:0}
.cpnw-dir-head .elementor-icon{width:34px;height:34px;border-radius:8px;background:var(--cpnw-slate);
  display:flex;align-items:center;justify-content:center}
.cpnw-dir-head .elementor-icon svg{fill:var(--cpnw-gold)!important}
.cpnw-dir-head .elementor-icon-box-title{margin:0}
.cpnw-dir-list ul{margin:0;padding:0;list-style:none}
.cpnw-dir-list li{font-size:14.5px;color:var(--cpnw-ink-soft);padding:6px 0;border-bottom:1px solid var(--cpnw-line)}
.cpnw-dir-list li:last-child{border-bottom:none}
.cpnw-dir-list li b{color:var(--cpnw-slate-900);font-weight:700}
.cpnw-dir-list li a{color:var(--cpnw-gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cpnw-dir-list li a:hover{color:var(--cpnw-slate-900)}
.cpnw-dir-note em{font-style:italic}

/* ---- resource cards ---- */
.cpnw-res-card{transition:.3s var(--cpnw-ease)}
.cpnw-res-card:hover{transform:translateY(-6px);box-shadow:var(--cpnw-sh);border-color:var(--cpnw-gold-line)!important}
.cpnw-res-img img{width:100%;display:block}
.cpnw-res-body{flex-grow:1}
.cpnw-res-cta{margin-top:auto!important}

/* The interactive board explorer (#board) lives in cpnw-board.css /
   cpnw-board.js — enqueued only on pages that actually use the section. */

/* ---------- Foundation responsive ---------- */
@media(max-width:640px){
  .cpnw-mentor-meta .elementor-icon-list-icon{width:34px;height:34px}
  .cpnw-fd-match .elementor-icon-list-items{justify-content:flex-start}
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
/* The hero's darkening veil is Elementor's own Background Overlay control
   (Style → Background Overlay on the hero container), so its strength stays
   tunable from the panel rather than being pinned in this file. */

/* ---- contact info cards ----
   Card hover (lift, shadow, gold border), the 52px icon chip and the social
   chips are all native now — container Hover + Transform, and the Icon
   widget's Stacked view. Only the link colours inside the value text remain,
   since that markup lives inside a text editor. */
.cpnw-ci-val a{color:var(--cpnw-slate-900);text-decoration:none;transition:color .2s}
.cpnw-ci-val a:hover{color:var(--cpnw-gold-deep)}
/* Stacked icons have no border control, so the social chips' hairline stays here */
.cpnw-cs-link .elementor-icon{border:1px solid var(--cpnw-line)}
.cpnw-cs-link .elementor-icon:hover{border-color:var(--cpnw-gold)}

/* ---- contact form card ----
   Field box, radius and typography are all set on the widget natively. These
   three have no matching control: the focus ring, the textarea resize/height,
   and field padding (the form widget only exposes padding for its button). */
.cpnw-cform .elementor-field-textual:focus{border-color:var(--cpnw-gold)!important;background:#fff!important;
  box-shadow:0 0 0 3px rgba(217,198,132,.25)}
.cpnw-cform .elementor-field-textual{padding:13px 15px}
.cpnw-cform textarea.elementor-field-textual{resize:vertical;min-height:130px}

/* ---- map band ----
   google_maps has no CSS-filter control, so the grayscale stays here. */
.cpnw-map,.cpnw-map .elementor-widget-google_maps{line-height:0}
.cpnw-map iframe{display:block;width:100%;filter:grayscale(.2)}

/* ============================================================
   BECOME A MENTOR PAGE
   ============================================================ */
/* Section furniture only — copy, layout, colours, the card and the CTA are
   all native Elementor. These four need pseudo-elements, masks or an
   animation, none of which the panel exposes. */
.cpnw-mentor-split{position:relative;overflow:hidden}
.cpnw-mentor-split>.e-con-inner{position:relative;z-index:2}
/* dark scrim under the transparent header, gone by 150px */
.cpnw-mentor-split::before{content:"";position:absolute;top:0;left:0;right:0;height:150px;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,var(--cpnw-slate-900) 0%,rgba(40,48,60,.55) 55%,transparent 100%)}
/* wider-gauge geometric lines, masked to that same band */
.cpnw-mentor-split::after{content:"";position:absolute;top:0;left:0;right:0;height:150px;z-index:1;
  pointer-events:none;
  background-image:repeating-linear-gradient(60deg,rgba(255,255,255,.18) 0 1px,transparent 1px 56px),
                   repeating-linear-gradient(-60deg,rgba(255,255,255,.18) 0 1px,transparent 1px 56px),
                   repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 56px);
  -webkit-mask:linear-gradient(180deg,#000 0,#000 70px,transparent 150px);
          mask:linear-gradient(180deg,#000 0,#000 70px,transparent 150px)}
/* the photo washes in from the right; its image is set on the container
   natively, only the fade and the horizontal mask live here */
.cpnw-ms-photo{position:absolute!important;inset:0;z-index:0;pointer-events:none;opacity:.14;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 45%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 45%,#000 100%)}
/* "scroll to fill" nudge */
.cpnw-hs-arrow .elementor-icon{animation:cpnw-hsbob 1.5s var(--cpnw-ease) infinite}
@keyframes cpnw-hsbob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.cpnw-hs-arrow .elementor-icon{animation:none}}
/* third-party registration embed — no Elementor widget renders a raw iframe */
.cpnw-ms-frame iframe{width:100%;height:600px;border:0;display:block;background:#fff}
@media(max-width:1000px){.cpnw-ms-frame iframe{height:680px}}
@media(max-width:520px){.cpnw-hs-txt{display:none}}

/* ============================================================
   INDIVIDUAL MEMBERSHIP PAGE
   ============================================================ */
/* headline holds one line until it genuinely can't */
.cpnw-oneline .elementor-heading-title{max-width:none;white-space:nowrap}
@media(max-width:560px){
  .cpnw-oneline .elementor-heading-title{white-space:normal;font-size:clamp(34px,10vw,44px)}
}
/* pricing-card head texture (pseudo-element, so not a panel control) */
.cpnw-phead{position:relative;overflow:hidden}
.cpnw-phead::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(60deg,rgba(255,255,255,.12) 0 1px,transparent 1px 46px),
                   repeating-linear-gradient(-60deg,rgba(255,255,255,.12) 0 1px,transparent 1px 46px)}
.cpnw-phead>.e-con-inner,.cpnw-phead>*{position:relative;z-index:1}
/* the media column tracks the pricing card as it scrolls */
.cpnw-media-col{position:sticky;top:100px}
.cpnw-media{position:relative}
.cpnw-media img{min-height:420px;object-fit:cover;width:100%}
@media(max-width:960px){
  .cpnw-media-col{position:static}
  .cpnw-media img{min-height:340px}
}
/* caption plate reading out of the photo */
.cpnw-tagline{position:absolute!important;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(0deg,rgba(40,48,60,.88),transparent)}
/* benefit ticks: 26px cream chip, text wraps beside it */
.cpnw-blist .elementor-icon-list-item{align-items:flex-start}
.cpnw-blist .elementor-icon-list-icon{width:26px;height:26px;border-radius:7px;background:var(--cpnw-cream);
  display:flex!important;align-items:center;justify-content:center;flex-shrink:0;padding:0!important;margin-top:2px}
.cpnw-blist .elementor-icon-list-icon svg{margin:0;fill:var(--cpnw-gold-deep)!important}
.cpnw-blist .elementor-icon-list-text{margin-left:13px}
.cpnw-blist b{color:var(--cpnw-slate-900);font-weight:700}
/* application button fills the card */
.cpnw-pcta .elementor-button{width:100%;justify-content:center}