/* Unboxed, product-led browser compositions. Inner interfaces scale like screenshots. */
.digital-craft{container-type:inline-size;min-width:0;background:none;border:0;box-shadow:none;overflow:visible;color:#302a22}
.mock-browser{background:#fffcf5;border:1px solid #bdb5a8;box-shadow:0 10px 18px #443b2f0b;overflow:hidden;border-radius:3px 3px 0 0}
.mock-browser-bar{height:clamp(22px,5cqw,34px);display:flex;align-items:center;gap:3cqw;padding-inline:3cqw;background:#e9e4da;border-bottom:1px solid #d9d2c5;color:#7d7365;font-size:clamp(5px,1.35cqw,9px);line-height:1}
.mock-window-dots{display:flex;gap:4px}.mock-window-dots i{height:4px;width:4px;border:1px solid #a99f8f;border-radius:50%}
.mock-address{flex:1;text-align:center;letter-spacing:.5px}.mock-browser-plus{font-size:12px}
.mock-store-nav,.mock-business-nav{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:3.5cqw 4cqw;border-bottom:1px solid #e2dacc;font-size:clamp(5px,1.3cqw,9px)}
.mock-store-nav b{font-size:clamp(8px,2cqw,14px);font-weight:500;letter-spacing:1.3px}
.mock-store-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);min-height:45cqw}
.mock-store-copy{padding:5cqw 0 5cqw 5cqw;position:relative;z-index:1;align-self:center}
.mock-overline{display:block;font-size:clamp(5px,1.15cqw,8px);line-height:1.6;letter-spacing:1px;color:#817463;margin-bottom:3cqw}
.mock-store-title{font:400 clamp(20px,6.5cqw,48px)/1.05 Georgia,serif;letter-spacing:-.04em;margin-bottom:3cqw}
.mock-store-copy p{font-size:clamp(7px,1.55cqw,11px);line-height:1.65;color:#766a5a;margin:0 0 4cqw}
.mock-store-hero>img{width:100%;height:100%;min-height:45cqw;object-fit:cover;object-position:60% center;filter:saturate(.65)}
.mock-underlined{display:inline-flex;align-items:center;gap:3cqw;border-bottom:1px solid #a89b87;padding-bottom:1cqw;font-size:clamp(6px,1.4cqw,10px)}
.mock-store-bottom,.mock-business-bottom{display:flex;justify-content:space-between;gap:2cqw;border-top:1px solid #e2dacc;padding:2.5cqw 4cqw;font-size:clamp(4px,1.1cqw,8px);line-height:1.5;letter-spacing:.5px;color:#7a6d5b}
.mock-product{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;padding:4cqw}
.mock-product-photo{position:relative;background:#eae2d6;min-width:0}.mock-product-photo img{display:block;width:100%;height:51cqw;object-fit:cover;object-position:60% center;filter:saturate(.6)}
.mock-product-photo>span{position:absolute;bottom:2cqw;left:2cqw;font-size:1.2cqw;background:#faf5eb;padding:1cqw}
.mock-product-copy{padding-block:1.5cqw}.mock-product-title{font:400 clamp(17px,4.8cqw,34px)/1.1 Georgia,serif;letter-spacing:-.03em;margin-bottom:3cqw}
.mock-product-copy p{font-size:1.5cqw;line-height:1.7;color:#7c6f5d;margin:0 0 3cqw}
.mock-product-rule{display:flex;justify-content:space-between;gap:2cqw;border-block:1px solid #e1d8c8;padding-block:2cqw;font-size:1.4cqw;margin-bottom:3cqw}
.mock-field-label{display:block;font-size:clamp(5px,1.15cqw,8px);letter-spacing:.7px;color:#8a7b65;margin-block:2.5cqw 1.5cqw}
.mock-sizes{display:flex;gap:1.2cqw;margin-bottom:3cqw;font-size:1.4cqw}.mock-sizes span{padding:1cqw;border-bottom:1px solid #d8cbb7}.mock-sizes .mock-selected{border-color:#625641}
.mock-ink-button{display:flex;justify-content:space-between;align-items:center;gap:2cqw;padding:1.8cqw 2.2cqw;background:#443b2e;color:#faf5ec;font-size:clamp(6px,1.4cqw,10px);margin-bottom:3cqw;line-height:1.5}
.mock-business-nav b{font-size:clamp(6px,1.6cqw,12px);line-height:1.1;letter-spacing:.5px}
.mock-business-hero{display:grid;grid-template-columns:1fr 1fr;min-height:43cqw}.mock-business-hero>div{padding:5cqw 3cqw 4cqw 4cqw;align-self:center}.mock-business-title{font-size:clamp(18px,5.7cqw,42px);line-height:1.05;letter-spacing:-.04em;margin-bottom:3cqw}.mock-business-hero p{font-size:1.5cqw;line-height:1.7;color:#746854;margin:0 0 3cqw}.mock-business-hero>img{width:100%;height:100%;min-height:43cqw;object-fit:cover;filter:saturate(.55)}
.mock-small-outline{display:inline-block;white-space:nowrap;border:1px solid #cfc5b3;padding:1cqw 1.5cqw;font-size:clamp(5px,1.1cqw,8px);line-height:1.5}
/* Application shell: navigation, tools and ruled working areas, without metric cards. */
.mock-app{display:grid;grid-template-columns:minmax(0,.23fr) minmax(0,1fr);background:#fbf9f2;min-height:54cqw}
.mock-sidebar{display:flex;flex-direction:column;padding:3cqw 1.7cqw;background:#eeeade;border-right:1px solid #dcd4c4;min-width:0}
.mock-sidebar>b{font-size:clamp(7px,1.8cqw,13px);font-weight:500;letter-spacing:-.4px;margin-bottom:3cqw}.mock-sidebar>b>span{color:#7e8c5d}
.mock-sidebar>small{font-size:clamp(4px,1cqw,7px);letter-spacing:.5px;color:#978970;margin-bottom:2cqw}
.mock-nav-item{font-size:clamp(5px,1.25cqw,9px);line-height:1.6;padding:1.3cqw 0;color:#857660;white-space:nowrap}
.mock-nav-active{color:#302a22;border-bottom:1px solid #b9b998}
.mock-sidebar-bottom{margin-top:auto;font-size:clamp(4px,1cqw,7px);line-height:1.5;color:#978970;padding-top:4cqw}
.mock-app-main{min-width:0;padding:0 3cqw 2cqw}
.mock-app-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e3dccd;padding-block:1.7cqw;font-size:clamp(4px,1.05cqw,8px);color:#8e7f68}
.mock-avatar{padding:1cqw;border:1px solid #d7cebd;font-size:1.2cqw;line-height:1}
.mock-app-heading{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding-block:3cqw 2cqw}
.mock-app-heading .mock-overline{margin-bottom:1cqw;font-size:1cqw}
.mock-app-title{font-size:clamp(14px,3.5cqw,26px);line-height:1.15;letter-spacing:-.04em}
.mock-app-tabs{display:flex;gap:3cqw;border-bottom:1px solid #dcd4c4;font-size:clamp(5px,1.2cqw,9px);color:#97866b}
.mock-app-tabs>span{padding-block:1.6cqw}.mock-tab-active{color:#302a22;border-bottom:1px solid #68734e}
.mock-app-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:3cqw;gap:3cqw}
.mock-app-figures>div{border-right:1px solid #ddd4c3}.mock-app-figures>div:last-child{border:0}
.mock-app-figures span{display:block;font-size:clamp(4px,1cqw,7px);letter-spacing:.4px;color:#897b63;margin-bottom:1.5cqw}
.mock-app-figures b{font-size:clamp(16px,4.7cqw,34px);font-weight:450;letter-spacing:-.05em;line-height:1}.mock-app-figures b small{font-size:.55em}
.mock-app-chart{border-block:1px solid #e0d7c7;padding-block:2cqw;margin-bottom:2cqw}
.mock-app-chart>div{display:flex;justify-content:space-between;align-items:center;font-size:1.3cqw;margin-bottom:1.5cqw}.mock-app-chart small{font-size:.8cqw;letter-spacing:.5px;color:#928269}
.mock-app-chart svg{display:block;width:100%;height:13cqw}.mock-chart-grid{stroke:#e5ddcd;stroke-width:1;fill:none}.mock-chart-line{stroke:#82916a;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.mock-table>div{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.9fr);gap:1cqw;padding-block:1.6cqw;border-bottom:1px solid #e5ddcd;font-size:clamp(4px,1.15cqw,8px);line-height:1.5}
.mock-table .mock-table-head{font-size:.9cqw;letter-spacing:.4px;color:#97876d}
.mock-status{color:#6f7d51}.mock-status-active{color:#9b7849}
.mock-app-footnote{padding-top:2.5cqw;font-size:clamp(4px,.85cqw,6px);letter-spacing:.6px;color:#9a8b74}
.mock-project-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5cqw;padding-block:3.5cqw}
.mock-project-progress>div{border-top:1px solid #ccc3af;padding-top:1.5cqw}.mock-project-progress .mock-current{border-color:#7b8a5c}
.mock-project-progress span{display:block;font-size:1cqw;color:#9c8c71;margin-bottom:1cqw}.mock-project-progress b{font-size:1.5cqw;font-weight:450}
.mock-editor-tools{display:flex;align-items:center;gap:2cqw;border-block:1px solid #dfd6c6;padding-block:1.3cqw;font-size:1.3cqw;color:#7b6c55}
.mock-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.34fr);gap:2cqw;padding-top:3cqw}
.mock-editor-page{background:#fffdf7;padding:3cqw 2cqw;border-top:1px solid #e4dccd}.mock-editor-page .mock-overline{font-size:.85cqw;margin-bottom:2cqw}
.mock-editor-title{font-size:clamp(12px,2.8cqw,22px);line-height:1.15;letter-spacing:-.04em;margin-bottom:2cqw}
.mock-editor-page p{font-size:1.25cqw;line-height:1.7;color:#9a8b74;margin:0 0 3cqw}
.mock-editor-lines{display:grid;gap:1cqw;margin-bottom:3cqw}.mock-editor-lines i{height:1px;background:#dcd2bf;width:100%}.mock-editor-lines i:last-child{width:65%}
.mock-editor-subtitle{font-size:1.8cqw;line-height:1.4;margin-bottom:2cqw;letter-spacing:-.3px}
.mock-editor-settings{border-left:1px solid #e2d9c8;padding-left:1.5cqw;font-size:1.1cqw}.mock-editor-settings b{font-weight:500}.mock-editor-settings span{display:block;font-size:.8cqw;letter-spacing:.4px;color:#9a8b74;margin-top:2.5cqw}.mock-editor-settings strong{display:block;font-size:1cqw;font-weight:400;padding-block:1cqw;border-bottom:1px solid #e0d6c3}
.mock-enquiry{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:2.5cqw;padding-block:2cqw}
.mock-enquiry-list>div{padding:2cqw 1cqw;border-bottom:1px solid #e0d6c3}.mock-enquiry-list .mock-enquiry-selected{border-left:2px solid #8c9a70;background:#f2eee2;padding-left:1.5cqw}
.mock-enquiry-list small{display:block;font-size:.8cqw;letter-spacing:.4px;color:#9a8a71;margin-bottom:1cqw}.mock-enquiry-list b{display:block;font-size:1.45cqw;font-weight:500;margin-bottom:1cqw}.mock-enquiry-list span{font-size:1cqw;color:#9a8b74;line-height:1.6}
.mock-enquiry-detail{padding-block:2cqw}.mock-enquiry-detail .mock-overline{font-size:.9cqw}.mock-enquiry-detail p{font-size:1.15cqw;line-height:1.7;color:#8b7b62;margin:0 0 2cqw}
/* No outer card, colored mat or decorative caption box. The browser is the object. */
.hero-room{display:none}.hero .hero-devices{aspect-ratio:auto;height:auto;min-height:0}
.hero .digital-craft,.editorial-photo .digital-craft,.expertise-image .digital-craft,.contact-photo .digital-craft{min-height:0;box-shadow:none;background:none;border:0}
.hero .hero-devices{width:100%}
.project .project-art,.project:first-child .project-art,.project-page .project-preview .project-art{display:block;background:none;aspect-ratio:auto;height:auto;padding:0;overflow:visible}
.project .project-art .digital-craft{width:100%}
.project:hover .project-art{filter:none}
.project:hover .mock-browser{border-color:#9a907c}
.standard{background:#e7e0d3;color:var(--ink);border-block:1px solid var(--border)}.standard-inner::after{content:none}
.standard .button.light{color:var(--ink);border-color:#8b7863}.standard .principles a{color:#62594c;border-color:#bfb29e}.standard .principles a:hover,.standard .principles a:focus-visible{color:var(--ink)}.standard .principles a::before{background:#75834f}
.closing{background:#eae3d7;color:var(--ink);border-block:1px solid var(--border)}.closing .button.closing-primary{border-color:var(--ink);background:var(--ink);color:var(--surface)}.closing .closing-primary>span{color:var(--lime)}.closing .button.light{color:var(--ink);border-color:#8b7863}
@media(max-width:900px){.hero .hero-devices{max-width:680px}}
@media(max-width:600px){.mock-browser{box-shadow:none}.mock-window-dots{gap:3px}.mock-window-dots i{width:3px;height:3px}.mock-address{letter-spacing:.2px}.mock-app-heading .mock-small-outline{padding:.8cqw}.mock-store-nav b{letter-spacing:.7px}}
.mock-store-photo,.mock-business-photo{position:relative;min-width:0;min-height:0}
.mock-store-photo>img,.mock-business-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.6)}
.mock-store-photo>img{object-position:60% center}
@media(min-width:901px){
 .project:not(:first-child) .mock-browser{height:86cqw;display:flex;flex-direction:column}
 .project:not(:first-child) .mock-app{flex:1;min-height:0}
 .project:not(:first-child) .mock-business-hero{flex:1;min-height:0}
}
.mock-business-hero>.mock-business-photo{padding:0;align-self:stretch}


/* Shared real website previews on Home and Work. */
.project-grid.delivered-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.delivered-grid>.delivered-project{grid-column:auto;min-width:0}
.delivered-preview{display:block;overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.delivered-preview img{display:block;width:100%;height:auto;aspect-ratio:1585 / 1050;object-fit:contain;filter:none}
.delivered-project .project-label{gap:20px;align-items:start;min-height:110px}
.delivered-project .project-label>div{min-width:0}
.delivered-project .project-label h3{font-size:20px;line-height:1.35}
.delivered-project .project-affordance{padding-top:3px}
@media(max-width:1100px){.delivered-project .project-label{flex-direction:column;gap:14px;min-height:138px}.delivered-project .project-affordance{padding-top:0}}
@media(max-width:700px){.project-grid.delivered-grid{grid-template-columns:minmax(0,1fr);gap:32px}.delivered-project .project-label{min-height:0;gap:12px}.delivered-project .project-label h3{font-size:20px}}

/* Editorial presentation of genuine work, with quiet warm surfaces. */
.website-display{min-width:0;border:1px solid #c6bbaa;background:#fffaf2;box-shadow:0 12px 28px #261f1912}
.website-chrome{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:28px;padding:7px 12px;border-bottom:1px solid #d9cfbf;background:#f4eee4;color:#756757;font-size:8px;letter-spacing:.6px}
.website-dots{display:flex;gap:4px}.website-dots i{width:4px;height:4px;border-radius:50%;background:#b5a994}
.website-display>img{display:block;width:100%;height:auto;aspect-ratio:1.92;object-fit:cover;object-position:top}
.hero .hero-work-preview{margin:0;max-width:none;background:#e9e1d5;padding:32px 28px 20px}
.hero-work-preview figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:18px;color:var(--text-muted);font-size:8px;line-height:1.7;letter-spacing:1.1px}
.hero-work-preview figcaption>span{text-align:right}
.delivered-preview{padding:28px;background:#e9e2d6;border:0}
.delivered-preview img{aspect-ratio:1.92;object-fit:cover;object-position:top;border:1px solid #cec3b1;box-shadow:0 8px 18px #261f190c}
.delivered-project .project-label{min-height:96px;padding-block:22px}
.work-section .delivered-grid{row-gap:40px}
.work-section .delivered-project:nth-child(n+3){display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:24px}
.work-section .delivered-project:nth-child(n+3) .delivered-preview{padding:12px}
.work-section .delivered-project:nth-child(n+3) .project-label{display:block;border:0;padding:0;min-height:0}
.work-section .delivered-project:nth-child(n+3) .project-label h3{font-size:18px}
.work-section .delivered-project:nth-child(n+3) .project-affordance{margin-top:12px;font-size:11px}
@media(max-width:1100px){.hero .hero-work-preview{padding:24px 20px 16px}.delivered-preview{padding:20px}.delivered-project .project-label{min-height:126px}.work-section .delivered-project:nth-child(n+3){gap:20px;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}}
@media(max-width:700px){.hero .hero-work-preview{padding:20px 16px 16px}.hero-work-preview figcaption{font-size:8px;display:block;letter-spacing:1px}.hero-work-preview figcaption>span{display:block;text-align:left;margin-top:4px}.website-chrome{font-size:7px;padding-inline:8px}.delivered-preview{padding:20px}.delivered-project .project-label{min-height:0;padding-block:20px}.work-section .delivered-project:nth-child(n+3){gap:16px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);padding-bottom:24px}.work-section .delivered-project:nth-child(n+3) .project-label h3{font-size:17px}.work-section .delivered-project:nth-child(n+3) .project-category{font-size:8px;letter-spacing:.8px}.work-section .delivered-project:nth-child(n+3) .project-affordance{font-size:11px}.work-section .delivered-project:nth-child(n+3) .delivered-preview{padding:8px}}
.work-section .delivered-project:nth-child(n+3) .project-affordance{gap:12px}