/* ═══════════════════════════════════════════════════════════ HYLE INDUSTRIES — public site · Rev 04 (2026-08-20) Full composition rebuild on the final landing copy: hero → 00 VISION → 01 INFRASTRUCTURE → 02 PLATFORM → 03 FUTURE → 04 JOIN. Radius 0 everywhere. Accent budget: ≤2 orange elements per viewport. Texture budget AMENDED to 5 (owner-delegated 2026-08-21): hero fog · vision floor · PT-1 flow filler · PT-4 wave (03 floor) · footer ramp. Motion: stepped/linear only, all gated on prefers-reduced-motion. ═══════════════════════════════════════════════════════════ */ /* ── fonts ─────────────────────────────────────────────────── */ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/JetBrainsMono-Regular.woff2) format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/JetBrainsMono-Medium.woff2) format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/JetBrainsMono-Bold.woff2) format('woff2')} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/JetBrainsMono-ExtraBold.woff2) format('woff2')} /* eurostile-extended (display, locked E-2), transducer (body), and ocr-a-std (mono chrome, locked M-2) load from the Adobe kit linked in — licensing forbids self-hosting kit faces. OCR-A is SINGLE WEIGHT: mono chrome never declares bold — no synthesis. JetBrains Mono stays self-hosted as the mono FALLBACK and carries the motion assets' chrome; their 700/800 weights are an owner-sanctioned deviation scoped to the motion assets — site chrome mono remains single-weight. SK-02 v2.0.0 additionally titles itself in eurostile-extended + transducer via this page's kit link (owner-directed 2026-08-21) — the module never bundles kit faces. HyleGreek = JuliaMono subset (ὕ λ η ·, OFL, locked G-1): the chip/footer Greek face — everything before the · spacer. BBH Bartle is WORDMARK ONLY (locked WM-2): self-hosted, single weight, reachable solely via --wm. Never sweep it into display-face changes. */ @font-face{font-family:'HyleGreek';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/HyleGreek.woff2) format('woff2')} @font-face{font-family:'BBH Bartle';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/BBHBartle-Regular.woff2) format('woff2')} /* ── tokens ────────────────────────────────────────────────── */ :root{ --bg:#0C0E11; --panel:#12151B; --panel2:#0F1116; --line:#232935; --line2:#171C25; --txt:#D2D8E1; --mut:#76808F; --dim:#49525F; --acc:#FF4E1F; --datum:#7FA3C7; --steel:#A9B4C4; /* Techne identity — chip squares / cube only */ --emberhi:#C24A20; /* dither program mid tone — texture + FUTURE chip only */ --cobalt:#0D52B9; /* kit pull 2026-08-22: location chips + glyph-field palettes */ --graphite:#191D24; /* kit workplate surface */ --linestrong:#37404D; /* kit line-strong: instrument ticks/dividers */ --sigdeep:#C93D16; /* kit signal-deep: Tier-1 :active */ --warn:#EFB61B; /* status-only: advisories/caution. Budget ≤1 per viewport, never decorative. */ --pass:#45F27E; /* status-only: verified/pass states (approved 2026-08-18). Same budget as warn. */ --mono:'ocr-a-std','JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; --disp:'eurostile-extended',sans-serif; --body:'transducer',system-ui,-apple-system,sans-serif; --wm:'BBH Bartle',sans-serif; --page-w:1200px; --gutter:clamp(20px,5vw,64px); --pad-x:clamp(22px,4vw,48px); } /* ── base ──────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;border-radius:0!important} html{overflow-x:clip;scroll-behavior:smooth} body{margin:0;background:repeating-linear-gradient(45deg,var(--line2) 0 1px,transparent 1px 8px) var(--bg); color:var(--txt);font-family:var(--mono);font-synthesis:none;font-size:13px;line-height:1.6; -webkit-font-smoothing:antialiased;padding:0 var(--gutter)} ::selection{background:var(--acc);color:var(--bg)} :focus-visible{outline:1px solid var(--acc);outline-offset:2px} a{color:inherit} h1,h2,h3,h4,p,pre,figure,blockquote,ul{margin:0} ul{padding:0;list-style:none} i{font-style:normal} img{display:block;max-width:100%;height:auto} canvas{display:block;image-rendering:pixelated} pre{font-family:var(--mono)} .k2{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:10px} .num{font-variant-numeric:tabular-nums} .bm{display:inline-block;flex:none} .asvg{display:inline-block;vertical-align:-1px} .px{image-rendering:pixelated} .warn{color:var(--warn)} .pass{color:var(--pass)} .skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--acc);color:var(--bg);padding:10px 16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none} .skip:focus{left:0} /* Greek ὕλη: never uppercased (rule 10) · always the HyleGreek subset (locked G-1) */ .gr{text-transform:none;font-family:'HyleGreek','JetBrains Mono',monospace} /* ── frame: rails · band rules · registration crosses ──────── */ .page{position:relative;max-width:var(--page-w);margin:0 auto;background:var(--bg); border-left:1px solid var(--line);border-right:1px solid var(--line)} .band{position:relative} .band::before{content:'';position:absolute;top:0;height:1px;left:50%;transform:translateX(-50%); width:100vw;background:var(--line);z-index:2;pointer-events:none} .band.first::before{display:none} .x{position:absolute;top:-8px;font-family:var(--mono);font-size:12px;line-height:1;color:var(--mut);z-index:4;pointer-events:none} .xl{left:-4.5px} .xr{right:-4.5px} /* ── section head: chip docked ON the head line · § terminal ─ */ .shead{position:relative;display:flex;align-items:center;margin:0 calc(-1 * var(--pad-x)) 30px;height:27px} .shead::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)} .shead .chip{position:relative;z-index:1;margin-left:calc(var(--pad-x) + 38px)} .shead .ix{position:relative;z-index:1;margin-left:auto;margin-right:calc(var(--pad-x) + 14px); color:var(--dim);font-size:10px;letter-spacing:.1em;background:var(--bg);padding:0 10px} /* chip: annotation plate (hard rule 5) — square color = section identity, cool → hot down the page: 00 ink · 01 datum · 02 steel · 03 ember · 04 signal */ .chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel2); padding:5px 11px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:var(--mut);width:max-content} .chip::before{content:'';width:6px;height:6px;background:var(--acc)} .chip b{color:var(--txt);font-weight:400} .chip .ipa{text-transform:none;letter-spacing:.04em;color:var(--dim)} .chip.c-ink::before{background:var(--dim)} .chip.c-datum::before{background:var(--datum)} .chip.c-steel::before{background:var(--steel)} .chip.c-ember::before{background:var(--emberhi)} /* ── type roles ────────────────────────────────────────────── */ .stitle{font-family:var(--disp);font-weight:900;font-size:clamp(23px,3.4vw,42px);line-height:1.05; letter-spacing:.02em;text-transform:uppercase;max-width:24ch;text-wrap:balance} .pbody{font-family:var(--body);font-size:15px;line-height:1.65;color:var(--txt);opacity:.9;max-width:75ch} .pbody .q{color:var(--mut)} .keyline{font-family:var(--body);font-weight:600;font-size:clamp(15px,1.8vw,18px);line-height:1.5;color:var(--txt);max-width:62ch} .keyline .hl{color:var(--acc)} .rolel{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mut);text-transform:uppercase} .rolel b{color:var(--txt);font-weight:400} .stack{display:flex;flex-direction:column;gap:18px} .mt{margin-top:22px} /* ── nav (kit rail-nav grammar, 2026-08-22): thicker, sticky, blurred ground; items scramble on hover with a signal underline; JOIN is the kit rail-join plate (square + label · dashed divider · chevron cell) ── */ .nav{position:sticky;top:0;z-index:40;display:flex;align-items:stretch;min-height:60px; background:color-mix(in srgb,var(--bg),transparent 8%); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .nav::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100vw;height:1px; background:var(--line);pointer-events:none} .nav .brand{display:flex;align-items:center;gap:9px;padding:0 24px;border-right:1px solid var(--line); font-family:var(--wm);font-weight:400;font-size:19px;letter-spacing:.04em;text-decoration:none;color:var(--txt)} .nav .brand .bm{transform:translateY(5%)} .nav .items{margin-left:auto;display:flex} .nav a.it{position:relative;display:flex;align-items:center;gap:8px;padding:0 clamp(12px,1.4vw,22px); font-size:10px;letter-spacing:.16em;text-decoration:none;border-left:1px solid var(--line);color:var(--mut)} .nav a.it .i{color:var(--dim);font-size:9px} .nav a.it:not(.join)::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--acc); transform:scaleX(0);transform-origin:left} .nav a.it:not(.join):hover,.nav a.it:not(.join):focus-visible{color:var(--txt)} .nav a.it:not(.join):hover::after,.nav a.it:not(.join):focus-visible::after{transform:scaleX(1)} .nav a.it.join{padding:0;background:var(--acc);color:var(--bg);font-weight:400;align-items:stretch} .nav a.it.join .l{display:flex;align-items:center;gap:10px;padding:0 18px;font-size:11px;letter-spacing:.15em} .nav a.it.join .l i{width:8px;height:8px;background:var(--bg)} .nav a.it.join .c{display:flex;align-items:center;justify-content:center;min-width:48px; border-left:1px dashed rgba(12,14,17,.45)} .nav a.it.join:hover,.nav a.it.join:focus-visible{background:var(--txt)} .nav a.it.join:active{background:var(--sigdeep)} .nav a.it.join .c .cx3{display:none} .nav a.it.join:hover .c .asvg,.nav a.it.join:focus-visible .c .asvg{display:none} .nav a.it.join:hover .c .cx3,.nav a.it.join:focus-visible .c .cx3{display:inline-block} /* pixel burger (W-01): shown ≤840px beside the JOIN cell; muted — the JOIN cell is the closed state's one signal element */ .nburger{display:none;align-items:center;padding:0 18px;border:none;border-left:1px solid var(--line); background:none;color:var(--mut);cursor:pointer} .nburger:hover{color:var(--txt)} /* ── mobile nav overlay: full-screen manifest pattern (W-01) ── */ .mnav{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column; padding:0 var(--gutter)} .mnav[hidden]{display:none} .mnav-top{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)} .mnav-top .brand{display:flex;align-items:center;gap:9px;font-family:var(--wm);font-weight:400;font-size:17px; letter-spacing:.04em;text-decoration:none;color:var(--txt)} .mnav-x{background:none;border:none;color:var(--mut);padding:10px;margin-right:-10px;cursor:pointer} .mnav-x:hover{color:var(--txt)} .mnav-rows{display:flex;flex-direction:column;margin-top:8px} .mnav-rows a{display:flex;align-items:baseline;gap:18px;padding:22px 2px;border-bottom:1px solid var(--line2); text-decoration:none;color:var(--txt)} .mnav-rows .i{color:var(--dim);font-size:11px;letter-spacing:.1em;flex:none} /* sized so INFRASTRUCTURE (the long row) clears the chevron at 320px */ .mnav-rows .n{font-family:var(--disp);font-weight:900;font-size:clamp(16px,5vw,30px);letter-spacing:.03em; text-transform:uppercase;line-height:1} .mnav-rows .asvg{margin-left:auto;color:var(--dim);align-self:center} .mnav-rows a:active .i{color:var(--acc)} .mnav-base{margin-top:auto;padding:20px 0 28px;display:flex;flex-direction:column;gap:20px} .mnav-base .cta1{align-self:stretch;justify-content:space-between} .mnav-base .chain{display:inline-flex;align-items:center;gap:10px;color:var(--dim);font-size:9px; letter-spacing:.14em;text-transform:uppercase} @media(min-width:841px){.mnav{display:none!important}} /* ── hero (kit composition pull, 2026-08-22 — lab c02-hero): copy 7-col left with tiered CTAs, M-18 plated drawing right over a glyph conduit, construction grid ground, readout strip on the floor ── */ .hero{padding:0;overflow:hidden} .hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(390px,5fr); min-height:clamp(620px,calc(100svh - 96px),860px);overflow:hidden} .hgrid-field{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(110,120,135,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(110,120,135,.08) 1px,transparent 1px); background-size:48px 48px; /* top fade keeps the first grid row from reading as a second nav rule */ -webkit-mask-image:linear-gradient(transparent 0,rgba(0,0,0,.55) 90px,#000 150px,rgba(0,0,0,.48) 62%,transparent 96%); mask-image:linear-gradient(transparent 0,rgba(0,0,0,.55) 90px,#000 150px,rgba(0,0,0,.48) 62%,transparent 96%)} .hero-glyphs{position:absolute;left:51%;right:3%;top:10%;bottom:18%;z-index:1;opacity:.8;pointer-events:none} .hero-glyphs canvas{width:100%;height:100%} .hero-fog{position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;z-index:1;opacity:.85; -webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)} .hero-fog canvas{width:100%;height:100%} .hero-copy{position:relative;z-index:4;min-width:0;align-self:center; padding:clamp(48px,6vw,84px) 0 clamp(84px,10vw,132px) var(--pad-x)} .hero h1{margin:clamp(28px,3.4vw,48px) 0 24px;font-family:var(--disp);font-weight:900; font-size:clamp(30px,4.45vw,62px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase} .hero h1 span{display:block} .hero h1 span:last-child{color:color-mix(in srgb,var(--txt),var(--mut) 32%)} .hero .lede{font-family:var(--body);font-size:clamp(14px,1.3vw,17px);line-height:1.7; color:color-mix(in srgb,var(--txt),var(--mut) 36%);max-width:640px} .hero-actions{display:flex;align-items:stretch;gap:12px;margin-top:38px;flex-wrap:wrap} .hero-drawing{position:relative;z-index:3;grid-column:2;margin:64px 0 0;min-width:0} .hero-drawing::before{content:'';position:absolute;inset:8% 0 6% -18%; background:linear-gradient(90deg,transparent,var(--panel2) 42%,color-mix(in srgb,var(--panel),transparent 8%));opacity:.54} .hero-drawing img{position:absolute;width:88%;height:88%;left:15%;top:6%;object-fit:contain; object-position:left center;filter:contrast(1.06)} .hero-drawing figcaption{position:absolute;z-index:2;left:8%;right:24px;top:34px;display:flex;align-items:center; justify-content:space-between;color:var(--datum);font-size:8px;letter-spacing:.15em;text-transform:uppercase} .hero-drawing figcaption b{color:var(--dim);font-weight:400} .hero-drawing>small{position:absolute;z-index:2;right:24px;bottom:54px;color:var(--datum);font-size:7px; letter-spacing:.15em;text-transform:uppercase} .hero-readout{position:absolute;z-index:5;left:var(--pad-x);right:24px;bottom:22px;display:flex;align-items:center; gap:14px;color:color-mix(in srgb,var(--mut),var(--txt) 22%);font-size:7px;letter-spacing:.14em; text-transform:uppercase;white-space:nowrap} .hero-readout i{height:1px;flex:1;background:var(--linestrong)} /* datum spacer — kit transition band (field variant): quiet interval with a measured line + signal square between the hero and 00 */ .dspacer{min-height:132px;display:grid;grid-template-columns:auto minmax(80px,1fr) auto auto;align-items:center; gap:20px;padding:0 clamp(24px,4vw,56px);overflow:hidden;background:var(--bg);color:var(--dim); font-size:8px;letter-spacing:.16em;text-transform:uppercase} .dspacer::after{content:'';position:absolute;inset:22px 0; background:repeating-linear-gradient(90deg,transparent 0 10px,var(--line2) 10px 11px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);opacity:.8;pointer-events:none} .dspacer>*{position:relative;z-index:1} .ds-line{height:1px;position:relative;background:var(--linestrong)} .ds-line b{position:absolute;right:38%;top:-4px;width:9px;height:9px;background:var(--acc)} .dspacer strong{color:var(--mut);font-weight:400} .dspacer small{color:var(--dim);font-size:inherit} /* ── sections ──────────────────────────────────────────────── */ .sec{padding:clamp(48px,7vw,76px) var(--pad-x)} section[id]{scroll-margin-top:24px} /* band tones — break the single-ground monotony: 01 lifted onto panel, 03 recessed onto panel2; the § knockout patch matches its band ground */ .sec-panel{background:var(--panel)} .sec-panel .shead .ix{background:var(--panel)} .sec-deep{background:var(--panel2)} .sec-deep .shead .ix{background:var(--panel2)} /* filler framing bands: drafting furniture only — no text, no texture spend */ /* pattern bands: full-strength strips at the trial-page scale — never adjacent to another texture spend */ .pband canvas{width:100%;height:clamp(110px,14vw,150px)} /* 00 · VISION (W-14) — type-led statement · dissolving mark · F-4 floor (spend 2/3). Body copy steps down the ramp (txt → mut) paragraph by paragraph; the bold close (.keyline) is the only weight on the band. */ .sec-vision{padding-top:clamp(34px,4.6vw,54px);padding-bottom:clamp(110px,14vw,175px)} .sec-vision .stitle{font-size:clamp(25px,4vw,50px)} .vision-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,30vw,372px); gap:clamp(28px,5vw,64px);align-items:start;margin-top:22px} .vision-body{display:flex;flex-direction:column;gap:18px;max-width:58ch} .vr2{color:color-mix(in srgb,var(--txt) 55%,var(--mut))} .vr3{color:var(--mut)} .vmark{position:relative;z-index:1;padding-right:clamp(0px,2vw,24px);margin-top:clamp(-88px,-6vw,-16px)} .vmark img{width:100%;height:auto;image-rendering:pixelated} .vfloor{position:absolute;left:0;right:0;bottom:0;height:clamp(96px,13vw,170px);pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%); mask-image:linear-gradient(180deg,transparent,#000 30%)} .vfloor canvas{width:100%;height:100%} /* 01 · INFRASTRUCTURE — layer ledger + SK-01 loop stack */ .inf-grid{display:grid;grid-template-columns:1.08fr minmax(400px,470px);gap:clamp(28px,4vw,54px); align-items:start;margin-top:22px} #infrastructure{padding-top:clamp(34px,4.6vw,54px)} /* C-06 · Ledger (W-21): translucent schedule rows, filled full-height index cell, hover heat (index -> signal, label -> txt) */ .layers{margin-top:26px;border:1px solid var(--line);background:rgba(12,14,17,.78)} .layer{display:grid;grid-template-columns:56px 1fr;align-items:stretch;border-bottom:1px solid var(--line2)} .layer:last-child{border-bottom:none} .layer .lx{display:flex;align-items:center;justify-content:center;color:var(--datum);font-size:9px; letter-spacing:.14em;background:rgba(15,17,22,.85);border-right:1px solid var(--line2)} .layer .lt{display:flex;flex-direction:column;gap:4px;padding:14px 18px;min-width:0} .layer:hover{background:rgba(18,21,27,.9)} .layer:hover .lx{color:var(--acc)} .layer:hover .ln{color:var(--txt)} .layer .ln{font-family:var(--disp);font-weight:900;font-size:14px;letter-spacing:.05em;text-transform:uppercase;line-height:1.2} .layer .ld{grid-column:2;font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--mut)} .declare{display:flex;align-items:center;gap:14px;margin-top:28px} .declare .keyline{max-width:none} .declare .asvg{color:var(--mut);flex:none} /* bare mount containers (assets are frameless — the page owns framing); desktop: SK-01 drops to sit with the ledger, not the section head. Chrome pair: std wide, compact below ~620px viewport (~500px container — std's 8.5u mono lands ~5.5px there) */ .loopstack{width:100%;max-width:760px;margin-top:44px} .ls-compact{display:none} @media(max-width:620px){ .ls-std{display:none} .ls-compact{display:block} } /* 02 · PLATFORM — SK-02 pillar band + entity sub-bands */ #platform .stitle{margin-left:auto;margin-right:auto;text-align:center;max-width:none} .plat-intro{display:flex;flex-direction:column;gap:18px;margin:22px auto 0;max-width:75ch;text-align:center} /* instrument bay: the SK-02 run demo gets its own seam-ruled sub-band — division between the demo and the entity datasheet below */ .tbay{margin:clamp(36px,5vw,54px) calc(-1 * var(--pad-x)) 0; padding:clamp(28px,4vw,42px) var(--pad-x) clamp(24px,3.4vw,36px); border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)} /* FROM DESIGN ——▸▸—— TO SHIPPED PART flow lockup */ .tcall-head{margin:0} .tcall-title{display:flex;align-items:center;gap:clamp(14px,2vw,26px); font-family:var(--disp);font-weight:900;font-size:clamp(16px,1.9vw,21px);letter-spacing:.02em;text-transform:uppercase;line-height:1.1} .tcall-title .fl{flex:1;display:flex;align-items:center;gap:12px;min-width:50px} .tcall-title .fl i{flex:1;border-top:1px dashed var(--dim)} .tcall-title .fl .asvg{color:var(--mut);flex:none} .tcall-head.hot .fl .asvg{color:var(--acc)} .tcall-head.hot .tcall-sub{color:var(--txt)} .tcall-sub{font-family:var(--body);font-size:13.5px;color:var(--mut);margin-top:9px;text-align:center} .tcall-band{margin:16px calc(24px - var(--pad-x)) 4px} .tcall{width:100%} .tcall-mobile{display:none} .acap{margin-top:10px;font-size:8.5px;letter-spacing:.16em;color:var(--mut);text-transform:uppercase; display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} .tcall-cap{margin-top:20px;text-align:center} .cap-d{font-family:var(--disp);font-weight:900;font-size:clamp(14px,1.6vw,18px);letter-spacing:.02em; text-transform:uppercase;line-height:1.2;color:var(--txt)} .cap-m{margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--mut);text-transform:uppercase} /* desktop master (1240-unit) lives >=900px viewport; below, the mobile stage-swap cut (320-unit master, layout="mobile") runs live, capped so its 1:1 type never balloons */ @media(max-width:899px){ .tcall-live{display:none} .tcall-mobile{display:block;max-width:430px;margin:0 auto} } /* DS-02 · ENTITY DATASHEET — the three systems as one framed, interactive component (2026-08-21 design-engineering pass). Registration-cornered sheet, accordion rows, spec table. One row open at a time. */ .dsheet{position:relative;border:1px solid var(--line);background:var(--panel2); margin-top:clamp(44px,6vw,66px)} .dsheet .x1{top:-7px;left:-5px} .dsheet .x2{top:-7px;right:-5px} .dsheet .x3{top:auto;bottom:-7px;left:-5px} .dsheet .x4{top:auto;bottom:-7px;right:-5px} .ds-head{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line); font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)} .ds-head span{white-space:nowrap} .ds-row + .ds-row{border-top:1px solid var(--line2)} .ds-bar{display:grid;grid-template-columns:64px 1fr auto 40px;align-items:center;gap:16px;width:100%; padding:22px 20px;background:none;border:0;cursor:pointer;text-align:left;color:var(--txt);font-family:inherit} .ds-bar .cube{justify-self:center} .ds-id{display:flex;flex-direction:column;gap:6px} .ds-nm{font-family:var(--disp);font-weight:900;font-size:clamp(21px,2.3vw,27px);letter-spacing:.05em;text-transform:uppercase;line-height:1} .ds-role{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--mut);text-transform:uppercase} .ds-st{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase} .ds-bar .asvg{color:var(--dim);justify-self:end} .ds-bar:hover{background:var(--panel)} .ds-bar:hover .asvg{color:var(--acc)} .ds-row.open .ds-bar .asvg{transform:rotate(90deg)} /* body opens via the 0fr -> 1fr grid trick (linear, reduced-motion instant) */ .ds-body{display:grid;grid-template-rows:0fr} .ds-body > div{overflow:hidden} .ds-row.open .ds-body{grid-template-rows:1fr} .ds-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,56px); padding:8px 20px 30px 88px} /* body titles yield to the bar names: smaller + muted (hierarchy fix) */ .ent-title{font-family:var(--disp);font-weight:900;font-size:clamp(14px,1.35vw,17px);line-height:1.3; letter-spacing:.03em;text-transform:uppercase;text-wrap:balance;margin-bottom:16px; color:color-mix(in srgb,var(--txt),var(--mut) 38%)} .ds-copy .pbody{font-size:14.5px;max-width:none} .ds-copy .pbody + .pbody{margin-top:14px} .ent-cta{margin-top:24px} /* W-17 blend (2026-08-22): capability CHIPS, entity figures, hazard row */ .ds-grid--rev .ds-fig{order:2} .ds-fig{position:relative;padding-top:22px;align-self:center;min-width:0} .ds-fig img{width:100%;height:auto} .ds-fig .figlbl{position:absolute;top:0;left:0;font-family:var(--mono);font-size:8px;letter-spacing:.16em; color:var(--datum);text-transform:uppercase} .ds-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding:0;list-style:none} .ds-chips li{border:1px solid var(--line);background:var(--panel2);padding:9px 12px;font-family:var(--mono); font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)} .ds-chips li:hover{color:var(--txt);border-color:var(--linestrong)} .ds-slist{margin:20px 0 0;padding:0;list-style:none;border-top:1px solid var(--line2)} .ds-slist li{display:flex;gap:16px;align-items:baseline;padding:10px 2px;border-bottom:1px solid var(--line2); font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)} .ds-slist li .num{color:var(--datum);font-size:9px} /* instrument cards on the entity figures (W-17): dark plate, dashed head seam, mono readout — drawing-true numbers only */ .ds-card{position:absolute;right:0;bottom:0;width:min(62%,340px);border:1px solid var(--line); background:var(--bg);padding:13px 17px} .dc-h{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line); padding-bottom:7px;margin-bottom:9px} .dc-h span{font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase} .dc-b{display:flex;flex-direction:column;font-family:var(--mono);font-size:10.5px;line-height:1.9;color:var(--mut)} .dc-b b{color:var(--txt);font-weight:400} .dc-b em{color:var(--datum);font-style:normal} /* hazard stripe: the Factories row bar carries the stripe band (W-17) */ .ds-row--hz .ds-bar::before{content:'';position:absolute;left:0;right:0;top:0;height:5px; background:repeating-linear-gradient(45deg,var(--acc) 0 8px,transparent 8px 18px);opacity:.5;pointer-events:none} .ds-row--hz .ds-bar{position:relative} /* disabled tier-2 (kit grammar): dashed hairline, dim, inert */ .cta2.is-disabled{border-style:dashed;border-color:var(--line);color:var(--dim);pointer-events:none;cursor:not-allowed} .cta2.is-disabled .c{border-left-color:var(--line);color:var(--dim)} /* spec table: the capability list as datasheet rows */ .ds-spec{border:1px solid var(--line2);background:var(--bg);align-self:start} .ds-spec-h{padding:9px 16px;border-bottom:1px solid var(--line2);color:var(--dim);font-size:9px} .ds-spec ol{margin:0;padding:0;list-style:none;counter-reset:none} .ds-spec li{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:10px 16px; border-bottom:1px solid var(--line2);font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--txt);opacity:.9} .ds-spec li:last-child{border-bottom:none} /* square marker: capabilities are unordered — squares, not numbers */ .ds-spec .sqm{width:7px;height:7px;background:var(--datum);margin-top:6px;justify-self:center} /* factory 01 sub-band: plate left · proving-ground body right */ .facband{display:grid;grid-template-columns:minmax(300px,480px) 1fr;gap:clamp(28px,4vw,54px);align-items:start; padding:clamp(40px,5.5vw,64px) 0 0} /* full-bleed drawing insert — the one rail-to-rail moment */ .bleed{background:var(--panel2)} .bleed img{width:100%;display:block} .bleed .figlbl{position:absolute;top:12px;left:var(--pad-x);font-family:var(--mono);font-size:8px;letter-spacing:.16em; color:var(--datum);text-transform:uppercase;z-index:1} /* measurement ruler docks at the drawing's own floor */ .bleed .ruler{position:absolute;left:0;right:0;bottom:0;height:22px;background: repeating-linear-gradient(90deg,var(--mut) 0 1px,transparent 1px 56px) 0 100%/100% 12px no-repeat, repeating-linear-gradient(90deg,var(--dim) 0 1px,transparent 1px 8px) 0 100%/100% 7px no-repeat} /* factory plate (preserved idiom) */ .plate{border:1px solid var(--line);background:var(--bg);max-width:480px} .plate .p1{padding:10px 18px;border-bottom:1px solid var(--line2);display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.22em;color:var(--mut);text-transform:uppercase} .plate .p1 .loc{color:var(--dim)} .plate .p2{padding:14px 18px 16px;font-family:var(--disp);font-weight:900;font-size:clamp(22px,3vw,30px);letter-spacing:.03em;text-transform:uppercase;line-height:1} .plate .p3{padding:9px 18px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase} .ghost{display:flex;justify-content:space-between;gap:12px;padding:9px 18px;border:1px solid var(--line2);border-top:none;color:var(--mut);font-size:9px;letter-spacing:.2em;text-transform:uppercase;max-width:480px;opacity:.85} .foundry-body{display:flex;flex-direction:column;gap:16px;max-width:62ch} /* CTA tiers — W-03 R3 (adopted 2026-08-21; corner-tick cta2 retired): T1 committed: signal plate, DASHED internal divider, PX-2 cell, scramble-decode label. T2 hidden-line ghost: dashed hairline + dashed divider/chevron cell; hover solidifies the outline (divider stays dashed); active = outline+chevron signal. T3 inline: label + ALWAYS-signal PX-1 in separate spans; hover heats the label; active doubles the chevron to PX-3. */ .cta1{display:inline-flex;align-items:stretch;background:var(--acc);color:var(--bg);font-family:var(--mono); font-weight:400;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none} .cta1 .l{padding:14px 20px} .cta1 .c{display:flex;align-items:center;padding:0 14px;border-left:1px dashed rgba(12,14,17,.5)} .cta1:hover{background:var(--txt)} .cta1:active{background:var(--sigdeep)} /* kit action grammar: the chevron DOUBLES while engaged (PX-3 swap) */ .cta1 .c .cx3,.cta2 .c .cx3{display:none} .cta1:hover .c .asvg,.cta1:focus-visible .c .asvg, .cta2:hover .c .asvg,.cta2:focus-visible .c .asvg{display:none} .cta1:hover .c .cx3,.cta1:focus-visible .c .cx3, .cta2:hover .c .cx3,.cta2:focus-visible .c .cx3{display:inline-block} .cta2{display:inline-flex;align-items:stretch;border:1px dashed var(--dim);color:var(--txt);background:transparent; font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none} .cta2 .l{padding:14px 20px} .cta2 .c{display:flex;align-items:center;padding:0 13px;border-left:1px dashed var(--dim);color:var(--mut)} .cta2:hover{border-style:solid;border-color:var(--mut)} .cta2:hover .c{border-left-style:dashed;color:var(--txt)} .cta2:active{border-color:var(--acc)} .cta2:active .c{border-left-color:var(--acc);color:var(--acc)} .cta3{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--txt);text-decoration:none} .cta3 .asvg{color:var(--acc)} .cta3 .c3{display:none} .cta3:hover .l3{color:var(--acc)} .cta3:active .c1{display:none} .cta3:active .c3{display:inline-block} /* 03 · FUTURE — BROADSIDE band (anti-repetition pass): centered oversize title, columned body like a printed sheet, PT-4 datum wave along the floor */ .sec-poster{padding-bottom:clamp(64px,9vw,110px)} .post-t{margin:0 auto;max-width:none;text-align:center;font-size:clamp(27px,4.8vw,60px)} .future-cols{max-width:70ch;margin:24px auto 0;text-align:center} .future-cols .pbody{max-width:none;margin-bottom:16px} .sec-poster .decl{margin-left:auto;margin-right:auto;max-width:920px} .sec-poster .decl p{margin:0 auto;text-align:center;font-size:clamp(22px,3.4vw,42px);max-width:24ch} .post-lead{text-align:center;max-width:none;margin:32px auto 0;font-size:clamp(15.5px,1.9vw,19px)} /* INVERSION BAND (owner-directed 2026-08-21): 03 runs on signal orange — the one band where the ground IS the accent. Ink type, white highlight, ink ascii floor. Within it the normal accent budget inverts. */ .sec-invert{background:var(--acc);padding-bottom:clamp(72px,10vw,120px)} .sec-invert .shead::before{background:rgba(12,14,17,.38)} .sec-invert .shead .ix{background:var(--acc);color:rgba(12,14,17,.65)} .sec-invert .stitle,.sec-invert .pbody{color:#12100D} .sec-invert .pbody{opacity:1} .sec-invert .decl p{color:#12100D} .sec-invert .decl .hl{color:#FFFFFF} .sec-invert .decl .x{color:rgba(12,14,17,.55)} /* whole-band off-white shimmer (owner-directed): behind everything on the band */ .ishim{position:absolute;inset:0;pointer-events:none} .ishim canvas{width:100%;height:100%} .sec-invert > .shead,.sec-invert > .stitle,.sec-invert > .post-lead, .sec-invert > .future-cols,.sec-invert > .decl{position:relative;z-index:1} .decl{position:relative;margin:clamp(36px,5vw,54px) clamp(4px,2vw,26px) 8px; padding:clamp(28px,4vw,44px) clamp(24px,3.6vw,40px)} .decl .x{top:auto} .decl .x1{top:-7px;left:-5px} .decl .x2{top:-7px;right:-5px} .decl .x3{bottom:-7px;left:-5px} .decl .x4{bottom:-7px;right:-5px} .decl p{font-family:var(--disp);font-weight:900;font-size:clamp(20px,2.8vw,34px);line-height:1.18; text-transform:uppercase;max-width:30ch;text-wrap:balance} .decl .hl{color:var(--acc)} /* 04 · JOIN — UNIFORM WORKPLATE (kit pull, 2026-08-22): graphite surface, F-4 uniform dither at .16, sparse stepped ember pulse population */ .sec-wplate{background:var(--graphite)} .sec-wplate .shead .ix{background:var(--graphite)} .wp-field{position:absolute;inset:0;pointer-events:none;overflow:hidden} .wp-field img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22} .ember-field{position:absolute;inset:0;display:block} .ember-field i{--esz:5px;position:absolute;left:var(--ex);top:var(--ey);width:var(--esz);height:var(--esz); background:var(--acc);opacity:.1;transform:scale(var(--esc)); animation:ember-pulse var(--edur) steps(4,end) var(--edel) infinite} .ember-field i:nth-child(5n){--esz:4px;background:color-mix(in srgb,var(--acc),var(--datum) 24%)} .ember-field i:nth-child(7n){box-shadow:0 0 0 1px rgba(255,78,31,.42)} @keyframes ember-pulse{0%,24%,100%{opacity:.06}42%{opacity:.34}50%{opacity:1}58%{opacity:.46}72%{opacity:.14}} @media(prefers-reduced-motion:reduce){.ember-field i{animation:none}.ember-field i:nth-child(6n){opacity:.38}} /* 04 · JOIN — ghost part-drawing fills the right margin (engineering marginalia; decorative, hidden when the column would collide) */ .join-art{position:absolute;top:clamp(90px,12vw,150px);right:calc(-0.25 * var(--pad-x));width:min(44%,560px); opacity:.16;pointer-events:none;z-index:0; -webkit-mask-image:linear-gradient(100deg,transparent 0,#000 45%); mask-image:linear-gradient(100deg,transparent 0,#000 45%)} .join-art img{width:100%} #join .join-stack,#join .rows{position:relative;z-index:1} .join-lead{font-family:var(--body);font-size:clamp(15px,1.6vw,17px);line-height:1.65;color:var(--mut);max-width:75ch} .join-lead b{color:var(--txt);font-weight:600} .join-stack{display:flex;flex-direction:column;gap:18px;margin-top:22px;max-width:75ch} /* open roles — lab RoleRow grammar: dashed rows, full-height index cell, cobalt location chip, OPEN action cell; hover wipes in the F-4C ember twinkle (our pattern, in place of the lab's sweep) and inverts the cell */ .rows{margin-top:30px;display:flex;flex-direction:column} .rowi{position:relative;overflow:hidden;min-height:78px;display:grid;grid-template-columns:56px 1fr auto minmax(116px,auto); gap:0 20px;border:1px dashed var(--linestrong);background:var(--panel);align-items:center; text-decoration:none;color:var(--txt)} .rowi + .rowi{border-top-width:0} .rowi .wipe{position:absolute;inset:0;opacity:0;clip-path:inset(0 100% 0 0);pointer-events:none} .rowi .wipe canvas{width:100%;height:100%} .rowi:hover{border-style:solid} .rowi:hover .wipe{opacity:.6;clip-path:inset(0)} .rowi>*:not(.wipe){position:relative;z-index:1} .rowi .ix{align-self:stretch;display:flex;align-items:center;justify-content:center;color:var(--dim); font-size:10px;letter-spacing:.14em;border-right:1px dashed var(--line)} .rowi:hover .ix{color:var(--acc)} .rowi .role{font-family:var(--body);font-weight:600;font-size:16px} .rowi .meta{background:var(--cobalt);color:var(--txt);padding:8px 10px;font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;width:max-content} .rowi .open{align-self:stretch;display:flex;align-items:center;gap:14px;padding:0 24px; border-left:1px dashed var(--line);color:var(--mut);font-size:10px;letter-spacing:.18em;text-transform:uppercase} .rowi:hover .open{background:var(--txt);color:var(--bg);border-left-style:solid} .rowi .open .cx3{display:none} .rowi:hover .open .asvg{display:none} .rowi:hover .open .cx3{display:inline-block} /* ── measurement ticker (kit instrument pull, 2026-08-22): 82px rail, ruler tick clusters, ×3 tiling for the -33.333% loop, center signal DATUM with a square marker — replaces the process tape ── */ .ticker{position:relative;height:82px;background:var(--bg)} .tkm{height:100%;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .tk{display:flex;height:100%;width:max-content;align-items:center} .tk .w{display:flex;align-items:baseline;gap:12px;margin-right:34px;font-size:12px;letter-spacing:.22em; color:var(--mut);text-transform:uppercase;white-space:nowrap} .tk .w b{color:var(--dim);font-weight:400;font-size:10px;letter-spacing:.1em} .tk .ticks{width:130px;height:18px;flex:none;margin-right:34px;position:relative; background:repeating-linear-gradient(90deg,var(--linestrong) 0 1px,transparent 1px 11px)} .tk .ticks::after{content:'';position:absolute;inset:0; background:repeating-linear-gradient(90deg,transparent 0 54px,var(--dim) 54px 56px,transparent 56px 66px)} .tk-datum{position:absolute;left:52%;top:0;width:1px;height:100%;background:var(--acc); box-shadow:0 0 12px rgba(255,78,31,.55)} .tk-datum b{position:absolute;left:-5px;top:calc(50% - 5px);width:11px;height:11px;background:var(--acc)} /* ── footer (preserved · ramp = R-3 tri-tone, texture spend 3/3) ── */ .foot-strip{height:10px} .foot-strip canvas{width:100%;height:100%} .foot-draft{position:relative;display:flex;gap:48px;padding:48px var(--pad-x) 40px;overflow:hidden;min-height:440px} .fd-cols{display:flex;gap:64px;flex-wrap:wrap;z-index:1} .fd-cols .col{display:flex;flex-direction:column;gap:8px} .fd-cols .h{color:var(--dim);font-size:9px;letter-spacing:.18em;margin-bottom:6px;text-transform:uppercase} .fd-cols a{font-size:10px;letter-spacing:.14em;color:var(--mut);text-transform:uppercase;text-decoration:none} .fd-cols a:hover{color:var(--acc)} .fd-mark{position:absolute;right:var(--pad-x);top:50%;transform:translateY(-50%);width:min(430px,40vw);pointer-events:none} .fd-mark svg{display:block;width:100%;height:auto} .fd-mark text{font-family:var(--mono);fill:var(--dim);font-size:44px;letter-spacing:.12em} .tb-note{padding:8px 14px 8px 16px;border-top:1px solid var(--line);color:var(--mut);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} .tblock{display:grid;grid-template-columns:240px 1fr 1fr 1fr 1fr;border-top:1px solid var(--line)} .tb{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-width:0} .tb.lc{border-right:none} .tb .h{color:var(--dim);font-size:8px;letter-spacing:.18em;text-transform:uppercase} .tb .v{font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tb .v.ac{color:var(--acc)} .tb.wide{grid-column:span 2} .tb-mark{grid-row:1/3;padding:16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex} .wm-stack{display:inline-flex;flex-direction:column;align-self:flex-start} .wm-stack .n{font-family:var(--wm);font-weight:400;letter-spacing:.05em;line-height:1;display:block;margin-right:-.05em;font-size:30px;text-transform:uppercase} .wm-stack .q{display:flex;justify-content:space-between;width:100%;margin-top:5px;color:var(--mut);text-transform:uppercase;font-family:var(--mono);font-size:7px} .foot-base{display:flex;justify-content:space-between;gap:16px;padding:12px 14px 12px 16px;border-top:1px solid var(--line2);color:var(--dim);font-size:9px;letter-spacing:.14em;text-transform:uppercase;flex-wrap:wrap;align-items:center} .foot-base .chain{display:inline-flex;align-items:center;gap:10px} /* ── motion (stepped/linear only · gated) ─────────────────── */ @media(prefers-reduced-motion: no-preference){ .tk{animation:tick 30s linear infinite} .ticker:hover .tk{animation-play-state:paused} .rowi .wipe{transition:clip-path .35s steps(5),opacity .2s steps(3)} .ds-body{transition:grid-template-rows .22s linear} .ds-bar{transition:background .15s linear} .ds-bar .asvg{transition:transform .15s linear,color .15s linear} .cta2,.cta2 .c{transition:border-color .15s linear,color .15s linear} .nav a.it:not(.join)::after{transition:transform .2s linear} .cta3 .l3{transition:color .15s linear} } @keyframes tick{to{transform:translateX(-33.333%)}} @media(prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } /* ── responsive ────────────────────────────────────────────── */ @media(max-width:1100px){ .inf-grid{grid-template-columns:1fr} .loopstack{max-width:640px;margin-top:12px} } @media(max-width:1000px){ .ds-grid{grid-template-columns:1fr;padding-left:20px} .facband{grid-template-columns:1fr} } @media(max-width:640px){ .ds-bar{grid-template-columns:40px 1fr 30px;gap:12px;padding:14px 16px} .ds-st{display:none} .tcall-title{flex-wrap:wrap;gap:10px} .tcall-title .fl{display:none} } @media(max-width:1100px){ .join-art{display:none} } @media(max-width:1000px){ .vision-grid{grid-template-columns:1fr} .vmark{display:none} } @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;min-height:0} .hero-drawing{display:none} .hero-glyphs{left:30%;right:0;opacity:.35} .hero-copy{padding-right:var(--pad-x);padding-bottom:96px} /* single column: size the h1 from the real measure ("INDUSTRIALIZED." = 12.33em) */ .hero h1{font-size:calc((100vw - (2 * var(--gutter)) - (2 * var(--pad-x))) / 12.4)} } @media(max-width:840px){ .nav a.it{display:none} .nburger{display:flex;padding:0 18px} .nav{min-height:52px} .nav .brand{padding:0 16px;font-size:17px} } @media(max-width:860px){ .tblock{grid-template-columns:1fr 1fr} .tb-mark{grid-row:auto;grid-column:1/3;border-right:none} .tb.wide{grid-column:1/3;border-right:none} .tb.mc{border-right:none} } @media(max-width:820px){ .foot-draft{flex-direction:column;min-height:0} .fd-mark{position:static;transform:none;width:100%;max-width:380px;margin:12px auto 0} } @media(max-width:700px){ .hero-fog{height:120px} .hero-actions{flex-direction:column;align-items:stretch;gap:10px;max-width:340px} .hero-actions .cta1,.hero-actions .cta2{justify-content:space-between} .hero-actions .l{font-size:11px} .dspacer{grid-template-columns:auto 1fr auto} .dspacer small{display:none} .ticker{height:64px} } @media(max-width:700px){ .bleed img{min-height:170px;object-fit:cover;object-position:center bottom} /* centered platform copy is a desktop composition — left-set on phones */ #platform .stitle{margin-left:0;text-align:left} .plat-intro{margin-left:0;text-align:left} /* instrument cards leave the overlay: full-width plate under the drawing */ .ds-card{position:static;width:100%;margin-top:14px} .ds-head{font-size:8px;letter-spacing:.14em;padding:10px 14px} } @media(max-width:640px){ .tcall-title{justify-content:center;text-align:center} .tcall-title>span{width:100%} .plate .p3{flex-direction:column;gap:4px} .rowi{grid-template-columns:44px 1fr minmax(48px,auto)} .rowi .meta{display:none} .rowi .role{font-size:14.5px} .rowi .open{padding:0 16px;gap:0;font-size:0;letter-spacing:0} .layer{grid-template-columns:36px 1fr} }