/* Final, scoped detail for the four portfolio concepts. Existing demo behavior stays intact. */
:root{--demo-ink:#2d3e27;--demo-muted:#54664c;--demo-line:#cbd4c2}
html{scroll-padding-top:24px}
body{overflow-wrap:break-word}
main{min-width:0}
button,a,input,select,textarea{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #49623b;outline-offset:5px}
.interface-demo-label{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:4px;padding:2px 7px;font-size:10px;font-weight:500;line-height:1.6;white-space:nowrap;opacity:.8}
.demo-nav .demo-logo{display:flex;flex-direction:column;gap:5px;line-height:1}
.demo-nav .demo-logo>span{font-family:ProjectSans,Arial,sans-serif;font-size:8px;letter-spacing:.13em;font-weight:400;line-height:1.4}
.demo-nav button,.demo-btn,.add-product{min-height:44px}
.demo-nav a,.demo-nav button{flex-shrink:0}
/* ATELIER — quiet editorial shop, with a working product and cart flow. */
.shop-utility{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:39px;padding:7px 6%;border-bottom:1px solid #d6cfc2;color:#6b5e4b;background:#eee7db;font-size:11px;line-height:1.6}
.shop-utility .interface-demo-label{font-size:9px}
.shop-demo .demo-nav{padding-block:17px;height:auto;min-height:85px}
.shop-hero-copy{position:relative}
.shop-hero-copy:after{content:"01 / ATELIER OBJECTS";font-size:8px;letter-spacing:.16em;color:#7e6e56;position:absolute;inset-inline-start:12%;bottom:25px}
.shop-hero p{max-width:370px;color:#675a47;font-size:16px;line-height:1.9}
.shop-hero .shop-edition{padding-top:16px;border-top:1px solid #d1c4b1;max-width:205px;color:#736149}
.product-tile{min-width:0}
.product-image-button{position:relative;background:#e9e1d3;display:block}
.product-image-button:after{content:"↗";position:absolute;bottom:13px;inset-inline-end:13px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#4b4133;background:#f8f4e9e8;transform:translateY(5px);opacity:0;transition:opacity .25s,transform .25s}
.product-image-button:hover:after,.product-image-button:focus-visible:after{opacity:1;transform:translateY(0)}
.product-material{color:#75634e;font-size:12px}
.product-collection-id{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #d3c6b4;padding-block:10px;margin-bottom:10px;font-size:9px;line-height:1.6;color:#796b59}
.product-collection-id bdi{letter-spacing:.06em}
.product-meta{gap:15px;align-items:baseline}
.product-meta button{font-size:18px;line-height:1.5}
.product-meta span{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:15px}
.add-product{transition:background .22s,color .22s,border-color .22s}
.add-product:hover{background:#6a4936;border-color:#6a4936;color:#fff8ec}
.shop-materials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:45px 6%;border-block:1px solid #d5c8b5;gap:40px;background:#efe7da}
.shop-materials>div{position:relative;border-inline-start:1px solid #cdbfa9;padding-inline-start:25px;min-width:0}
.shop-materials .material-number{font-size:10px;letter-spacing:.08em;color:#79664f;font-variant-numeric:tabular-nums}
.shop-materials h2{font-family:PlexHebrew,Arial,sans-serif;font-size:29px;font-weight:400;line-height:1.4;margin:10px 0}
.shop-materials p{font-size:13px;line-height:1.9;margin:0;color:#6c5a43;max-width:240px}
.shop-foot a{padding-block:10px}
.product-dialog .product-specifications{font-size:14px;line-height:1.7}
/* FRAME — project-led architecture, beyond a single hero photograph. */
.brand-demo .demo-nav{padding-block:18px;height:auto;min-height:88px}
.brand-demo .demo-logo>span{font-size:7px;letter-spacing:.12em}
.brand-section-heading{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-bottom:35px}
.brand-section-heading h2{margin-bottom:0}
.brand-section-heading p{margin-top:20px;font-size:13px;line-height:1.9;color:#606953}
.brand-project-card{min-width:0;padding:0 0 18px;border-bottom:1px solid #c8cdbd}
.brand-project-card img{border-radius:2px;aspect-ratio:1.45/1;object-fit:cover}
.brand-project-card[aria-pressed=true]{border-bottom-color:#617451}
.brand-project-title{font-size:29px;line-height:1.5}
.brand-project-meta{font-size:12px;line-height:1.8;color:#586a4e}
.brand-project-facts{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:19px;padding-top:13px;border-top:1px solid #d6dacd;color:#60704f;font-size:10px;line-height:1.8}
.brand-project-facts>span:last-child{margin-inline-start:auto;font-size:17px;color:#394e2d;line-height:1}
.brand-process{display:grid;grid-template-columns:1fr 1.15fr;gap:10%;padding:70px 6%;background:#e4e8dc;border-block:1px solid #c4ceb9}
.brand-process .kicker{color:#596d47;font-size:9px;line-height:1.8;letter-spacing:.08em}
.brand-process h2{font-family:PlexHebrew,Arial,sans-serif;font-size:clamp(32px,4.2vw,54px);font-weight:300;letter-spacing:-.04em;line-height:1.3;margin:25px 0 0}
.brand-process ol{margin:0;padding:0;list-style:none}
.brand-process li{display:flex;align-items:flex-start;gap:25px;padding:22px 0;border-bottom:1px solid #bfcbb2}
.brand-process li:first-child{padding-top:0}
.brand-process li:last-child{border:0;padding-bottom:0}
.brand-process li>span{font-size:11px;color:#637852;line-height:2;font-variant-numeric:tabular-nums}
.brand-process h3{font-size:16px;font-weight:500;line-height:1.7;margin:0 0 5px}
.brand-process p{font-size:13px;line-height:1.9;color:#526646;margin:0}
.brand-about .brand-concept-note{color:#cad3bd}
/* SIGNAL — readable workspace and clear pipeline semantics. */
.dash-breadcrumb{display:flex;align-items:center;gap:10px;font-size:10px;color:#5c6f51;margin-bottom:22px;line-height:1.6}
.dash-breadcrumb .interface-demo-label{margin-inline-start:auto;font-size:9px}
.dash-title-row h1{color:#2d4326}
.dash-workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:2px 0 26px;padding:19px 21px;background:#e6eddc;border:1px solid #cdd9bd;border-radius:10px}
.dash-workflow>div{display:flex;align-items:flex-start;gap:10px;min-width:0}
.workflow-dot{display:block;width:8px;height:8px;flex-shrink:0;border-radius:50%;margin-top:8px}
.workflow-new{background:#6b8b43;box-shadow:0 0 0 3px #6b8b431b}
.workflow-active{background:#a37c32;box-shadow:0 0 0 3px #a37c321b}
.workflow-done{background:#6f7c6a;box-shadow:0 0 0 3px #6f7c6a1b}
.dash-workflow strong,.dash-workflow small{display:block}
.dash-workflow strong{font-weight:500;font-size:12px;line-height:1.8;color:#3b5231}
.dash-workflow small{font-size:10px;line-height:1.8;color:#566c48;margin-top:3px}
.dash-top small{color:#526747}
.dash-stat small{font-size:12px;color:#536849}
.dash-stat span{font-size:11px;color:#536d43}
.dash-box-heading span{color:#566f48}
.dash-tab{transition:background .2s,color .2s}
.dash-tab:hover{background:#ffffff0d;color:#f1f5e8}
.dash-source-label{color:#405736}
.dash-open-leads,.archive-button{min-height:40px}
/* MOMENT — a studio identity and a complete booking journey. */
.moment-logo{display:flex;flex-direction:column;gap:9px;line-height:1}
.moment-logo>span{font-family:ProjectSans,Arial,sans-serif;font-size:10px;font-weight:400;letter-spacing:0;line-height:1.6;color:#596f4c}
.moment-studio-card{display:flex;align-items:center;gap:13px;padding-bottom:24px;border-bottom:1px solid #d6decc;margin-bottom:28px}
.studio-monogram{display:grid;place-items:center;flex-shrink:0;width:43px;height:43px;border-radius:50%;background:#dce7cc;font:27px/1 Georgia,serif;color:#4d6840}
.moment-studio-card>div{min-width:0}
.moment-studio-card strong,.moment-studio-card>div>span{display:block}
.moment-studio-card strong{font-weight:500;font-size:13px;line-height:1.8;color:#3f5936}
.moment-studio-card>div>span{font-size:10px;line-height:1.8;color:#5c734d;margin-top:3px}
.moment-studio-card>.interface-demo-label{margin-inline-start:auto;font-size:9px}
.moment-intro p,.moment-helper{color:#587147}
.moment-intro h1{font-size:51px}
.service-option{transition:background .2s,border-color .2s,box-shadow .2s}
.service-option:hover{border-color:#8aa174;background:#f3f7eb}
.service-option strong{font-size:17px;line-height:1.6}
.service-option small{font-size:12px;color:#5b734b;line-height:1.8;margin-top:4px}
.service-option .duration{font-size:12px;color:#566f44}
.moment-help{margin-top:31px;border-top:1px solid #cdd9bd}
.moment-help details{border-bottom:1px solid #d8e1ce}
.moment-help summary{font-size:12px;line-height:1.8;padding:16px 2px;cursor:pointer;color:#4e6a3f}
.moment-help p{font-size:12px;line-height:1.9;margin:0 0 18px;color:#5a714d;max-width:390px}
.moment-next{transition:background .2s,box-shadow .2s}
.moment-next:hover:enabled{background:#345827;box-shadow:0 4px 12px #3b5a2c17}
@media(max-width:760px){
 .shop-hero-copy:after{inset-inline-start:12%;bottom:19px}
 .shop-hero p{font-size:14px}
 .shop-materials{gap:25px;padding-block:35px}
 .shop-materials>div{padding-inline-start:16px}
 .shop-materials p{font-size:12px}
 .brand-section-heading{gap:20px}
 .brand-section-heading p{font-size:12px;max-width:230px}
 .brand-process{gap:7%;padding-block:50px}
 .brand-process h3{font-size:15px}
 .brand-process p{font-size:12px}
 .dash-workflow{gap:15px;padding:17px}
 .dash-workflow small{font-size:10px}
}
@media(max-width:560px){
 .demo-nav .demo-logo>span{font-size:7px;letter-spacing:.06em}
 .shop-demo .demo-nav{min-height:75px;padding-block:16px}
 .shop-utility{font-size:10px;gap:10px;padding-inline:6%}
 .shop-hero-copy:after{display:none}
 .shop-hero h1{font-size:clamp(43px,13vw,57px);line-height:1.15}
 .shop-hero p{font-size:14px;max-width:100%;line-height:1.85}
 .shop-hero .demo-btn{font-size:14px}
 .shop-filters button{font-size:12px;min-height:42px;padding:8px 14px}
 .collection-head>span{font-size:11px;max-width:95px}
 .product-meta button{font-size:16px}
 .product-meta span{font-size:14px}
 .product-material{font-size:12px}
 .product-collection-id{font-size:9px;gap:6px}
 .add-product{font-size:13px;min-height:44px}
 .shop-materials{grid-template-columns:1fr;gap:25px;padding:32px 7%}
 .shop-materials>div{display:grid;grid-template-columns:25px 1fr;gap:0 18px;border:0;border-bottom:1px solid #d2c5b2;padding:0 0 22px}
 .shop-materials>div:last-child{border:0;padding-bottom:0}
 .shop-materials .material-number{padding-top:8px}
 .shop-materials h2{font-size:26px;margin:0 0 5px;line-height:1.5}
 .shop-materials p{grid-column:2;font-size:13px;max-width:none}
 .shop-foot{font-size:11px}
 .shop-foot>span:nth-child(2){font-size:11px}
 .product-dialog p,.product-dialog .demo-btn,.quantity-label{font-size:14px}
 .brand-demo .demo-nav{min-height:77px;padding-block:16px}
 .brand-demo .demo-logo>span{font-size:6px;letter-spacing:.02em}
 .brand-demo .demo-nav button{font-size:12px;min-height:44px}
 .brand-heading-line p{font-size:14px;max-width:290px}
 .brand-caption button{font-size:12px;min-height:44px}
 .brand-caption .kicker{font-size:9px}
 .brand-section-heading{display:block;margin-bottom:28px}
 .brand-section-heading h2{margin-bottom:14px}
 .brand-section-heading p{font-size:13px;line-height:1.8;margin:0;max-width:none}
 .brand-project-title{font-size:27px}
 .brand-project-meta{font-size:13px}
 .brand-project-facts{font-size:11px;gap:8px 15px}
 .brand-process{grid-template-columns:1fr;gap:34px;padding:43px 7%}
 .brand-process h2{font-size:39px;line-height:1.25;margin-top:18px}
 .brand-process h3{font-size:16px}
 .brand-process p{font-size:14px}
 .brand-process li{gap:22px;padding-block:21px}
 .brand-process li>span{font-size:12px}
 .brand-about .brand-concept-note{font-size:11px}
 .dash-breadcrumb{font-size:11px;gap:8px;margin-bottom:20px;flex-wrap:wrap}
 .dash-breadcrumb .interface-demo-label{font-size:9px}
 .dash-top small{font-size:10px;max-width:175px}
 .dash-tab{font-size:12px;min-height:44px;gap:7px;padding-inline:7px}
 .dash-stat{padding:14px 8px}
 .dash-stat small{font-size:11px;line-height:1.7}
 .dash-stat strong{font-size:29px;line-height:1.4}
 .dash-stat span{font-size:10px;line-height:1.7}
 .dash-box h2{font-size:15px}
 .dash-box-heading span{font-size:10px;line-height:1.7}
 .dash-chart-days{font-size:10px}
 .dash-workflow{grid-template-columns:1fr;gap:14px;padding:18px;margin-bottom:22px}
 .dash-workflow>div{align-items:center}
 .dash-workflow>div>span:last-child{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
 .dash-workflow strong{font-size:12px;min-width:37px}
 .dash-workflow small{font-size:11px;margin:0}
 .workflow-dot{margin-top:0}
 .dash-table{font-size:13px}
 .dash-table th,.dash-table th button{font-size:11px}
 .dash-badge,.archive-button{font-size:11px}
 .dash-filter-row input,.dash-filter-row select{font-size:16px;min-height:44px}
 .dash-archive-filter{font-size:12px}
 .analytics-note,.dash-source-label{font-size:14px}
 .dash-status{font-size:12px}
 .moment-nav{padding-block:20px}
 .moment-logo{font-size:35px;gap:7px}
 .moment-logo>span{font-size:10px}
 .moment-studio-card{gap:11px;padding-bottom:22px;margin-bottom:25px;align-items:flex-start}
 .studio-monogram{width:38px;height:38px;font-size:24px}
 .moment-studio-card strong{font-size:12px}
 .moment-studio-card>div>span{font-size:10px}
 .moment-studio-card>.interface-demo-label{font-size:8px;align-self:center;padding:2px 5px}
 .moment-intro h1{font-size:clamp(37px,11vw,47px)}
 .moment-intro p{font-size:14px;max-width:230px}
 .moment-intro .kicker{font-size:9px}
 .moment-orb{width:65px;height:65px}
 .moment-orb svg{width:45px;height:45px}
 .moment-orb:after{width:40px;height:40px}
 .moment-step-label{font-size:12px}
 .moment-panel h2{font-size:23px}
 .service-option{padding:17px 13px;gap:11px}
 .service-option strong{font-size:16px}
 .service-option small{font-size:12px}
 .service-option .duration{font-size:12px;max-width:42px}
 .service-option>span:nth-child(2){min-width:0}
 .moment-next{font-size:14px;min-height:49px;padding-inline:20px}
 .moment-back{font-size:13px;min-height:44px}
 .moment-helper,.moment-body .moment-actions>.moment-helper{font-size:12px;line-height:1.8}
 .moment-date-label{font-size:12px}
 .moment-day span{font-size:12px}
 .moment-slot{font-size:16px;min-height:48px}
 .moment-summary-row{font-size:14px;flex-wrap:wrap;gap:7px 15px}
 .moment-help summary{font-size:13px;min-height:48px}
 .moment-help p{font-size:13px}
 .moment-foot,.moment-footer-note{font-size:10px}
}
@media(max-width:360px){
 .shop-utility{flex-wrap:wrap;gap:5px}
 .product-grid{gap:24px 12px}
 .product-meta button{font-size:14px}
 .product-material{font-size:11px}
 .product-collection-id{font-size:8px}
 .dash-tab{font-size:11px;gap:5px}
 .dash-stat small{font-size:10px}
 .dash-stat strong{font-size:26px}
 .dash-stat span{font-size:9px}
 .moment-body{padding-inline:19px}
 .moment-intro{gap:12px}
 .moment-intro p{font-size:13px}
 .moment-step-label{font-size:11px}
 .service-option small{font-size:11px}
 .moment-studio-card>.interface-demo-label{display:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}