/* Body text is KH Teka Regular from 6 October 2026. The family name Basis is kept so every older rule follows; point this back at Basis-Regular.woff2 to undo. */@font-face{font-family:Basis;src:url('shared/fonts/KHTeka-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Teka;src:url('shared/fonts/KHTekaMedium-Medium.woff2') format('woff2');font-weight:500;font-display:swap}@font-face{font-family:Teka;src:url('shared/fonts/KHTeka-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Teka;src:url('shared/fonts/KHTekaLight-Light.woff2') format('woff2');font-weight:300;font-display:swap}@font-face{font-family:Mori;src:url('daymark/mori-medium.ttf');font-weight:500}
:root{--paper:#fff;--ink:#282828;--surface:#f7f7f7;--line:#28282820;--muted:#909090;--accent:#f26532}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.4 Basis,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px}.wordmark{font:500 32px/1 Teka,sans-serif;letter-spacing:-.055em}.contact{font-size:12px;padding:8px 0}.agency{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:65px 32px 80px;align-items:end}h1{font:500 clamp(40px,4.3vw,82px)/1.02 Mori,sans-serif;letter-spacing:-.055em;margin:0}h1>span{color:var(--accent)}.agency-info{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}.agency-info p{margin:0;line-height:1.5;font-size:14px}.settings{grid-column:1/-1;display:flex;gap:26px;align-items:center;font-size:10px}.settings button{padding:0}.settings .viewport-size{margin-left:auto;color:var(--muted)}.settings span{margin-left:4px}.clock-control{display:flex;gap:10px;align-items:center;text-align:left;padding:0}.clock{display:block;width:36px;height:36px;flex-shrink:0}.clock svg{display:block;width:100%;height:100%;overflow:visible}.clock svg g.hour,.clock svg g.minute,.clock svg g.second{transform-origin:50px 50px;transform-box:view-box}.clock-readout{display:flex;flex-direction:column;gap:2px;min-width:70px}.city{font-size:10px;line-height:1.35}.time{font-size:11px;font-variant-numeric:tabular-nums;line-height:1.35}
.portfolio{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 16px;padding:0 32px 64px}.project{padding:0;min-width:0;text-align:left}.project-meta{border-top:1px solid var(--line);padding:10px 0 17px;display:flex;justify-content:space-between;align-items:end;font-size:13px}.project-meta small{display:block;color:var(--muted);font-size:12px}.number{color:#aaa;font-size:12px}.project-art{display:flex;background:var(--surface);height:clamp(280px,30vw,510px);padding:13% 13% 0;overflow:hidden;align-items:flex-start}.project-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--t-base) var(--ease-out);transform-origin:50% 100%}.project:hover img{transform:translateY(-7px)}.project:hover .number{color:var(--accent)}footer{display:flex;justify-content:space-between;padding:20px 32px;border-top:1px solid var(--line);font-size:10px}
dialog{width:calc(100% - 64px);max-width:1600px;max-height:90svh;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--ink)}dialog::backdrop{background:#0006;backdrop-filter:blur(5px)}.window-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);font-size:11px}.close{font-size:25px;width:32px;height:32px}.window-body{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px}.detail-image{width:100%;max-height:68svh;object-fit:contain;object-position:top}.detail-info{padding:0 8px}.detail-copy{font-size:20px;line-height:1.4;margin:0 0 40px}dl{display:grid;grid-template-columns:1fr 2fr;font-size:12px}dt,dd{margin:0;padding:14px 0;border-top:1px solid var(--line)}dt{color:var(--muted)}.detail-link{display:inline-block;margin-top:25px;border-bottom:1px solid var(--ink);padding-bottom:6px}[hidden]{display:none!important}body.dark{--paper:#282828;--ink:#f7f7f7;--surface:#333;--line:#ffffff25}body.monochrome main{filter:grayscale(1)}body.monochrome dialog img{filter:grayscale(1)}
@media(max-width:1100px){.agency-info{grid-template-columns:1fr}.settings{flex-wrap:wrap}.portfolio{grid-template-columns:repeat(2,minmax(0,1fr))}.project-art{height:48vw}}
@media(max-width:600px){header{padding:22px 20px}.wordmark{font-size:28px}.agency{grid-template-columns:1fr;padding:35px 20px 50px;gap:28px}h1{font-size:43px}.agency-info{grid-template-columns:1fr auto;gap:22px}.agency-info p{grid-column:1/-1;font-size:13px}.settings{gap:16px;grid-column:1/-1}.portfolio{padding:0 20px 40px;gap:30px 12px}.project-meta{font-size:12px}.project-meta small{font-size:10px;max-width:110px}.project-art{height:62vw;padding:15% 10% 0}.number{font-size:10px}footer{padding:20px;gap:20px}dialog{width:calc(100% - 24px)}.window-body{grid-template-columns:1fr;padding:16px}.detail-image{max-height:45svh}.detail-copy{font-size:17px;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Header uses the same four-column tracks and 16px gutters as the work grid. */
@font-face{font-family:Mori;src:url('daymark/mori-bold.ttf');font-weight:700;font-display:swap}
.agency{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:32px;align-items:start;padding-top:72px;padding-bottom:84px}
.agency h1{grid-column:1/3;font-weight:700;letter-spacing:-.035em;line-height:1.1;font-size:clamp(40px,4vw,78px)}
.agency-info{display:grid;grid-column:3/5;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:30px;padding-top:8px;align-items:start}
.agency-info p{grid-column:1;max-width:320px}.agency-info .clock-block{grid-column:2;justify-self:start;margin:0;padding:0}.settings{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:7px;align-items:start}.settings .theme-toggle{grid-column:1;grid-row:1;justify-self:start}.settings .mono-toggle{grid-column:1;grid-row:2;justify-self:start}.settings .screen-info{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;color:var(--muted)}.settings .viewport-size,.settings .device-name{margin:0}.detail-link.identity-link{border:0;margin-top:25px}
@media(max-width:1100px){.agency h1{font-size:clamp(36px,4.5vw,55px)}.agency-info{grid-template-columns:1fr;row-gap:24px}.agency-info p,.agency-info .clock-block{grid-column:1}.settings{grid-column:1}}
@media(max-width:600px){.agency{grid-template-columns:1fr;padding:38px 20px 52px;gap:28px}.agency h1{grid-column:1;font-size:41px;line-height:1.12;letter-spacing:-.03em}.agency-info{grid-column:1;grid-template-columns:1fr 1fr;padding-top:0;gap:24px 12px}.agency-info p{grid-column:1/-1}.agency-info .clock-block{grid-column:1}.settings{grid-column:1/-1}.settings .screen-info{grid-column:2}}

.project{display:flex;flex-direction:column;align-self:start}.project-meta{width:100%}.project-art{width:100%}@media(max-width:600px){.project-meta{min-height:74px;align-items:start}.project-meta .number{padding-top:17px}}

html{scrollbar-gutter:stable}body.project-open{overflow:hidden}dialog{transform-origin:0 0;will-change:transform;background:var(--surface);border:0}dialog::backdrop{background:#0003;backdrop-filter:blur(3px)}.window-bar{padding:16px 20px}.close{border-radius:50%;width:30px;height:30px;background:#e8e8e8;color:#888;display:grid;place-items:center;font:400 22px/1 Basis,sans-serif;padding:0;transition:background var(--t-fast),color var(--t-fast)}.close:hover{background:#dedede;color:#282828}body.dark .close{background:#484848;color:#ccc}.project-meta{min-height:66px}.detail-image{object-position:center}.project-art{background:var(--surface)}
@media(max-width:600px){.project-meta{min-height:84px}.project-meta small{max-width:none}.project-meta>span:first-child{max-width:135px}.window-bar{padding:12px 16px}}

.detail-image{height:68svh}@media(max-width:600px){.detail-image{height:45svh}}

.agency h1{font-family:Teka,Arial,sans-serif;font-weight:500}
.project-art{transition:background var(--t-base) var(--ease-out)}.project:hover .project-art,.project:focus-visible .project-art{background:#e8e7e8}
.close{position:relative}.close span{display:block;width:10px;height:1.5px;background:currentColor;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.close:hover,body.dark .close:hover{background:#cbcbcb;color:#666}
/* The fixed header reserves its original height, preventing scroll-induced jumps. */
body{padding-top:90px}.site-header{display:block;position:fixed;inset:0 0 auto;z-index:20;padding:0;background:var(--paper);border-bottom:1px solid transparent;transition:border-color var(--t-base) var(--ease-out)}
.header-main{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;transition:height var(--t-base) var(--ease-out)}
.site-header .brand-combined{transition:width var(--t-base) var(--ease-out)}
.site-header.is-scrolled{border-color:var(--line)}.site-header.is-scrolled .header-main{height:62px}.site-header.is-scrolled .brand-combined{width:183px}
.header-under{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--t-base) var(--ease-out),visibility var(--t-base)}
.header-under-inner{min-height:0;overflow:hidden;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;padding:0 32px;align-items:center}
.site-header.show-controls .header-under{grid-template-rows:1fr;visibility:visible}
.header-under-inner>.clock-block{grid-column:3;grid-row:1;margin:0;padding:10px 0}.header-under-inner .clock{width:31px;height:31px}
.header-under-inner>.settings{grid-column:1/-1;grid-row:1;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 16px;font-size:10px;padding:10px 0;pointer-events:none}
.header-under-inner>.settings button{pointer-events:auto}.header-under-inner>.settings .theme-toggle{grid-column:1;grid-row:1}.header-under-inner>.settings .mono-toggle{grid-column:2;grid-row:1}.header-under-inner>.settings .screen-info{grid-column:4;grid-row:1;justify-self:start}
.header-under-inner .settings .screen-info span{margin:0}.header-under-inner .clock-control{position:relative;z-index:1}.project{scroll-margin-top:150px}
@media(max-width:600px){body{padding-top:76px}.header-main{height:76px;padding:0 20px}.site-header.is-scrolled .header-main{height:58px}.site-header.is-scrolled .brand-combined{width:162px}.header-under-inner{padding:0 20px;grid-template-columns:1fr 1fr 1fr;gap:10px}.header-under-inner>.clock-block{grid-column:2;padding:12px 0}.header-under-inner>.settings{grid-template-columns:1fr 1fr 1fr;gap:3px 10px}.header-under-inner>.settings .theme-toggle{grid-column:1;grid-row:1}.header-under-inner>.settings .mono-toggle{grid-column:1;grid-row:2}.header-under-inner>.settings .screen-info{grid-column:3;grid-row:1/3;font-size:9px;justify-self:end}.header-under-inner .clock-control{gap:5px}.header-under-inner .clock{width:25px;height:25px}.header-under-inner .city{font-size:8px}.header-under-inner .time{font-size:9px}.header-under-inner .clock-readout{min-width:58px}.header-under-inner .settings button{font-size:9px}.header-under-inner .settings button span{margin-left:2px}}
@media(prefers-reduced-motion:reduce){.site-header,.header-main,.site-header .brand-combined,.header-under,.project-art{transition:none}}

/* Returning controls must not be covered by a collapsing empty row. */
.site-header.controls-home .header-under{transition:none}

/* Keep the SVG mask at a fixed resolution and scale the complete lockup. */
.site-header .header-main,.site-header.is-scrolled .header-main{height:calc(90px - 28px * var(--header-progress,0));transition:none}
.site-header .brand-combined,.site-header.is-scrolled .brand-combined{width:226px;transform:scale(calc(1 - .1902654867 * var(--header-progress,0)));transform-origin:left center;transition:none;will-change:transform}
.clock-control{align-items:center}.clock-readout{justify-content:center;gap:2px}.city-window,.time-window{display:block;line-height:0}.city,.time{display:block;white-space:nowrap}
.header-under-inner .clock-readout{gap:1px}.header-under-inner .city{font-size:9px;line-height:10px}.header-under-inner .time{font-size:10px;line-height:11px}
@media(max-width:600px){.site-header .header-main,.site-header.is-scrolled .header-main{height:calc(76px - 18px * var(--header-progress,0))}.site-header .brand-combined,.site-header.is-scrolled .brand-combined{width:183px;transform:scale(calc(1 - .1147540984 * var(--header-progress,0)))}.header-under-inner .clock{width:30px;height:30px}.header-under-inner .clock-control{gap:6px}.header-under-inner .clock-readout{gap:1px;min-width:58px}.header-under-inner .city{font-size:8px;line-height:10px}.header-under-inner .time{font-size:9px;line-height:10px}}

.site-header{right:var(--scrollbar-gap,0px)}
.agency-info{position:relative;isolation:isolate;padding:26px;min-height:230px;align-content:space-between;row-gap:44px;color:#fff}
.flow-art{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 80% 15%,#be542d 0%,transparent 48%),radial-gradient(ellipse at 15% 90%,#633747 0%,transparent 60%),#1c1822}
.flow-canvas{position:absolute;inset:0;width:100%;height:100%}.flow-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#100d184d,#100d1826);pointer-events:none}
.agency-info .settings .screen-info{color:#ffffffb8}.agency-info>.clock-block,.agency-info>.settings,.agency-info>p{position:relative;z-index:1}.agency-info>p{pointer-events:none}.agency-info .clock-corners{stroke:#fff}
.controls-ghost{position:fixed!important;display:block!important;visibility:visible!important;pointer-events:none!important;z-index:21;background:var(--paper);color:var(--ink);overflow:hidden;transition:none!important}.controls-ghost .header-under-inner{height:100%}
@media(max-width:600px){.agency-info{padding:0 0 22px;row-gap:24px;min-height:0;color:var(--ink)}.agency-info .flow-art{top:var(--flow-top,84px)}.agency-info>p{padding:0 0 20px}.agency-info>.clock-block{margin-left:20px;color:#fff}.agency-info>.settings{padding:0 20px;color:#fff}.agency-info .settings .screen-info{color:#ffffffb8}.agency-info>p{color:var(--ink)}}

/* Two different-height hero blocks share a vertical centre on wide screens. */
@media(min-width:601px){.agency{align-items:center}}
.flow-canvas canvas{display:block;width:100%;height:100%}

.agency-info .settings .screen-info{color:#fff}
.agency-info>p,.agency-info>.clock-block,.agency-info>.settings{text-shadow:0 1px 6px #160c2466}
@media(max-width:600px){.agency-info>p{text-shadow:none}}
.flow-edit{padding:0;font-size:10px;text-align:left}

/* Press feedback changes the surface, preserving the precise geometry. */
.identity-link:active .link-arrow:before{background:#d4d3d4}
.settings button:active,.clock-control:active,.flow-edit:active{opacity:.66}
.project:active .project-art{background:#dedcde}
.close:active{background:#bcbcbc!important}
.agency-info .settings .viewport-size,.agency-info .settings .device-name{color:inherit}

/* White paper fades into the field; dark ink stays readable through the pale phase.
   The original controls stay live beneath the temporary visual copies. */
.wake-cover{position:absolute;inset:0;z-index:3;background:#fff;overflow:hidden;pointer-events:none}
.wake-copy{position:absolute!important;margin:0!important;max-width:none!important;grid-column:auto!important;grid-row:auto!important}
.wake-cover,.wake-cover *{color:#282828!important;text-shadow:none!important}
.wake-cover svg path{stroke:#282828!important}.wake-cover svg circle{fill:#282828!important}
.agency-info.wake-pending:not(:has(.wake-cover)){color:#282828}
.agency-info.wake-pending:not(:has(.wake-cover)) .flow-art{visibility:hidden}
.agency-info.wake-pending:not(:has(.wake-cover))>.clock-block,.agency-info.wake-pending:not(:has(.wake-cover))>.settings,.agency-info.wake-pending:not(:has(.wake-cover)) .screen-info{color:#282828;text-shadow:none}
.agency-info.wake-pending:not(:has(.wake-cover)) .clock-corners{stroke:currentColor}
@media(max-width:600px){.wake-cover{top:var(--flow-top,84px)}}
@media(prefers-reduced-motion:reduce){.wake-cover{display:none}.agency-info.wake-pending:not(:has(.wake-cover)) .flow-art{visibility:visible}}

/* The opening establishes hierarchy without delaying navigation or moving the grid. */
.entrance-pending .header-main>a,.entrance-pending .agency>h1,.entrance-pending .agency-info,.entrance-pending .project,.entrance-pending footer,.entry-wait{opacity:0}
@media(prefers-reduced-motion:reduce){.entrance-pending .header-main>a,.entrance-pending .agency>h1,.entrance-pending .agency-info,.entrance-pending .project,.entrance-pending footer,.entry-wait{opacity:1}}

.flow-art:after{opacity:var(--art-shade,0)}
dialog::backdrop{transition:backdrop-filter var(--t-base) cubic-bezier(.4,0,.2,1),background-color var(--t-base) cubic-bezier(.4,0,.2,1)}
dialog.is-closing::backdrop{backdrop-filter:blur(0px);background-color:transparent}
@media(prefers-reduced-motion:reduce){dialog::backdrop{transition:none}.flow-art:after{opacity:1}}
.agency-info.wake-pending>p,.agency-info.wake-pending>.clock-block,.agency-info.wake-pending>.settings{text-shadow:none}

/* Live palette windows and opt-in sound share the artwork's inner right edge. */
.sound-control{position:relative;z-index:4}.sound-toggle{display:flex;align-items:center;gap:9px;min-height:44px;padding:0;font-size:10px;white-space:nowrap}.sound-wave{display:flex;align-items:center;justify-content:center;gap:3px;width:26px;height:20px}.sound-wave i{width:2px;height:4px;background:currentColor;transform-origin:center;animation:wave-meter 1100ms ease-in-out infinite alternate;animation-play-state:paused}.sound-wave i:nth-child(2){height:12px;animation-delay:-240ms}.sound-wave i:nth-child(3){height:18px;animation-delay:-700ms}.sound-wave i:nth-child(4){height:9px;animation-delay:-430ms}.sound-wave i:nth-child(5){height:5px;animation-delay:-900ms}.is-playing .sound-wave i{animation-play-state:running}@keyframes wave-meter{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.agency-info>.sound-control{position:absolute;right:26px;top:22px;color:var(--art-ink,#fff)}
.palette-controls{position:absolute;right:22px;bottom:19px;display:flex;gap:4px;z-index:4;color:var(--art-ink,#fff)}.palette-option{position:relative;width:44px;height:44px;padding:8px 4px}.palette-option canvas{display:block;width:36px;height:24px;background:linear-gradient(140deg,#19162d,#ff9a64)}.palette-option[data-palette=cool] canvas{background:linear-gradient(140deg,#80b5e3,#fffdf2)}.palette-option:after{content:'';position:absolute;inset:4px 0 8px;border:1px solid currentColor;opacity:0;transition:opacity var(--t-base)}.palette-option[aria-pressed=true]:after{opacity:.75}.palette-option:hover:after{opacity:.45}.palette-option[aria-pressed=true]:hover:after{opacity:1}
.agency-info{--art-ink:#fff}.agency-info.cloud-palette{--art-ink:#172c46}.agency-info>p,.agency-info>.clock-block,.agency-info>.settings,.agency-info .settings .screen-info{color:var(--art-ink);transition:color var(--t-slow) var(--ease-out),text-shadow var(--t-slow) var(--ease-out)}.agency-info .clock-corners{stroke:currentColor}.agency-info.cloud-palette>p,.agency-info.cloud-palette>.clock-block,.agency-info.cloud-palette>.settings{text-shadow:none}.agency-info.cloud-palette .flow-art:after{opacity:0}.sound-control,.palette-controls{transition:color var(--t-slow) var(--ease-out)}.agency-info.wake-pending>.sound-control,.agency-info.wake-pending>.palette-controls{color:#282828}
.header-under-inner>.clock-block{grid-column:2;grid-row:1/3}.header-under-inner>.settings .mono-toggle{grid-column:1;grid-row:2}.header-under-inner>.settings .screen-info{grid-row:1/3}.header-under-inner>.sound-control{grid-column:3;grid-row:1/3;justify-self:start;color:var(--ink)}.header-under-inner>.settings{grid-row:1/3}
@media(min-width:1101px){.agency-info .clock-block{padding-right:96px}.agency-info p{font-size:clamp(11px,.84vw,14px)}}
@media(max-width:600px){
 .agency-info>.sound-control{top:auto;bottom:16px;right:20px}.agency-info>.sound-control .sound-toggle{justify-content:flex-end;width:44px}.sound-label{display:none}.agency-info>.palette-controls{top:calc(var(--flow-top,84px) + 16px);bottom:auto;right:16px}.agency-info>p{color:var(--ink)}.agency-info>.settings{padding-right:64px}.agency-info>.settings .screen-info{justify-self:start}.agency-info>.clock-block{color:var(--art-ink)}
 .header-under-inner{grid-template-columns:minmax(84px,1fr) minmax(82px,1fr) 30px minmax(54px,.7fr);gap:5px}.header-under-inner>.settings{grid-template-columns:minmax(84px,1fr) minmax(82px,1fr) 30px minmax(54px,.7fr);column-gap:5px}.header-under-inner>.settings .screen-info{grid-column:4}.header-under-inner>.sound-control{grid-column:3;justify-self:center}.header-under-inner .sound-toggle{justify-content:center;width:30px;position:relative}.header-under-inner .sound-toggle:before{content:'';position:absolute;inset:0 -7px}.header-under-inner .sound-wave{width:22px;gap:2px}
}
@media(prefers-reduced-motion:reduce){.sound-wave i{animation:none}.agency-info>p,.agency-info>.clock-block,.agency-info>.settings,.sound-control,.palette-controls{transition:none}}
@media(min-width:1101px){.agency-info p{font-size:14px}}
@media(max-width:350px){.site-header .brand-combined,.site-header.is-scrolled .brand-combined{width:160px}.header-main .contact{font-size:12px;white-space:nowrap;flex-shrink:0}}

/* Palette apertures are drawn in the main shader, not miniature canvases. */
.palette-windows-ready .palette-option canvas{background:transparent}

/* The palette windows use the clock's 36px drawing and identical bracket geometry. */
.palette-option{display:grid;place-items:center;width:44px;height:44px;padding:0}
.palette-option canvas{width:30px;height:30px}
.palette-option:after{display:none}
.palette-corners{position:absolute;width:36px;height:36px;inset:4px;pointer-events:none;opacity:0;transition:opacity var(--t-base) var(--ease-out)}
.palette-option[aria-pressed=true] .palette-corners{opacity:1}
@media(hover:hover){.palette-option[aria-pressed=false]:hover .palette-corners{opacity:.4}}
@media(max-width:600px){.agency-info>.palette-controls{top:calc(var(--flow-top,84px) + 16px)}}
@media(prefers-reduced-motion:reduce){.palette-corners{transition:none}}

/* Tighten the windows while keeping separate 44px touch targets. */
.palette-controls{gap:0}

.entrance-pending .palette-controls{opacity:0}
@media(prefers-reduced-motion:reduce){.entrance-pending .palette-controls{opacity:1}}

/* Mobile trial: waveform above, palette windows below. */
@media(max-width:600px){
 .agency-info>.sound-control{top:calc(var(--flow-top,84px) + 16px);bottom:auto;right:20px}
 .agency-info>.palette-controls{top:auto;bottom:16px;right:16px}
 .agency-info>.settings{grid-template-columns:minmax(0,1fr) 66px;column-gap:8px;padding-right:106px}
 .agency-info>.settings button{white-space:nowrap}
}
@media(max-width:360px){
 .agency-info>.settings{grid-template-columns:minmax(0,1fr) 52px;column-gap:4px;padding-left:16px;padding-right:100px;font-size:9px}
 .agency-info>.settings .screen-info{font-size:8px}
}

/* Mobile shows only the destination palette, centred on the waveform above. */
@media(max-width:600px){
 .agency-info>.palette-controls .palette-option[aria-pressed=true]{display:none}
 .agency-info>.palette-controls{right:11px}
 .agency-info>.settings{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 20px;column-gap:12px;font-size:10px}
 .agency-info>.settings .screen-info{font-size:10px}
}

/* One destination window on desktop, with its label outside the drawing. */
.palette-option[aria-pressed=true]{display:none}
.palette-label{display:none}
@media(min-width:601px){
 .agency-info>.palette-controls{right:17px}
 .palette-label{display:none}
 .palette-option .palette-corners{opacity:0}
}
@media(min-width:601px) and (hover:hover){.palette-option:hover .palette-corners{opacity:.75}}

/* Service labels share a vocabulary with the project scope, without pill chrome. */
.project-meta{gap:8px}.project-meta>span:first-child{min-width:0}.project-meta small{line-height:1.45;margin-top:2px;text-wrap:pretty}.project-meta .number{flex-shrink:0}.detail-scope{line-height:1.8}

/* DAYMARK uses its own blue, with a small directional cue. */
.concept-arrow{display:inline-block;width:.72em;height:.72em;width:1cap;height:1cap;vertical-align:baseline;margin-left:5px;color:#182cad;transition:transform var(--t-fast) var(--ease-out)}.concept-arrow svg{display:block;width:100%;height:100%}
@media(hover:hover){.project:hover .concept-arrow{transform:translate(2px,-2px)}}
.project:focus-visible .concept-arrow{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){.concept-arrow{transition:none}.project:hover .concept-arrow,.project:focus-visible .concept-arrow{transform:none}}

/* Project browsing: restrained controls on the same left edge as the work. */
.project-view-controls{display:flex;gap:18px;padding:0 32px 18px;align-items:center}
.project-view-controls button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0;color:var(--muted);font-size:12px}
.project-view-controls button[aria-pressed=true]{color:var(--ink)}
.project-view-controls svg{width:12px;height:12px;fill:currentColor}
.project-art{position:relative}
.concept-reveal{position:absolute;inset:0;background:#182cad;color:#f1efe8;padding:9%;display:flex;flex-direction:column;justify-content:center;gap:16px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.project-art .concept-reveal img{height:auto;max-height:80%;object-fit:contain;transform:none!important}
.concept-reveal>span{display:flex;justify-content:space-between;font-size:12px;line-height:1.3}
@media(hover:hover) and (pointer:fine){.project-concept:hover .concept-reveal{opacity:1;transform:none}}
.project-concept:focus-visible .concept-reveal{opacity:1;transform:none}
.portfolio.is-list{display:flex;flex-direction:column;gap:0}
.portfolio.is-list .project{display:grid;grid-template-columns:1fr 150px;gap:24px;align-items:center;width:100%;border-top:1px solid var(--line);padding:18px 0}
.portfolio.is-list .project-meta{border:0;min-height:0;padding:0;align-items:center;font-size:clamp(18px,2.2vw,30px)}
.portfolio.is-list .project-meta>span:first-child{max-width:none}.portfolio.is-list .project-meta small{font-size:12px;margin-top:8px}
.portfolio.is-list .project-art{height:100px;padding:0}.portfolio.is-list .project-art>img{object-position:50% 50%!important}
.portfolio.is-list .concept-reveal{padding:8px;flex-direction:row;gap:6px}.portfolio.is-list .concept-reveal img{width:55%;max-height:100%}.portfolio.is-list .concept-reveal>span{font-size:10px;flex-direction:column;justify-content:center}
/* One shared gallery and information layout for all project windows. */
dialog .window-bar{position:sticky;top:0;background:var(--surface);z-index:5}
.window-body{display:block;padding:24px}
.project-gallery{max-width:1100px;margin:0 auto}
.detail-image{display:block;width:100%;height:56svh;max-height:640px;object-fit:contain}
.gallery-controls{display:flex;gap:8px;margin-top:14px;justify-content:center;overflow:auto;padding:4px}
.gallery-controls button{width:64px;height:52px;padding:3px;border:1px solid transparent;flex-shrink:0;opacity:.6}
.gallery-controls button[aria-pressed=true]{border-color:var(--ink);opacity:1}.gallery-controls img{width:100%;height:100%;object-fit:cover}
.detail-info{display:grid;grid-template-columns:1fr 1fr;gap:24px 64px;padding:36px 0 20px;max-width:1100px;margin:auto}
.detail-copy{font-size:clamp(18px,1.8vw,26px);line-height:1.4;margin:0;max-width:600px}.detail-info dl{margin:0;align-self:start}.detail-link{grid-column:1/-1;justify-self:start;margin:0;display:flex;gap:40px;align-items:center;font-size:13px;padding:12px 0}
.concept-story{max-width:1100px;margin:40px auto 0}
.concept-chapter{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:64px 0;border-top:1px solid var(--line);align-items:center;scroll-margin-top:80px}
.chapter-index{font-size:10px;color:var(--muted);letter-spacing:.04em}.concept-story h2{font:500 clamp(30px,3.2vw,48px)/1.08 Teka,Basis,sans-serif;letter-spacing:-.04em;margin:20px 0 24px}
.chapter-copy p,.demo-intro p{font-size:15px;line-height:1.6;max-width:440px}.concept-disclosure{display:block;font-size:11px;color:var(--muted);margin-top:24px}
.concept-chapter figure{margin:0;min-width:0}.concept-chapter figure img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.concept-chapter figcaption{font-size:11px;color:var(--muted);margin-top:10px}
.identity-board{background:#182cad;color:#f1efe8;padding:36px 24px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}.identity-board>img{width:100%;height:90px;object-fit:contain;filter:brightness(0) invert(1)}.identity-board>p{font-size:10px;letter-spacing:.03em;margin:0}
.brand-colours{display:grid;grid-template-columns:repeat(3,1fr)}.brand-colours span{font-size:10px;line-height:1.5;padding:14px 8px;min-height:76px;border:1px solid #ffffff30}.brand-colours span:nth-child(2){background:#f1efe8;color:#090909}.brand-colours span:nth-child(3){background:#ed651d;color:#090909}
.concept-demo{border-top:1px solid var(--line);padding:48px 0 0}.demo-intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:24px}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:10px;border-bottom:1px solid var(--line)}.demo-exit{font-size:11px;min-height:32px}.demo-shell{border:1px solid var(--line)}.demo-launch{position:relative;background:#182cad;display:grid;place-items:center;padding:32px}.demo-launch img{width:100%;max-height:420px;object-fit:contain}.launch-demo{position:absolute;bottom:48px;background:#f1efe8;color:#182cad;padding:16px 22px;display:flex;gap:32px;align-items:center;font-size:14px}.demo-shell iframe{display:block;width:100%;height:75svh;min-height:480px;border:0;background:#f1efe8}
@media(max-width:600px){.project-view-controls{padding:0 20px 12px}.portfolio.is-list .project{grid-template-columns:1fr 82px;gap:16px;padding:14px 0}.portfolio.is-list .project-art{height:80px}.portfolio.is-list .project-meta{font-size:17px}.portfolio.is-list .project-meta small{font-size:10px}.portfolio.is-list .project-meta .number{padding:0}.portfolio.is-list .concept-reveal>span{display:none}.portfolio.is-list .concept-reveal img{width:100%}.window-body{padding:16px}.detail-image{height:44svh}.detail-info{grid-template-columns:1fr;gap:24px;padding:24px 0 8px}.detail-copy{font-size:18px}.concept-story{margin-top:28px}.concept-chapter{grid-template-columns:1fr;gap:24px;padding:32px 0}.concept-story h2{font-size:34px}.chapter-copy p,.demo-intro p{font-size:14px}.identity-board{min-height:280px}.demo-intro{grid-template-columns:1fr;gap:0}.demo-launch{padding:16px}.launch-demo{bottom:28px;font-size:12px;padding:14px 16px}.gallery-controls button{width:48px;height:44px}.demo-shell iframe{height:70svh;min-height:440px}}
@media(prefers-reduced-motion:reduce){.concept-reveal{transition:none;transform:none}}
/* Restore the two-column project opening; the editorial story spans below it. */
.window-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.project-gallery{width:100%;margin:0}.detail-image{height:68svh;max-height:68svh;width:100%;object-fit:contain}
.detail-info{display:block;padding:0 8px;margin:0;max-width:none}.detail-copy{font-size:20px;margin-bottom:36px}.detail-info dl{margin:0}.detail-link{display:flex;margin-top:24px;width:fit-content}
.concept-story{grid-column:1/-1;width:100%;max-width:1100px}
.editorial-gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 64px}.editorial-gallery figure{margin:0}.editorial-gallery img{display:block;width:100%;height:100%;object-fit:cover}.editorial-wide{grid-column:1/-1}.editorial-wide img{aspect-ratio:3/2}.editorial-gallery figure:not(.editorial-wide) img{aspect-ratio:4/5}
.daymark-board-wordmark{font:700 clamp(38px,5vw,76px)/1 Basis,Arial,sans-serif;letter-spacing:-.065em;display:block}
.concept-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}.demo-intro{display:block;margin:0}.demo-intro p{color:var(--muted);font-size:12px}
.phone-mockup{width:min(100%,390px);justify-self:center;border:6px solid #252525;border-radius:48px;background:#121212;padding:0 4px 12px;box-shadow:0 0 0 1px #777,0 22px 45px #0002;overflow:hidden}
.phone-status{display:flex;height:48px;align-items:center;justify-content:space-between;padding:0 22px;color:#fff;font:600 12px/1 Arial,sans-serif;position:relative}.phone-island{position:absolute;width:96px;height:26px;border-radius:24px;background:#000;left:50%;transform:translateX(-50%)}
.demo-shell.phone-mockup iframe{width:100%;height:660px;min-height:0;border-radius:4px 4px 30px 30px;display:block}.phone-home{width:100px;height:4px;border-radius:4px;background:#ddd;margin:8px auto 0}
body:not(.keyboard-navigation) dialog .close:focus{outline:none}
@media(hover:hover) and (pointer:fine){.project-concept:hover .project-art{background:#182cad}}.project-concept:focus-visible .project-art{background:#182cad}
@media(max-width:600px){.window-body{grid-template-columns:1fr;padding:16px}.detail-image{height:45svh;max-height:45svh}.detail-info{padding:0}.detail-copy{font-size:17px;margin-bottom:24px}.editorial-gallery{gap:10px;margin-bottom:32px}.concept-demo{grid-template-columns:1fr;gap:24px}.daymark-board-wordmark{font-size:48px}.phone-mockup{border-radius:40px}.demo-shell.phone-mockup iframe{height:600px}}
/* Natural image proportions, edge to edge within the shared copy gutters. */
.window-body{display:block}.project-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.project-overview .detail-info{position:sticky;top:88px;padding:0}
.project-gallery .detail-image{display:block;width:100%;height:auto;max-height:none;object-fit:initial}
.project-gallery .editorial-gallery{margin:20px 0 0}.editorial-gallery img,.editorial-gallery .editorial-wide img,.editorial-gallery figure:not(.editorial-wide) img{height:auto;aspect-ratio:auto;object-fit:initial}
.concept-story{max-width:none;margin-top:64px}.concept-chapter figure img{height:auto;aspect-ratio:auto;object-fit:initial}
.phone-mockup{padding:0;border:3px solid #242424;border-radius:28px;box-shadow:0 0 0 1px #777,0 18px 36px #0001;background:#242424}
.demo-shell.phone-mockup iframe{border-radius:25px;height:740px}
.full-demo-link{display:inline-flex;gap:36px;align-items:center;border-bottom:1px solid var(--ink);padding:12px 0;margin-top:18px;font-size:14px}
@media(max-width:600px){.project-overview{grid-template-columns:1fr;gap:24px}.project-overview .detail-info{position:static}.project-gallery .detail-image{height:auto;max-height:none}.project-gallery .editorial-gallery{margin-top:10px}.concept-story{margin-top:36px}.phone-mockup{border-radius:24px}.demo-shell.phone-mockup iframe{border-radius:21px;height:640px}}