@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f5f2e9;--ink:#183b37;--orange:#d65331;--muted:#586762;--line:#cdd2c6;--yellow:#e9d17e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:17px;line-height:1.65}h1,h2,h3,.brand{font-family:Manrope,'Arial',sans-serif;line-height:1.08;letter-spacing:-.045em}h1{font-size:clamp(48px,6.5vw,88px);font-weight:600;margin:22px 0 28px;max-width:930px}h2{font-size:clamp(34px,4vw,52px);font-weight:600;margin:12px 0 24px}h3{font-size:25px;font-weight:600;margin:15px 0}p{margin:0 0 20px}a{color:inherit;text-underline-offset:5px}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--orange);outline-offset:5px}.wrap{max-width:1240px;padding:0 44px;margin:auto}header{border-bottom:1px solid var(--line)}.nav{min-height:103px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{text-decoration:none;font-size:22px;font-weight:800;letter-spacing:-1px}.brand small{display:block;font:10px 'DM Sans',sans-serif;letter-spacing:2px;margin-top:9px}.navlinks{display:flex;align-items:center;gap:27px;font-size:13px}.navlinks a{text-decoration:none}.navlinks a[aria-current=page]{border-bottom:2px solid var(--orange);padding-bottom:5px}.navlinks .navcta{border:1px solid var(--ink);padding:10px 15px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2.1px;font-weight:700;display:block}.orange{color:var(--orange)}.hero{padding:76px 0 64px}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:34px}.hero-grid h1{font-size:clamp(48px,5.4vw,73px)}.lead{font-size:20px;max-width:630px;line-height:1.6;color:var(--muted)}.buttons{display:flex;gap:23px;align-items:center;flex-wrap:wrap;margin-top:32px}.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:15px 22px;text-decoration:none;font-size:13px;border:0;cursor:pointer}.btn:hover{background:#2d5750}.textlink{font-size:13px;font-weight:700}.caption{font-size:11px;color:var(--muted);letter-spacing:.3px}.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;display:flex;gap:25px;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:1.5px}.section{padding:76px 0}.section+.section{border-top:1px solid var(--line)}.split{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:start}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}.number{font-size:12px;color:var(--orange);letter-spacing:1px}.rule{padding-top:20px;border-top:1px solid var(--ink)}.dark{background:var(--ink);color:var(--paper)}.dark .lead,.dark .caption{color:#c6d1c8}.dark .btn{background:var(--yellow);color:var(--ink)}.bigquote{font-family:Manrope,sans-serif;font-size:clamp(30px,4vw,52px);line-height:1.25;letter-spacing:-.04em;max-width:950px;margin:0}.tag{border:1px solid var(--line);padding:6px 12px;font-size:11px;display:inline-block;margin:0 6px 9px 0}.note{padding:25px 29px;border-left:3px solid var(--orange);background:#eae7dc}.note p:last-child{margin-bottom:0}.steps{counter-reset:steps}.step{display:grid;grid-template-columns:65px 1fr 1fr;gap:28px;border-top:1px solid var(--line);padding:28px 0}.step h3{margin:0}.step p{margin:0;color:var(--muted)}.step b{color:var(--orange);font-size:13px}.art{width:100%;height:auto;display:block}.artbox{background:#eeeadf;padding:12px 15px;border:1px solid #dfdfd1;transform:rotate(-1deg)}.artbox .caption{padding:7px 10px}.feature{padding:42px;background:#e9e7da}.checklist{list-style:none;padding:0}.checklist li{padding:13px 0;border-bottom:1px solid var(--line)}.checklist li:before{content:'↗';color:var(--orange);margin-right:15px}.format{padding:28px 0;border-top:1px solid var(--line)}.format h3{margin:8px 0 12px}.format p{font-size:15px}.faq details{border-top:1px solid var(--line);padding:19px 0}.faq summary{cursor:pointer;font-weight:600}.faq details p{margin:16px 0 0;color:var(--muted)}.case{padding:55px 0;border-top:1px solid var(--line)}.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.case dl{margin:24px 0}.case dt{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(--orange);margin-top:18px}.case dd{margin:5px 0;font-size:16px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.principle{border:1px solid var(--line);padding:23px}.principle p{font-size:14px}.principle h3{font-size:22px}.prompt{padding:37px;background:var(--yellow);margin-top:26px}.prompt p{font-size:25px;line-height:1.4;margin:0;letter-spacing:-.5px}.contact{border:1px solid var(--line);padding:35px}.contact label{display:block;font-size:12px;font-weight:700;margin:17px 0 7px}.contact input,.contact textarea,.contact select{width:100%;border:1px solid #b5c0b2;background:transparent;padding:12px;color:var(--ink);border-radius:0}.contact textarea{min-height:130px}.contact button{margin-top:20px}.result{font-size:13px;margin-top:17px}.footer{padding:40px 0 25px}.footgrid{display:flex;justify-content:space-between;gap:25px}.footbottom{border-top:1px solid var(--line);padding-top:20px;margin-top:35px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.menu{display:none}.skip{position:absolute;top:-70px;left:10px;background:var(--paper);z-index:10}.skip:focus{top:10px}.wide{max-width:820px}.highlight{font-style:normal;color:var(--orange)}@media(max-width:850px){.wrap{padding:0 24px}.nav{min-height:85px;flex-wrap:wrap;padding:20px 0}.menu{display:block;background:none;border:1px solid var(--ink);padding:7px 12px}.navlinks{display:none;width:100%;flex-wrap:wrap;gap:19px;padding:15px 0}.navlinks.open{display:flex}.hero{padding:48px 0}.hero-grid,.split,.case-grid{grid-template-columns:1fr;gap:32px}.hero-grid h1{font-size:54px}.hero-grid .artbox{margin-top:10px}.three,.principles{grid-template-columns:1fr}.section{padding:49px 0}.strip{flex-wrap:wrap;justify-content:flex-start;gap:12px 25px}.step{grid-template-columns:30px 1fr;gap:15px}.step p{grid-column:2}.feature,.contact{padding:26px}.footgrid{flex-direction:column}.footbottom{gap:15px}.lead{font-size:18px}h1{font-size:51px}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.btn{transition:background .18s}}

/* A warmer, more conversational home headline with two deliberate lines. */
.hero-grid .home-headline{font-family:"Trebuchet MS","DM Sans",Arial,sans-serif;font-size:clamp(28px,4.1vw,58px);font-weight:700;line-height:1.16;letter-spacing:-.025em;margin:22px 0 26px;max-width:none}.home-headline>span{display:block}
@media(max-width:850px){.hero-grid .home-headline{font-size:clamp(28px,7.1vw,48px);line-height:1.18}}

/* Illustrations for the home page learning sequence. */
.support-art{display:block;width:100%;height:auto;border-radius:5px;margin-top:26px}.question-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}.question-grid .support-art{margin:0}.question-grid .bigquote{font-size:clamp(30px,3.5vw,46px)}.step-art{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;margin:18px 0 22px}.rule .number{display:block}.rule h3{margin-top:0}@media(max-width:850px){.question-grid{grid-template-columns:1fr;gap:28px}.support-art{max-width:560px}.step-art{max-width:560px}}

/* Crop transparent margins from John's original drawing, without changing its pixels. */
.hero .hero-original{background:transparent;border:0;padding:0;transform:none;margin:0 auto;max-width:480px;width:100%}.hero-art-crop{position:relative;overflow:hidden;aspect-ratio:1468/1443}.hero-art-crop .art{position:absolute;width:139.5095%;max-width:none;height:auto;left:-26.7711%;top:-1.8711%}.hero-original .caption{padding:16px 0 0}

/* A light sage backdrop lets the original storyboard linework read clearly. */
.question-section{background:#e8eee5;color:var(--ink)}.question-section .lead{color:#43594f}.question-section .support-art{border-radius:0;background:transparent}

.step-art.original-linework{object-fit:contain;background:transparent;border-radius:0}

.clinical-scenes{display:grid;gap:24px}.clinical-scenes .art{background:transparent}

.hero-conversation-art .art{position:static;width:100%;height:auto;max-width:420px;margin:0 auto}

/* Enlarge the warehouse storyboard around its central scene. */
.question-grid{grid-template-columns:1fr 1.2fr;gap:36px}.storyboard-center-crop{position:relative;overflow:hidden;aspect-ratio:4/3;width:100%}.storyboard-center-crop .support-art{position:absolute;width:150%;max-width:none;height:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
@media(max-width:850px){.question-grid{grid-template-columns:1fr}.storyboard-center-crop{max-width:660px;margin:auto}}

.artbox.workshop-original{background:transparent;border:0;padding:0;transform:none}.workshop-original .caption{padding:16px 0 0}

.artbox.method-original{background:transparent;border:0;padding:0;transform:none;margin:0 auto;width:100%;max-width:440px}.method-images{display:grid;gap:12px}.method-original .caption{padding:16px 0 0}

.workshops-intro-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}.workshops-intro-grid h1{font-size:clamp(40px,4.5vw,64px)}.workshop-ar-art{background:transparent}@media(max-width:850px){.workshops-intro-grid{grid-template-columns:1fr;gap:28px}.workshops-intro-grid h1{font-size:clamp(36px,7vw,54px)}}

.artbox.example-original{background:transparent;border:0;padding:0;transform:none;margin:0}.example-original a{display:block}.example-original .art{height:auto;object-fit:contain}

/* Examples: a consistent introduction, board, process, and takeaway. */
.examples-page .case-intro{max-width:880px;margin:16px 0 30px}
.examples-page .case-intro h2{max-width:820px;font-size:clamp(30px,3.6vw,46px)}
.examples-page .case-intro p{max-width:780px;margin-bottom:0}
.examples-page .case-grid{align-items:start;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px}
.examples-page .case dl{margin:0}
.examples-page .case dt{font-size:11px;margin-top:22px}
.examples-page .case dt:first-child{margin-top:0}
.examples-page .example-original .caption{padding:14px 0 0;font-size:13px}
.examples-page .prompt{padding:24px 28px}
.examples-page .prompt p{font-size:22px;margin-top:10px}
.examples-page .case{scroll-margin-top:24px}
@media(max-width:850px){.examples-page .case-grid{grid-template-columns:1fr;gap:28px}.examples-page .case-intro{margin-bottom:24px}.examples-page .prompt{padding:22px}.examples-page .prompt p{font-size:20px}}

.artbox.about-original{background:transparent;border:0;padding:0;transform:none;margin:0}.about-original .caption{padding:16px 0 0}

.examples-intro-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}.examples-intro-grid h1{font-size:clamp(42px,5vw,68px)}.examples-intro-art{margin:0;background:transparent}.examples-intro-art .art{max-width:520px;margin:auto}@media(max-width:850px){.examples-intro-grid{grid-template-columns:1fr;gap:32px}.examples-intro-grid h1{font-size:clamp(38px,7vw,54px)}.examples-intro-art{max-width:480px;margin:auto}}

/* Audience and engagement sections extend the existing type, color, and spacing system. */
.home-problem .split{align-items:center}.home-problem .support-art{max-width:390px}
.audience-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;margin-top:36px}
.audience-card{grid-column:span 2;border:1px solid var(--line);padding:26px;display:flex;flex-direction:column}
.audience-card:nth-child(n+4){grid-column:span 3}.audience-card .eyebrow{font-size:10px;letter-spacing:1.3px;min-height:33px}
.audience-card h3{margin:8px 0 18px}.audience-card img{width:100%;height:170px;object-fit:contain;margin-bottom:20px}.audience-card p{font-size:15px}.audience-card .textlink{margin-top:auto;align-self:flex-start}
.home-examples{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:36px}.home-examples .art{height:280px;object-fit:contain}.home-examples h3{margin-top:24px}
section[id]{scroll-margin-top:24px}
@media(max-width:850px){.audience-grid{grid-template-columns:1fr 1fr}.audience-card,.audience-card:nth-child(n+4){grid-column:span 1}.audience-card:last-child{grid-column:1/-1}.home-examples{grid-template-columns:1fr;gap:40px}.home-examples .art{height:auto;max-height:320px}.home-problem .support-art{max-width:360px}}
@media(max-width:540px){.audience-grid{grid-template-columns:1fr}.audience-card:last-child{grid-column:auto}.audience-card .eyebrow{min-height:0}.audience-card img{height:190px}}

/* Frame the original sketches tightly without altering the artwork. */
.method-panel{margin:0;min-width:0}.method-images{gap:24px}.method-crop{position:relative;overflow:hidden;width:100%}.method-crop img{position:absolute;max-width:none;height:auto;display:block}.method-crop-speed{aspect-ratio:1851/1119}.method-crop-speed img{width:110.6429%;left:-6.3749%;top:-18.3199%}.method-crop-intent{aspect-ratio:1415/1371}.method-crop-intent img{width:144.735%;left:-18.9399%;top:-2.6988%}.method-original .method-panel .caption{padding:10px 0 0;text-align:center}
