.concept-site { --demo-accent: #b75332; background: var(--bg); color: var(--text); }
.concept-toolbar { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 28px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: .72rem; }
.concept-toolbar > a { font-weight: 600; }.concept-toolbar > p { color: var(--muted); font-size: .68rem; }
.concept-end { padding: 28px max(24px, calc((100vw - 1240px) / 2)); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 25px; flex-wrap: wrap; background: var(--surface); font-size: .8rem; }
.concept-end p { color: var(--muted); max-width: 70ch; }.concept-end a { font-weight: 600; color: var(--mint); }
.service-illustration { overflow: hidden; overflow: clip; }
.demo-nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 32px; }.demo-nav nav { flex-wrap: wrap; gap: 24px; font-size: .8rem; }
.demo-section-heading { display: flex; justify-content: space-between; align-items: start; gap: 30px; padding-block: 70px 42px; }.demo-section-heading > p { font: .7rem var(--font-mono); letter-spacing: .12em; padding-top: 12px; }.demo-section-heading h2 { font-size: clamp(2.4rem, 4.4vw, 4.3rem); }
.demo-note { font-size: .75rem; line-height: 1.6; color: var(--muted); max-width: 80ch; }
.studio-wrap, .coffee-wrap, .service-wrap { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.concept-studio { --studio-paper: #f0eee6; --studio-ink: #292d27; background: var(--studio-paper); color: var(--studio-ink); }
.studio-brand { font: 600 3.7rem/1 Georgia, serif; letter-spacing: -.08em; display: flex; gap: 18px; align-items: center; }.studio-brand span { font: .62rem/1.5 var(--font-body); letter-spacing: .05em; max-width: 11ch; }
.studio-hero { padding-top: 50px; }.studio-kicker { display: flex; align-items: center; gap: 20px; font: .62rem var(--font-mono); letter-spacing: .12em; }.studio-dot { width: 10px; height: 10px; border-radius: 50%; background: #bd6942; }
.studio-hero h1 { font: 400 clamp(3.5rem, 7.7vw, 8.4rem)/1.05 Georgia, serif; letter-spacing: -.06em; margin-block: 35px; }.studio-hero em { font-weight: 400; color: #946244; font-style: italic; }
.studio-hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 42px; }.studio-hero-bottom p { max-width: 42ch; font-size: .95rem; color: #64695d; }.studio-hero-bottom a { border-bottom: 1px solid #929283; padding-block: 12px; font-size: .8rem; }.studio-hero-bottom a span { margin-left: 45px; }
.architecture-scene { position: relative; overflow: hidden; border-radius: 2px; background: #d5dfde; }.architecture-scene svg { display: block; width: 100%; height: auto; }.architecture-scene > span { position: absolute; left: 26px; bottom: 24px; padding: 8px 12px; font: .57rem var(--font-mono); letter-spacing: .1em; background: #eee9dbd9; color: #303b32; }
.studio-projects { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; padding-bottom: 90px; }.studio-projects article:nth-child(2) { padding-top: 85px; }.studio-projects article > div:last-child { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-block: 20px; border-top: 1px solid #a4a597; }.studio-projects h3 { font: 1.6rem Georgia, serif; }.studio-projects p { font-size: .65rem; color: #6c7062; }
.studio-mini { position: relative; overflow: hidden; height: 350px; background: linear-gradient(#d0d8c6 55%, #baaf95 55%); margin-bottom: 16px; }.studio-mini span { position: absolute; width: 70%; height: 66%; left: 15%; top: 19%; background: repeating-linear-gradient(90deg, #b5a584 0 16%, #434c3e 16% 30%, #8a795c 30% 32%); border: 18px solid #e2d6b9; box-shadow: 25px 25px 0 #6565483b; }.studio-mini--loft { height: 300px; background: linear-gradient(130deg, #e0d8c8, #b4a58c); }.studio-mini--loft span { width: 58%; left: 22%; border: 0; background: repeating-linear-gradient(90deg, #5b5144 0 7%, #e5e2d0 7% 16%); transform: skewY(-8deg); }
.studio-manifesto { background: #343e32; color: #f1eee2; padding-block: 75px; }.studio-manifesto .studio-wrap { display: grid; grid-template-columns: .65fr 1.3fr 1fr; gap: 35px; align-items: start; }.studio-manifesto h2 { font: clamp(2.5rem, 4.4vw, 4.5rem)/1.1 Georgia, serif; letter-spacing: -.04em; }.studio-manifesto p:first-child { font-size: .65rem; letter-spacing: .1em; }.studio-manifesto p:last-child { font-size: .9rem; line-height: 1.9; color: #d0d6c6; }.studio-manifesto em { color: #d8b18c; font-style: italic; }
.studio-contact { padding-block: 90px; }.studio-contact > p { font: .7rem var(--font-mono); }.studio-contact h2 { margin-block: 30px; font: clamp(2.7rem, 5vw, 5rem)/1.1 Georgia, serif; letter-spacing: -.05em; }.studio-contact > a { display: inline-block; padding-block: 14px; border-bottom: 1px solid #989e88; font-size: .85rem; }
.concept-coffee-page { --coffee-cream: #fff2dc; --coffee-ink: #493024; --coffee-orange: #d56b38; background: var(--coffee-cream); color: var(--coffee-ink); }
.coffee-brand { font: 800 3rem/1 Georgia, serif; letter-spacing: -.065em; }.coffee-brand span { display: block; margin-top: 8px; font: .55rem var(--font-body); letter-spacing: .32em; }.coffee-nav-button { background: #493024; color: #fff4df; border-radius: 30px; padding: 12px 20px; }
.coffee-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 25px; padding-block: 50px 70px; }.coffee-eyebrow { font-size: .65rem; letter-spacing: .13em; font-weight: 600; }.coffee-hero h1 { font: 800 clamp(3.8rem, 7.5vw, 7.5rem)/.97 Georgia, serif; letter-spacing: -.065em; margin-block: 30px; }.coffee-hero em { color: var(--coffee-orange); font-style: italic; }.coffee-intro { max-width: 37ch; font-size: 1rem; margin-bottom: 30px; }
.coffee-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 30px; background: #493024; color: #fff2dc; padding: 17px 25px; border-radius: 40px; font-size: .85rem; }
.coffee-art { position: relative; min-width: 0; aspect-ratio: 1; background: #f2bb7645; border-radius: 50%; }.coffee-orbit-text { position: absolute; top: 8%; left: 16%; font: .6rem var(--font-mono); letter-spacing: .1em; transform: rotate(-10deg); }
.coffee-saucer { position: absolute; inset: 19% 10% 7% 17%; background: radial-gradient(ellipse at 40% 35%, #fffdf2, #d8c8a9 69%, #eddfc9 73%); border-radius: 50%; box-shadow: 22px 30px 24px #8c542e28; transform: rotate(-15deg); }.coffee-cup { position: absolute; inset: 12%; border: 14px solid #f2ead9; border-radius: 50%; background: #fff5df; box-shadow: 4px 8px 10px #663b2540; }.coffee-cup::before { content: ''; position: absolute; z-index: -1; width: 29%; height: 24%; right: -27%; top: 33%; border: 12px solid #eee4d1; border-radius: 40%; }
.coffee-surface { position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(ellipse at 45% 40%, #bd7a38, #8b491e 72%, #5e2c14); box-shadow: inset 0 0 0 6px #d2a26d; overflow: hidden; }.latte-leaf { position: absolute; width: 42%; height: 21%; background: #f7e4bc; border-radius: 70% 10% 70% 10%; transform: rotate(-20deg); left: 19%; top: 25%; }.latte-leaf--2 { left: 43%; top: 36%; transform: rotate(105deg); }.latte-leaf--3 { width: 33%; left: 24%; top: 47%; transform: rotate(-20deg); }.latte-leaf--4 { width: 28%; left: 43%; top: 57%; transform: rotate(110deg); }.latte-stem { position: absolute; width: 4%; height: 66%; background: #f7e4bc; left: 51%; top: 19%; border-radius: 50%; transform: rotate(-25deg); }
.coffee-bean { position: absolute; width: 30px; height: 47px; border-radius: 50%; background: linear-gradient(105deg, #70401f 46%, #382015 48% 53%, #8c522c 55%); left: 8%; bottom: 9%; transform: rotate(30deg); }.coffee-bean--2 { left: 3%; bottom: 20%; transform: rotate(-30deg); }.coffee-sticker { position: absolute; right: -2%; top: 23%; width: 120px; height: 120px; display: grid; align-content: center; border-radius: 50%; color: #fff2dc; background: #b6492e; text-align: center; font: 700 1.1rem/1.2 Georgia, serif; transform: rotate(14deg); }
.coffee-ribbon { overflow: hidden; white-space: nowrap; background: #c9693b; color: #fff2dc; padding: 18px 25px; font: 700 clamp(.9rem, 2vw, 1.5rem) Georgia, serif; letter-spacing: .08em; }
.coffee-menu { padding-bottom: 80px; }.coffee-menu .demo-section-heading h2 { font-family: Georgia, serif; }.coffee-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 35px; }.coffee-menu-grid article { border-top: 1px solid #b99e7c; padding-top: 25px; }.coffee-menu-grid article > span { font: .65rem var(--font-mono); }.coffee-menu-grid h3 { font: 700 1.8rem Georgia, serif; margin-block: 22px 15px; }.coffee-menu-grid p { font-size: .85rem; max-width: 27ch; }.coffee-menu-grid strong { display: block; margin-top: 22px; font-weight: 600; color: #a24622; }
.coffee-story { background: #e9bb80; padding-block: 70px; }.coffee-story > div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: center; }.coffee-sun { font-size: clamp(10rem, 24vw, 22rem); color: #a34629; line-height: 1; text-align: center; }.coffee-story p:first-child { font-size: .65rem; letter-spacing: .1em; }.coffee-story h2 { font: 700 clamp(2.7rem, 5.5vw, 5rem)/1.05 Georgia, serif; margin-block: 25px; }.coffee-story em { color: #a34629; font-style: italic; }.coffee-story p:last-child { max-width: 43ch; }.coffee-next { padding-block: 80px; }.coffee-next > p { font-size: .65rem; letter-spacing: .1em; }.coffee-next h2 { font: 700 clamp(2.7rem, 5vw, 5rem)/1.07 Georgia, serif; margin-block: 30px; }
.concept-service-page { --service-paper: #f2f5f8; --service-ink: #17313e; --service-blue: #246383; background: var(--service-paper); color: var(--service-ink); }
.service-brand { display: flex; align-items: center; gap: 8px; font-size: 2.8rem; font-weight: 800; letter-spacing: -.07em; }.service-brand > span:first-child { color: #ed9859; font-size: 2rem; }.service-brand-sub { font-size: .58rem; letter-spacing: .2em; margin-left: 6px; }
.service-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; padding-block: 65px 95px; }.service-eyebrow { display: flex; align-items: center; gap: 9px; font-size: .6rem; letter-spacing: .08em; }.service-eyebrow > span { width: 7px; height: 7px; background: #2a917c; border-radius: 50%; }.service-hero h1 { font-size: clamp(3.3rem, 6.5vw, 6.6rem); line-height: 1.02; letter-spacing: -.065em; margin-block: 28px; }.service-hero em { color: var(--service-blue); }.service-hero p:not(.service-eyebrow) { max-width: 40ch; font-size: .95rem; margin-bottom: 30px; }.service-button { display: inline-block; padding: 17px 23px; border-radius: 6px; color: #fff; background: #235d79; font-size: .82rem; font-weight: 600; }
.service-illustration { position: relative; min-width: 0; padding-block: 40px; }.service-dashboard { position: relative; z-index: 1; transform: rotate(-4deg); background: #1d3949; color: #e2eff6; border: 1px solid #526b7c; padding: 28px; border-radius: 14px; box-shadow: 20px 30px 50px #24445929; }.diagnostic-top { display: flex; justify-content: space-between; font: .55rem var(--font-mono); letter-spacing: .1em; }.diagnostic-top > span:last-child { color: #b8e7c9; }.car-wireframe svg { display: block; width: 100%; stroke: #98d8e4; stroke-width: 2; padding-block: 30px 15px; }.diagnostic-bars { display: grid; gap: 15px; }.diagnostic-bars > span { display: block; font: .52rem var(--font-mono); }.diagnostic-bars i { display: block; height: 3px; width: 75%; margin-top: 8px; background: linear-gradient(90deg, #e3aa73 70%, #385363 70%); }.diagnostic-bars > span:nth-child(2) i { width: 89%; }.diagnostic-bars > span:nth-child(3) i { width: 65%; }.service-dashboard > p { font-size: .65rem; margin-top: 25px; color: #bdd3df; }.service-orbit { position: absolute; inset: 0 -6%; border: 1px solid #a5c8d9; border-radius: 50%; transform: rotate(25deg); }.service-orbit--2 { inset: 10% -10%; transform: rotate(-24deg); }
.service-options { padding-bottom: 80px; }.service-options .demo-section-heading { border-top: 1px solid #becbd5; }.service-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }.service-demo-grid article { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 30px; }.service-demo-grid article > span { color: #6a8ba0; font: .7rem var(--font-mono); }.service-demo-grid h3 { margin-block: 30px 18px; font-size: 1.6rem; }.service-demo-grid p { font-size: .88rem; color: var(--muted); }
.service-steps { background: #1d3949; color: #edf3f5; padding-block: 70px; }.service-steps p:first-child { font-size: .65rem; letter-spacing: .1em; }.service-steps h2 { font-size: clamp(2.7rem, 5vw, 4.7rem); margin-block: 30px 45px; }.service-steps em { color: #e6b181; }.service-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; }.service-steps li { display: flex; gap: 20px; border-top: 1px solid #587080; padding-top: 25px; }.service-steps li > span { font: .75rem var(--font-mono); color: #e6b181; }.service-steps h3 { font-size: 1.4rem; margin-bottom: 16px; }.service-steps li p { font-size: .85rem; color: #c0d1dd; }.service-next { padding-block: 85px; }.service-next > p:first-child { font-size: .6rem; letter-spacing: .08em; }.service-next h2 { margin-block: 30px; font-size: clamp(2.7rem, 5vw, 5rem); }.service-next .demo-note { margin-top: 25px; }
:root[data-resolved-theme="dark"] .concept-studio { --studio-paper: #1d211e; --studio-ink: #eeeadd; }:root[data-resolved-theme="dark"] .studio-hero-bottom p, :root[data-resolved-theme="dark"] .studio-projects p { color: #bfc3b5; }
:root[data-resolved-theme="dark"] .concept-coffee-page { --coffee-cream: #28201c; --coffee-ink: #f8e7d2; --coffee-orange: #f4aa6e; }:root[data-resolved-theme="dark"] .coffee-art { background: #bb7d3a21; }:root[data-resolved-theme="dark"] .coffee-story { background: #68472e; }:root[data-resolved-theme="dark"] .coffee-story em, :root[data-resolved-theme="dark"] .coffee-sun, :root[data-resolved-theme="dark"] .coffee-menu-grid strong { color: #ffd2a0; }
:root[data-resolved-theme="dark"] .concept-service-page { --service-paper: #14222c; --service-ink: #e9f1f6; --service-blue: #92d4f1; }
@media (prefers-color-scheme: dark) {
    :root:not([data-resolved-theme="light"]) .concept-studio { --studio-paper: #1d211e; --studio-ink: #eeeadd; }
    :root:not([data-resolved-theme="light"]) .studio-hero-bottom p, :root:not([data-resolved-theme="light"]) .studio-projects p { color: #bfc3b5; }
    :root:not([data-resolved-theme="light"]) .concept-coffee-page { --coffee-cream: #28201c; --coffee-ink: #f8e7d2; --coffee-orange: #f4aa6e; }
    :root:not([data-resolved-theme="light"]) .coffee-story { background: #68472e; }:root:not([data-resolved-theme="light"]) .coffee-story em, :root:not([data-resolved-theme="light"]) .coffee-sun, :root:not([data-resolved-theme="light"]) .coffee-menu-grid strong { color: #ffd2a0; }
    :root:not([data-resolved-theme="light"]) .concept-service-page { --service-paper: #14222c; --service-ink: #e9f1f6; --service-blue: #92d4f1; }
}
@media (max-width: 950px) {
    .studio-wrap, .coffee-wrap, .service-wrap { width: calc(100% - 48px); }.concept-toolbar > p { order: 3; flex-basis: 100%; }.concept-toolbar { padding: 12px 24px; }
    .studio-manifesto .studio-wrap { grid-template-columns: 1fr 1.4fr; }.studio-manifesto p:first-child { grid-column: 1/-1; }.service-hero { gap: 30px; }.service-dashboard { padding: 20px; }.coffee-hero { gap: 10px; }.coffee-sticker { width: 90px; height: 90px; font-size: .9rem; }
}
@media (max-width: 640px) {
    .studio-wrap, .coffee-wrap, .service-wrap { width: calc(100% - 36px); }.concept-toolbar { padding: 12px 18px; gap: 10px; }.concept-toolbar > a { font-size: .62rem; }.concept-toolbar .site-tools { margin-left: auto; }
    .demo-nav { flex-wrap: wrap; padding-block: 24px; }.demo-nav nav { gap: 18px; font-size: .72rem; }.demo-section-heading { display: block; padding-block: 45px 28px; }.demo-section-heading h2 { margin-top: 25px; font-size: 2.8rem; }.demo-section-heading > p { font-size: .6rem; }
    .studio-brand { font-size: 3rem; }.studio-kicker { gap: 10px; font-size: .46rem; }.studio-dot { width: 7px; height: 7px; }.studio-hero { padding-top: 25px; }.studio-hero h1 { font-size: clamp(2.25rem, 9vw, 4rem); }.studio-hero-bottom { flex-direction: column; align-items: start; gap: 16px; }.architecture-scene svg { width: 160%; max-width: none; margin-left: -28%; }.architecture-scene > span { font-size: .43rem; left: 12px; bottom: 12px; }
    .studio-projects { grid-template-columns: minmax(0,1fr); gap: 30px; padding-bottom: 50px; }.studio-projects article:nth-child(2) { padding-top: 0; }.studio-mini, .studio-mini--loft { height: 270px; }.studio-projects article > div:last-child { flex-wrap: wrap; gap: 8px; }.studio-manifesto { padding-block: 45px; }.studio-manifesto .studio-wrap { grid-template-columns: minmax(0,1fr); gap: 25px; }.studio-manifesto h2 { font-size: 3.5rem; }.studio-contact { padding-block: 55px; }
    .coffee-brand { font-size: 2.7rem; }.coffee-hero { grid-template-columns: minmax(0,1fr); padding-block: 30px 40px; }.coffee-hero h1 { font-size: clamp(3.5rem, 13vw, 5.5rem); }.coffee-art { width: 94%; margin-inline: auto; }.coffee-orbit-text { font-size: .48rem; }.coffee-menu-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }.coffee-menu-grid article { position: relative; }.coffee-menu-grid strong { position: absolute; right: 0; top: 6px; }.coffee-menu-grid h3 { font-size: 1.7rem; }.coffee-story > div { grid-template-columns: minmax(0,1fr); gap: 15px; }.coffee-sun { text-align: left; font-size: 7rem; }.coffee-next { padding-block: 55px; }
    .service-hero { grid-template-columns: minmax(0,1fr); padding-block: 30px 50px; }.service-hero h1 { font-size: clamp(3rem, 11vw, 4.5rem); }.service-hero p:not(.service-eyebrow) { font-size: .9rem; }.service-eyebrow { font-size: .46rem; }.service-illustration { padding: 28px 15px; overflow: clip; }.service-dashboard { transform: rotate(-3deg); }.service-orbit { inset: 0 1%; }.service-orbit--2 { inset: 10% 0; }.service-demo-grid, .service-steps ol { grid-template-columns: minmax(0,1fr); }.service-options { padding-bottom: 50px; }.service-steps { padding-block: 50px; }.service-next { padding-block: 55px; }
    .concept-end { padding: 24px 18px; gap: 15px; font-size: .73rem; }
}