#work{display:block;scroll-margin-top:60px;background:#f4f2e9;padding:0}.canvas{padding:100px max(6%,calc((100vw - 1360px)/2)) 120px;background:radial-gradient(ellipse at 85% 22%,#b6c6a9aa,transparent 33%),radial-gradient(ellipse at 9% 65%,#a8b9a099,transparent 36%),linear-gradient(125deg,#f4f2e9 5%,#e1e8d7 50%,#f4f1e8)}.section-head{margin-bottom:90px}.section-head>span{font-size:9px;letter-spacing:.14em;color:#68785d}.section-head h2{font-size:clamp(42px,5.3vw,76px);font-weight:400;letter-spacing:-.055em;line-height:1.05;margin:20px 0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:100px 65px;align-items:start}.tile{min-width:0;position:relative}.admin{margin-top:105px}.qic{margin-top:95px}.words{min-height:85px}.words h3{font-size:clamp(23px,2.4vw,34px);font-weight:400;letter-spacing:-.045em;line-height:1.15;margin:0 0 10px;max-width:440px}.words p{font-size:13px;line-height:1.6;color:#65745c;margin:0 0 20px}.screen{position:relative;border-radius:20px;padding:38px 12px 12px;background:linear-gradient(125deg,#ffffff52,#bdcbbb36 65%,#ffffff26);border:1px solid #ffffffaa;backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #ffffffb0,0 28px 48px -24px #24432966;transition:transform .3s ease-out;transform-origin:center}.chrome{position:absolute;left:17px;top:16px;display:flex;gap:6px}.chrome i{height:7px;width:7px;border-radius:50%;background:#ffffffb3}.media{position:relative;overflow:hidden;border-radius:10px;background:#f4f4f4}.poster{display:block;width:100%;height:auto}.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;background:#f4f4f4}.screen.started video{opacity:1}.playback{position:absolute;right:14px;top:7px;font-size:10px;border:0;border-radius:20px;padding:5px 10px;background:#f7f8f0c9;color:#304731;visibility:hidden}.screen.started .playback,.screen:focus-within .playback{visibility:visible}.hg{grid-column:1/-1;display:grid;grid-template-columns:.8fr 1.7fr;gap:45px;align-items:center}.hg .words{min-height:0}.hg .words h3{font-size:clamp(32px,3.5vw,48px)}.tile:focus-within{z-index:3}.screen:focus-visible{outline:2px solid #56724e;outline-offset:5px}.mode-panel #work{position:relative;margin-top:-220px;border-radius:28px 28px 0 0;overflow:hidden}@media(hover:hover) and (pointer:fine){.screen:hover,.screen:focus-within{transform:translateY(-5px) scale(1.055);z-index:4}.tile:hover{z-index:3}}@media(max-width:760px){.canvas{padding:55px 22px 65px}.section-head{margin-bottom:50px}.grid{grid-template-columns:1fr;gap:55px}.admin,.qic{margin-top:0}.hg{display:block}.words{min-height:0;margin-bottom:20px}.screen{padding:31px 9px 9px}.chrome{top:12px;left:14px}.chrome i{width:6px;height:6px}.words h3,.hg .words h3{font-size:28px}.words p{font-size:12px}.section-head h2{font-size:44px}.mode-panel #work{margin-top:0}.playback{top:4px}}@media(prefers-reduced-motion:reduce){.screen{transition:none}.screen:hover,.screen:focus-within{transform:none}.mode-panel #work{margin-top:0}}
/* A quieter field, with a faint wash for the glass to pick up. */
.canvas{background:radial-gradient(ellipse at 78% 27%,#dce4d04a,transparent 38%),#f4f2e9}
.arrival{position:relative;transform:translateY(var(--rise,0px)) scale(var(--arrival-scale,1));opacity:var(--arrival-opacity,1);transform-origin:50% 80%;will-change:transform}
.border-progress{position:absolute;z-index:2;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s}
.screen.started .border-progress{opacity:1}.border-trace{fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px #ffffffe6)}.border-tip{fill:#ffffff;filter:drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 12px #ffffffcc)}
@media(prefers-reduced-motion:reduce){.arrival{transform:none;opacity:1;will-change:auto}.border-progress{display:none}}
/* Larger product surfaces; typography rules remain unchanged. */
html.lenis{scroll-behavior:auto}
@media(min-width:761px){
 .canvas{padding-left:max(3%,calc((100vw - 1600px)/2));padding-right:max(3%,calc((100vw - 1600px)/2))}
 .assembly-grid{max-width:1400px;gap:48px}
 .remaining{column-gap:48px}
 .hg{grid-template-columns:.65fr 1.85fr;gap:36px}
}
@media(min-width:761px) and (max-height:800px){.assembly-grid{max-width:1100px}}

/* Three-frame assembly: heading stays in document flow, no pinned spacer. */
#work{overflow:clip}.canvas{padding-top:85px}.section-head{margin-bottom:65px}.assembly-stage{position:relative}.assembly-grid{row-gap:80px}.remaining{margin-top:90px}.arrival{transform:translate(var(--shift,0px),var(--rise,0px));opacity:1;will-change:transform}.assembly-grid .hg{display:block}.assembly-grid .hg>.arrival{display:grid;grid-template-columns:.65fr 1.85fr;gap:36px;align-items:center}.assembly-grid .admin{margin-top:65px}
@media(max-width:760px){.canvas{padding-top:55px}.assembly-grid .hg>.arrival{display:block}.assembly-grid .admin{margin-top:0}.assembly-grid{row-gap:55px}.remaining{margin-top:55px}}
@media(prefers-reduced-motion:reduce){.arrival{transform:none;will-change:auto}}
@media(min-width:761px){.section-head h2{font-size:clamp(38px,4vw,58px);margin:12px 0;line-height:1.05}.assembly-grid .website .words,.assembly-grid .admin .words{min-height:65px}.assembly-grid .website h3,.assembly-grid .admin h3{font-size:clamp(22px,2vw,29px)}}
/* Keep captions readable while the media enters from beyond the page edges. */
.assembly-grid .website .words,.assembly-grid .admin .words{transform:translateX(calc(-1 * var(--shift,0px)))}
@media(prefers-reduced-motion:reduce){.assembly-grid .words{transform:none}}


/* Neutral interface: scenery and product footage keep their own colour. */
:root{--paper:#f7f7f5;--ink:#171717;--muted:#626262;--rule:#d5d5d2}
body,#work,.study{background:var(--paper);color:var(--ink)}
.canvas{padding-bottom:0;background:radial-gradient(ellipse at 78% 27%,#dededc70,transparent 42%),var(--paper)}
.words p,.section-head>span{color:var(--muted)}
.study button{border-color:var(--rule)}.switch{background:#e8e8e5}.switch button[aria-pressed=true]{background:var(--ink)}
.hero{background:#111}.shade{background:linear-gradient(90deg,#0007,transparent 75%)}
.eyebrow,.intro{color:#ebebeb}
/* Showcase frames — set B "Lit glass" from frames-concepts, chosen 15 September 2026.
   Each clip's poster glows behind a frosted rim. Corner, dots and title band scale with the frame at Safari's measured shares of window width (macOS 26):
   corner 1.8%, light 1.043%, pitch 1.735%, first light centred 1.943% in from top and left, band 3.886%. The video corner stays concentric inside the rim. */
.frame-wrap{position:relative;isolation:isolate;container-type:inline-size}
.backlight{position:absolute;inset:6% 5% -2%;z-index:0;border-radius:1.8cqw;background:center/cover no-repeat;filter:blur(32px) saturate(.9);opacity:.55;pointer-events:none}
.screen{z-index:1;padding:calc(3.886cqw - 1px) 10px 10px;border-radius:1.8cqw;background:linear-gradient(160deg,#ffffff99,#ffffff59);border-color:#17171721;-webkit-backdrop-filter:blur(20px) saturate(1.8) brightness(1.08);backdrop-filter:blur(20px) saturate(1.8) brightness(1.08);box-shadow:inset 0 1px 0 #ffffffe6,0 8px 32px -4px #0000001a,0 30px 60px -30px #00000033;transition:transform .3s ease-out,box-shadow .3s ease-out}
.chrome{left:calc(1.4215cqw - 1px);top:calc(1.4215cqw - 1px);gap:.6915cqw}
.chrome i{width:1.043cqw;height:1.043cqw;background:#1717172e;box-shadow:none}
.media{border-radius:max(0px,calc(1.8cqw - 11px))}
.media:after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px #0000000d;pointer-events:none}
@media(hover:hover) and (pointer:fine){.screen:hover,.screen:focus-within{box-shadow:inset 0 1px 0 #ffffffe6,0 8px 32px -4px #0000001a,0 40px 72px -32px #00000040}}
@media(max-width:760px){.screen{padding:calc(3.886cqw - 1px) 7px 7px}.media{border-radius:max(0px,calc(1.8cqw - 8px))}}
@media(prefers-reduced-transparency:reduce){.screen{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}.backlight{opacity:0}.border-trace{stroke:#1717178c;filter:none}.border-tip{fill:#171717;filter:none}}
button:focus-visible,a:focus-visible,input:focus-visible,.screen:focus-visible{outline-color:#777}
footer{color:var(--muted);border-color:var(--rule)}
dialog{background:var(--paper);color:var(--ink)}dialog::backdrop{background:#000b}dialog .eyebrow{color:var(--muted)}dialog .primary{background:var(--ink)}
#skip-intro{background:var(--paper);color:var(--ink);border-color:var(--rule)}
/* Four connected bays: a continuous scene beneath a stepped paper edge. */
.service-section{padding:140px max(3%,calc((100vw - 1600px)/2)) 100px;background:var(--paper);scroll-margin-top:85px}
.service-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}
.service-heading h2{font-size:clamp(38px,4vw,58px);font-weight:400;line-height:1.08;letter-spacing:-.055em;margin:0}
.service-heading>p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}
.treatment-control{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-bottom:16px}
.treatment-control>span{font-size:9px;letter-spacing:.12em;color:var(--muted);margin-right:12px}
.treatment-control button{font-size:11px;padding:7px 12px;border:1px solid transparent;border-radius:3px;color:var(--muted);background:transparent}
.treatment-control button[aria-pressed=true]{color:var(--ink);border-color:var(--rule);background:white}
.service-landscape{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:600px;overflow:hidden;background:#efe7da;border-top:1px solid var(--rule)}
.service-landscape img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:-2}
.service-landscape:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.service-landscape[data-treatment=textured] img{filter:saturate(.8)}
.service-landscape[data-treatment=textured]:after{opacity:.48}
.service-landscape article{position:relative;border-right:1px solid #ffffff4d;min-width:0}
.service-landscape article:last-child{border-right:0}
.service-panel{position:relative;background:var(--paper);padding:38px 26px 32px;min-height:260px;border-right:1px solid var(--rule);display:flex;flex-direction:column;justify-content:space-between;gap:36px}
.service-landscape article:last-child .service-panel{border-right:0}
.service-landscape article:nth-of-type(2) .service-panel{min-height:340px}
.service-landscape article:nth-of-type(3) .service-panel{min-height:220px}
.service-landscape article:nth-of-type(4) .service-panel{min-height:300px}
.service-panel:after{content:"";position:absolute;left:0;bottom:-5px;width:9px;height:9px;background:linear-gradient(#fff9,#fff9) center/1px 9px no-repeat,linear-gradient(#fff9,#fff9) center/9px 1px no-repeat}
.service-panel h3{font-size:clamp(25px,2.4vw,36px);line-height:1.13;font-weight:400;letter-spacing:-.045em;margin:0;max-width:240px}
.service-panel p{font-size:13px;line-height:1.65;color:var(--muted);margin:0;max-width:225px}
.service-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:26px}
.service-bottom p{font-size:12px;color:var(--muted);margin:0}
@media(min-width:601px) and (max-width:1000px){.service-landscape{height:740px;grid-template-columns:1fr 1fr}.service-panel{min-height:210px!important;padding:26px;gap:24px}.service-landscape article:nth-of-type(even) .service-panel{min-height:250px!important}.service-landscape article:nth-of-type(2){border-right:0}.service-panel h3{font-size:29px}}
@media(max-width:600px){.shade{background:linear-gradient(#111 0%,#111 38%,#111c 48%,transparent 66%,#1118 100%)}.service-section{padding:80px 22px 70px;scroll-margin-top:25px}.service-heading{display:block;margin-bottom:26px}.service-heading h2{font-size:36px}.service-heading>p{margin-top:18px;font-size:13px}.treatment-control{justify-content:flex-start}.service-landscape{height:auto;grid-template-columns:1fr}.service-landscape img{object-position:60% center}.service-landscape article{min-height:295px;border-right:0}.service-panel,.service-landscape article:nth-of-type(n) .service-panel{min-height:170px;padding:25px 20px;gap:20px;border-right:0}.service-panel h3{font-size:28px;max-width:none}.service-panel p{max-width:260px}.service-bottom{align-items:start}.service-bottom p{max-width:180px;line-height:1.6}}
/* Service panels — set A "Outlined" (no numbers) with the "Draw" entrance, chosen 15 September 2026 (panels-concepts, panels-motion).
   One 1px rule frames the band and edges each panel's paper, so no line crosses the photo; title and description sit together at the panel's bottom.
   Entrance after Sterly Labs: lines draw on cubic-bezier(.22,1,.36,1), then the paper fills and the text rises. services.js adds .draw, then .in once in view. */
.service-landscape{border-top:0}
.service-landscape article,.service-panel{border-right:0}
.service-panel{background:transparent;isolation:isolate;justify-content:flex-start;gap:0}
.service-panel:after{display:none}
.service-panel:before{content:"";position:absolute;top:-1px;right:0;bottom:var(--hover-cut,0px);left:0;z-index:-1;background:var(--paper)}
.service-panel h3{margin-top:auto}
.service-panel p{margin-top:12px}
.service-landscape img{transform:scale(1.035)}
.service-landscape article{--i:0}
.service-landscape article:nth-of-type(2){--i:1}
.service-landscape article:nth-of-type(3){--i:2}
.service-landscape article:nth-of-type(4){--i:3}
.service-rule,.service-edge{position:absolute;z-index:3;background:var(--rule);pointer-events:none}
.service-rule.t,.service-rule.b,.service-edge.h{--off:scaleX(0);height:1px;transform-origin:0 50%}
.service-rule.l,.service-rule.r,.service-edge.v{--off:scaleY(0);width:1px;transform-origin:50% 0}
.service-rule.t{top:0;right:0;left:0}
.service-rule.r{top:0;right:0;bottom:0}
.service-rule.b{right:0;bottom:0;left:0}
.service-rule.l{top:0;bottom:0;left:0}
.service-edge.v{top:0;right:0;bottom:var(--hover-cut,0px)}
.service-edge.h{right:0;bottom:var(--hover-cut,0px);left:0}
.service-landscape article:last-child .service-edge.v{display:none}
@media(min-width:601px) and (max-width:1000px){.service-landscape article:nth-of-type(even) .service-edge.v{display:none}}
@media(max-width:600px){.service-edge.v{display:none}.service-landscape article:nth-of-type(n) .service-panel{gap:0}.service-landscape article:nth-of-type(n){--i:0}}
/* Draw: lines 0.9s on Sterly's curve, columns 80ms apart; paper from 0.7s; text rises 10px from 1.0s. Hover unlocks at .motion-settled. */
.service-rule,.service-edge{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.service-rule.l,.service-rule.r{transition-delay:.15s}
.service-rule.b{transition-delay:.45s}
.service-edge.v{transition-delay:calc(.25s + var(--i) * .08s)}
.service-edge.h{transition-delay:calc(.55s + var(--i) * .08s)}
.service-panel:before{transition:opacity .6s ease calc(.7s + var(--i) * .08s)}
.service-panel h3,.service-panel p{transition:opacity .6s ease calc(1s + var(--i) * .08s),transform .6s cubic-bezier(.22,1,.36,1) calc(1s + var(--i) * .08s)}
.service-landscape.draw:not(.in) .service-rule{transform:var(--off)}
@media(min-width:601px){
 .service-landscape.draw:not(.in) .service-edge{transform:var(--off)}
 .service-landscape.draw:not(.in) .service-panel:before{opacity:0}
 .service-landscape.draw:not(.in) :is(h3,p){opacity:0;transform:translateY(10px)}
}
@media(max-width:600px){
 .service-landscape.draw article:not(.in) .service-edge{transform:var(--off)}
 .service-landscape.draw article:not(.in) .service-panel:before{opacity:0}
 .service-landscape.draw article:not(.in) :is(h3,p){opacity:0;transform:translateY(10px)}
}
.service-landscape.motion-settled .service-panel:before,.service-landscape.motion-settled .service-edge{transition:bottom .35s cubic-bezier(.22,.7,.25,1)}
.service-landscape.instant *,.service-landscape.instant *::before{transition:none!important}
@media(hover:hover) and (pointer:fine){.service-landscape.motion-settled article:hover .service-panel{--hover-cut:16px}}
@media(prefers-reduced-motion:reduce){.service-rule,.service-edge,.service-panel:before,.service-panel h3,.service-panel p{transition:none}}
/* Mobile set B "Cards on photo", chosen 16 September 2026 (mobile-cards): the band runs edge to edge with one photo
   behind the whole stack, and the four panels become separate cards 24px apart. The photo is the ground rather than a
   strip inside each card, so the rules that framed the band and edged each panel have nothing left to draw. */
@media(max-width:600px){
 /* The bleed and the inner padding both follow --page-gutter (22px, 18px at 360px and under), so the band reaches
    the screen edges and the cards still sit on the page grid at every phone width. */
 .service-landscape{margin-inline:calc(var(--page-gutter) * -1);width:calc(100% + var(--page-gutter) * 2);padding:var(--page-gutter);row-gap:24px}
 .service-landscape img{object-position:center;transform:none}
 .service-landscape article{min-height:0}
 .service-rule,.service-edge{display:none}
 .service-panel:before{top:0}
 /* No line draws first, so the paper and the text arrive straight away. */
 .service-panel:before{transition-delay:0s}
 .service-panel h3,.service-panel p{transition-delay:.15s}
}

/* Hide prototype controls while preserving shared motion script hooks. */
.study[hidden]{display:none}
.hero{min-height:100svh}
#work,.service-section{scroll-margin-top:0}
.mode-panel .hero{top:0}
@media(max-width:600px){.hero{min-height:0}}
/* Closing sections: practical answers followed by one direct conversation. */
.faq-section{padding:100px max(3%,calc((100vw - 1600px)/2)) 140px;display:grid;grid-template-columns:1fr 1.55fr;gap:80px;background:var(--paper)}
.faq-section h2{font-size:clamp(38px,4vw,58px);line-height:1.08;font-weight:400;letter-spacing:-.055em;margin:0}
.faq-list{border-top:1px solid var(--rule)}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:27px 0;font-size:17px;line-height:1.5;letter-spacing:-.02em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:focus-visible{outline:2px solid #777;outline-offset:6px}
.faq-sign{position:relative;width:14px;height:14px;flex:0 0 14px}
.faq-sign:before,.faq-sign:after{content:"";position:absolute;background:currentColor;left:0;top:6px;width:14px;height:1px}
.faq-sign:after{transform:rotate(90deg)}details[open] .faq-sign:after{transform:none}
.faq-list p{font-size:14px;line-height:1.8;color:var(--muted);margin:0;padding:0 42px 28px 0;max-width:660px}
.contact-section{position:relative;isolation:isolate;overflow:hidden;background:#191919;color:#fff;padding:130px max(6%,calc((100vw - 1500px)/2)) 145px}
.contact-copy{position:relative;z-index:1;max-width:900px}
.contact-section h2{font-size:clamp(46px,6.5vw,94px);font-weight:400;line-height:1.04;letter-spacing:-.055em;margin:0 0 30px}
.contact-section p{font-size:16px;line-height:1.7;color:#c5c5c5;max-width:440px;margin:0 0 40px}
.contact-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;font-size:13px}
.contact-fold{position:absolute;width:clamp(330px,40vw,680px);height:auto;right:-5%;bottom:-12%;opacity:.1;overflow:visible;pointer-events:none;z-index:0}
.site-footer{background:#191919;color:#a9a9a9;border-top:1px solid #ffffff24;display:flex;align-items:center;justify-content:space-between;padding:30px max(3%,calc((100vw - 1600px)/2));gap:30px;font-size:11px}
.site-footer img{display:block;max-width:100%;height:auto}.site-footer>a:last-child{color:#ddd}
@media(max-width:900px){.faq-section{gap:40px;grid-template-columns:.8fr 1.3fr}.faq-list summary{font-size:15px}}
@media(max-width:600px){.faq-section{display:block;padding:50px 22px 80px}.faq-section h2{font-size:36px;margin-bottom:36px}.faq-list summary{padding:22px 0;gap:20px;font-size:16px}.faq-list p{padding-right:20px}.contact-section{padding:80px 22px 85px}.contact-section h2{font-size:clamp(39px,10vw,54px)}.contact-section p{font-size:14px;max-width:300px}.contact-actions{align-items:flex-start;flex-direction:column;gap:26px}.contact-fold{right:-100px;bottom:-30px;width:360px}.site-footer{padding:28px 22px;display:flex;flex-wrap:wrap;gap:24px}.site-footer>a:first-child{width:100%}.site-footer span{margin-right:auto}.site-footer img{width:185px}}
/* FAQ offers a direct conversation; contact and brand details form one footer. */
.faq-intro h2{margin-bottom:24px}
.contact-footer{display:block;border:0;padding-top:85px;padding-bottom:0}
.contact-footer .contact-copy{padding-bottom:80px}
.contact-footer .contact-section{padding:0}
.contact-footer .site-footer{position:relative;z-index:1;background:transparent;padding:28px 0;font-size:11px}
.contact-footer .contact-fold{bottom:0}
@media(max-width:600px){.faq-intro{margin-bottom:36px}.faq-intro h2{margin-bottom:18px}.contact-footer{padding-top:65px;padding-bottom:0}.contact-footer .contact-copy{padding-bottom:60px}}

/* FAQ — set B "Tiles" with the "Quarter turn" mark, chosen 16 September 2026 (faq-concepts, faq-icons).
   The hairline list becomes tiles on the page: no rules, 12px apart, lifting from #EFEFEC to white when open.
   The answer's height is carried by a grid row; ::details-content keeps it rendered while it collapses and
   @starting-style gives the opening direction a state to start from. Several rules carry extra specificity
   deliberately, to beat ui.css, which loads after this sheet. */
.faq-list{border-top:0;display:flex;flex-direction:column;gap:12px}
.faq-list details{border-bottom:0;background:#efefec;border-radius:var(--r-md);transition:background-color .3s,box-shadow .3s}
.faq-list details[open]{background:#fff;box-shadow:0 8px 24px #0000000a}
.faq-list summary{gap:20px;padding:20px;font-size:16px;line-height:1.4;letter-spacing:normal}
.faq-section .faq-list summary:hover{background:transparent}
.faq-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.22,1,.36,1)}
.faq-list details[open] .faq-wrap{grid-template-rows:1fr}
@starting-style{.faq-list details[open] .faq-wrap{grid-template-rows:0fr}}
.faq-list details::details-content{transition:content-visibility .3s allow-discrete}
.faq-inner{overflow:hidden}
.faq-list p{padding:8px 20px 20px;font-size:15px;line-height:1.6;max-width:620px}
/* The mark: a 32px disc the colour of the closed tile, so it only shows once the tile turns white.
   The horizontal bar leaves over the first half, then the mark turns a quarter, so the bar that was
   upright becomes the minus and no full cross ever rotates through 45° — which is what made it swell. */
.faq-list .faq-sign{--glyph:18px;--bar:1.5px;display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;background:#efefec;color:var(--ink);transition:background-color .3s,transform .3s cubic-bezier(.22,1,.36,1) .066s}
.faq-list details[open] .faq-sign{background:#f4f4f1;color:var(--ink);transform:rotate(90deg)}
.faq-list .faq-sign:before,.faq-list .faq-sign:after{top:50%;left:calc(50% - var(--glyph) / 2);width:var(--glyph);height:var(--bar);margin-top:calc(var(--bar) / -2)}
.faq-list .faq-sign:before{transition:transform .15s cubic-bezier(.22,1,.36,1)}
.faq-list details[open] .faq-sign:before{transform:scaleX(0)}
.faq-list details[open] .faq-sign:after{transform:rotate(90deg)}
/* Closing reverses the order, so the gesture reads the same both ways. */
.faq-list details:not([open]) .faq-sign{transition-delay:0s}
.faq-list details:not([open]) .faq-sign:before{transition-delay:.15s}
@media(hover:hover) and (pointer:fine){.faq-list details:not([open]):hover{background:#eaeae6}}
@media(max-width:600px){
 .faq-list summary{padding:18px;gap:18px;font-size:15px}
 .faq-list p{padding:8px 18px 18px;max-width:none}
}
/* The base reduced-motion rule covers elements and ::before/::after, which does not include ::details-content. */
@media(prefers-reduced-motion:reduce){.faq-wrap,.faq-list details::details-content,.faq-list .faq-sign,.faq-list .faq-sign:before{transition:none!important}}


/* System pass, 16 September 2026 — tracking as a function of size: -.055em at 40px and up, -.045em from 24 to 39px,
   -.03em from 20 to 23px, 0 below, and one label value. These two are the only places the build disagreed with it. */
.assembly-grid .hg .words h3{letter-spacing:-.055em}
.eyebrow{letter-spacing:.14em}

/* Footer — component review 06, applied 16 September 2026 (footer-concepts).
   Direction B with the Cropped wordmark at 88% of its cap height, fitted edge to edge and centred;
   the strip carries the Fold alone with the name as real text; the block is uncovered by the page
   sliding off it, which is antinomy.studio's and darkroom.engineering's mechanic — pure CSS, and
   nothing to gate for reduced motion, because sticky positioning is layout rather than animation. */

/* Alignment: NOT changed. The study reported the footer inset differently from the sections above
   it, but that was a reading of the declarations in this sheet. At runtime ui.css puts .faq-section,
   .service-section and .contact-footer on the same --page-gutter, so they already agree — measured
   at 1440px, all three compute to 57px. An earlier "fix" here set the footer to 42.75px and broke
   the very alignment it was meant to repair. */
/* The mobile heading had kept the desktop tracking: at 39px the applied band is -.045em. */
@media(max-width:600px){.contact-section h2{letter-spacing:-.045em}}

/* Uncovered: the paper sheet above scrolls off the block, which was there all along. */
main{position:relative;z-index:1;background:var(--paper)}
.contact-footer{position:sticky;bottom:0;z-index:0}

/* The strip. The lockup's word goes; the Fold carries it, with the name as real text so it
   survives with CSS off and cannot be deleted without the diff showing a text node go. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.site-footer{flex-wrap:wrap;gap:20px 30px}
.footer-logo{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;transition:opacity .15s cubic-bezier(.4,0,.2,1)}
.footer-glyph{display:block;width:34px;height:34px;color:#fff}
.footer-tag{margin-right:auto}
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none}
.footer-legal b{font-weight:400;color:#fff}
.footer-top{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#ddd}
.footer-top .u{display:inline;padding-block:4px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat,linear-gradient(#ffffff73,#ffffff73) 0 100%/100% 1px no-repeat;transition:background-size .3s ease-out}
.footer-top .i{transition:transform .32s cubic-bezier(.22,1,.36,1)}
/* One row. The legal items are plain text and sat 14.5px above the tag, because the back-to-top
   centres itself inside a 44px target and the list did not. The underline's 4px is now padded on
   both sides, so the link's text centres on its own box and every group shares one centre line. */
@media(hover:hover) and (pointer:fine){
 .footer-logo:hover{opacity:.8}
 .footer-top:hover .u{background-size:100% 1px,100% 1px}
 .footer-top:hover .i{transform:translate(2px,-2px)}
}

/* The mark. Sized by ui.js so the word spans the block in the live font, centred so any slack
   splits evenly, and cut at 88% of its cap height by the footer's own bottom edge. */
.footer-wordmark{position:relative;z-index:1;container-type:inline-size;margin-inline:calc(max(3%,calc((100vw - 1600px)/2)) * -1);padding-bottom:6px;text-align:center;user-select:none;overflow:hidden}
.footer-wordmark span{display:block;white-space:nowrap;font-size:var(--wm-size,clamp(90px,26cqi,420px));font-weight:400;line-height:.72;letter-spacing:-.055em;color:#fff;opacity:.9;margin-bottom:-.07em}
@media(max-width:600px){.footer-wordmark{margin-inline:calc(var(--page-gutter) * -1)}}

/* The mark assembles — component review 06b, applied 16 September 2026 (footer-assembly, A · Close).
   The Fold is two disjoint shapes with a stepped channel between them running at about 52°, so the
   diagonal is the axis that opens the whole seam; a straight left or up move opens only half of it.
   26 user units each is the opening's own amplitude, and a translate on an SVG child is in user
   units, so the gesture holds its proportion at every rendered size. The mark had to stop being an
   <img>, whose paths page CSS cannot reach — it is inlined now, like the strip glyph. Printed at 10%
   instead of 3.5% (see .contact-fold): at 3.5% white over #191919 composites to #212121, eight
   values of grey, which is below what a moving edge can carry. ui.js drives --fold-gap from how far
   the sheet above has slid off the block; the footer is pinned, so its own rect never moves. */
.fold-z{transform:translate(calc(var(--fold-gap,0) * 1px),calc(var(--fold-gap,0) * -1px))}
.fold-l{transform:translate(calc(var(--fold-gap,0) * -1px),calc(var(--fold-gap,0) * 1px))}
@media(prefers-reduced-motion:reduce){.fold-z,.fold-l{transform:none}}

/* AVIF, with the original as the fallback source — component review 07, 16 September 2026.
   <picture> puts a wrapper between the band and its photo, so the rules above read `img` rather
   than `>img`; display:contents keeps the wrapper out of the box tree, so the photo still positions
   against the band itself. The showcase posters only need the wrapper to stop being inline. */
/* display:contents hoists the <picture>'s children into the grid — and <source> computes to
   display:block once it is no longer inside a rendered picture box, so it took a whole 380px
   column and pushed the fourth panel onto a second row that the band's 600px overflow cut off. */
.service-landscape>picture{display:contents}
.service-landscape>picture>source{display:none}
.media picture{display:block}