@font-face{font-family:Bricolage;src:url('assets/fonts/bricolage-grotesque-wght.woff2') format('woff2');font-weight:100 900;font-display:swap}@font-face{font-family:Newsreader;src:url('assets/fonts/newsreader-wght-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}@font-face{font-family:Plex;src:url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--mark:#D9256E;--panel:#2B3FE8;--bridge:#D9256E;--colour:#E8A21B;--companion:#A8422E;--screen:#0F6E8C;--settle:#45C8A9;--bearing:#6B2FBF;--paper:#EDEFEC;--ink:#14171A;--muted:#57615C;--line:#C9CEC7;--accent:#D9256E;--green:#c1d797;--display:Bricolage,Arial,sans-serif;--mono:Plex,monospace;--gutter:clamp(22px,4.8vw,84px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55}::selection{background:#E7B2C6;color:#14171A}a{color:inherit;text-underline-offset:5px}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}img{display:block;max-width:100%;height:auto}p,h1,h2,h3{margin:0}h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.045em}em{font-family:Newsreader,Georgia,serif;font-weight:400}.wrap{width:min(100%,1600px);margin:auto;padding-inline:var(--gutter)}.label{font:11px/1.5 var(--mono);letter-spacing:.055em;text-transform:uppercase}.muted{color:var(--muted)}.skip{position:fixed;top:-90px;left:20px;background:var(--ink);color:white;padding:12px;z-index:100}.skip:focus{top:12px}.masthead{position:sticky;top:0;z-index:50;background:var(--paper)}.header{height:92px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:25px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 25px var(--display);letter-spacing:-1px;white-space:nowrap}.brand svg{width:25px;height:26px}.brand svg path{fill:var(--mark);transition:fill .34s cubic-bezier(.4,0,.2,1)}.brand svg{transition:transform .3s cubic-bezier(.2,.9,.25,1)}.brand.mark-shift svg{transform:translateY(-2.5px) scale(1.07)}.brand span{font-weight:400}.nav{display:flex;gap:34px;align-items:center;font-size:13px}.nav a{text-decoration:none}.nav a:hover{color:var(--accent)}.nav .contact-link{border-bottom:1px solid;padding-bottom:3px}.dot{width:6px;height:6px;display:inline-block;background:currentColor;border-radius:50%;margin-right:7px}.hero{padding-block:49px 53px}.hero-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.hero-title{font-size:clamp(65px,9.2vw,150px);line-height:.97;letter-spacing:-.07em;max-width:1000px}.hero-title em{letter-spacing:-.065em;color:var(--accent)}.hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-top:33px}.hero-bottom p{max-width:450px;justify-self:end;font-size:16px;line-height:1.55}.text-link{font-size:13px;text-decoration:none;width:fit-content;border-bottom:1px solid currentColor;padding:8px 0;display:inline-flex;align-items:center;gap:28px}.text-link:hover{color:var(--accent)}.arrow{font-size:21px;line-height:1}.hero .text-link .arrow{display:inline-block;transition:transform .2s}.hero .text-link:hover .arrow{transform:translateY(4px)}.section-line{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid var(--line);padding-block:17px 24px}.feature{display:grid;grid-template-columns:1fr 1fr;background:#231C2B;color:#EDEFEC;border-radius:5px;overflow:hidden;min-height:570px}.feature-copy{padding:clamp(30px,4.5vw,65px);display:flex;flex-direction:column;align-items:start}.pill{display:inline-flex;gap:6px;align-items:center;border:1px solid #5B4D6D;border-radius:30px;padding:5px 11px;font:10px var(--mono);color:#CDBAE5}.feature-copy h2{font-size:clamp(50px,5.2vw,83px);margin-top:30px}.feature-copy h3{font:400 clamp(27px,2.8vw,42px)/1.07 Newsreader,Georgia,serif;font-style:italic;letter-spacing:-.02em;color:#B397D7;margin-top:8px;max-width:350px}.feature-copy>p{font-size:15px;line-height:1.65;color:#BCB4C6;max-width:360px;margin-top:25px}.feature-copy .feature-actions{margin-top:35px;display:flex;flex-wrap:wrap;align-items:center;gap:22px}.button{background:var(--ink);color:var(--paper);padding:13px 20px;border:1px solid transparent;border-radius:3px;display:inline-flex;align-items:center;gap:30px;font-size:13px;text-decoration:none;transition:background .2s,transform .2s}.button:hover{background:#41443a;transform:translateY(-2px)}.button.light{color:#231C2C;background:#CFBDE6}.button.light:hover{background:#DFD3EE}.feature .text-link{color:#D2CBDA;font-size:12px}.feature-foot{margin-top:auto;padding-top:30px;font-size:10px;color:#A093B1}.feature-art{background:#CDBDE3;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:570px;color:#342646;padding:55px 35px 0}.feature-art .screen{height:485px;width:auto;max-width:60%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 20px 25px #19241040);align-self:end}.feature-art .secondary-screen{height:390px;position:absolute;left:9%;bottom:-60px;transform:rotate(-9deg);opacity:.55;filter:drop-shadow(0 20px 25px #19241030)}.feature-art .main-screen{transform:rotate(5deg);position:relative;z-index:1;margin-left:22%}.art-label{position:absolute;left:25px;top:23px;font:10px var(--mono);letter-spacing:.03em}.art-bottom{position:absolute;right:20px;bottom:25px;writing-mode:vertical-rl;font:10px var(--mono);letter-spacing:.08em}.work{padding-top:95px;padding-bottom:100px}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:20px 0 42px;align-items:end}.section-head h2{font-size:clamp(40px,4.7vw,68px);max-width:680px}.section-head p{max-width:400px;justify-self:end;color:var(--muted);font-size:15px}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px 26px}.product-card{text-decoration:none;display:block;min-width:0}.product-card{--pc:var(--ink)}.product-card.p-panel{--pc:var(--panel)}.product-card.p-colour{--pc:var(--colour)}.product-card.p-bridge{--pc:var(--bridge)}.product-card.p-screen{--pc:var(--screen)}.product-card.p-settle{--pc:var(--settle)}.card-num{display:block;margin-bottom:11px;color:var(--pc)}.product-card:hover .round-arrow{background:var(--pc);border-color:var(--pc);color:#fff}.product-visual{height:350px;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:30px;position:relative;transition:filter .25s;background:#E2E5E0}.product-visual img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.product-card:hover .product-visual img{transform:translateY(-7px)}.visual-panel{background:#CACFEB;padding:45px 30px}.visual-panel img{width:100%;border-radius:5px;box-shadow:0 15px 28px #39344722}.visual-colour{background:#EBCF94;padding-bottom:0;gap:15px;align-items:flex-end}.visual-colour img{width:calc((100% - 30px)/3);height:auto;max-height:330px;object-fit:contain;object-position:bottom}.visual-colour img:first-of-type{margin-bottom:-35px}.visual-colour img:last-of-type{margin-bottom:-55px}.visual-bridge{background:#E9CBD5;gap:30px;padding:35px 55px}.visual-bridge img{max-width:39%;height:280px;object-fit:contain;filter:drop-shadow(0 13px 12px #3123261a)}.visual-screen{padding:0;background:#0E2229}.visual-settle{background:#A3DECF;padding:34px 30px}.visual-settle img{width:100%;border-radius:5px;box-shadow:0 15px 28px #12332b26}.visual-screen img{width:100%;height:100%;object-fit:cover}.product-meta{display:flex;justify-content:space-between;gap:20px;padding-top:19px}.product-meta h3{font-size:28px}.product-meta .round-arrow{width:34px;height:34px;border:1px solid #B9C0B6;border-radius:50%;display:grid;place-items:center;transition:background .2s}.product-card:hover .round-arrow{background:var(--ink);color:var(--paper)}.product-card .label{font-size:9px;margin-top:7px}.product-card p{color:var(--muted);font-size:14px;margin-top:13px;max-width:450px}.inline-products{margin-top:48px;border-top:1px solid var(--line)}.product-row{display:grid;grid-template-columns:50px 1fr 1.15fr 152px 30px;gap:20px;padding-block:28px;border-bottom:1px solid var(--line);text-decoration:none;align-items:center}.product-row h3{font-size:30px}.product-row .status{text-wrap:balance}.product-row>p{font-size:14px;color:var(--muted);max-width:410px}.product-row:hover h3{color:var(--accent)}.studio{background:#E2E5E0;padding-block:85px}.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-top:25px}.studio h2{font-size:clamp(42px,4.8vw,72px);max-width:620px}.studio-copy>p{font-size:17px;line-height:1.7;margin-bottom:20px;max-width:550px}.founder{font-size:13px!important;color:var(--muted);padding-top:22px;border-top:1px solid #B9C0B6}.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:70px}.principle{border-top:1px solid #B3BAB0;padding-top:16px}.principle h3{font-size:23px;margin:20px 0 12px;letter-spacing:-.03em;text-wrap:balance}.principle p{font-size:13px;color:var(--muted);line-height:1.6;text-wrap:balance}.contact{padding-block:95px 75px}.contact .label{margin-bottom:25px}.contact h2{font-size:clamp(48px,6.5vw,99px);max-width:950px}.contact h2 a{text-decoration:none}.contact h2 a:hover{color:var(--accent)}.contact-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;margin-top:50px}.contact-grid>div{border-top:1px solid var(--line);padding-top:16px}.contact-grid .label{margin-bottom:10px;color:var(--muted)}.contact-grid a{font-size:15px;text-decoration:none}.contact-grid a:hover{text-decoration:underline}.footer{border-top:1px solid var(--line);padding-block:23px;display:flex;justify-content:space-between;gap:25px;font:10px/1.7 var(--mono);color:var(--muted)}.footer a{text-decoration:none}.intro{position:fixed;inset:0;z-index:99;background:var(--paper);display:flex;align-items:center;justify-content:center;pointer-events:none;animation:intro-out .42s cubic-bezier(.7,0,.2,1) .76s forwards}.intro-word{display:flex;align-items:center;gap:13px;font:600 clamp(35px,5vw,70px) var(--display);letter-spacing:-.05em;animation:intro-in .4s both}.intro-word svg{width:42px;animation:mark-in .4s both}.intro small{position:absolute;bottom:35px;font:10px var(--mono);letter-spacing:.13em}.intro-off .intro{display:none}.intro .skip-intro{pointer-events:auto;position:absolute;right:30px;bottom:28px;border:0;border-bottom:1px solid;background:none;padding:7px;font-size:12px;cursor:pointer}.entrance{animation:rise .7s ease-out .82s both}.intro-off .entrance{animation-delay:0s}@keyframes intro-out{to{transform:translateY(-101%);visibility:hidden}}@keyframes intro-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes mark-in{from{transform:rotate(-35deg) scale(.5)}to{transform:none}}@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.hero-title{font-size:148px}}@media(max-width:1000px){.feature-art{padding-inline:15px}.feature-copy{padding:35px}.feature-art .screen{height:435px;max-width:65%}.feature-art .secondary-screen{height:355px;left:0}.product-visual{height:290px}.visual-bridge{padding:25px;gap:20px}.visual-bridge img{height:240px}.studio-grid{gap:40px}.principles{gap:20px}.product-row{grid-template-columns:30px 1fr 1.3fr 30px}.product-row>.label.status{display:none}.hero-title{font-size:10vw}}
@media(max-width:650px){.header{height:77px}.brand{font-size:22px}.brand svg{width:21px}.nav{gap:18px;font-size:12px}.nav .contact-link{display:none}.hero{padding-block:30px 40px}.hero-meta{margin-bottom:30px}.hero-meta .location{display:none}.hero-title{font-size:clamp(58px,13vw,85px)}.hero-bottom{grid-template-columns:1fr;gap:22px;margin-top:25px}.hero-bottom p{justify-self:start;grid-row:1;font-size:14px;max-width:340px}.hero .text-link{font-size:12px}.section-line{padding-block:15px 20px}.section-line .label{font-size:9px}.feature{grid-template-columns:1fr}.feature-copy{padding:30px}.feature-copy h2{font-size:57px;margin-top:23px}.feature-copy h3{font-size:33px;max-width:280px}.feature-copy>p{font-size:14px;margin-top:18px}.feature-copy .feature-actions{gap:17px;margin-top:25px}.feature-foot{padding-top:23px}.feature-art{min-height:420px}.feature-art .screen{height:370px;max-width:57%}.feature-art .secondary-screen{height:310px;left:15%}.feature-art .main-screen{margin-left:20%}.work{padding-top:60px;padding-bottom:60px}.section-head{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.section-head h2{font-size:43px}.section-head p{justify-self:start;font-size:14px}.product-grid{grid-template-columns:1fr;gap:32px}.product-visual{height:300px}.product-meta h3{font-size:26px}.product-card p{font-size:14px}.product-row{grid-template-columns:23px 1fr 25px;gap:12px;padding-block:22px}.product-row h3{font-size:26px}.product-row>p{grid-column:2;grid-row:2;font-size:13px}.product-row .arrow{grid-column:3;grid-row:1}.studio{padding-block:55px}.studio-grid{grid-template-columns:1fr;gap:28px}.studio h2{font-size:44px}.studio-copy>p{font-size:15px}.principles{grid-template-columns:1fr 1fr;gap:30px 22px;margin-top:40px}.principle h3{font-size:22px;margin-top:14px}.contact{padding-block:60px 45px}.contact h2{font-size:50px}.contact-grid{grid-template-columns:1fr;gap:25px;margin-top:35px}.contact-grid a{font-size:16px}.footer{flex-direction:column;gap:10px}.intro small{bottom:75px}.intro-word svg{width:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.intro{display:none!important}}
.breadcrumb{display:flex;gap:12px;align-items:center;padding-top:30px;font:10px var(--mono);color:var(--muted)}.breadcrumb a{text-decoration:none}.detail-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:50px;padding-block:60px 70px;align-items:end}.detail-hero h1{font-size:clamp(68px,8vw,125px);line-height:1;overflow-wrap:anywhere;margin:20px 0}.detail-tagline{font:400 italic clamp(30px,3.2vw,48px)/1.1 Newsreader,Georgia,serif;letter-spacing:-.025em;max-width:640px}.detail-lede{font-size:17px;color:var(--muted);line-height:1.65;max-width:480px;margin-bottom:25px}.detail-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px}.detail-note{font:10px/1.7 var(--mono);margin-top:16px;color:var(--muted)}.detail-banner{border-radius:4px;overflow:hidden;background:var(--product-tint,#E2E5E0);position:relative}.detail-banner .banner-label{padding:20px 26px;display:flex;justify-content:space-between;font:10px var(--mono);color:#414A46}.detail-banner .banner-images{display:flex;align-items:center;justify-content:center;gap:35px;padding:25px 70px 50px}.detail-banner .banner-images img{max-height:620px;width:auto;min-width:0;object-fit:contain;max-width:100%}.detail-banner.panel .banner-images img{width:100%;border-radius:6px;box-shadow:0 15px 30px #30274025}.detail-banner.pair .banner-images img{width:calc((100% - 35px)/2)}.detail-banner.bridge .banner-images img{width:30%;max-height:470px}.detail-banner.colour .banner-images img{width:24%;max-height:560px}.detail-banner.screen-check .banner-images{padding:0}.detail-banner.screen-check .banner-images img{width:100%;height:auto;max-height:none}.detail-banner.bearing .banner-images{padding-bottom:0;align-items:flex-end;gap:32px}.detail-banner.bearing .banner-images img{width:calc((100% - 96px)/4);max-height:620px;filter:drop-shadow(0 18px 20px #12190e2b)}.detail-banner.bearing .banner-images img:first-child{transform:translateY(60px) rotate(-6deg)}.detail-banner.bearing .banner-images img:last-child{transform:translateY(60px) rotate(6deg)}.image-caption{font:10px/1.7 var(--mono);color:var(--muted);padding-top:14px}.detail-story{display:grid;grid-template-columns:.65fr 1.5fr;gap:60px;padding-block:90px}.detail-story .label{padding-top:8px}.detail-story h2{font-size:clamp(37px,4.2vw,62px);max-width:850px;margin-bottom:25px}.detail-story p{max-width:710px;color:var(--muted);font-size:17px;line-height:1.75}.capabilities{display:grid;grid-template-columns:1fr 1fr;gap:30px 60px;margin-bottom:80px}.capability{border-top:1px solid var(--line);padding-top:20px;display:grid;grid-template-columns:30px 1fr;gap:16px}.capability h3{font-size:27px;margin-bottom:13px}.capability p{font-size:15px;color:var(--muted);line-height:1.7;max-width:540px}.detail-extra{padding:45px;background:#E2E5E0;border-radius:4px;margin-bottom:50px}.detail-extra h2{font-size:38px;margin-bottom:15px}.detail-extra>p{color:var(--muted);max-width:800px;line-height:1.7}.detail-extra a{text-decoration:underline}.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:30px}.spec-grid p{font-size:14px;margin-top:9px}.detail-limits{display:grid;grid-template-columns:.65fr 1.5fr;gap:60px;border-top:1px solid var(--line);padding-block:32px 50px}.detail-limits h2{font-size:25px}.detail-limits p{color:var(--muted);font-size:14px;line-height:1.7;max-width:770px}.next-product{margin-top:25px;padding-block:35px 55px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:25px;align-items:center;text-decoration:none}.next-product h2{font-size:clamp(32px,4vw,60px);margin-top:12px}.next-product>.arrow{font-size:45px}.next-product:hover h2{color:var(--accent)}.type-banner{padding:55px;display:grid;grid-template-columns:1fr 1fr;gap:50px;min-height:310px;align-items:center}.type-banner .large{font:500 clamp(35px,4.4vw,65px)/1.08 var(--display);letter-spacing:-.045em}.type-banner .right{max-width:400px;font:400 italic 32px/1.15 Newsreader,Georgia,serif}.type-banner .large .label{display:block;margin-bottom:25px}.type-banner .right p{margin-top:30px;font:12px/1.7 var(--mono);font-style:normal;letter-spacing:0}.detail-banner .type-banner .large small{font:11px var(--mono);color:var(--muted)}.not-found{min-height:60vh;padding-block:100px}.not-found h1{font-size:70px;margin:20px 0}.not-found p{margin-bottom:25px}
@media(max-width:900px){.detail-hero{gap:25px}.detail-hero h1{font-size:9vw}.detail-banner .banner-images{padding:25px 30px 40px;gap:20px}.detail-story{gap:30px}.detail-limits{gap:30px}.type-banner{padding:40px;gap:30px}.type-banner .right{font-size:26px}}
@media(max-width:650px){.breadcrumb{padding-top:24px;font-size:9px}.detail-hero{grid-template-columns:1fr;padding-block:35px 40px;gap:25px}.detail-hero h1{font-size:clamp(52px,12.7vw,78px);margin:15px 0}.detail-tagline{font-size:32px}.detail-lede{font-size:15px;margin-bottom:20px}.detail-banner .banner-label{font-size:8px;padding:15px;gap:10px}.detail-banner .banner-images{gap:15px;padding:15px 15px 30px}.detail-banner.bearing .banner-images{gap:12px;flex-wrap:wrap}.detail-banner.bearing .banner-images img{width:calc((100% - 12px)/2);max-height:340px}.detail-banner.bearing .banner-images img:first-child,.detail-banner.bearing .banner-images img:last-child{transform:none}.detail-banner.colour .banner-images img{width:30%}.detail-banner.bridge .banner-images img{width:40%}.detail-story{grid-template-columns:1fr;gap:20px;padding-block:50px}.detail-story h2{font-size:39px;margin-bottom:20px}.detail-story p{font-size:15px}.capabilities{grid-template-columns:1fr;gap:25px;margin-bottom:45px}.capability h3{font-size:25px}.capability p{font-size:14px}.detail-extra{padding:28px;margin-bottom:30px}.detail-extra h2{font-size:32px}.detail-extra>p{font-size:14px}.spec-grid{grid-template-columns:1fr;gap:20px}.detail-limits{grid-template-columns:1fr;gap:18px;padding-bottom:30px}.type-banner{padding:30px;grid-template-columns:1fr;gap:30px}.type-banner .large{font-size:40px}.type-banner .right{font-size:30px}.type-banner .right p{font-size:11px;margin-top:20px}.next-product{padding-block:25px 40px}}

/* ── homepage grouped by what each product is ─────────────────────────── */
.group-head{display:grid;grid-template-columns:180px 1fr;gap:6px 30px;align-items:baseline;
  margin:72px 0 26px;padding-top:22px;border-top:1px solid var(--ink)}
.group-head:first-of-type{margin-top:36px}
.group-head .label{grid-row:span 2;padding-top:6px}
.group-head h3{font-size:30px;line-height:1.1}
.group-head p{color:var(--muted);font-size:15px;max-width:520px}
.product-grid.three{grid-template-columns:repeat(3,1fr);gap:40px 22px}
.product-grid.three .product-visual{height:300px;padding:24px}
.product-grid.three .visual-panel{padding:36px 22px}
.product-grid.three .visual-bridge{padding:24px;gap:16px}
.product-grid.three .visual-bridge img{height:230px}
.product-card.p-bearing{--pc:var(--bearing)}
.product-card.p-markshift{--pc:var(--muted)}

/* Bearing: three portrait screens, the same treatment as ColourStudio */
.visual-bearing{background:#D6C8EC;padding-bottom:0;gap:12px;align-items:flex-end}
.visual-bearing img{width:calc((100% - 24px)/3);height:auto;max-height:290px;object-fit:contain;object-position:bottom}
.visual-bearing img:first-of-type{margin-bottom:-30px}
.visual-bearing img:last-of-type{margin-bottom:-48px}

/* Markshift: the real window, same treatment as Crit Panel and Settle */
.visual-markshift{background:#D5DBD6;padding:34px 22px}
.visual-markshift img{width:100%;border-radius:5px;box-shadow:0 15px 28px #1a201c2e}
/* a sheet or dialog shown at its own size, floating */
.detail-banner.sheet .banner-images img{width:auto;max-height:560px;filter:drop-shadow(0 22px 26px #1a201c33)}

@media(max-width:1000px){
  .product-grid.three{grid-template-columns:1fr 1fr}
  .group-head{grid-template-columns:1fr}.group-head .label{grid-row:auto}
}
@media(max-width:650px){
  .product-grid.three{grid-template-columns:1fr}
  .product-grid.three .product-visual{height:280px}
}


/* ══ 24 SEP 2026 (B) · one system with the new homepage (24 Sep 2026) ══════════════
   Same header, type, width, grain and light/dark theme as index.html.
   The theme choice is shared with the homepage through localStorage
   ("crit-theme"), so switching on one page carries to every page. */
@view-transition{navigation:auto}
:root{--paper-2:#E2E5E0;--gutter:clamp(16px,4vw,56px);--settle:#1F8F79;color-scheme:light}
body{font-family:var(--display);font-size:17px;line-height:1.5;transition:background .3s,color .3s}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:var(--grain,.06);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.wrap{width:min(100%,1360px)}
.skip{color:var(--paper);border-radius:6px}

/* header, matched to the homepage */
.masthead{width:100%;max-width:none;padding-inline:0;background:color-mix(in srgb,var(--paper) 82%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.masthead .header{max-width:1360px;margin:auto;padding-inline:var(--gutter);height:60px;border-bottom:0;gap:16px}
.brand{font:700 17px var(--display);letter-spacing:.02em;gap:10px}
.brand svg{width:22px;height:22px}
.brand>span:last-child{font-weight:400;color:var(--muted);padding-left:8px;margin-left:8px;border-left:1px solid var(--line)}
.nav{gap:24px;font-size:15px}
.nav a:hover{color:inherit;text-decoration:underline;text-underline-offset:4px}
.nav .contact-link{border:1px solid var(--ink);border-radius:999px;padding:7px 14px;white-space:nowrap}
.nav .contact-link:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.theme-btn{background:none;border:1px solid var(--line);color:var(--ink);width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0}
.theme-btn svg{width:16px;height:16px}
@media(max-width:650px){.masthead .header{height:60px}.brand{font-size:15px}.brand svg{width:22px}.brand>span:last-child{display:none}
  .nav{gap:12px;font-size:14px}.nav .contact-link{display:inline-block;padding:6px 10px}}
@media(max-width:380px){.nav .contact-link{display:none}}

/* light-only colours now follow the theme */
.studio,.detail-extra,.product-visual{background:var(--paper-2)}
.founder,.product-meta .round-arrow{border-color:var(--line)!important}
.principle{border-top-color:var(--line)}
.button:hover{background:color-mix(in srgb,var(--ink) 80%,var(--paper))}
.detail-banner .banner-label{color:var(--muted)}

/* dark theme */
:root[data-theme="dark"]{--paper:#14171A;--paper-2:#1C2024;--ink:#EDEFEC;--muted:#9AA39E;--line:#2E3438;--accent:#F0508E;--grain:.05;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#14171A;--paper-2:#1C2024;--ink:#EDEFEC;--muted:#9AA39E;--line:#2E3438;--accent:#F0508E;--grain:.05;color-scheme:dark}}
:root[data-theme="dark"] .detail-banner{background:color-mix(in srgb,var(--product-tint,#E2E5E0) 30%,#1C2024)}
:root[data-theme="dark"] .product-visual{filter:brightness(.92)}
:root[data-theme="dark"] ::selection{background:#6B2440;color:#EDEFEC}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .detail-banner{background:color-mix(in srgb,var(--product-tint,#E2E5E0) 30%,#1C2024)}
  :root:not([data-theme="light"]) .product-visual{filter:brightness(.92)}
  :root:not([data-theme="light"]) ::selection{background:#6B2440;color:#EDEFEC}
}

/* 27 SEP 2026: small text in the accent pink. #D9256E is 4.09:1 on the paper, under the 4.5:1 AA needs
   for 13px text, so small-text hovers use a darker pink (5.11:1 on paper, 4.65:1 on #E2E5E0).
   The wordmark, large headings and focus rings keep #D9256E. Dark mode keeps its own --accent. */
:root{--accent-text:#BF1D5E}
:root[data-theme="dark"]{--accent-text:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent-text:var(--accent)}}
.text-link:hover{color:var(--accent-text)}

/* 27 SEP 2026: full-width screenshots taller than the 620px cap were drawn into a full-width box
   with object-fit, so the rounded corners and shadow framed a wider card than the picture, with
   tint bands at the sides (Crit 1/3/5, Crit Panel, Settle, Markshift). Size the image itself instead,
   so the frame always hugs the screenshot. */
.detail-banner.panel:not(.pair) .banner-images img{width:auto;height:auto;max-width:100%;max-height:620px}

/* 1 OCT 2026: ColourStudio 1.3 banners. The new screens carry their own soft frame and
   background, so they sit in rows of four (main banner) and three (second banner) with
   rounded corners instead of the old drop shadow. */
.detail-banner.colour.cs4 .banner-images{gap:22px;padding-inline:50px}
.detail-banner.colour.cs4 .banner-images img{width:calc((100% - 66px)/4);max-height:none;border-radius:18px}
.detail-banner.colour.cs3 .banner-images img{width:calc((100% - 70px)/3);max-width:300px;max-height:none;border-radius:18px}
@media(max-width:650px){
  .detail-banner.colour.cs4 .banner-images{flex-wrap:wrap;gap:12px;padding-inline:15px}
  .detail-banner.colour.cs4 .banner-images img{width:calc((100% - 12px)/2)}
  .detail-banner.colour.cs3 .banner-images{gap:10px}
  .detail-banner.colour.cs3 .banner-images img{width:calc((100% - 20px)/3)}
}

/* 1 OCT 2026: Bearing 2.0 banners use the App Store screens, which carry their own title and
   background, so they sit straight in a row of four with rounded corners. */
.detail-banner.bearing.v2 .banner-images{padding-bottom:50px;align-items:flex-start;gap:22px}
.detail-banner.bearing.v2 .banner-images img{width:calc((100% - 66px)/4);max-height:none;border-radius:18px;filter:drop-shadow(0 14px 18px #12190e22)}
.detail-banner.bearing.v2 .banner-images img:first-child,.detail-banner.bearing.v2 .banner-images img:last-child{transform:none}
@media(max-width:650px){.detail-banner.bearing.v2 .banner-images{gap:12px}.detail-banner.bearing.v2 .banner-images img{width:calc((100% - 12px)/2)}}

/* 1 OCT 2026: Markshift 2.0 "Convert to" banner: the four output groups as a type grid */
.type-banner.convert{grid-template-columns:.9fr 1.1fr}
.format-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.format-grid .label{display:block;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--ink)}
.format-grid ul{list-style:none;margin:0;padding:0;font:500 17px/1.6 var(--display);letter-spacing:-.01em}
@media(max-width:900px){.type-banner.convert{grid-template-columns:1fr}}
@media(max-width:650px){.format-grid{grid-template-columns:1fr 1fr;gap:22px 16px}.format-grid ul{font-size:15px}}
.format-grid li small{display:block;font:11px/1.5 var(--mono);color:var(--muted);letter-spacing:.02em;margin-bottom:4px}
/* 2 OCT 2026: one title size on every product page. "ColourStudio" is the longest name and broke
   mid-word at 115px, so the shared scale is a little smaller and every page uses it (no per-page size). */
.detail-hero h1{font-size:clamp(52px,7.4vw,108px);overflow-wrap:normal}
@media(max-width:900px){.detail-hero h1{font-size:8vw}}
@media(max-width:650px){.detail-hero h1{font-size:clamp(46px,12.7vw,78px)}}
/* 2 OCT 2026: on phones the subpage nav wrapped to two lines ("Our / tools", "The / studio").
   Same short labels as the homepage below 640px: "Tools", "Studio". */
.nav a{white-space:nowrap}
@media(max-width:640px){.nav .hide-sm{display:none}.nav .cap-sm{text-transform:capitalize}}
/* 2 OCT 2026: support, privacy and email links side by side in "Good to know" */
.link-row{display:flex;flex-wrap:wrap;gap:6px 28px}