/*
Theme Name: Speech Pathology Genetics Mockup
Description: Think Genetic visual prototype.
Version: 0.2.0
*/
:root{--ink:#25244c;--purple:#4b4898;--purple-line:#b34cff;--coral:#ff7774;--teal:#0098a5;--paper:#eef1f1;--muted:#20202a;--white:#fff;--road:#9898c3;--line:#e5e5e5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--muted);font-family:"Trebuchet MS",Arial,sans-serif;line-height:1.45}a{color:inherit}.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.screen-reader-text:focus{position:fixed;top:1rem;left:1rem;z-index:100;width:auto;height:auto;margin:0;padding:.6rem .8rem;clip:auto;background:#fff;color:var(--ink)}
.site-header{background:#fff}.institution-bar{height:116px;max-width:1300px;margin:auto;padding:27px 5.7%;display:flex;align-items:flex-start;justify-content:space-between}.mcri-logo img{display:block;width:190px;height:auto}.header-tools{display:flex;gap:24px;align-items:center;margin-top:14px}.search-form{display:flex;height:39px}.search-form input{width:185px;border:1px solid #cbd3da;border-radius:4px 0 0 4px;padding:0 12px;font:15px Arial;color:#555}.search-form button,.donate-button{border:0;background:#00869a;color:#fff;font:bold 14px Arial;text-decoration:none}.search-form button{padding:0 16px}.donate-button{padding:12px 17px}.project-bar{position:relative;max-width:1300px;height:326px;margin:auto;padding-left:5.7%;display:flex;align-items:center;overflow:hidden}.project-lockup{display:flex;align-items:center;gap:18px;width:330px;z-index:2;text-decoration:none;color:#008ca1}.project-lockup strong{display:block;font-size:24px;line-height:1.05}.project-lockup small{display:block;margin-top:10px;text-align:center;font-size:14px}.brain-mark{position:relative;display:block;width:80px;height:72px;border:6px solid #00a5a9;border-radius:48% 52% 50% 45%;transform:rotate(-4deg)}.brain-mark:before,.brain-mark:after{content:"";position:absolute;left:32px;width:5px;height:17px;border-left:3px solid #00a5a9;border-radius:50%}.brain-mark:before{top:8px}.brain-mark:after{bottom:8px}.brain-mark i{position:absolute;left:18px;width:42px;border-top:4px solid #00a5a9;transform:rotate(17deg)}.brain-mark i:nth-child(1){top:18px}.brain-mark i:nth-child(2){top:32px;transform:rotate(-17deg)}.brain-mark i:nth-child(3){top:45px}.children-banner{position:absolute;right:0;top:0;width:74%;height:100%;object-fit:cover;object-position:center;border-radius:0 0 0 28px}.site-nav{min-height:68px;max-width:1300px;margin:auto;padding:15px 5.7%;display:flex;align-items:center;gap:27px;border-top:1px solid #eee;background:#fff;font-size:18px;color:#747474}.site-nav a{text-decoration:none;white-space:nowrap}.site-nav a:hover,.site-nav .active{color:#222;font-weight:bold}
.think-hero{background:#eef1f1;padding:34px 5.7% 14px}.think-hero-inner{max-width:1300px;margin:auto}.hero-kicker,.eyebrow{margin:0 0 8px;color:#706c7c;font:bold 12px Arial;letter-spacing:.14em;text-transform:uppercase}.think-hero h1{margin:0;color:var(--purple);font-size:clamp(54px,7vw,82px);line-height:.95;letter-spacing:-3px;font-weight:800}.think-hero h1 span{color:var(--coral)}.scribble{width:440px;max-width:72%;height:17px;border-top:6px solid var(--purple-line);border-radius:50%;transform:rotate(-1deg);margin:0 0 6px 4px;box-shadow:0 5px 0 -2px #db80ff}.hero-subtitle{margin:0;font-size:21px}.hero-intro{max-width:560px;margin:11px 0 0;color:#5c5c68;font-size:16px}
.journey{position:relative;isolation:isolate;overflow:hidden;background:#eef1f1;padding:32px 5.7% 83px}.journey-inner{position:relative;z-index:2;max-width:1300px;margin:auto}.journey-heading{margin-bottom:28px}.journey h2,.after-journey h2{margin:0;color:var(--ink);font-size:35px;line-height:1.05}.road{position:absolute;z-index:0;left:-7%;right:-7%;top:86px;height:600px;transform:rotate(-8deg);border:78px solid var(--road);border-radius:48% 52% 44% 56%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.45)}.road:after{content:"";position:absolute;inset:17px;border:4px dashed #f7f6f2;border-radius:inherit}.road-leaf{position:absolute;z-index:3;width:22px;height:44px;border-radius:70% 0 70% 0;background:#72b998;transform:rotate(-35deg)}.leaf-one{right:5%;top:30px}.leaf-two{left:19%;bottom:-1px;transform:rotate(30deg)}.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;position:relative}.think-card{position:relative;display:flex;align-items:center;gap:17px;min-height:244px;padding:42px 26px 25px 25px;background:#fff;border:1.5px solid;border-radius:10px;text-decoration:none;box-shadow:0 5px 7px rgba(33,35,69,.18);transition:transform .2s,box-shadow .2s}.think-card:hover,.think-card:focus{transform:translateY(-5px);box-shadow:0 12px 18px rgba(33,35,69,.22)}.card-purple{border-color:#b842ff}.card-coral{border-color:var(--coral)}.card-teal{border-color:var(--teal)}.card-pin{position:absolute;top:-27px;left:21px;width:38px;height:43px;padding-top:5px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);color:#fff;text-align:center;font:bold 18px Arial}.card-pin:after{content:"";position:absolute;inset:10px;border:3px solid #fff;border-radius:50%}.card-pin{background:#b842ff}.card-coral .card-pin{background:var(--coral)}.card-teal .card-pin{background:var(--teal)}.card-pin::first-letter{transform:rotate(45deg)}.card-icon{width:112px;height:112px;object-fit:contain;flex:0 0 auto}.card-copy h3{margin:0 19px 13px 0;color:var(--purple);font-size:22px;line-height:1.18}.card-copy p{margin:0 0 16px;font-size:14px;line-height:1.35}.view-links{color:#b33cff;text-decoration:underline;font-size:14px}.view-links b{font-size:17px;text-decoration:none}.card-chevron{position:absolute;right:22px;top:46px;color:var(--purple);font:bold 23px Arial}.after-journey{max-width:1300px;margin:auto;padding:75px 5.7% 100px;background:#fff}.after-journey .lead{max-width:650px;font-size:18px;color:#60606a}.button{display:inline-block;margin-top:10px;padding:13px 19px;background:var(--purple);color:#fff;text-decoration:none;border-radius:4px;font-weight:bold}.site-footer{background:var(--ink);color:#fff}.site-footer-inner{max-width:1300px;margin:auto;padding:32px 5.7%;display:flex;justify-content:space-between;gap:20px}.site-footer a{color:#fff}.mockup-note{display:none}
@media(max-width:900px){.institution-bar{height:auto;padding:20px 5%}.mcri-logo img{width:165px}.header-tools{margin-top:2px;gap:10px}.search-form input{width:125px}.project-bar{height:245px;padding-left:5%;align-items:flex-end;padding-bottom:25px}.project-lockup{width:270px;gap:10px}.project-lockup strong{font-size:18px}.project-lockup small{font-size:11px}.brain-mark{width:61px;height:56px}.brain-mark:before,.brain-mark:after{left:24px}.brain-mark i{left:12px;width:35px}.children-banner{width:78%;height:100%}.site-nav{gap:16px;overflow:auto;padding:12px 5%;font-size:15px}.stage-grid{gap:22px}.think-card{flex-direction:column;align-items:flex-start;padding-top:35px}.card-icon{width:95px;height:95px}.card-copy h3{font-size:20px}}
@media(max-width:650px){.institution-bar{align-items:center;flex-direction:column;gap:15px}.header-tools{width:100%;justify-content:flex-start}.search-form{flex:1}.search-form input{width:100%}.project-bar{height:230px}.project-lockup{width:250px}.children-banner{width:100%;opacity:.52}.site-nav{min-height:52px}.think-hero{padding:32px 7% 20px}.think-hero h1{font-size:56px}.hero-intro{font-size:15px}.journey{padding:28px 7% 65px}.journey h2{font-size:29px}.stage-grid{grid-template-columns:1fr;gap:31px}.think-card{min-height:210px;flex-direction:row;align-items:center}.card-icon{width:100px;height:100px}.road{left:22%;right:-50%;top:45px;height:1000px;transform:rotate(4deg);border-width:65px}.after-journey{padding:55px 7% 75px}.site-footer-inner{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.think-card{transition:none}}
.road-svg{display:block}
@media(max-width:650px){.road-svg{left:-32%;top:28px;width:165%;height:980px}}

/* Refinements for the restored institutional header and content sections. */
.project-lockup{position:relative;width:380px;height:190px;padding:20px 25px 20px 0;z-index:3;background:#fff}
.children-banner{width:64%}
.site-nav a{display:inline-flex;align-items:center;gap:7px}
.nav-caret{display:inline-flex;align-items:center;padding-left:4px;line-height:1;font-size:17px;transform:translateY(-4px)}
.section{max-width:1300px;margin:auto;padding:46px 5.7%;background:var(--paper)}
.section h2{margin:0 0 26px;color:var(--ink);font-size:42px;line-height:1.05}
.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.intro-grid article{padding:24px;border:1px solid #dfe4e4;border-radius:10px;background:#fff;box-shadow:0 5px 15px rgba(33,35,69,.06)}
.intro-grid h3{margin:0 0 10px;color:var(--purple);font-size:22px}
.intro-grid p{margin:0;color:#5c5c68}
.conversation-section,.after-journey,.research-section{background:var(--paper)}
.research-section .lead{max-width:650px;color:#60606a;font-size:18px}
.journey{overflow:visible;padding-bottom:32px}.road{border-width:108px;box-shadow:inset 0 0 0 4px rgba(218,218,235,.65),0 0 0 1px rgba(91,91,145,.14)}.road:after{inset:50px;border:5px dashed #f7f6f2;opacity:.95}.stage-grid{z-index:2}.card-pin{z-index:5}
.road-clip{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}.road-svg{position:absolute;left:0;top:8px;width:100%;height:650px;overflow:visible}.road-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}.road-shadow{stroke:#ced0e2;stroke-width:194}.road-surface{stroke:#999ac3;stroke-width:166}.road-line{stroke:#f8f7f1;stroke-width:5;stroke-dasharray:27 26}.road-tree{fill:#6db18e;stroke:#4d9a78;stroke-width:2}.road-tree path:first-child{fill:#986e54;stroke:none}.road-tree path:last-child{fill:#74ba98;stroke:none}.tree-left{transform:translate(78px,470px) scale(1.25)}.tree-mid{transform:translate(474px,519px) scale(.92)}.tree-right{transform:translate(1300px,0) scale(1.15)}
@media(max-width:900px){.project-lockup{width:270px;height:auto;padding:12px 12px 12px 0}.children-banner{width:72%}.intro-grid{grid-template-columns:1fr 1fr}.section h2{font-size:36px}}
@media(max-width:650px){.project-lockup{width:250px}.children-banner{width:100%;opacity:.52}.intro-grid{grid-template-columns:1fr}.section{padding:55px 7%}.section h2{font-size:31px}}

/* Final viewport fit: the illustration may decorate the section, but never create horizontal scroll. */
body{overflow-x:hidden}
.journey{overflow:visible!important}
.road-svg{left:0;width:100%;top:8px}
@media(max-width:650px){.road-svg{left:0;width:100%;top:8px;height:980px}}
.card-icon{display:block;object-fit:contain}

/* One shared desktop gutter for all content; only the road illustration runs edge-to-edge. */
.institution-bar,.project-bar,.site-nav,.think-hero,.journey,.section{padding-left:5.7%;padding-right:5.7%}
.institution-bar{padding-right:5.7%}
.project-bar{padding-right:5.7%}
.children-banner{right:5.7%;width:58%}
.site-nav{gap:21px}
@media(max-width:900px){.institution-bar,.project-bar,.site-nav,.think-hero,.journey,.section{padding-left:5%;padding-right:5%}.children-banner{right:5%;width:60%}.site-nav{gap:16px}}
@media(max-width:650px){.children-banner{right:0;width:100%}}

/* Shared button feedback and header alignment. */
.institution-bar{padding-right:5.7%}
.button,.donate-button,.search-form button{transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.button:hover,.button:focus-visible{background:#393675;box-shadow:0 6px 14px rgba(37,36,76,.2);transform:translateY(-2px)}
.donate-button:hover,.donate-button:focus-visible,.search-form button:hover,.search-form button:focus-visible{background:#006d7e;box-shadow:0 4px 10px rgba(0,105,126,.2);transform:translateY(-2px)}
.button:focus-visible,.donate-button:focus-visible,.search-form button:focus-visible{outline:3px solid rgba(75,72,152,.4);outline-offset:3px}
@media(max-width:900px){.institution-bar{padding-right:5%}}

/* Gentle page-load rhythm: the content arrives in the same order people read it. */
@keyframes think-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-settle{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.think-hero-inner>.hero-kicker{animation:think-rise .55s ease-out both}
.think-hero-inner>h1{animation:think-rise .65s .08s ease-out both}
.think-hero-inner>.scribble{animation:think-rise .55s .18s ease-out both}
.think-hero-inner>.hero-subtitle{animation:think-rise .55s .24s ease-out both}
.think-hero-inner>.hero-intro{animation:think-rise .55s .31s ease-out both}
.think-card{animation:card-settle .65s ease-out both}
.think-card:nth-child(1){animation-delay:.14s}.think-card:nth-child(2){animation-delay:.24s}.think-card:nth-child(3){animation-delay:.34s}
.think-card:focus-visible{outline:3px solid rgba(75,72,152,.45);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.think-hero-inner>*,.think-card{animation:none!important}.think-card{transition:none}}

/* Unified page grid. The roadway is the only full-bleed visual. */
:root{--content-column:1440px}
.think-hero,.journey{padding-left:0;padding-right:0}
.institution-bar,.project-bar,.site-nav{width:calc(100% - 2.5%);max-width:var(--content-column);margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
.think-hero-inner,.journey-inner{width:calc(100% - 2.5%);max-width:var(--content-column);margin-left:auto;margin-right:auto}
.section{width:calc(100% - 2.5%);max-width:var(--content-column);padding-left:0;padding-right:0}
.institution-bar{padding-right:0}
.project-bar{padding-left:0;padding-right:0}
.children-banner{right:0;width:58%}
.site-nav{gap:18px;font-size:15px}
.road-clip{left:0;right:0;width:auto;margin-left:0;margin-right:0}
@media(max-width:1049px){.institution-bar,.project-bar,.site-nav,.think-hero-inner,.journey-inner,.section{width:90%;max-width:none}.children-banner{right:0;width:58%}}
@media(max-width:650px){.institution-bar,.project-bar,.site-nav,.think-hero-inner,.journey-inner,.section{width:86%}.children-banner{right:0;width:100%}.site-nav{gap:16px;font-size:15px}}
.stage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.think-card{min-width:0}
.card-copy{min-width:0}

/* Stack the roadmap cards at the mobile breakpoint; keep them in a row on medium screens. */
@media(max-width:1100px){.think-card{flex-direction:column;align-items:flex-start;padding-top:35px}.card-icon{width:95px;height:95px}.card-copy h3{font-size:20px}}
@media(max-width:767px){.stage-grid{grid-template-columns:1fr;gap:31px}}

/* Keep navigation hover feedback from changing the flex layout. */
.site-nav a{position:relative;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease}
.site-nav a:hover,.site-nav a:focus-visible{color:#222;background:#eef1f1;box-shadow:0 4px 10px rgba(37,36,76,.12);transform:translateY(-2px)}
.site-nav a:hover:not(.active),.site-nav a:focus-visible:not(.active){font-weight:normal}
.site-nav a:focus-visible{outline:3px solid rgba(75,72,152,.4);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.site-nav a{transition:none}.site-nav a:hover,.site-nav a:focus-visible{transform:none}}