/* Explicit example links bypass the cavern chapters. Without JavaScript the
   example remains in ordinary document flow. */
.work-example{position:relative;background:#0b1117;color:#f4efe4;padding:clamp(70px,9vw,130px) 6.4% 28px;scroll-margin-top:0}
.example-heading{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.65fr);gap:14px clamp(36px,5vw,76px);align-items:end;margin:0 auto 70px;max-width:1280px}
.example-heading .example-eyebrow{grid-column:1/-1;margin:0}
.example-heading h2{grid-column:1}
.example-heading .section-intro{grid-column:2;margin:0;max-width:34ch}
.example-eyebrow{margin:0 0 18px;font-size:0.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#f3ac7e}
.example-heading h2{margin:0;font-size:clamp(2.375rem,4.5vw,4.125rem);line-height:1.08;letter-spacing:-.045em;font-weight:400;outline-offset:8px}
.example-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(36px,6vw,90px);align-items:center;max-width:1280px;margin:0 auto}
.example-layout>.example-figure{grid-column:2;grid-row:1}
.example-reasoning{grid-column:1;grid-row:1;max-width:430px}
.example-figure{margin:0;min-width:0}
.example-image{aspect-ratio:1.2;background:#f4f0e7;overflow:hidden}
.example-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.example-figure figcaption{display:flex;justify-content:space-between;gap:10px;margin:0 0 15px;font-size:0.75rem;line-height:1.5;color:#aebbc6}
.example-figure figcaption span:first-child{color:#f4efe4}
.example-context{margin:0 0 28px;font-size:clamp(1.0625rem,1.55vw,1.375rem);line-height:1.5;letter-spacing:-.015em;text-wrap:pretty}
.example-reasoning dl{margin:0}
.example-reasoning dl>div{padding:20px 0;border-top:1px solid #d5dee32b}
.example-reasoning dt{margin:0 0 9px;font-size:0.75rem;font-weight:500;color:#f3ac7e}
.example-reasoning dd{margin:0;font-size:1rem;line-height:1.7;color:#c6cfd6;text-wrap:pretty}
.example-contact{max-width:1280px;margin:72px auto 0;padding:36px 0;border-top:1px solid #d5dee32b;display:flex;align-items:center;justify-content:space-between;gap:24px}
.example-contact p{margin:0;font-size:clamp(1.375rem,2.5vw,2.125rem);line-height:1.3;letter-spacing:-.035em;text-wrap:balance}
.example-contact .action-primary{flex-shrink:0}
.example-end{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;color:#aebbc6;font-size:0.75rem}
.example-top{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#aebbc666}
.example-top:hover{color:#f4efe4}
.example-end>span{font-size:1.25rem;letter-spacing:-.065em;font-weight:800;color:#f4efe4}
@media(max-width:850px){
 .work-example{padding:64px 22px 24px}
 .example-heading{margin-bottom:34px}.example-heading h2{font-size:clamp(2.25rem,7vw,3.25rem)}
 .example-layout{grid-template-columns:1fr;gap:34px}
 .example-image{aspect-ratio:1.2}
 .example-context{font-size:1.1875rem;max-width:40ch;margin-bottom:24px}
 .example-reasoning dd{max-width:56ch}
 .example-contact{margin-top:32px;padding:28px 0;align-items:flex-start}
 .example-contact p{font-size:1.5rem;max-width:18ch}
}
@media(max-width:400px){
 .example-figure figcaption{flex-direction:column;gap:2px}
 .example-contact{flex-direction:column;gap:20px}
}

.business-content{position:relative;background:#0b1117}
.business-content h2{font-weight:400;letter-spacing:-.045em;line-height:1.12;text-wrap:balance}
.business-content p{text-wrap:pretty}
.section-intro{font-size:1rem;line-height:1.75;color:#b9c5cd;max-width:48ch;margin:24px 0 0}
.studio-example{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:clamp(36px,6vw,90px);max-width:1280px;margin:100px auto 0;padding:60px 0 76px;border-top:1px solid #d5dee32b;align-items:center}
.studio-example>div{max-width:400px;justify-self:end}
.studio-art{display:block;overflow:hidden;aspect-ratio:16/10;background:#141b21}
.studio-art img{display:block;width:100%;height:100%;object-fit:cover}
.studio-example h3{font-size:clamp(1.5rem,2.5vw,2.125rem);font-weight:400;letter-spacing:-.035em;line-height:1.25;margin:0 0 18px}
.studio-example p:not(.example-eyebrow){font-size:1rem;line-height:1.7;color:#c6cfd6;margin:0}
.studio-example .work-note{margin-top:20px!important;font-size:0.75rem!important;color:#93a5b2!important}
.business-section{position:relative;padding:clamp(72px,8vw,120px) 6.4%;border-top:1px solid #d5dee32b;scroll-margin-top:0;outline-offset:-8px}
.section-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(40px,8vw,120px);max-width:1280px;margin:auto;align-items:start}
.section-heading h2{font-size:clamp(2.125rem,3.8vw,3.5rem);margin:0}
#working-together .section-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
#working-together .section-heading{grid-column:2;grid-row:1;max-width:440px;justify-self:end}
#working-together .process-list{grid-column:1;grid-row:1}
.process-list{list-style:none;padding:0;margin:0}
.process-list li{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:28px 0;border-top:1px solid #d5dee32b}
.process-list li:first-child{padding-top:0;border-top:0}

.process-list h3{font-weight:500;font-size:1.25rem;letter-spacing:-.025em;margin:0 0 13px}
.process-list p{font-size:1rem;line-height:1.75;color:#c6cfd6;margin:0}
.process-list .process-input{margin-top:15px;color:#9aaab6;font-size:0.75rem}
.questions details{border-top:1px solid #d5dee32b;padding:0}
.questions details:last-child{border-bottom:1px solid #d5dee32b}
.questions summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 0;min-height:68px;cursor:pointer;font-size:1rem;line-height:1.55;list-style:none}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:'';width:13px;height:13px;flex-shrink:0;color:#f3ac7e;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;transition:background-size .28s cubic-bezier(.22,1,.36,1)}
.questions details[open]:not([data-question-state=closing]) summary::after{background-size:100% 1px,1px 0}
.questions details[data-question-state]{overflow:hidden;overflow-anchor:none}
.question-answer{display:flow-root}
body:has(#motion[aria-pressed=true]) .questions summary::after{transition:none}
@media(prefers-reduced-motion:reduce){.questions summary::after{transition:none}}
.questions summary:focus-visible{outline:2px solid #ffb790;outline-offset:5px}
.questions details p{margin:0 34px 26px 0;font-size:1rem;line-height:1.8;color:#bdc9d1}
.contact-section{background:radial-gradient(ellipse at 70% 15%,#56382320,transparent 70%);padding-bottom:28px}
.contact-section h2{margin:0;max-width:18ch;font-size:clamp(2.5rem,5.8vw,5.25rem)}
.contact-section .section-intro{max-width:50ch}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:clamp(40px,7vw,100px);align-items:end;max-width:1280px;margin:auto}
.contact-invitation{padding-top:26px;border-top:1px solid #f3ac7e5c;max-width:420px;justify-self:end}
.contact-invitation .section-intro{margin:0}
.contact-invitation>.action-primary{margin-top:28px;gap:28px}
.contact-alternative{font-size:0.75rem;color:#a9b8c3;margin-top:22px}
.contact-alternative a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}
.contact-section .example-end{margin-top:90px;border-top:1px solid #d5dee32b;padding-top:20px}
@media(max-width:850px){
 .studio-example,.section-layout{grid-template-columns:1fr;gap:34px}
 .studio-example{margin-top:42px;padding:34px 0 40px}
 .studio-example h3{font-size:1.75rem}.studio-example .example-eyebrow{margin-bottom:12px}
 .business-section{padding:64px 22px}.section-layout{gap:40px}
 .section-heading h2{font-size:clamp(2.125rem,7vw,3rem)}
 .section-intro{font-size:0.9375rem;margin-top:20px}
 .process-list h3{font-size:1.1875rem}.process-list li{gap:14px}
 .questions summary{font-size:0.9375rem;padding:20px 0;gap:22px}
 .contact-section{padding-bottom:24px}.contact-section h2{font-size:clamp(2.375rem,8vw,4rem)}
 .contact-section .example-end{margin-top:64px}
}
@media(max-width:400px){.business-section,.work-example{padding-inline:18px}.questions summary{font-size:1rem}}

/* Small-screen reading order shared by all portfolio and business sections. */
@media(max-width:850px){
 .example-heading{display:block;margin-bottom:40px}.example-heading .example-eyebrow{margin-bottom:18px}.example-heading .section-intro{max-width:44ch;margin-top:22px}
 .example-layout>.example-figure,.example-reasoning{grid-column:auto;grid-row:auto}
 .example-reasoning{max-width:none}.studio-example>div{justify-self:start;max-width:48ch}
 #working-together .section-layout,.contact-layout{grid-template-columns:1fr;gap:40px}
 #working-together .section-heading,#working-together .process-list{grid-column:auto;grid-row:auto;max-width:none;justify-self:stretch}
 .contact-invitation{justify-self:start;max-width:48ch;width:100%;padding-top:24px}
}
.example-reasoning dt,.process-list .process-input,.contact-alternative,.example-end{font-size:.875rem}
.business-content h2,.business-content h3,.artwork-chapter h2{overflow-wrap:break-word}
.section-layout>*,.example-layout>*,.contact-layout>*{min-width:0}
.contact-alternative a{overflow-wrap:anywhere}

/* Actual client website captures, framed without another embedded website. */
.campcation-case{align-items:start}
.campcation-case .example-figure{position:sticky;top:48px;padding-top:6px}
.campcation-case .example-figure figcaption{font-size:.8125rem}
.campcation-preview{position:relative;padding:0 7.5% 13% 0;margin-top:22px}
.campcation-desktop{overflow:hidden;border:1px solid #d5dee32b;border-radius:7px;background:#f8f1e7;box-shadow:0 22px 56px #0004}
.campcation-browser{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:30px;padding:7px 12px;background:#18212a;color:#b7c3cc;font-size:.625rem;letter-spacing:.04em}
.campcation-browser-dots{display:flex;gap:5px}.campcation-browser-dots i{display:block;width:4px;height:4px;border-radius:50%;background:#6c7d8a}
.campcation-desktop img,.campcation-phone img{display:block;width:100%;height:auto}
.campcation-phone{position:absolute;bottom:0;right:0;width:27.5%;overflow:hidden;border:5px solid #1c2730;border-radius:21px;background:#f8f1e7;box-shadow:0 14px 36px #0007;line-height:0}
.case-title{margin:0 0 18px;font-size:clamp(1.75rem,2.65vw,2.5rem);line-height:1.13;letter-spacing:-.04em;font-weight:400;text-wrap:balance}
.campcation-case .example-context{font-size:1.0625rem;color:#b9c5cd;line-height:1.65;margin-bottom:28px;max-width:32ch}
.case-journey{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:4px 0 22px;padding:17px 0;border-top:1px solid #d5dee32b;border-bottom:1px solid #d5dee32b;font-size:.8125rem;color:#f4efe4}
.case-journey li{display:flex;align-items:center;gap:12px;white-space:nowrap}
.case-scope{margin:0;font-size:.8125rem;line-height:1.75;color:#a5b4bf;max-width:43ch}
.case-visit{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;min-height:48px;margin-top:24px;padding:11px 0;color:#f4efe4;font-size:.9375rem;line-height:1.5;text-decoration:none;border-bottom:1px solid #f3ac7e8c}
.case-visit svg{display:block;width:19px;height:19px;fill:none;stroke:#f3ac7e;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.case-visit:hover{color:#ffc19a;border-color:#ffc19a}.case-visit:hover svg{transform:translate(2px,-2px)}
.case-visit:focus-visible{outline:2px solid #ffb790;outline-offset:6px;border-radius:2px}
@media(max-width:1100px) and (min-width:851px){.case-journey{gap:9px;font-size:.75rem}.case-journey li{gap:9px}.campcation-case .example-figure{top:32px}}
@media(max-width:850px){
 .campcation-case{gap:36px}.campcation-case .example-figure{position:relative;top:auto;padding-top:0}
 .campcation-preview{margin-top:18px}.case-title{max-width:23ch;font-size:clamp(1.75rem,5vw,2.5rem)}
 .campcation-case .example-context{max-width:none}.case-scope{max-width:48ch}
}
@media(max-width:500px){
 .campcation-phone{border-width:3px;border-radius:13px;width:29%}
 .campcation-preview{padding-right:8%;padding-bottom:16%}.campcation-browser{min-height:23px;padding:5px 8px;font-size:.5rem}
 .campcation-browser-dots{gap:3px}.campcation-browser-dots i{width:3px;height:3px}
 .case-journey{gap:9px;font-size:.75rem}.case-journey li{gap:9px}
}
@media(prefers-reduced-motion:reduce){.case-visit svg{transition:none}}

@font-face{font-family:WorkComingSoon;src:url('/kiddoscloset/assets/fonts/ComingSoon-Regular.ttf');font-display:swap}
.kiddos-work{margin-top:80px;padding-top:70px;border-top:1px solid #d5dee32b}
.kiddos-work-art{display:flex;flex-direction:column;justify-content:center;gap:35px;min-height:390px;padding:42px 28px;background:#fff9f3;border-radius:10px;color:#453a34;text-decoration:none}
.kiddos-work-name{font-family:WorkComingSoon,sans-serif;font-size:clamp(30px,3.5vw,52px);letter-spacing:-2px;text-align:center}
.kiddos-work-art img{display:block;width:100%;height:auto}
.kiddos-work-tagline{text-align:center;font-size:13px;line-height:1.5}
.kiddos-work-art:focus-visible{outline:2px solid #ffb790;outline-offset:6px}
.kiddos-work .example-context{font-size:1.0625rem;line-height:1.65;color:#b9c5cd}
.kiddos-work .case-scope{margin-top:15px}
@media(max-width:850px){.kiddos-work{margin-top:55px;padding-top:45px}.kiddos-work-art{min-height:300px;padding:35px 16px;gap:30px}.kiddos-work-name{font-size:36px}.kiddos-work .example-figure{grid-column:1;grid-row:1}.kiddos-work .example-reasoning{grid-column:1;grid-row:2}}

/* Equal editorial weight for both published showcases. */
.work-showcases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,60px);max-width:1280px;margin:0 auto}
.work-showcase{min-width:0;display:grid;grid-template-rows:auto auto 1fr}
.work-project-label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:18px;min-height:24px;font-size:.75rem;line-height:1.5}
.work-project-label h3{margin:0;font-size:.875rem;font-weight:500;color:#f4efe4}.work-project-label>span{color:#aebbc6;text-align:right}
.work-visual{position:relative;display:block;aspect-ratio:1.45;overflow:hidden;border-radius:10px;text-decoration:none}
.work-visual:focus-visible{outline:2px solid #ffb790;outline-offset:6px}
.work-campcation{background:#dcd9ca}.work-desktop{position:absolute;left:6%;top:8%;width:82%;border-radius:5px;overflow:hidden;background:#f8f1e7;box-shadow:0 16px 38px #21392b22}.work-desktop>img{width:100%;height:auto;display:block}.work-phone{position:absolute;right:4%;bottom:-7%;width:25%;border:4px solid #21392b;border-radius:18px;overflow:hidden;box-shadow:0 8px 25px #21392b44}.work-phone img{display:block;width:100%;height:auto}
.work-kiddos{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2vw,30px);padding:7% 5%;background:#fff9f3;color:#453a34}.work-kiddos .kiddos-work-name{font-size:clamp(28px,3vw,44px)}.work-kiddos>img{width:100%;height:auto}.work-kiddos .kiddos-work-tagline{font-size:12px}
.work-project-copy{display:flex;flex-direction:column;align-items:flex-start;padding-top:30px}.work-project-copy h4{font-size:clamp(27px,2.65vw,38px);font-weight:400;line-height:1.13;letter-spacing:-.04em;margin:0 0 22px}.work-description{font-size:1rem;line-height:1.75;color:#c6cfd6;margin:0 0 24px;max-width:49ch}.work-project-copy .case-scope{margin-top:auto;max-width:none;min-height:46px}.work-project-copy .case-visit{margin-top:18px}
@media(max-width:850px){.work-showcases{grid-template-columns:1fr;gap:50px}.work-showcase+ .work-showcase{padding-top:40px;border-top:1px solid #d5dee32b}.work-project-label{flex-wrap:wrap;gap:3px 12px}.work-project-label>span{text-align:left}.work-project-copy{padding-top:26px}.work-project-copy h4{font-size:32px}.work-project-copy .case-scope{min-height:0}.work-kiddos .kiddos-work-name{font-size:clamp(30px,7vw,44px)}}

/* Anchor destinations receive focus for navigation, without framing the entire section. */
#design-example:focus{outline:none}