/* Scoped design-services presentation. Shared navigation stays in the site shell. */
.design-page { --design-green:#244e43; --design-cream:#f6f5ef; color:#203b34; font-family:'DM Sans',sans-serif; }
.design-page :is(h1,h2,h3,p,figure) { margin:0; }
.design-page :is(h1,h2) { font-family:'DM Sans',sans-serif; font-weight:500; letter-spacing:-.055em; text-wrap:balance; }
.design-page h2 { font-size:clamp(32px,3.7vw,48px); line-height:1.12; }
.design-page h3 { font-size:23px; line-height:1.25; letter-spacing:-.025em; font-weight:500; }
.design-page p { text-wrap:pretty; }
.design-page .eyebrow { font-size:11px; letter-spacing:.14em; line-height:1.6; color:#48685a; font-weight:700; }
.design-text-link { display:inline-flex; gap:18px; align-items:center; font-size:14px; text-decoration-thickness:1px; text-underline-offset:5px; }
.design-jump { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding-block:22px; border-block:1px solid #dbe2db; }
.design-jump a { display:flex; align-items:center; justify-content:space-between; gap:12px; text-decoration:none; font-size:13px; }
.design-jump span { color:#748678; font-size:10px; }
.design-page a:focus-visible,.design-page summary:focus-visible { outline:3px solid #315e83; outline-offset:5px; }
.design-experience,.design-foundations { padding-block:95px; }
.design-section-heading { max-width:680px; }
.design-section-heading h2 { margin:18px 0; }
.design-section-heading>p:last-child { color:#53635b; font-size:17px; line-height:1.7; }
.design-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px; }
.design-principles article { border-top:1px solid #bbcabc; padding-top:22px; }
.design-number { display:block; font-size:11px; letter-spacing:.045em; color:#546e5e; }
.design-principles h3 { margin:22px 0 14px; }
.design-principles p { font-size:15px; line-height:1.7; color:#53635b; }
.design-services-band { background:#203e36; color:#f8f8f1; padding-block:80px; }
.design-services-band .eyebrow,.design-services-band .design-number { color:#c4d6b7; }
.design-band-heading { display:grid; grid-template-columns:1.4fr 1fr; gap:80px; align-items:end; }
.design-band-heading h2 { margin-top:18px; }
.design-band-heading>p { color:#d1ddd4; font-size:16px; line-height:1.7; }
.design-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:45px 70px; margin-top:55px; }
.design-service-grid article { border-top:1px solid #637d6a; padding-top:22px; }
.design-service-grid h3 { font-size:29px; max-width:390px; margin:18px 0; text-wrap:balance; }
.design-service-grid p { color:#d1ddd4; font-size:16px; line-height:1.7; }
.design-page .design-service-detail { font-size:12px; color:#c4d6b7; margin-top:24px; }
.design-foundation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:40px; }
.design-foundation-grid article { padding:24px 0; border-top:1px solid #d3ddd3; }
.design-foundation-grid h3 { font-size:21px; margin-bottom:14px; }
.design-foundation-grid p,.design-maintenance p { font-size:15px; line-height:1.7; color:#53635b; }
.design-maintenance { margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:50px; background:#f1f4ed; padding:30px; border-radius:12px; }
.design-maintenance h3 { font-size:20px; margin-bottom:12px; }
.design-archive { padding-block:45px 70px; display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; border-top:1px solid #dbe2db; }
.design-archive h2 { font-size:36px; margin:18px 0; }
.design-archive p:not(.eyebrow) { color:#53635b; font-size:15px; line-height:1.7; }
.design-film-links a { display:flex; align-items:center; gap:18px; padding:24px 0; border-bottom:1px solid #d3ddd3; text-decoration:none; }
.design-film-links a>svg { margin-left:auto; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; flex-shrink:0; }
.design-film-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid #99b09b; border-radius:50%; flex-shrink:0; font-size:25px; }
.design-film-links strong { font-weight:500; font-size:18px; }
.design-film-links small { display:block; color:#53635b; font-size:12px; margin-top:6px; }
.design-film-links a:hover strong,.design-jump a:hover { text-decoration:underline; text-underline-offset:4px; }
.design-faq { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; padding-block:65px; border-top:1px solid #dbe2db; }
.design-faq h2 { margin-top:18px; }
.design-faq details { border-bottom:1px solid #ccd8cc; padding:22px 0; }
.design-faq details:first-child { padding-top:0; }
.design-faq summary { font-size:17px; font-weight:500; padding-right:8px; }
.design-faq details p { font-size:15px; line-height:1.7; color:#53635b; margin-top:16px; }
.design-close { display:grid; grid-template-columns:1.3fr 1fr; gap:75px; padding:55px; margin-block:25px 80px; background:#edf2e7; border-radius:18px; }
.design-close h2 { margin:20px 0; }
.design-close>div>p:not(.eyebrow) { font-size:16px; line-height:1.7; color:#53635b; }
.design-close .button { margin-top:26px; }
.design-close aside { border-left:1px solid #c3d1c1; padding-left:38px; }
.design-close h3 { margin:14px 0 22px; }
.design-close aside a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid #c3d1c1; text-decoration:none; font-size:15px; }
.design-close aside a:hover { text-decoration:underline; text-underline-offset:3px; }
.design-close small { display:block; font-size:12px; color:#53635b; margin-top:4px; }
.design-legacy-anchors { height:0; overflow:hidden; }

/* Art direction for this service page: warm white, charcoal and terracotta. */
body.blue-green-theme.design-services-page { --ink:#292624; --paper:#faf9f6; --muted:#625e58; background:#faf9f6; font-family:'DM Sans',Arial,sans-serif; }
.blue-green-theme.design-services-page .design-page .button { background:#292624; border-color:#292624; color:#fff; font-size:15px; }
.blue-green-theme.design-services-page .design-page .button:hover { background:#4d3931; border-color:#4d3931; }
.blue-green-theme.design-services-page .design-page .button.lime { background:#292624; border-color:#292624; color:white; }
.design-page { color:#292624; }
.design-page .eyebrow { font-size:13px; color:#6f5143; letter-spacing:.1em; }
.design-page :is(h1,h2,h3,p) { text-align:left; }
.design-page h2 { font-size:clamp(34px,3.5vw,48px); }
.design-hero { display:grid; grid-template-columns:1.4fr 1fr; gap:65px; align-items:end; padding-block:48px 46px; }
.design-page h1 { font-size:clamp(48px,5.3vw,76px); line-height:1.02; margin-top:20px; letter-spacing:-.055em; font-weight:500; }
.design-page h1 em { font:inherit; font-family:'DM Serif Display',Georgia,serif; color:#a24932; }
.design-lead { font-size:21px; line-height:1.55; color:#625e58; margin-bottom:24px!important; }
.work-carousel { padding-bottom:48px; }
.work-stage { border-radius:14px; overflow:hidden; box-shadow:0 20px 55px #33271d14; border:1px solid #d9d4ce; }
.work-controls { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:24px; }
.work-caption p { font-size:19px; margin-top:6px; }
.work-caption small { display:block; font-size:14px; color:#625e58; margin-top:5px; }
.work-buttons { display:flex; gap:8px; }
.work-buttons button { background:#fff; border:1px solid #c9c2b9; border-radius:30px; color:#292624; padding:10px 18px; min-height:46px; font-size:15px; display:flex; align-items:center; gap:16px; }
.work-buttons button:hover { background:#e9e2d8; }
.design-jump { gap:28px; border-color:#d4cec6; padding-block:22px; }
.design-jump a { font-size:16px; }
.design-jump span { font-size:13px; color:#6d6158; }
.design-section-heading { max-width:none; display:grid; grid-template-columns:1.2fr 1fr; gap:18px 80px; align-items:end; }
.design-section-heading>.eyebrow { grid-column:1/-1; }
.design-section-heading h2 { margin:0; }
.design-section-heading>p:last-child { font-size:19px; color:#625e58; }
.design-number { font-size:14px; color:#715b4d; }
.design-principles { gap:45px; }
.design-principles h3 { font-size:27px; }
.design-page :is(.design-principles p,.design-foundation-grid p,.design-maintenance p,.design-archive p:not(.eyebrow),.design-faq details p) { font-size:18px; line-height:1.7; color:#625e58; }
.design-services-band { background:#292624; }
.design-services-band .eyebrow,.design-services-band .design-number { color:#e5c2a7; }
.design-band-heading { grid-template-columns:1.2fr 1fr; gap:80px; }
.design-band-heading>p,.design-service-grid p { font-size:18px; color:#e0d9d0; }
.design-page .design-service-detail { font-size:15px; color:#e5c2a7; }
.design-service-grid h3 { max-width:none; font-size:32px; }
.design-service-grid article { border-color:#72665b; }
.design-foundation-grid h3,.design-maintenance h3 { font-size:24px; }
.design-maintenance { background:#f0ece6; }
.design-archive { gap:80px; }
.design-film-links strong { font-size:22px; }
.design-film-links small { font-size:15px; color:#625e58; }
.design-film-icon { border-color:#aa9586; }
.design-faq summary { font-size:20px; }
.design-close { background:#efe9e0; padding:48px!important; gap:65px; }
.design-close>div>p:not(.eyebrow) { font-size:18px; color:#625e58; }
.design-close aside { border-color:#cbbeb0; }
.design-close aside a { font-size:18px; border-color:#cbbeb0; }
.design-close small { color:#625e58; font-size:15px; }
@keyframes design-arrive { from { opacity:.3; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media(max-width:1000px) { .design-hero { gap:40px; } .design-page h1 { font-size:58px; } .design-section-heading,.design-band-heading { gap:20px 40px; } .design-principles { gap:28px; } .design-close { padding:35px!important; gap:35px; } }
@media(max-width:800px) { .design-hero { grid-template-columns:1fr; gap:24px; padding-block:35px; } .design-lead br { display:none; } .design-lead { max-width:650px; } .design-page h1 { font-size:clamp(46px,7.5vw,60px); } .design-section-heading,.design-band-heading { grid-template-columns:1fr; } .design-section-heading>p:last-child { margin-top:8px; } .design-principles,.design-foundation-grid { grid-template-columns:1fr 1fr; } .design-archive,.design-faq { grid-template-columns:1fr; gap:30px; } .design-close { grid-template-columns:1fr; } .design-close aside { border:0; border-top:1px solid #cbbeb0; padding:25px 0 0; } }
@media(max-width:600px) { .design-jump { grid-template-columns:1fr 1fr; gap:18px; } .design-jump a { font-size:14px; } .work-controls { align-items:start; flex-direction:column; } .work-caption p { font-size:18px; } .work-caption small { font-size:13px; } .work-buttons { align-self:flex-end; } .design-principles,.design-foundation-grid,.design-service-grid,.design-maintenance { grid-template-columns:1fr; } .design-experience,.design-foundations { padding-block:55px; } .design-section-heading { gap:18px; } .design-principles { margin-top:32px; } .design-services-band { padding-block:55px; } .design-service-grid { gap:32px; } .design-close { padding:28px!important; margin-bottom:50px; } .design-close h2 { font-size:34px; } .design-maintenance { padding:24px; gap:24px; } }
.design-client { padding-block:75px; display:grid; grid-template-columns:.75fr 1.25fr; gap:65px; align-items:center; border-bottom:1px solid #d4cec6; }
.design-client h2 { margin:18px 0 22px; }
.design-client p:not(.eyebrow) { font-size:18px; line-height:1.7; color:#625e58; }
.design-client-link { display:inline-flex; gap:25px; margin-top:26px; font-size:17px; text-underline-offset:6px; }
.client-preview { display:block; border:1px solid #d4cec6; border-radius:8px; overflow:hidden; background:#fff; text-decoration:none; box-shadow:0 15px 40px #33271d0a; }
.client-preview img { width:100%; height:auto; display:block; }
.client-preview>span { display:flex; justify-content:space-between; gap:20px; padding:18px 22px; font-size:15px; }
.client-preview:hover { border-color:#a24932; }
@media(max-width:800px) { .design-client { grid-template-columns:1fr; gap:30px; padding-block:50px; } }

.blue-green-theme.design-services-page .footer { background:#292624; border-color:#b2a69a; }
.blue-green-theme.design-services-page .footer :is(h2,h3,.footer-statement,.footer-phone) { color:#e5c2a7; }
.blue-green-theme.design-services-page .pps-footer { background:#292624; border-color:#b2a69a; }
.blue-green-theme.design-services-page .pps-footer :is(h2,.pps-footer-phone) { color:#e5c2a7; }
@media(max-width:1000px) { .design-hero { grid-template-columns:1fr; gap:24px; } .design-lead br { display:none; } .design-lead { max-width:650px; } }

/* ===== Showcase: four distinct illustrative concepts =====
   Each concept has its own typeface, grid, palette, controls, and motion.
   Fonts are OFL (Fontsource) and only download when their slide is shown. */
@font-face { font-family:'Concept Fredoka'; src:url('/assets/fonts/concepts/fredoka-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Concept Oswald'; src:url('/assets/fonts/concepts/oswald-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Concept Oswald'; src:url('/assets/fonts/concepts/oswald-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Concept Fraunces'; src:url('/assets/fonts/concepts/fraunces-latin-300-normal.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Concept Fraunces'; src:url('/assets/fonts/concepts/fraunces-latin-600-normal.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Concept Fraunces'; src:url('/assets/fonts/concepts/fraunces-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Concept Manrope'; src:url('/assets/fonts/concepts/manrope-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Concept Manrope'; src:url('/assets/fonts/concepts/manrope-latin-700-normal.woff2') format('woff2'); font-weight:700; font-display:swap; }

.work-stage { position:relative; border-radius:16px; overflow:hidden; border:1px solid #d9d4ce; box-shadow:0 24px 60px #33271d1a; height:600px; background:#fff; }
.work-slide[hidden] { display:none!important; }
.work-slide { position:relative; height:100%; overflow:hidden; animation:ws-in .6s ease both; }
.work-slide :is(p,figure,ol) { margin:0; }
.work-slide::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; transform-origin:left; transform:scaleX(0); background:currentColor; opacity:.35; animation:ws-progress 7s linear forwards; }
.work-carousel[data-playing=false] .work-slide::after, .work-stage:hover .work-slide::after { animation-play-state:paused; opacity:0; }
@keyframes ws-in { from { opacity:0; } to { opacity:1; } }
@keyframes ws-progress { to { transform:scaleX(1); } }
@keyframes ws-rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }

/* 1. Little Oak: playful pediatric bento, rounded type, candy palette */
.work-oak { background:#fff6e4; color:#1d3150; font-family:'Concept Fredoka','DM Sans',sans-serif; padding:22px 26px 26px; display:flex; flex-direction:column; gap:18px; }
.oak-nav { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.oak-logo { display:flex; align-items:center; gap:9px; font-size:27px; line-height:1; letter-spacing:-.02em; }
.oak-logo small { font:600 11px 'DM Sans',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#e0674a; align-self:end; margin-bottom:3px; }
.oak-logo svg { width:32px; height:32px; }
.oak-cap { fill:#8a5a2b; } .oak-nut { fill:#e9a23b; } .oak-stem { stroke:#8a5a2b; stroke-width:3; stroke-linecap:round; fill:none; }
.oak-links { display:flex; gap:6px; font-size:15px; }
.oak-links span { padding:8px 14px; border-radius:99px; background:#fff; box-shadow:0 2px 0 #1d315018; }
.oak-call { display:flex; align-items:center; gap:8px; background:#ff7b5c; color:#fff; padding:10px 18px; border-radius:99px; font-size:15px; box-shadow:0 4px 0 #c9553b; }
.oak-call i { width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px #ffffff55; animation:oak-ping 1.8s ease-out infinite; }
.oak-grid { flex:1; display:grid; grid-template-columns:1.25fr .75fr .75fr; grid-template-rows:1fr 1fr; gap:14px; min-height:0; }
.oak-tile { border-radius:26px; padding:22px 24px; position:relative; overflow:hidden; animation:oak-pop .7s cubic-bezier(.34,1.56,.64,1) both; }
.oak-kicker { display:block; font:700 11px 'DM Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.oak-hero { grid-row:1/3; background:#ffd24c; display:flex; flex-direction:column; justify-content:flex-end; padding:30px; }
.oak-hero::before { content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:#ffe48f; right:-70px; top:-80px; }
.oak-hero>* { position:relative; }
.oak-headline { font-size:clamp(34px,3.6vw,50px); line-height:1.02; letter-spacing:-.02em; margin:12px 0!important; }
.oak-copy { font:500 16px/1.5 'DM Sans',sans-serif; max-width:340px; }
.oak-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.oak-btn { background:#1d3150; color:#fff; padding:13px 22px; border-radius:99px; font-size:16px; box-shadow:0 4px 0 #0c1a2e; }
.oak-btn-ghost { background:transparent; color:#1d3150; box-shadow:inset 0 0 0 2px #1d3150; }
.oak-hours { background:#1f8a82; color:#fff; animation-delay:.08s; }
.oak-hours strong { display:block; font-size:62px; line-height:1; margin:14px 0 6px; font-weight:600; }
.oak-hours strong small { font-size:22px; margin-left:4px; }
.oak-hours>span:last-child { font:500 14px 'DM Sans',sans-serif; opacity:.9; }
.oak-blocks { background:#ff9d7e; animation-delay:.16s; }
.oak-block { position:absolute; width:62px; height:62px; border-radius:14px; display:grid; place-items:center; font-size:32px; color:#fff; box-shadow:inset 0 -6px 0 #0000001f; }
.oak-block.b1 { background:#1d3150; left:24px; bottom:22px; animation:oak-bounce 2.4s ease-in-out infinite; }
.oak-block.b2 { background:#1f8a82; left:92px; bottom:22px; animation:oak-bounce 2.4s .2s ease-in-out infinite; }
.oak-block.b3 { background:#ffd24c; color:#1d3150; left:58px; bottom:88px; animation:oak-bounce 2.4s .4s ease-in-out infinite; }
.oak-ball { position:absolute; right:24px; top:22px; width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff 0 18%,#6c8cff 19%); animation:oak-roll 3.2s ease-in-out infinite; }
.oak-doc,.oak-class { display:flex; align-items:center; gap:14px; background:#fff; box-shadow:0 3px 0 #1d315014; }
.oak-doc { animation-delay:.24s; } .oak-class { background:#d9ccf5; animation-delay:.32s; }
.oak-doc strong,.oak-class strong { display:block; font-size:19px; font-weight:600; line-height:1.15; }
.oak-doc small,.oak-class small { display:block; font:500 13px/1.45 'DM Sans',sans-serif; margin-top:4px; }
.oak-avatar { flex-shrink:0; width:54px; height:54px; border-radius:50%; background:#ffd24c; display:grid; place-items:center; font-size:19px; }
.oak-cal { flex-shrink:0; width:54px; background:#fff; border-radius:12px; text-align:center; font-size:23px; line-height:1.1; padding-bottom:6px; overflow:hidden; }
.oak-cal b { display:block; background:#ff7b5c; color:#fff; font:700 10px/1.9 'DM Sans',sans-serif; letter-spacing:.1em; margin-bottom:3px; }
@keyframes oak-pop { from { opacity:0; transform:scale(.86) translateY(14px); } to { opacity:1; transform:none; } }
@keyframes oak-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px) rotate(-3deg); } }
@keyframes oak-roll { 0%,100% { transform:translateX(0) rotate(0); } 50% { transform:translateX(-46px) rotate(-240deg); } }
@keyframes oak-ping { from { box-shadow:0 0 0 0 #ffffffaa; } to { box-shadow:0 0 0 10px #ffffff00; } }

/* 2. Apex: athletic orthopedics, black and signal orange, condensed caps, side rail */
.work-apex { background:#0e1014; color:#f3f0e9; font-family:'DM Sans',sans-serif; display:grid; grid-template-columns:76px 1fr; }
.apex-rail { border-right:1px solid #2a2d33; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:26px 0; }
.apex-mark { width:40px; height:40px; background:#ff5b1f; color:#0e1014; display:grid; place-items:center; font:700 24px 'Concept Oswald',sans-serif; clip-path:polygon(50% 0,100% 100%,0 100%); padding-top:10px; }
.apex-rail-name { writing-mode:vertical-rl; transform:rotate(180deg); font:500 12px 'Concept Oswald',sans-serif; letter-spacing:.32em; color:#9da3ad; }
.apex-dots { display:flex; flex-direction:column; gap:8px; }
.apex-dots i { width:6px; height:6px; background:#3a3e46; } .apex-dots i:first-child { background:#ff5b1f; }
.apex-main { display:flex; flex-direction:column; padding:0 42px; min-width:0; }
.apex-top { display:flex; gap:30px; align-items:center; padding:22px 0; border-bottom:1px solid #2a2d33; font:500 13px 'Concept Oswald',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#b9bec7; }
.apex-book { margin-left:auto; background:#ff5b1f; color:#0e1014; padding:11px 18px; font-weight:700; }
.apex-hero { flex:1; display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center; min-height:0; }
.apex-kicker { display:block; font:500 12px 'Concept Oswald',sans-serif; letter-spacing:.28em; text-transform:uppercase; color:#ff5b1f; }
.apex-headline { font:700 clamp(58px,7.2vw,104px)/.9 'Concept Oswald',sans-serif; text-transform:uppercase; letter-spacing:-.01em; margin:16px 0 18px!important; animation:ws-rise .7s .05s ease both; }
.apex-headline span { display:block; color:transparent; -webkit-text-stroke:2px #ff5b1f; animation:ws-rise .7s .2s ease both; }
.apex-copy { font-size:16px; line-height:1.6; color:#c3c8d0; max-width:420px; }
.apex-rom { position:relative; justify-self:center; width:min(100%,330px); }
.apex-rom svg { width:100%; height:auto; display:block; overflow:visible; }
.apex-track,.apex-arc { fill:none; stroke-width:6; stroke-linecap:round; }
.apex-track { stroke:#23262c; }
.apex-arc { stroke:#ff5b1f; stroke-dasharray:283; stroke-dashoffset:283; animation:apex-arc 3.6s .3s cubic-bezier(.6,.05,.3,1) infinite; }
.apex-femur rect { fill:#e9e5dc; }
.apex-tibia { transform-origin:160px 160px; animation:apex-flex 3.6s .3s cubic-bezier(.6,.05,.3,1) infinite; }
.apex-tibia rect { fill:#9da3ad; }
.apex-joint { fill:#0e1014; stroke:#ff5b1f; stroke-width:6; }
.apex-degree { position:absolute; left:-4px; top:0; font:500 11px 'Concept Oswald',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#9da3ad; text-align:left; }
.apex-degree b { display:block; font-size:40px; letter-spacing:0; color:#f3f0e9; }
.apex-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #2a2d33; }
.apex-stats span { padding:18px 18px 22px 0; font:500 15px 'Concept Oswald',sans-serif; letter-spacing:.08em; text-transform:uppercase; animation:ws-rise .6s ease both; }
.apex-stats span:nth-child(2) { animation-delay:.12s; } .apex-stats span:nth-child(3) { animation-delay:.24s; }
.apex-stats b { display:block; color:#ff5b1f; font-size:12px; margin-bottom:6px; }
@keyframes apex-flex { 0%,8% { transform:rotate(0); } 55%,70% { transform:rotate(135deg); } 100% { transform:rotate(0); } }
@keyframes apex-arc { 0%,8% { stroke-dashoffset:283; } 55%,70% { stroke-dashoffset:0; } 100% { stroke-dashoffset:283; } }

/* 3. Lumen: editorial dermatology, ivory paper, big serif, index list, text links only */
.work-lumen { background:#f3eee4; color:#1c1a16; font-family:'DM Sans',sans-serif; display:flex; flex-direction:column; padding:0 48px; }
.lumen-nav { display:grid; grid-template-columns:auto 1fr auto auto; gap:34px; align-items:baseline; padding:24px 0 18px; border-bottom:1px solid #1c1a16; font-size:13px; }
.lumen-logo { font:600 26px 'Concept Fraunces',Georgia,serif; letter-spacing:-.02em; }
.lumen-nav>span:nth-child(3) { font:italic 400 15px 'Concept Fraunces',Georgia,serif; color:#6b6358; }
.lumen-u,.lumen-index span { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.lumen-body { flex:1; display:grid; grid-template-columns:1.35fr .65fr; gap:48px; padding:30px 0 30px; min-height:0; }
.lumen-copy { display:flex; flex-direction:column; min-width:0; }
.lumen-headline { font:300 clamp(64px,8vw,116px)/.88 'Concept Fraunces',Georgia,serif; letter-spacing:-.045em; }
.lumen-headline span { display:inline-block; animation:ws-rise .9s ease both; }
.lumen-headline em { display:inline-block; font-style:italic; font-weight:400; color:#2d44c8; animation:ws-rise .9s .18s ease both; }
.lumen-dek { font:italic 400 20px/1.45 'Concept Fraunces',Georgia,serif; max-width:470px; margin:20px 0 24px!important; color:#4a443b; }
.lumen-index { list-style:none; padding:0; margin-top:auto!important; }
.lumen-index li { display:flex; align-items:baseline; gap:12px; padding:13px 0; border-top:1px solid #cfc6b6; font-size:17px; }
.lumen-index i { flex:1; border-bottom:1px dotted #9d9383; transform-origin:left; animation:lumen-draw 1s ease both; }
.lumen-index li:nth-child(2) i { animation-delay:.15s; } .lumen-index li:nth-child(3) i { animation-delay:.3s; }
.lumen-index b { font:600 13px 'Concept Fraunces',Georgia,serif; color:#2d44c8; }
.lumen-figure { position:relative; min-height:0; display:flex; flex-direction:column; padding-bottom:28px; }
.lumen-figure img { flex:1; min-height:0; width:100%; object-fit:cover; object-position:50% 22%; display:block; animation:lumen-reveal 1.2s .15s cubic-bezier(.7,0,.2,1) both; }
.lumen-figure figcaption { font-size:12px; letter-spacing:.06em; padding-top:10px; color:#6b6358; }
.lumen-figure figcaption em { font:italic 400 14px 'Concept Fraunces',Georgia,serif; letter-spacing:0; margin-left:6px; }
@keyframes lumen-reveal { from { clip-path:inset(100% 0 0 0); } to { clip-path:inset(0); } }
@keyframes lumen-draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* 4. Harbor: calm behavioral health, drifting color field, centered, breathing guide */
.work-harbor { background:#e9f0ee; color:#17333a; font-family:'Concept Manrope','DM Sans',sans-serif; display:flex; flex-direction:column; }
.harbor-sky { position:absolute; inset:0; overflow:hidden; }
.harbor-sky i { position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(70px); opacity:.75; }
.harbor-sky i:nth-child(1) { background:#bfe0cf; left:-120px; top:-160px; animation:harbor-drift 18s ease-in-out infinite; }
.harbor-sky i:nth-child(2) { background:#d8cff3; right:-140px; top:40px; animation:harbor-drift 22s -6s ease-in-out infinite reverse; }
.harbor-sky i:nth-child(3) { background:#c9def2; left:30%; bottom:-260px; animation:harbor-drift 26s -12s ease-in-out infinite; }
.harbor-nav,.harbor-center,.harbor-foot { position:relative; }
.harbor-nav { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 40px; font-size:14px; font-weight:500; }
.harbor-logo { display:flex; align-items:center; gap:10px; font-size:24px; font-weight:700; letter-spacing:-.03em; }
.harbor-logo svg { width:40px; height:16px; fill:none; stroke:#2f7d86; stroke-width:2.5; stroke-linecap:round; }
.harbor-login { padding:9px 16px; border-radius:99px; background:#ffffffb3; }
.harbor-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 40px; }
.harbor-breath { position:relative; width:clamp(150px,13.5vw,190px); height:clamp(150px,13.5vw,190px); margin-bottom:10px; border-radius:50%; background:radial-gradient(circle,#ffffffee 0 46%,#ffffff66 68%,#ffffff00 71%); box-shadow:0 0 0 1px #2f7d8622, 0 18px 60px -20px #2f7d8655; animation:harbor-breathe 8s ease-in-out infinite; display:grid; place-items:center; }
.harbor-breath span { grid-area:1/1; font-size:clamp(15px,1.35vw,19px); font-weight:600; letter-spacing:.06em; color:#23656d; animation:harbor-in 8s ease-in-out infinite; }
.harbor-breath span+span { animation-name:harbor-out; }
.design-page .harbor-headline { font-size:clamp(40px,4.6vw,64px); font-weight:500; line-height:1.05; letter-spacing:-.045em; text-align:center; animation:ws-rise .9s .1s ease both; }
.design-page .harbor-copy { font-size:17px; margin-top:18px; color:#3d5a60; text-align:center; }
.harbor-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:16px; max-width:780px; }
.harbor-chips span { padding:11px 18px; border-radius:99px; background:#ffffffa6; font-size:15px; font-weight:500; box-shadow:inset 0 0 0 1px #17333a1f; animation:ws-rise .6s ease both; }
.harbor-chips span:nth-child(2) { animation-delay:.08s; } .harbor-chips span:nth-child(3) { animation-delay:.16s; } .harbor-chips span:nth-child(4) { animation-delay:.24s; }
.harbor-chips .is-on { background:#17333a; color:#fff; box-shadow:none; }
.harbor-cta { margin-top:22px; padding:15px 30px; border-radius:99px; background:#2f7d86; color:#fff; font-size:16px; font-weight:700; }
.design-page .harbor-foot { text-align:center; padding:16px; font-size:13px; color:#3d5a60; }
@keyframes harbor-drift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(60px,40px) scale(1.15); } }
@keyframes harbor-breathe { 0%,100% { transform:scale(.82); } 45%,55% { transform:scale(1.08); } }
@keyframes harbor-in { 0%,40% { opacity:1; } 50%,95% { opacity:0; } 100% { opacity:1; } }
@keyframes harbor-out { 0%,45% { opacity:0; } 55%,90% { opacity:1; } 100% { opacity:0; } }

/* Stage chrome follows the active concept */
.work-stage:has(.work-oak:not([hidden])) { background:#fff6e4; }
.work-stage:has(.work-apex:not([hidden])) { background:#0e1014; border-color:#0e1014; }
.work-stage:has(.work-lumen:not([hidden])) { background:#f3eee4; }
.work-stage:has(.work-harbor:not([hidden])) { background:#e9f0ee; }

@media(max-width:1000px) {
  .work-stage { height:640px; }
  .oak-links,.apex-top>span:not(.apex-book),.harbor-links,.lumen-nav>span:nth-child(3) { display:none; }
  .oak-grid { grid-template-columns:1.2fr .8fr; grid-template-rows:auto; }
  .oak-hero { grid-row:1/4; } .oak-blocks { display:none; }
  .apex-main { padding:0 28px; } .apex-hero { grid-template-columns:1fr .8fr; }
  .work-lumen { padding:0 30px; } .lumen-nav { grid-template-columns:auto 1fr auto; }
  .lumen-body { grid-template-columns:1fr .7fr; gap:30px; }
}
@media(max-width:700px) {
  .work-stage { height:auto; }
  .work-slide { height:auto; min-height:810px; }
  .work-oak { padding:16px; }
  .oak-call { padding:9px 14px; font-size:14px; }
  .oak-grid { grid-template-columns:1fr 1fr; }
  .oak-hero { grid-row:auto; grid-column:1/-1; padding:24px; min-height:330px; }
  .oak-doc { grid-column:1/-1; } .oak-class { display:none; }
  .oak-hours strong { font-size:44px; }
  .work-apex { grid-template-columns:1fr; } .apex-rail { display:none; }
  .apex-main { padding:0 22px; } .apex-hero { grid-template-columns:1fr; padding:22px 0; }
  .apex-rom { width:200px; } .apex-stats span { font-size:13px; padding-right:10px; }
  .work-lumen { padding:0 22px; } .lumen-nav { grid-template-columns:1fr auto; } .lumen-nav>span:nth-child(2) { display:none; }
  .lumen-body { grid-template-columns:1fr; gap:22px; padding-bottom:22px; }
  .lumen-figure { height:220px; padding-bottom:0; } .lumen-figure figcaption { display:none; }
  .harbor-nav { padding:20px 22px; } .harbor-center { padding:20px 22px 0; }
  .harbor-chips span { font-size:14px; padding:10px 14px; }
}
.apex-top::before { content:none; }
.oak-logo,.oak-call,.oak-links span { white-space:nowrap; }
@media(max-width:700px) {
  .oak-logo { font-size:22px; } .oak-logo small { display:none; } .oak-logo svg { width:26px; height:26px; }
  .oak-blocks { display:block; min-height:170px; } .oak-block { width:48px; height:48px; font-size:24px; border-radius:11px; }
  .oak-block.b1 { left:16px; bottom:16px; } .oak-block.b2 { left:70px; bottom:16px; } .oak-block.b3 { left:43px; bottom:68px; }
  .oak-ball { width:34px; height:34px; right:14px; top:14px; }
  .apex-top::before { content:"APEX"; font-weight:700; letter-spacing:.3em; color:#f3f0e9; font-size:15px; }
  .apex-top { justify-content:space-between; }
  .apex-rom { width:100%; display:flex; align-items:center; gap:18px; justify-self:start; }
  .apex-rom svg { width:140px; flex-shrink:0; }
  .apex-degree { position:static; order:2; }
  .apex-stats { grid-template-columns:1fr; }
  .apex-stats span { display:flex; gap:14px; align-items:baseline; padding:12px 0; border-bottom:1px solid #2a2d33; }
  .apex-stats span:last-child { border-bottom:0; padding-bottom:26px; }
  .apex-stats b { margin:0; }
}
@media(prefers-reduced-motion:reduce) {
  .work-slide,.work-slide *,.work-slide::after { animation:none!important; }
  .apex-arc { stroke-dashoffset:0; } .apex-tibia { transform:rotate(135deg); }
  .harbor-breath span+span { opacity:0; }
}
.design-services-page .site-header { background:#fff; }
.design-services-page .pps-assistant h2 { font-family:'DM Sans',Arial,sans-serif; }