/* Grace shared base: reset, :root color tokens, typography, nav, dropdown, footer, hamburger + mobile nav. Single source of truth. Loaded first by every page. */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif;color:var(--text);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:0 40px}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1100px;margin:0 auto;padding:0 40px}
.logo-img{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo-img img{display:block;height:32px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-size:14px;color:var(--muted);text-decoration:none}
.nav-links a:hover{color:var(--navy)}
.lang-btn{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);border:1px solid var(--border);padding:4px 10px;border-radius:5px;text-decoration:none}
.nav-cta{font-size:13px;font-weight:600;background:var(--coral);color:var(--white);padding:10px 20px;border-radius:7px;text-decoration:none;transition:background .2s}
.nav-cta:hover{background:var(--coral-l)}
.has-dropdown{position:relative}
.has-dropdown>a{display:flex;align-items:center;gap:5px;cursor:pointer;text-transform:uppercase;font-weight:800;color:var(--navy);letter-spacing:.06em;font-size:13px}
.has-dropdown>a:hover{color:var(--teal)}
.has-dropdown>a svg{transition:transform .2s}
/* Desktop-only: hover is the actual open mechanism there, so the chevron
   should reflect it. On mobile the accordion opens via tap (.dd-open), not
   hover, so this must not fire below the breakpoint -- otherwise resting the
   cursor near "Solutions" right after tapping the hamburger flips the arrow
   to its open position while the panel itself is still closed, reading as
   "Solutions opened by itself". */
@media(min-width:769px){.has-dropdown:hover>a svg{transform:rotate(180deg)}}
.dropdown{position:absolute;top:100%;left:-16px;background:var(--white);border:1px solid var(--border);border-radius:14px;padding:8px;padding-top:20px;box-shadow:0 12px 40px rgba(13,27,46,.13);min-width:300px;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .18s,transform .18s;z-index:200}
/* Hover bridge for the gap between the trigger and the panel, so moving the
   cursor down into the submenu doesn't close it. The dropdown sits flush
   against the trigger (top:100%, no gap) so there's nothing to bridge right
   now — keep this at 0 height. Any positive height here reaches back up
   over the nav link's own text and swallows clicks meant for it (this broke
   "Programs"/"HR Support"/"About" clicks sitewide when it was 18px). */
.dropdown::before{content:'';position:absolute;left:0;right:0;top:0;height:0}
.has-dropdown:hover .dropdown{opacity:1;pointer-events:all;transform:translateY(0)}
.dropdown.mega{min-width:860px;padding:20px;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 24px}
.mega-col:not(:first-child){border-left:1px solid var(--border);padding-left:20px}
.mega-col-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--light);padding:0 14px 8px;display:flex;align-items:center;gap:6px}
.dd-item{display:flex;align-items:baseline;white-space:nowrap;gap:6px;padding:12px 14px;border-radius:8px;text-decoration:none;transition:background .15s}
.dd-item:hover{background:var(--gray)}
.dd-label{font-size:16px;font-weight:600;color:var(--navy);display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.dd-sub{font-size:16px;font-weight:600;color:var(--navy)}
.dd-topic{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 28px;border-radius:8px;text-decoration:none;font-size:13px;color:var(--muted);transition:background .15s,color .15s}
.dd-topic:hover{background:var(--gray);color:var(--navy)}
.dd-topic::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--teal);flex-shrink:0}
.dd-topic.see-all{font-size:12px;font-weight:600;color:var(--coral);padding-top:6px}
.dd-topic.see-all::before{background:var(--coral)}
.dd-badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--teal-10);color:var(--teal);border:1px solid var(--teal-20);padding:2px 7px;border-radius:4px}
.dd-divider{height:1px;background:var(--border);margin:6px 8px}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:11px;font-weight:700;color:var(--navy);letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px}
.form-row label:has(+ input[required])::after{content:' *';color:var(--coral)}
.form-check{display:flex;align-items:center;gap:12px;margin:14px 0}
.form-check input{width:auto;flex-shrink:0}
.form-check label{font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400;margin-bottom:0;line-height:1.5}
.form-submit{width:100%;padding:14px;background:var(--coral);color:var(--white);border:none;border-radius:7px;font-size:14px;font-weight:700;cursor:pointer;margin-top:6px;font-family:inherit;transition:background .2s}
.form-submit:hover{background:var(--coral-l)}
.form-success{text-align:center;padding:24px 8px}
.form-success-icon{width:56px;height:56px;border-radius:50%;background:var(--teal);color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.form-success h3{font-size:23px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:8px;line-height:1.25}
.form-success p{font-size:14px;color:var(--muted);line-height:1.6}
.lead-modal-overlay{position:fixed;inset:0;background:rgba(13,27,46,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;overflow-y:auto}
.lead-modal-overlay.is-open{display:flex}
.lead-modal{background:var(--white);border-radius:16px;max-width:460px;width:100%;max-height:calc(100vh - 40px);overflow-y:auto;position:relative;box-shadow:0 24px 64px rgba(13,27,46,.28);padding:36px}
.lead-modal-close{all:unset;position:absolute;top:14px;right:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;border-radius:50%;transition:background .2s}
.lead-modal-close:hover{background:var(--gray)}
.lead-modal-title{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin-bottom:6px}
.lead-modal-sub{font-size:14px;color:var(--muted);margin-bottom:22px;line-height:1.6}
.lead-modal-extra{display:none}
.lead-modal-extra.is-visible{display:block}
.lead-field-error{font-size:12px;color:var(--coral);margin-top:5px;display:none;line-height:1.4}
.lead-field-error.is-visible{display:block}
.form-row input.is-invalid{border-color:var(--coral)}
.form-check.is-invalid label{color:var(--coral)}
.impact-card-photo{padding:0;overflow:hidden}
.impact-card-photo .impact-card-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.impact-card-photo .impact-card-img.contain{object-fit:contain;background:var(--cream)}
.impact-card-photo h4{margin-top:20px;padding:0 24px;font-size:20px;font-weight:800;color:var(--navy);text-transform:none;letter-spacing:-.01em}
.impact-card-photo ul{padding:0 24px 24px}
.impact-card h3{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.01em;line-height:1.3}
.feature-hero-img{width:100%;aspect-ratio:2228/933;background-size:contain;background-repeat:no-repeat;background-position:center;border-radius:16px;margin-top:40px}
.contact-form-cta{display:flex;align-items:center;justify-content:center;min-height:180px;background:none;border:none;box-shadow:none;padding:0}
@media(max-width:768px){
.impact-card-photo h4{margin-top:10px}
.feature-hero-img{display:none}
}
.impact-card .how-icon{margin-bottom:16px}
.split-media{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:40px}
.split-media.reverse .split-media-img{order:2}
.split-media.reverse .split-media-text{order:1}
.split-media-img{width:100%;min-height:420px;background-size:cover;background-position:center;border-radius:16px}
.split-media-img.square{aspect-ratio:1/1;min-height:0;align-self:start}
.split-benefits{display:flex;flex-direction:column;gap:22px;margin-top:24px}
.split-benefits h4{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px}
.split-benefits p{font-size:14px;color:var(--muted);line-height:1.65;margin:0}
@media(max-width:768px){
.split-media{grid-template-columns:1fr}
.split-media.reverse .split-media-img{order:0}
.split-media.reverse .split-media-text{order:0}
.split-media-img{min-height:240px}
}
.split-media-text h3{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.2;margin-bottom:12px}
footer{background:var(--navy);padding:64px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1.1fr .9fr .8fr .9fr .8fr;gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-brand .logo-img{display:inline-flex;margin-bottom:14px;background:white;padding:6px 10px;border-radius:6px}
.footer-brand p{font-size:13px;color:rgba(255,255,255,.35);line-height:1.7;max-width:230px}
.footer-col h5{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col ul a{font-size:13px;color:rgba(255,255,255,.45);text-decoration:none}
.footer-col ul a:hover{color:var(--white)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:24px}
.footer-bottom p{font-size:12px;color:rgba(255,255,255,.2)}
.footer-bottom p a.termly-display-preferences{color:inherit;cursor:pointer}
.footer-bottom p a.termly-display-preferences:hover{color:rgba(255,255,255,.5)}
.lang-pill{display:flex;gap:4px}
.lang-pill a{font-size:11px;font-weight:700;padding:4px 10px;border-radius:4px;text-decoration:none;letter-spacing:.06em}
.lang-pill .on{background:var(--teal-10);color:var(--teal)}
.lang-pill .off{color:rgba(255,255,255,.28)}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px;border-radius:6px;flex-shrink:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-only{display:none}
@media(max-width:768px){
.hamburger{display:flex}
.nav-cta{display:none}
.nav-links{display:none;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:64px;left:0;right:0;z-index:300;
    background:var(--white);border-bottom:1px solid var(--border);
    padding:8px 20px 20px;box-shadow:0 8px 32px rgba(13,27,46,.12)}
.nav-links.mob-open{display:flex}
.nav-links>li{width:100%}
.nav-links>li>a{display:block;padding:11px 0;font-size:15px;font-weight:600;
    color:var(--navy);border-bottom:1px solid var(--border);
    text-decoration:none}
.nav-links>li:last-child>a{border-bottom:none}
.nav-links>li.has-dropdown>a{text-transform:uppercase;font-weight:800;letter-spacing:.06em}
.has-dropdown>a svg{margin-left:auto;transition:transform .2s}
.has-dropdown.dd-open>a svg{transform:rotate(180deg)}
/* Animated reveal (max-height, not display:none/block) so the accordion
   grows into place instead of snapping open instantly -- an instant snap
   shifts every item below it right under a moving cursor/finger, which was
   causing taps meant for the next nav item to land on newly-revealed
   content instead (reported as "reacts oddly and I can't click"). */
.dropdown{position:static;display:block;opacity:1;pointer-events:none;visibility:hidden;transform:none;box-shadow:none;border:none;min-width:0;width:100%;padding:0 0 0 14px;background:transparent;max-height:0;overflow:hidden;transition:max-height .22s ease}
.has-dropdown:hover .dropdown{max-height:0}
.has-dropdown.dd-open .dropdown{pointer-events:auto;visibility:visible;max-height:640px;padding:2px 0 6px 14px}
.dropdown.mega{display:grid;grid-template-columns:1fr;gap:14px;padding:0;min-width:0}
.mega-col:not(:first-child){border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:10px;margin-top:6px}
.dd-item,.dd-label{white-space:normal}
.dd-item{flex-direction:column;align-items:flex-start;gap:0}
.dd-divider{display:none}
.lang-btn{border:none!important;padding:11px 0!important;font-size:15px!important;font-weight:600!important;color:var(--muted)!important}
.mob-only{display:block}
.mob-cta{display:block;margin-top:12px;text-align:center;
    background:var(--coral);color:var(--white)!important;
    padding:13px;border-radius:8px;font-size:14px;
    font-weight:700;text-decoration:none;border-bottom:none!important}
nav{position:sticky}
.container{padding:0 20px}
.two-col,.two-col-wide{grid-template-columns:1fr!important;gap:32px}
.impact-grid,.domain-grid,.ei-grid,.ov-grid,.value-grid,.format-grid{grid-template-columns:1fr;gap:14px}
.prog-grid,.hr-grid{grid-template-columns:1fr;gap:14px}
.footer-grid{grid-template-columns:1fr 1fr;gap:28px}
.footer-bottom{flex-direction:column;gap:12px;text-align:center}
}
@media(max-width:480px){
.lead-modal{padding:28px 20px}
.footer-grid{grid-template-columns:1fr;gap:24px}
}

.page-hero.has-photo{background-size:cover;background-position:center 28%;background-repeat:no-repeat}

/* Uniform hero height (match The Human Edge); natural height on mobile */
.page-hero{min-height:432px;display:grid;align-content:start}
@media(max-width:768px){.page-hero{min-height:auto}}