/* GENERATED — do not edit. Body = comps/comp.css (the signed system, P1c v=p16); tail = site.ext.css (plumbing states only, no new design decisions). Regenerate with build_site.py. */ /* ═══════════════════════════════════════════════════════════════════════ CONVERGE INTELLIGENCE — THE COMP SYSTEM (P1c, 2026-07-21) The rendered TARGET the site gets built to match. Static presentation only — no plumbing. Brand fixed points: wordmark · Λ · Achieve Anything. · the green · Achieved. seal. Grammar: scenes with one dominant object, no dead gaps, fused proof, leaders-grade CTAs. (P1a playbook §4–5.) ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family:'Newsreader'; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/newsreader-500.woff2) format('woff2'); } @font-face { font-family:'Newsreader'; font-style:italic; font-weight:500; font-display:swap; src:url(/fonts/newsreader-500italic.woff2) format('woff2'); } @font-face { font-family:'Newsreader Display'; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/newsreader-display-500.woff2) format('woff2'); } @font-face { font-family:'Newsreader Display'; font-style:italic; font-weight:500; font-display:swap; src:url(/fonts/newsreader-display-500italic.woff2) format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/inter-regular.woff2) format('woff2'); } @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/inter-600.woff2) format('woff2'); } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/ibm-plex-mono-regular.woff2) format('woff2'); } *,*::before,*::after{box-sizing:border-box} body,h1,h2,h3,h4,p,dl,dd,figure,ul,ol{margin:0} img,svg,video{max-width:100%;display:block} ul[class],ol[class],ul[style],ol[style]{list-style:none;padding:0} :root{ --paper:#F4EFE6; --paper-lift:#FAF6ED; --fog:#EAE3D4; --ink:#191712; --body-c:#33312D; --graphite:#545047; --mute:#5D584C; --line:rgba(25,23,18,.14); --line-2:rgba(25,23,18,.24); --line-3:rgba(25,23,18,.40); --green:#17573F; --green-deep:#114231; --lit:#4CB98C; --room:#12100A; --room-panel:#0C0A06; --cream:#EFE8D8; --cream-dim:rgba(239,232,216,.74); --cream-faint:rgba(239,232,216,.48); --line-d:rgba(239,232,216,.14); --line-d2:rgba(239,232,216,.26); --serif:'Newsreader',Georgia,serif; --display:'Newsreader Display','Newsreader',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --wrap:1264px; --pad:clamp(1.25rem,4vw,2.75rem); --ctl:52px; --ease:cubic-bezier(.22,.61,.21,1); } html{-webkit-text-size-adjust:100%} body{background:var(--paper);color:var(--body-c);font:400 1.0625rem/1.66 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--ink);line-height:1.06;letter-spacing:-.01em} a{color:var(--green);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--green-deep)} em{font-family:var(--serif)} strong{color:var(--ink);font-weight:600} ::selection{background:rgba(23,87,63,.22)} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .mut{color:var(--mute)} /* ── type scale ── */ .d1{font-size:clamp(2.7rem,5.2vw,4.35rem)} /* page hero */ .d2{font-size:clamp(2.05rem,3.4vw,3.05rem)} /* scene head */ .d3{font-size:clamp(1.45rem,2.1vw,1.85rem)} /* card head */ .lede{font-size:clamp(1.1rem,1.45vw,1.25rem);line-height:1.62;max-width:34em} .serif-body{font-family:var(--serif);font-size:clamp(1.13rem,1.5vw,1.3rem);line-height:1.6;color:var(--ink)} .big-num{font-family:var(--display);font-size:clamp(6.5rem,14vw,11.5rem);line-height:.9;color:var(--ink);letter-spacing:-.03em} /* ── kicker rule (scene opener) ── */ .kick{display:flex;align-items:baseline;gap:1rem;font:400 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-bottom:2.6rem} .kick .n{color:var(--graphite)} .kick::after{content:"";flex:1;height:1px;background:var(--line);transform:translateY(-3px)} .kick.center{justify-content:center} .kick.center::before{content:"";flex:1;height:1px;background:var(--line);transform:translateY(-3px)} .room .kick{color:var(--lit)} .room .kick .n{color:var(--cream-faint)} .room .kick::after{background:var(--line-d)} /* ── buttons ── */ .btn{display:inline-flex;align-items:center;justify-content:center;background:var(--green);color:#F6F1E6;font:400 .84rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;padding:1.22rem 2.1rem 1.08rem;border:0;border-radius:2px;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:var(--ctl);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(25,23,18,.28),0 16px 34px -18px rgba(17,66,49,.6);transition:background .2s var(--ease)} .btn:hover{background:var(--green-deep);color:#F6F1E6} .btn-ghost{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--green);border:1px solid var(--line-3);font:400 .84rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;padding:1.22rem 2.1rem 1.08rem;border-radius:2px;text-decoration:none;min-height:var(--ctl);transition:border-color .2s var(--ease)} .btn-ghost:hover{border-color:var(--green);color:var(--green-deep)} .room .btn-ghost{color:var(--cream);border-color:var(--line-d2)} .cta-row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap} /* when a CTA pair wraps in a narrow rail, it stacks as one aligned block — never two ragged widths */ .cta-row.stackable{gap:.8rem} .cta-row.stackable>.btn,.cta-row.stackable>.btn-ghost{flex:1 1 100%} .rider{font:400 .8rem/1.5 var(--mono);color:var(--mute);letter-spacing:.02em} .room .rider{color:var(--cream-faint)} /* serif-body defaults to ink — invisible on the dark room (independent-judge break 2: the first-engagement terminus paragraph was ghost text). */ .room .serif-body{color:var(--cream-dim)} /* ── header ── */ .hd{position:sticky;top:0;z-index:50;background:rgba(244,239,230,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .hd-in{max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad);display:flex;align-items:center;gap:1.5rem;height:64px} .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)} .brand .lam{font-family:var(--sans);font-weight:600;font-size:1.15rem;color:var(--ink)} .brand .wm{font-family:var(--serif);font-size:1.06rem;letter-spacing:.005em;color:var(--ink)} .brand .creed{font-family:var(--serif);font-style:italic;font-size:.86rem;color:var(--green);border-left:1px solid var(--line-2);padding-left:.9rem;margin-left:.35rem} .nav{margin-left:auto;display:flex;align-items:center;gap:1.7rem;font:400 .74rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase} .nav a{color:var(--graphite);text-decoration:none} .nav a:hover,.nav a[aria-current]{color:var(--ink)} .nav .btn{padding:.85rem 1.35rem .75rem;min-height:0;font-size:.72rem} .nav a.btn{color:#F6F1E6} .nav a.btn:hover{color:#F6F1E6} /* ── scenes ── */ .scene{padding:clamp(3.2rem,5.5vw,5rem) 0} .scene-tight{padding:clamp(2.4rem,4vw,3.4rem) 0} .scene+.scene{border-top:1px solid var(--line)} .room{background:var(--room);color:var(--cream-dim)} .room h1,.room h2,.room h3{color:var(--cream)} .room a{color:var(--lit)} .room strong{color:var(--cream)} .well{background:var(--fog)} .band-green{background:var(--green-deep);color:var(--cream-dim)} .band-green h2,.band-green h3,.band-green strong{color:var(--cream)} .band-green a{color:var(--lit)} /* legibility on the green band: the kicker and the CTA pair must read at their intended rank */ .band-green .kick{color:var(--lit)} .band-green .kick .n{color:var(--cream-faint)} .band-green .kick::after{background:var(--line-d)} .band-green .btn{background:var(--cream);color:var(--green-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.3),0 16px 34px -18px rgba(0,0,0,.55)} .band-green .btn:hover{background:#FFFBF2;color:var(--green-deep)} .band-green .btn-ghost{color:var(--cream);border-color:var(--line-d2)} .band-green .btn-ghost:hover{border-color:var(--lit);color:var(--cream)} .band-green .rider{color:var(--cream-faint)} /* ── grid helpers ── */ .g{display:grid;gap:2.5rem} .g-70-30{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .g-60-40{grid-template-columns:minmax(0,3fr) minmax(0,2fr)} .g-50{grid-template-columns:repeat(2,minmax(0,1fr))} .g-40-60{grid-template-columns:minmax(0,2fr) minmax(0,3fr)} @media(max-width:900px){.g-70-30,.g-60-40,.g-50,.g-40-60{grid-template-columns:1fr}} /* ── column resolution: a supporting rail centres against a senior object ── */ .mid{align-self:center} /* ── hero ── */ .hero{padding:clamp(2.8rem,5vw,4.5rem) 0 clamp(2.2rem,3.8vw,3.4rem)} .hero .kick{margin-bottom:1.9rem} .hero h1{max-width:12.5em} .hero .lede{margin-top:1.6rem} .portrait{position:relative} .portrait img{width:100%;height:auto;filter:grayscale(1) contrast(1.04);border:1px solid var(--line-2)} .portrait figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;padding:.8rem .15rem 0;font-family:var(--serif);font-size:.98rem;color:var(--ink);flex-wrap:wrap} .portrait figcaption>span:first-child,.portrait figcaption{white-space:normal} .portrait figcaption span{font:400 .66rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} /* ── doors (home) ── */ .doors{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:1.5rem;margin-top:3rem} .door{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:236px;padding:1.9rem 2.1rem 1.7rem;background:var(--paper-lift);border:1px solid var(--line-2);text-decoration:none;color:var(--ink);overflow:hidden;transition:background .25s var(--ease),border-color .25s var(--ease)} .door .lam-ghost{position:absolute;right:1.1rem;top:.4rem;font-family:var(--sans);font-weight:600;font-size:7.5rem;line-height:1;color:rgba(25,23,18,.05);pointer-events:none} .door .k{font:400 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green)} .door .t{font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.08;margin:.9rem 0 1rem} .door .d{font-size:.95rem;color:var(--graphite);max-width:26em} .door .go{margin-top:1.5rem;font:400 .76rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--green)} .door:hover{background:var(--green-deep);border-color:var(--green-deep)} .door:hover .t{color:var(--cream)} .door:hover .d{color:var(--cream-dim)} .door:hover .go,.door:hover .k{color:var(--lit)} .door:hover .lam-ghost{color:rgba(239,232,216,.07)} .door.primary{background:var(--green-deep);border-color:var(--green-deep)} .door.primary .t{color:var(--cream)} .door.primary .d{color:var(--cream-dim)} .door.primary .k,.door.primary .go{color:var(--lit)} .door.primary .lam-ghost{color:rgba(239,232,216,.07)} .door.primary:hover{background:var(--green)} @media(max-width:760px){.doors{grid-template-columns:1fr}.door{min-height:170px}} /* ── proof band (fused chips) ── */ .pband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-lift)} .pband-in{max-width:var(--wrap);margin-inline:auto;padding:1.35rem var(--pad);display:flex;align-items:center;gap:.85rem 2.4rem;flex-wrap:wrap} .chip{display:flex;flex-direction:column;gap:.3rem;min-width:150px} .chip .who{font:400 .68rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--graphite)} .chip .what{font-family:var(--serif);font-size:1.02rem;color:var(--ink);white-space:nowrap} .pband .live{flex:1 0 100%;margin-left:0;font:400 .72rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase} .pband .live a{text-decoration:none;border-bottom:1px solid var(--line-2)} .pband.on-room{background:transparent;border-color:var(--line-d)} .pband.on-room .who{color:var(--cream-faint)} .pband.on-room .what{color:var(--cream)} @media(max-width:900px){.pband-in{gap:1.4rem}} /* ── the board (artifact object) ── */ .board{background:var(--room-panel);border:1px solid var(--line-d2);border-radius:3px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);overflow:hidden} .board-hd{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.35rem;border-bottom:1px solid var(--line-d);font:400 .74rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cream)} .board-hd::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lit);box-shadow:0 0 8px var(--lit)} .board-meta{padding:.8rem 1.35rem;border-bottom:1px solid var(--line-d);font:400 .68rem/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cream-faint)} .brow{display:grid;grid-template-columns:minmax(9.5em,auto) 1fr;gap:1.2rem;align-items:baseline;padding:1.02rem 1.35rem;border-bottom:1px solid var(--line-d);font-family:var(--mono);font-size:.85rem;line-height:1.55} .brow:last-child{border-bottom:0} .brow .k{color:var(--cream)} .brow .v{color:var(--cream-dim);text-align:right} .brow .v b{color:var(--lit);font-weight:400} .board-foot{padding:1.05rem 1.35rem;background:rgba(239,232,216,.03);border-top:1px solid var(--line-d);font-size:.9rem;color:var(--cream-dim)} .margin-note{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--cream);opacity:.85} /* ── the living organism (proof artifact — replaces the morning board) ── */ .organism{background:var(--room-panel);border:1px solid var(--line-d2);border-radius:3px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);overflow:hidden} .org-hd{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.35rem;border-bottom:1px solid var(--line-d);font:400 .74rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cream)} .org-hd::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lit);box-shadow:0 0 8px var(--lit)} .org-hd .m{margin-left:auto;color:var(--cream-faint);letter-spacing:.1em} .org-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0} .org-schema{padding:1.6rem 1.2rem 1.2rem;border-right:1px solid var(--line-d)} .org-rows{display:grid;align-content:center} .orow{display:grid;grid-template-columns:minmax(6.5em,auto) 1fr;gap:1rem;align-items:baseline;padding:.92rem 1.35rem;border-bottom:1px solid var(--line-d);font-family:var(--mono);font-size:.8rem;line-height:1.55} .orow:last-child{border-bottom:0} .orow .k{color:var(--cream)} .orow .v{color:var(--cream-dim)} .orow .v b{color:var(--lit);font-weight:400} .org-foot{grid-column:1/-1;padding:1.05rem 1.35rem;background:rgba(239,232,216,.03);border-top:1px solid var(--line-d);font-size:.9rem;color:var(--cream-dim)} .organism.compact .org-body{grid-template-columns:1fr} .organism.compact .org-schema{border-right:0;border-bottom:1px solid var(--line-d)} @media(max-width:900px){.org-body{grid-template-columns:1fr}.org-schema{border-right:0;border-bottom:1px solid var(--line-d)}} /* ── film object ── */ .film{position:relative;border:1px solid var(--line-d2);border-radius:3px;overflow:hidden;background:#000;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)} .film img{width:100%;height:auto;opacity:.88} .film .play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;padding:1.1rem} /* clear of the poster's own type */ .film .play span{display:flex;align-items:center;gap:.6rem;font:400 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:rgba(12,10,6,.55);border:1px solid var(--line-d2);padding:.85rem 1.3rem;border-radius:2px;backdrop-filter:blur(4px)} .film .play span::before{content:"▶";font-size:.6rem;color:var(--lit)} .film-cap{margin-top:.9rem;font:400 .7rem/1.6 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--cream-faint)} .film-cap b{color:var(--cream);font-weight:400} /* ── stat tiles ── */ .tiles{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);background:var(--paper-lift)} .tile{padding:1.7rem 1.6rem 1.5rem;border-right:1px solid var(--line)} .tile:last-child{border-right:0} .tile .k{font:400 .64rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);min-height:2.1em} .tile .v{font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.45rem);line-height:1.05;color:var(--ink);margin-top:.45rem;letter-spacing:-.01em} .tile .s{font:400 .68rem/1.55 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:.55rem} @media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}.tile:nth-child(2n){border-right:0}.tile:nth-child(-n+2){border-bottom:1px solid var(--line)}} /* ── wall rows (fused) ── */ .wall{border-top:1px solid var(--line-2)} .wrow{display:grid;grid-template-columns:minmax(352px,2.9fr) minmax(0,5fr) minmax(150px,1.5fr);gap:2rem;align-items:center;padding:1.55rem 0;border-bottom:1px solid var(--line);min-height:104px} .wrow .who{display:flex;align-items:center;gap:.9rem} .wrow .who img{flex:0 0 auto} .wrow .who img{height:auto;width:auto;max-height:30px;max-width:118px;opacity:.9;filter:grayscale(1)} /* optical size: round/square marks carry less width, so they get height back; broad wordmarks lose a little */ .wrow .who img[src*="doe-ink"],.wrow .who img[src*="solano"]{max-height:40px} .wrow .who img[src*="nike"]{max-height:24px} .wrow .who img[src*="viacom"]{max-height:26px} .wrow .who .nm{font-family:var(--serif);font-size:1.12rem;color:var(--ink);text-wrap:balance} .wrow .claim{font-size:.98rem;color:var(--graphite)} .wrow .claim a{white-space:nowrap} .wrow .num{font-family:var(--display);font-size:1.5rem;color:var(--ink);text-align:right;line-height:1.15} .wrow .num span{display:block;font:400 .62rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)} .achv{font-family:var(--serif);font-style:italic;color:var(--green)} @media(max-width:900px){.wrow{grid-template-columns:1fr;gap:.6rem}.wrow .num{text-align:left}} /* ── logo strip: one even row at full measure; a plain left-set wrap below it ── */ .logo-strip{display:flex;align-items:center;flex-wrap:wrap;gap:1.5rem 2.05rem;justify-content:space-between} @media(max-width:1160px){.logo-strip{justify-content:flex-start;gap:1.4rem 1.9rem}} /* ── contract cards ── */ .contract{background:var(--paper-lift);border:1px solid var(--line-3);outline:1px solid var(--line);outline-offset:4px;padding:2.4rem 2.5rem 2.2rem;position:relative} /* .contract .stamp RETIRED (S1 done-right pass, operator iPhone evidence 2026-07-24): the absolute chip collided with the card heading at narrow widths, and it only repeated the heading's own words. Decoration that can collide is decoration we don't need. */ /* tracked-uppercase links (the site-wide inline pattern: an uppercase mono wrapper at line-height 1 + a border-bottom anchor): wrapped lines collided with their underlines at narrow widths. The anchor now sets the line box. */ p[style*="text-transform:uppercase"] a{line-height:1.9} .contract h3{font-size:clamp(1.6rem,2.3vw,2.05rem);margin-bottom:1rem} .contract .serif-body{max-width:30em} .terms-list{margin-top:1.4rem} .terms-list li{display:grid;grid-template-columns:2.2rem 1fr;gap:.6rem;padding:.85rem 0;border-top:1px solid var(--line);font-size:.98rem} .terms-list li:first-child{border-top:0} .terms-list .tn{font:400 .72rem/1.9 var(--mono);color:var(--mute)} .price-line{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-family:var(--serif);font-size:1.1rem;color:var(--ink)} .price-line .fig{font:400 .95rem/1 var(--mono);background:var(--fog);border:1px solid var(--line-2);padding:.4rem .55rem .3rem;border-radius:2px;color:var(--ink)} /* ── security chips ── */ .sec-card{background:var(--fog);border:1px solid var(--line-2);padding:2.1rem 2.3rem} .sec-card h3{font-size:clamp(1.45rem,2vw,1.8rem);max-width:11em} .sec-list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem} .sec-list li{font:400 .72rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-2);background:var(--paper-lift);padding:.72rem .85rem .6rem;border-radius:2px} /* ── path cards (owner mirror) ── */ .paths{display:grid;gap:1.1rem} .path{display:grid;grid-template-columns:5.2rem minmax(0,2fr) minmax(0,3fr);gap:1.6rem;align-items:start;background:var(--paper-lift);border:1px solid var(--line);padding:1.6rem 1.9rem;transition:border-color .2s var(--ease)} .path:hover{border-color:var(--line-3)} .path .pn{font:400 .68rem/2.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--mute)} .path h3{font-size:clamp(1.3rem,1.8vw,1.6rem)} .path .tag{font:400 .62rem/2 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--green);display:block} .path .hook{font-family:var(--serif);font-size:1.08rem;color:var(--ink)} .path .entries{margin-top:.65rem;font:400 .74rem/1.8 var(--mono);letter-spacing:.05em;color:var(--graphite)} .path .more{margin-top:.6rem;font:400 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green)} @media(max-width:900px){.path{grid-template-columns:1fr;gap:.6rem}.path .pn{line-height:1.4}} /* ── pull quote ── */ .pull{border-left:3px solid var(--green);padding:.4rem 0 .4rem 2rem;max-width:44em} .pull .q{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.2;color:var(--ink)} .pull .a{margin-top:1rem;font-size:1rem;color:var(--graphite);max-width:40em} /* ── figures (74% / 88%) ── */ .figure-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:center} .figure-scene .src{font:400 .68rem/1.7 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-top:1rem} .figure-scene .src a{color:inherit} @media(max-width:900px){.figure-scene{grid-template-columns:1fr;gap:1.2rem}} /* ── forms ── */ .form-panel{background:var(--paper-lift);border:1px solid var(--line-2);padding:2.3rem 2.4rem;box-shadow:0 26px 60px -38px rgba(25,23,18,.4)} .form-panel label{display:block;font:400 .68rem/1.6 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--graphite);margin:1.15rem 0 .3rem} .form-panel label:first-of-type{margin-top:0} .fi{width:100%;background:#fff;border:1px solid var(--line-2);border-radius:2px;padding:.85rem .9rem;font:400 1rem/1.4 var(--sans);color:var(--ink);min-height:var(--ctl)} textarea.fi{min-height:0} select.fi{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--graphite) 50%),linear-gradient(135deg,var(--graphite) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat} .form-panel .btn{width:100%;margin-top:1.6rem} .form-note{margin-top:.9rem;font-size:.85rem;color:var(--mute)} .check{display:flex;gap:.7rem;align-items:flex-start;border:1px solid var(--line-2);background:var(--fog);padding:.95rem 1rem;border-radius:2px;margin-top:1.15rem;font-size:.92rem;color:var(--ink)} .check input{margin-top:.2rem} /* ── FAQ ── */ .faq{border-top:1px solid var(--line-2)} .faq-item{border-bottom:1px solid var(--line);padding:1.5rem 0} .faq-item .q{display:flex;justify-content:space-between;gap:2rem;font-family:var(--serif);font-size:1.18rem;color:var(--ink)} .faq-item .q::after{content:"+";font-family:var(--mono);color:var(--green)} .faq-item.open .q::after{content:"–"} .faq-item .a{margin-top:.9rem;max-width:52em;color:var(--body-c)} .faq-item:not(.open) .a{display:none} /* ── directory / case cards ── */ .dir{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem} .dcard{display:flex;flex-direction:column;justify-content:space-between;min-height:134px;background:var(--paper-lift);border:1px solid var(--line-2);padding:1.4rem 1.5rem;text-decoration:none;color:var(--ink);transition:border-color .2s var(--ease)} .dcard:hover{border-color:var(--green)} .dcard .nm{font-family:var(--serif);font-size:1.14rem;line-height:1.25} .dcard .go{font:400 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-top:1rem} .dcard.empty{border-style:dashed;background:transparent} .dcard .sum{font-size:.87rem;color:var(--graphite);margin-top:.5rem} @media(max-width:1000px){.dir{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.dir{grid-template-columns:1fr}} /* ── case page grammar ── */ .case-block{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,3.2fr);gap:2.5rem;padding:2.6rem 0;border-top:1px solid var(--line)} .case-block .lbl{font:400 .7rem/1.8 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--green)} .case-block .serif-body{max-width:38em} .bridge{border:1px solid var(--line);background:var(--paper-lift);padding:1.3rem 1.5rem;font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--graphite)} @media(max-width:800px){.case-block{grid-template-columns:1fr;gap:.7rem}} /* ── steps ── */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .step{background:var(--paper-lift);border:1px solid var(--line);padding:1.5rem 1.6rem} .step .sn{font:400 .68rem/1 var(--mono);letter-spacing:.15em;color:var(--mute)} .step h3{font-size:1.22rem;margin:.7rem 0 .45rem} .step p{font-size:.94rem;color:var(--graphite)} @media(max-width:860px){.steps{grid-template-columns:1fr}} /* ── footer ── */ .ft{border-top:1px solid var(--line-2);background:var(--fog);padding:3.2rem 0 2.6rem;margin-top:0} .ft-in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .ft .creed{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink)} .ft nav{display:flex;flex-wrap:wrap;gap:1.3rem;margin:1.4rem 0 1.6rem;font:400 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase} .ft nav a{color:var(--graphite);text-decoration:none} .ft nav a:hover{color:var(--ink)} .ft .fine{font-size:.8rem;color:var(--mute)} /* ── sticky owner CTA (mobile) ── */ .sticky-cta{display:none} @media(max-width:760px){ .sticky-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:rgba(244,239,230,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line-2);padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));align-items:center;gap:1rem} .sticky-cta .btn{flex:1;padding:1rem .5rem .9rem} .sticky-cta .rider{font-size:.62rem;line-height:1.4;max-width:9.5em} body.has-sticky{padding-bottom:76px} } @media(max-width:480px){ .nav .btn{padding:.7rem .75rem .6rem;font-size:.6rem;letter-spacing:.09em} .sticky-cta .rider{display:none} } /* ── mobile polish ── */ @media(max-width:860px){ .g[style*="repeat(3"]{grid-template-columns:1fr !important} } @media(max-width:760px){ .hd-in{height:auto;min-height:56px;flex-wrap:wrap;padding-top:.6rem;padding-bottom:.65rem;row-gap:.55rem} .hd{position:static} .brand .wm{font-size:.92rem;white-space:nowrap} .brand .lam{font-size:1rem} .brand{order:0;flex:0 0 100%} .nav{display:contents} .nav a:not(.btn){order:1;display:inline-block;font-size:.64rem;letter-spacing:.11em} .nav a.btn{order:2;flex:0 0 100%;margin-left:0;justify-content:center;text-align:center} .nav .btn{padding:.75rem 1rem .65rem;font-size:.66rem} .brand .creed{display:none} .comp-note{display:none} .scene{padding:2.6rem 0} .hero{padding:2.6rem 0 2.4rem} .g{gap:1.8rem} .doors{margin-top:2rem} .contract{padding:1.7rem 1.4rem 1.5rem} .sec-card{padding:1.6rem 1.4rem} .form-panel{padding:1.7rem 1.3rem} .brow{grid-template-columns:1fr;gap:.15rem} .brow .v{text-align:left} .pband-in{padding-block:1.1rem} .chip{min-width:126px} .chip .what{white-space:normal;font-size:.94rem} } /* ── the "Achieve ___" device (endcard prototype — operator ruling; header lockup stays static) ── */ .creedcard{padding:clamp(3rem,5.5vw,4.5rem) 0;border-top:1px solid var(--line);text-align:center} .creedcard .lam-mark{font-family:var(--sans);font-weight:600;font-size:1.4rem;color:var(--green);margin-bottom:1.2rem} .creed-line{font-family:var(--display);font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1.1;color:var(--ink);display:inline-block;text-align:left} .rotor{display:inline-grid;vertical-align:baseline;min-width:5.15em} /* = the widest word ("the number."); no dead trailing measure */ .rotor span{grid-area:1/1;opacity:0;transform:translateY(8px);animation:rotorword 15s infinite var(--ease);font-style:italic;color:var(--green)} .rotor span:nth-child(1){animation-delay:0s} .rotor span:nth-child(2){animation-delay:3s} .rotor span:nth-child(3){animation-delay:6s} .rotor span:nth-child(4){animation-delay:9s} .rotor span:nth-child(5){animation-delay:12s} .rotor .static-word{display:none} @keyframes rotorword{ 0%{opacity:0;transform:translateY(8px)} 1.6%{opacity:1;transform:translateY(0)} 20%{opacity:1;transform:translateY(0)} 21.6%{opacity:0;transform:translateY(-8px)} 100%{opacity:0;transform:translateY(8px)} } @media(prefers-reduced-motion:reduce){ .rotor span{animation:none;opacity:0} .rotor .static-word{display:block;opacity:1;transform:none} } @media(max-width:760px){ .creedcard{padding:3rem 0} .creed-line{font-size:clamp(1.7rem,8vw,2.2rem)} .creed-line,.rotor{max-width:100%} } /* ═══════════════════════════════════════════════════════════════════════ SITE EXTENSION — Phase 2 build-to-match. PLUMBING STATES ONLY. Nothing here introduces a design decision the signed comp set didn't already make; every rule below exists to give a comp-rendered element its behaviour (disclosure, form states, embed mount, motion, print) or to carry the comp system onto the pages that were never comped (notes, architecture, legal, receipts). ═══════════════════════════════════════════════════════════════════════ */ /* ── skip link + focus discipline ── */ .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cream);padding:.8rem 1.2rem;font:400 .78rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase} .skip:focus{left:.6rem;top:.6rem} :focus-visible{outline:2px solid var(--green);outline-offset:3px} .btn:focus-visible,.btn-ghost:focus-visible{outline-offset:4px} /* ── the brand mark ── The ratified Λ is artwork, not a glyph: the typeface's Lambda renders an ornamented apex. Sized in em so it inherits the exact scale of the text it replaced at every instance. One artwork, zero variants. */ .lam .mk,.lam-ghost .mk,.lam-mark .mk,.ft .creed .mk{ width:1em;height:1em;display:inline-block;vertical-align:-.085em;fill:currentColor} .lam-ghost .mk{width:1em;height:1em} .ft .creed .mk{width:.9em;height:.9em;vertical-align:-.06em} /* ── motion layer (motion.js tags; nothing is born hidden) ── */ .rv{opacity:0;transform:translateY(14px)} .rv.in{opacity:1;transform:none;transition:opacity .62s var(--ease),transform .62s var(--ease)} @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}} /* ── the disclosure (comp affordance -> working panel) ── No-JS: the panel is OPEN and the toggle is inert, so every word is always readable without script. capture.js closes it and arms it. */ .restage{margin:0} .restage-toggle{display:inline-block;background:none;border:0;padding:0;cursor:pointer; font:400 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green); border-bottom:1px solid var(--line-2);text-align:left} .restage-toggle:hover{color:var(--green-deep);border-bottom-color:var(--line-3)} .restage-toggle .rt-label::before{content:"+ "} .restage[data-open] .restage-toggle .rt-label::before{content:"\2212 "} .room .restage-toggle,.band-green .restage-toggle{color:var(--lit);border-bottom-color:var(--line-d2)} .room .restage-toggle:hover,.band-green .restage-toggle:hover{color:var(--cream)} .restage-panel{margin-top:1.1rem;max-width:44em} .restage-panel > * + *{margin-top:.9rem} .restage-panel p{font-size:.98rem;line-height:1.7} .restage-panel .turn{color:var(--ink)} html.cij .restage:not([data-open]) .restage-panel{display:none} /* the path cards' affordance keeps its comp position and type */ .path .restage{margin-top:auto} .path .restage-toggle.more{font:400 .7rem/1 var(--mono);letter-spacing:.12em;color:var(--green);border-bottom:0} .path .restage-panel{margin-top:.8rem;font-size:.92rem} /* ── forms: states the comp shows at rest ── */ .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none} form.form-panel{display:block} .sub-form{align-items:flex-start} .sub-form .fi{flex:1 1 12rem;min-width:0} [data-form-error],[data-form-success]{margin-top:.7rem;font-size:.9rem} [data-form-error]{color:#8C2F2F} [data-form-success]{color:var(--green)} .band-green [data-form-error]{color:#F0B4B4} .band-green [data-form-success]{color:var(--lit)} button.btn[disabled]{opacity:.6;cursor:default} [data-upnote]{display:block;margin-top:.5rem;font-size:.88rem;color:var(--mute)} /* the display:block above defeats the UA's [hidden] rule — the up-note was rendering unconditionally between the size picker and the next field (S1 follow-on mobile QA). It shows only once a routing size is chosen. */ [data-upnote][hidden]{display:none} /* THE CLASS, not the instance (independent-judge break 1, 2026-07-24): any author display rule silently defeats the [hidden] attribute — it hit [data-upnote] first, then .price-line's display:flex exposed all three door-priced variants at once. hidden now always means hidden. */ [hidden]{display:none!important} /* ── the booking embed: the comp's designed calendar IS the pre-paint state; Calendly replaces it wholesale once the iframe proves it painted (capture.js). Fallback never disappears until then. ── */ .book-embed{display:flex;flex-direction:column} .book-embed .cal iframe{width:100%;min-height:660px;border:0;display:block} /* capture.js appends the Calendly widget INSIDE the mount, so the designed month grid must retire the moment the real one arrives — his ruling: the live embed replaces it wholesale. The "open it directly" row stays: it is the visitor's escape hatch either way. If Calendly never speaks, the 4s watchdog collapses the mount and the fallback form is still there. */ .cal.ci-painted{min-height:0} .cal.ci-painted .cal-body{display:none} .cal .calendly-inline-widget{border-top:1px solid var(--line)} /* pre-paint: the injected widget boots INVISIBLY over the designed grid — absolute (no layout footprint) + opacity:0 (NOT display/zero-height, which park the iframe — the original embed-void root cause — and NOT visibility: hidden, which Chrome propagates cross-origin and Calendly's app then defers its mount forever; live-verified 2026-07-24). pointer-events:none keeps the designed grid interactive underneath. The grid retires only on calendly's own message — true proof of paint. (S1 follow-on) */ .cal:not(.ci-painted) .calendly-inline-widget{position:absolute;inset:0;height:100%!important;opacity:0;pointer-events:none} .cal:not(.ci-painted) .calendly-inline-widget iframe{min-height:0;height:100%} .ci-collapsed{height:0!important;min-height:0!important;overflow:hidden;border:0!important;box-shadow:none!important;margin:0!important} [data-calendly-direct-row]{font:400 .72rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase} /* ── the film play control is a button, styled as the comp's chip ── comp.css sets `.film .play{position:absolute;inset:0}`, so a