'; inherits: false; initial-value: 0deg; }
@keyframes ck-sweep { to { --ck-a: 360deg; } }
html body a.btn.btn-rim {
--rim: conic-gradient(from var(--ck-a), #3A3A3A 0deg, #9A9A9A 40deg, #F7F7F7 70deg, #BDBDBD 100deg, #5A5A5A 140deg, #DADADA 175deg, #FFB59A 205deg, #FFFFFF 225deg, #9AA4B8 255deg, #C9D3EA 280deg, #4A4A4A 320deg, #3A3A3A 360deg);
--fill: var(--ink, #050505);
box-sizing: border-box; border: 2px solid transparent;
background: linear-gradient(var(--fill), var(--fill)) padding-box, var(--rim) border-box;
animation: ck-sweep 6s linear infinite; }
/* hover: no colour change (Erfan, 16 Oct: "on hover don't change color"); older hover rules turned it orange, so this wins */
html body a.btn.btn-rim:hover, html body a.btn.btn-rim:focus-visible { background: linear-gradient(var(--fill), var(--fill)) padding-box, var(--rim) border-box !important; color: #fff !important; }
html body a.btn.btn-light.btn-rim { --fill: #FFFFFF; }
html body a.btn.btn-light.btn-rim:hover, html body a.btn.btn-light.btn-rim:focus-visible { color: var(--ink, #050505) !important; }
@media (prefers-reduced-motion: reduce) { html body a.btn.btn-rim { animation: none; --ck-a: 30deg; } }
/* ==== parts/ds-fix-1016.css ==== */
/* Design-system audit fixes (16 Oct 2026). Source: scratchpad audit/design-system.md (rows 1-34), checked against
design-system/project/tokens.json + interaction.md. Loaded just before no-shadow.css (which stays last).
NOT touched here on purpose (Erfan approved the look; to be documented as components): the faded 1-5 process digits (#9),
the tilted question chips + their hover lift (#3), the tilted footer stickers / edge / sheen / hover (#4), the "That's us"
tag tilt (#5), the green / orange menu tags (#21), the Compare window-light band and its #ECECE9 ground (#22, not a token:
reported), client screenshots and logos, the sector scene pictures. */
/* ---------- buttons on the scale ---------- */
/* #1 "See all work" (subtle, small) → control-s 40px, 16px label, 16px side padding */
html body .wall .wall-cta .btn { box-sizing: border-box; height: 40px; min-height: 40px; font-size: 16px; font-weight: 500; padding: 0 16px; }
/* #2 FAQ / founder "Book a call" labels 14 → 16 (rim from btn-rim.css untouched: 2px border, border-box, stays 40px) */
html body .faq2 .fq-ask .btn, html body .founder2 .fl-cta .btn { font-size: 16px; }
/* #26 subtle (grey) buttons: fill only, no faint ring (same component as the menu "Explore all" bars) */
html body .btn-subtle, html body .mm-bar { box-shadow: none; }
/* #13 phone Menu / Close → control-s 40px */
html body .menu-btn { box-sizing: border-box; height: 40px; line-height: 24px; }
/* #10 process prev / next arrows: icon-only buttons are round */
html body .process2 .pc-nav button { border-radius: 50%; }
/* #29 hero pause: no glass; solid ink, icon-only hover fill accent-deep, one hover speed */
html body .hr-pause { -webkit-backdrop-filter: none; backdrop-filter: none; background: #050505; transition: opacity .4s cubic-bezier(.25,1,.5,1), background-color .4s cubic-bezier(.25,1,.5,1); }
html body .hr-pause:hover { background: #D23100; }
/* ---------- section titles: one h2 token (tokens.json h2: line-height 1.05, letter-spacing -0.035em) ---------- */
/* #6 + #7. !important because several sections set the title through higher-specificity font shorthands per breakpoint. */
html body h2.tt { line-height: 1.05 !important; letter-spacing: -0.035em !important; }
/* #7 hero-h1 line-height 1.02 */
html body h1.tt { line-height: 1.02; }
/* ---------- header ---------- */
/* #8 header links nav-text #4A4A4A at rest → ink on hover / open, 0.4s (interaction.md) */
html body .links .nl, html body .mm-btn { color: #4A4A4A; transition: color .4s cubic-bezier(.25,1,.5,1); }
html body .links .nl:hover, html body .mm-btn:hover, html body .mm.open .mm-btn { color: #050505; }
/* #14 phone menu: Services / Industries / Resources rows full width like Work / Pricing / About */
@media (max-width: 900px) { html body .nav.menu-open .mm-btn { box-sizing: border-box; width: 100%; justify-content: space-between; } }
/* #19 mega menu outcome line = menu-desc 14 / 400 / 1.35 */
html body .mm-item small { font-weight: 400; line-height: 1.35; }
/* #20 mega menu cells / video card: one hover speed */
html body .mm-item { transition: background-color .4s cubic-bezier(.25,1,.5,1); }
html body .mm-vid { transition: box-shadow .4s cubic-bezier(.25,1,.5,1); }
/* ---------- text ---------- */
/* #15 section intro lines = text-2 #444 */
html body .sectors .se-head > p, html body .svc .svc-head > p { color: #444444; }
/* #16 hero sub = hero-sub token 18/28 at every width */
html body .hero .hero-sub, html[data-radius] body .hero .hero-sub { font-size: 18px; line-height: 28px; }
/* #17 "Read the case study" = link-text 500, 24px line */
html body .cases .cs-read { font-weight: 500; line-height: 24px; }
/* #18 "Book a call directly" = link-text 16 */
html body .cl3 .cl3-switch, html body .cl3 .cl3-switch a { font-size: 16px; line-height: 24px; }
/* #11 sentence popovers (Compare reasons, footer sticker tips) 13 → 14/20; radius, caret, colours unchanged */
html body .cmp-why, html body .ft3 .ft-badges-mini .stk-tip, html body .ft3 .ft-badges .stk-tip { font-size: 14px; line-height: 20px; }
/* #12 founder stats snapped to the type scale: 24/32 (861-1100), 20/28 + 14/20 (521-860) */
@media (min-width: 861px) and (max-width: 1100px) { html body .fl-stats dt { font-size: 24px; line-height: 32px; } }
@media (min-width: 521px) and (max-width: 860px) {
html body .fl-stats dt { font-size: 20px; line-height: 28px; }
html body .fl-stats dd { font-size: 14px; line-height: 20px; } }
/* ---------- off-token colours → nearest token ---------- */
/* #23 sector card base #F4F3F1 → sheet */
html body .wi .se-card { background: #F6F6F6; }
/* #24 Compare row dividers #E3E3E3 → line (and the phone row ring, same colour) */
html body .cmp-row:not(.cmp-cols):not(.cmp-us) + .cmp-row::before { background: #E6E6E6; }
@media (max-width: 760px) { html body .cmp .cmp-row:not(.cmp-us) { box-shadow: inset 0 0 0 1px #E6E6E6; } }
/* #25 FAQ toggle ring #E0E0E0 → line (open state keeps its orange fill, no ring) */
html body .fq-list details:not([open]) summary::after { box-shadow: inset 0 0 0 1px #E6E6E6; }
/* #27 process band ground surface-dark #0B0B0B → ink #050505 (silk photo kept; overlay tinted in ink, same strengths) */
html body section.process2.pr-dark.pc { background-color: #050505; background-image: linear-gradient(rgba(5,5,5,.72), rgba(5,5,5,.58) 45%, rgba(5,5,5,.86)), url("/assets/img/process-silk.webp"); }
/* #28 progress bars: no 2px radius */
html body .pc-prog i { border-radius: 0; }
/* ---------- 8-point grid ---------- */
/* #30 case chips 26 → 24 */
html body .cases .cs-chips li { line-height: 16px; padding-top: 4px; padding-bottom: 4px; }
/* #31 footer time chips 30 → 32 */
html body .ft3 .ftl-time { box-sizing: border-box; height: 32px; display: inline-flex; align-items: center; }
/* #32 closing bands on the section gap (128 / 96 / 64) */
html body .cl3 .cl3-ai { padding-top: var(--section-gap); }
html body .cl3 .cl2-in { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
/* #33 footer panel padding snapped to 8px */
html body .ft3 .ft-panel { padding-top: round(nearest, calc(100cqi / 4.12 * 0.21 + 32px), 8px); padding-bottom: round(nearest, calc(100cqi / 4.12 * 0.21 + 32px), 8px); }
@media (max-width: 760px) { html body .ft3 .ft-panel { padding: round(nearest, calc(100cqi / 4.12 * 0.21 + 32px), 8px) 24px 8px; } }
/* #34 More work: title → content 64 / 48 / 40 (the rows keep their 8px hover room, so the head gives it back) */
html body .wall .wall-head { margin-bottom: 56px; }
@media (max-width: 1100px) { html body .wall .wall-head { margin-bottom: 40px; } }
@media (max-width: 760px) { html body .wall .wall-head { margin-bottom: 32px; } }
/* founder stat captions: #6B6B6B is the menu-description token only; body text on white → #555 */
html body .fl .fl-stats dd, html body .founder2 dd { color: #555; }
/* --- 16 Oct, design-system v2 conflicts closed --- */
/* process step digits: line token at rest and on hover */
html body .pc-num, html body .pc-card:hover .pc-num { color: #E6E6E6; }
/* sector card hover hairline → mute-d token */
html body .wi .se-card:hover, html body .wi .se-card:focus-visible { box-shadow: inset 0 0 0 1px #A3A3A3; }
/* every primary (ink) button keeps its fill on hover, like Book a call; audit button side padding 24 */
html body .ck-form .btn-dark, html body .ck-form .btn-dark:hover, html body .ck-form .btn-dark:focus-visible,
html body .cl3 .cl3-send .btn-dark:hover, html body .cl3 .cl3-send .btn-dark:focus-visible { background: var(--ink, #050505) !important; color: #fff !important; }
html body .ck-form .btn-dark { padding: 0 24px; }
/* sector cards: the picture rose 6px on hover and showed a white strip at the bottom (Erfan, 16 Oct). The picture now reaches
6px below the card edge (hidden by the card's overflow), so the lift always has picture under it. */
html body .wi-art.ws .ws-scene { bottom: -6px; }
/* round icon buttons on ink (process arrows, footer socials): hover = fill only, no stroke (Erfan 16 Oct: "we don't need a stroke") */
html body .process2 .pc-nav button:hover, html body .process2 .pc-nav button:focus-visible,
html body .ft-social a:hover, html body .ft-social a:focus-visible { border-color: transparent; box-shadow: none; }
/* service card tags (16 Oct, Erfan: "Most booked" on Launch website, "New" on Website migration, same tag as the dropdown) */
html body #services .svc-txt > h3 .svc-tag { display: inline-block; margin-left: 12px; vertical-align: middle; position: relative; top: -3px; font: 500 12px/1 var(--text); letter-spacing: .06em; padding: 4px; }
@media (max-width: 760px) { html body #services .svc-txt > h3 .svc-tag { margin-left: 8px; top: -2px; } }
/* tag sits 12px from the title: word space (~8px at 32px) + 4px */
html body #services .svc-txt > h3 .svc-tag { margin-left: 4px; }
@media (max-width: 760px) { html body #services .svc-txt > h3 .svc-tag { margin-left: 2px; } }
/* ==== parts/a11y-fix-1016.css ==== */
/* Accessibility + responsive fixes (16 Oct 2026, code audit scratchpad audit/code-a11y.md, rows 2, 3, 4, 5, 6, 13, 30).
Loaded just before no-shadow.css (which stays last). No new colours except the darker Framer blue below. */
/* #2 marquees also stop while a link inside them has keyboard focus, so a keyboard user can reach a link that is not moving.
(A visible pause / play button per marquee is still open: needs Erfan.) */
.wall .wall-rows:focus-within .wall-track { animation-play-state: paused; }
.clients .cl-wall:focus-within .cl-track { animation-play-state: paused; }
/* #3 Compare at 761-860px: the table is still a table but the first column is narrow, so the tilted "That's us" tag ran over
Pentaclay's first tick. In that range the tag sits under the name, and the column headers may wrap instead of running together. */
@media (min-width: 761px) and (max-width: 860px) {
.cmp-us .cmp-name b { flex-direction: column; align-items: flex-start; gap: 4px; }
.cmp-cols span { white-space: normal; }
}
/* #4 Framer footer sticker: white on #0099FF was 3.0:1. #006FD6 is a darker Framer blue that passes 4.5:1 with white. */
:root { --badge-framer: #006FD6; }
/* the small note under it ("on Framer", "on Behance") was white at 86% opacity: about 4.1:1 on #006FD6 and 3.9:1 on Behance blue.
Full white gives 4.95:1 and 4.67:1. */
.stk-framer .stk-note, .stk-behance .stk-note { opacity: 1; }
/* #5 placeholders: #8A8A8A on white was 3.45:1 → #555 (design-system grey). The audit form keeps its visually hidden labels. */
.ck-fields input::placeholder, .cl3-form ::placeholder { color: #555555; }
/* #6 the process card track is now a keyboard stop (tabindex="0"); show the same white ring as the tabs and arrows */
.pc-track:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* #13 services stack: the last card could only pin 8px below the one before it, because a sticky card cannot leave its list's content
box (padding does not count). An empty last grid item adds one 32px gap of room inside the list; the negative margin gives 16px of it
back to the page, so the page grows by just the 16px the peek needs. */
@media (min-width: 861px) and (min-height: 720px) { #services .svc-list::after { content: ''; } #services .svc-list { margin-bottom: calc(var(--svc-o) - var(--svc-g)); } }
/* #30 contact radio chips: the focused chip gets a clear 2px ring (was a 1px inset line) */
html body .cl3-need input:focus-visible + span { outline: 2px solid var(--accent-deep, #D23100); outline-offset: 2px; }
/* ==== parts/titles-v2.css ==== */
/* Title styles from the identity concept, rolled onto the original page (16 Oct, Erfan: "roll the title fonts, all kind of title fonts,
in our original one: sizes, colours, everything"). One ink colour (the grey lead span turns ink), weight 600, tighter tracking.
H1 72/72 desktop (80 → 72, Erfan 17 Oct), 64 tablet, 48 phone · section H2 48/52 (40/44 tablet, 32/36 phone) · case headline 32/40 · card titles 600.
Alignment unchanged (left vs centre is a separate layout decision). */
html body h1.tt, html body .hero h1 { font-weight: 600 !important; font-size: 72px !important; line-height: 72px !important; letter-spacing: -0.045em !important; color: #050505 !important; }
html body h2.tt, html body section h2.tt { font-weight: 600 !important; font-size: 48px !important; line-height: 52px !important; letter-spacing: -0.035em !important; color: #050505 !important; }
html body .tt .tt-g, html body .tt .tt-g-d { color: inherit !important; }
html body .pr-dark h2.tt, html body .process2 h2.tt, html body .process2 h2.tt .tt-g { color: #FFFFFF !important; }
html body .cs-headline { font-weight: 600 !important; font-size: 32px !important; line-height: 40px !important; letter-spacing: -0.03em !important; color: #050505 !important; }
html body .cs-name h3, html body #services .svc-txt > h3, html body .se-title, html body .pc-card h3, html body .fq-ask h3, html body .cl3 h2, html body .ck-form h3 { font-weight: 600 !important; color: inherit; }
html body #services .svc-txt > h3 .svc-tag { font-weight: 500 !important; }
@media (max-width: 1100px) {
html body h1.tt, html body .hero h1 { font-size: 64px !important; line-height: 64px !important; }
html body h2.tt, html body section h2.tt { font-size: 40px !important; line-height: 44px !important; }
}
@media (max-width: 760px) {
html body h1.tt, html body .hero h1 { font-size: 48px !important; line-height: 52px !important; letter-spacing: -0.04em !important; }
html body h2.tt, html body section h2.tt { font-size: 32px !important; line-height: 36px !important; letter-spacing: -0.03em !important; }
html body .cs-headline { font-size: 24px !important; line-height: 32px !important; }
}
/* case headline one step down the scale (Erfan, 16 Oct): 32 → 24/32, phones 24 → 20/28 */
html body .cs-headline { font-size: 24px !important; line-height: 32px !important; letter-spacing: -0.02em !important; }
@media (max-width: 760px) { html body .cs-headline { font-size: 20px !important; line-height: 28px !important; } }
/* case headline like DesignMe's case cards (Erfan, 16 Oct: "title is smaller than ours, follow that style"): 20px 600, 28px line (8-pt) */
html body .cs-headline { font-size: 20px !important; line-height: 28px !important; letter-spacing: -0.01em !important; }
@media (max-width: 760px) { html body .cs-headline { font-size: 20px !important; line-height: 28px !important; } }
/* ==== parts/body-v2.css ==== */
/* Body text from the identity concept, rolled onto the original page (16 Oct, Erfan: "use the same font for the body text, same font
sizes"). Inter everywhere; one reading grey (text-2 #444) on white; sizes on the scale with 8-point line heights:
hero sub 20/28 · section intro 18/28 · service who-line 20/28 · body 16/24 · captions/small 14/20. Ink stays ink where it was. */
html body .hero .hero-sub { font-size: 20px !important; line-height: 28px !important; color: #444 !important; }
html body h2.tt + p, html body .se-head p, html body .svc-head p, html body .pr-head p:not(.pr-promise), html body .cl3 h2 + p { font-size: 18px !important; line-height: 28px !important; color: #444 !important; }
html body #services .svc-who { color: #444 !important; }
html body .cs-sum, html body .faq2 p, html body .fq-ask p, html body .checks2 .ck-form p, html body .founder2 p { color: #444 !important; }
html body .faq2 details > p { font-size: 16px; line-height: 24px; }
html body .hero small, html body .cases small, html body .cmp small, html body .se-dlv, html body .wall figcaption, html body .founder2 dd,
html body .fq-mail, html body .cs-chips li, html body #services small { font-size: 14px !important; line-height: 20px !important; }
html body .hero small, html body .cases small:not(.cs-stage), html body .cmp small, html body .se-dlv, html body .founder2 dd, html body .fq-mail, html body #services small { color: #444 !important; }
html body .faq2 summary { line-height: 28px !important; }
@media (max-width: 760px) { html body .hero .hero-sub { font-size: 18px !important; line-height: 28px !important; } html body h2.tt + p, html body .se-head p, html body .svc-head p { font-size: 16px !important; line-height: 24px !important; } }
html body .wall .wall-track figcaption { color: #444; }
/* every control uses the page's two text styles: browsers default buttons/inputs to Arial 13.3px (Erfan: "use these two kinds of fonts
everywhere, from drop-down to button") */
html body button, html body input, html body select, html body textarea, html body optgroup { font-family: var(--text, Inter, sans-serif); }
html body button:not([class*="btn"]):not(.cmp-m):not(.pc-nav button) { font-size: inherit; }
/* email links: no arrow; hover = text + underline turn orange (Erfan, 16 Oct). #D23100 on white (5:1), #FF3C00 on ink (5.6:1). */
html body a.mail-link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color .4s cubic-bezier(.25,1,.5,1), text-decoration-color .4s cubic-bezier(.25,1,.5,1); }
html body a.mail-link:hover, html body a.mail-link:focus-visible { color: #D23100 !important; text-decoration-color: #D23100; }
html body .ft3 a.mail-link:hover, html body .ft3 a.mail-link:focus-visible { color: #FF3C00 !important; text-decoration-color: #FF3C00; }
/* ==== parts/spacing-v2.css ==== */
/* Section rhythm: one gap between sections, 128 / 96 / 64. Title → content 64 / 48 / 40. */
:root { --sg2: 128px; }
@media (max-width: 1100px) { :root { --sg2: 96px; } }
@media (max-width: 760px) { :root { --sg2: 64px; } }
/* 17 Oct, Erfan: "if top has 100px, then bottom + next section's top should total 100px". ONE gap between sections: each section
has --sg2 above its content and nothing below; coloured bands keep --sg2 inside their colour at top AND bottom. */
html body section.clients, html body section.cases, html body section.sectors, html body section.svc, html body section.proof3,
html body section.wall, html body section.checks2, html body section.faq2, html body section.founder2, html body section.close2 { padding-top: var(--sg2) !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
html body section.process2, html body section.cmp { padding-top: var(--sg2) !important; padding-bottom: var(--sg2) !important; margin-top: var(--sg2) !important; margin-bottom: 0 !important; }
html body section.hero { padding-bottom: 0 !important; }
/* content column 1240 → 1200 (DesignMe: 1280 container with 40px sides = 1200 content). Erfan, 17 Oct: "let's do". */
:root { --wrap: 1200px; }
@media (min-width: 761px) {
html body .hero-stage, html body .hero-work, html body .cl-wall, html body .se-in, html body .svc-in, html body .pr-in, html body .ck-in,
html body .cmp-in, html body .fq-in, html body .cs-head, html body .cs-list, html body .cs-foot, html body .ft-top,
html body .ft-mark, html body .ft-panel, html body .ft-bottom, html body .nav-in, html body .mm-panel { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }
}
/* phone hero: the copy grid's column sized itself to the headline's longest no-break chunk (387px) and pushed the headline,
sub and Book a call past the screen edge. Column now fits the screen. */
html body .hero-copy { grid-template-columns: minmax(0, 1fr) !important; }
html body .hero h1 { max-width: 100%; overflow-wrap: break-word; }
/* proof cards equal (Erfan, 17 Oct: "both of these are not equal"): three equal columns, one quote size (24/32; 20/28 phones) */
html body .proof3 .p3-set { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html body .p3-set blockquote, html body .p3-set .p3-face blockquote, html body .p3-set .p3-cmt blockquote, html body .p3-set .p3-contra blockquote { font-size: 24px !important; line-height: 32px !important; letter-spacing: -0.02em !important; }
@media (max-width: 1100px) { html body .proof3 .p3-set { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 760px) { html body .p3-set blockquote, html body .p3-set .p3-face blockquote, html body .p3-set .p3-cmt blockquote, html body .p3-set .p3-contra blockquote { font-size: 20px !important; line-height: 28px !important; } }
/* no white gap between the contact band and the footer: the band carries its own padding, the section adds none below */
html body section.close2 { padding-bottom: 0 !important; }
/* case films were rendered for a 620x490 panel; keep any trim at the bottom (where the window bleeds by design), never the sides */
html body .cases .cs-composed .cs-view video, html body .cases .cs-composed .cs-view img, html body .cases .cs-composed video { object-position: 50% 0 !important; }
/* footer wordmark sized to its own 1200px column (was sized to the wider parent, so "Pentaclay" ran past the grid on the right) */
html body .ft3 .ft-mark { container-type: inline-size; }
html body .ft3 .ft-mark span { font-size: calc(100cqi / 4.1) !important; margin-bottom: calc(100cqi / 4.1 * -0.135) !important; }
/* wordmark ink (not its text box) fills the 1200 column exactly: P's left side-bearing (≈0.058em) pulled out, size so the y's
tail ends on the right edge. Measured in Chrome: ink 97→1287 at 292.68px in an 80→1280 column. */
html body .ft3 .ft-mark span { font-size: calc(100cqi / 4.066) !important; margin-left: -0.058em !important; margin-bottom: calc(100cqi / 4.066 * -0.135) !important; }
/* footer tiles: subtle hover, no white edge: tile lifts one shade, edge stays dark (Erfan, 17 Oct) */
html:not(#r5):not(#r4) body .ft3 .ft-badges-mini a.stk:hover, html:not(#r5):not(#r4) body .ft3 .ft-badges-mini a.stk:focus-visible { border-color: #2A2A2A !important; background: #404040 !important; }
/* wordmark smaller, fixed size (Erfan, 17 Oct: "just make the font smaller"): 256px max, never wider than the column */
html:not(#wm):not(#wm2) body .ft3 .ft-mark span { font-size: min(256px, calc((100vw - 32px) / 4.4)) !important; margin-left: -0.058em !important; margin-bottom: -0.135em !important; }
html:not(#wm):not(#wm2) body .ft3 .ft-mark span { font-size: min(264px, calc((100vw - 32px) / 4.3)) !important; } /* Erfan: "make the font 264" */
/* checklist fixes (17 Oct): proof band + contact band on the 1200 column; full 128/96 gap above the dark process band */
@media (min-width: 761px) {
html body .proof3 .p3-set, html body .proof3-head, html body .wall-head { max-width: calc(1200px + 2 * var(--gut)) !important; }
html body .cl3 .cl2-in { padding-left: max(var(--gut), calc((100% - 1200px) / 2)) !important; padding-right: max(var(--gut), calc((100% - 1200px) / 2)) !important; }
}
@media (min-width: 861px) and (min-height: 720px) { html body section.process2 { margin-top: calc(var(--sg2) + 16px) !important; } }
html:not(#wm):not(#wm2) body .ft3 .ft-mark span { font-size: min(272px, calc((100vw - 32px) / 4.2)) !important; } /* Erfan: "make this 272px" */
@media (min-width: 861px) and (min-height: 720px) { html body section.process2 { margin-top: var(--sg2) !important; } } /* stack removed: no +16 compensation */
/* ==== parts/radius-v2.css ==== */
/* Radius v2 after DesignMe (17 Oct, Erfan: "apply DesignMe's full set"): crisp controls inside soft containers.
Buttons, inputs, chips/tags 2px · cards and panels 12px · pictures inside cards 8px · round only for avatars, dots, icon buttons. */
html body a.btn, html body button.btn, html body .btn, html body .nav-cta, html body a.btn.btn-rim, html body .ck-form .btn-dark,
html body .cl3-send .btn-dark, html body .btn-subtle, html body .mm-review .mr-btn { border-radius: 2px !important; }
html body input, html body textarea, html body select { border-radius: 2px !important; }
html body .tag, html body .svc-tag, html body .cs-chips li, html body .cl3-need label span, html body .cl3-budget label span,
html body .cmp-tag, html body .ftl-time, html body .stk-tip, html body .cmp-why { border-radius: 2px !important; }
html body .se-card, html body .cs-case, html body #services .svc-card, html body .p3-set > *, html body .fq-ask, html body .faq2 details,
html body .cl3-form, html body form.ck-form, html body .cmp-us, html body .fl-card, html body .founder2 .fl-in, html body .pc-card,
html body .hero-work, html body .ft-panel, html body .mm-panel, html body .ft3 .ft-badges-mini a.stk { border-radius: 12px !important; }
html body .cs-panel, html body .cs-screen, html body .svc-art, html body .pc-art, html body .hi-frame, html body .cs-facts, html body .cs-quote { border-radius: 8px !important; }
html body .mm-btn, html body .menu-btn { border-radius: 2px !important; }
html body .cl3-ai-btns { border-radius: 2px !important; }
/* leftovers found with the menus open (17 Oct): device screens and menu row highlights are pictures/parts inside a 12px container → 8;
Ask AI icon buttons → 2. The question bubbles keep their approved 4px tail corner. */
html body .dv-tab img, html body .dv-phone img, html body .dv img { border-radius: 8px !important; }
html body .mm-item, html body .mm-panel .mm-item { border-radius: 8px !important; }
html body .cl3-ai-btns a, html body .close2 .cl3-ai-btns a { border-radius: 2px !important; }
/* case cards: the picture is flush with the card edge, so it takes NO radius of its own; the card (12px, overflow hidden) rounds only
its outer corners. Fixes the curve on the inner side next to the text (Erfan, 17 Oct). */
html body .cases .cs-case { overflow: hidden; }
html body .cases .cs-panel, html body .cases .cs-screen, html body .cases .cs-view, html body .cases .cs-view video, html body .cases .cs-view img { border-radius: 0 !important; }
/* NOCAP case card quote restored, compact so the card stays 490px and the film never crops (Erfan, 17 Oct) */
html body .cases .cs-quote-compact { margin-top: 24px; padding: 16px; gap: 12px; border-radius: 8px !important; }
html body .cases .cs-quote-compact blockquote { font-size: 16px !important; line-height: 24px !important; font-weight: 500; }
html body .cases .cs-quote-compact figcaption { gap: 12px; }
html body .cases .cs-quote-compact figcaption img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
html body .cases .cs-quote-compact figcaption b { font-size: 14px !important; line-height: 20px; display: block; }
html body .cases .cs-quote-compact figcaption small { font-size: 14px !important; line-height: 20px; color: #444; }
/* NOCAP card is taller (quote): fit the film to the panel width, top-aligned; the film's black site fills below, no side crop */
html body .cases .cs-case:has(.cs-quote-compact) .cs-view video, html body .cases .cs-case:has(.cs-quote-compact) .cs-view img { object-fit: contain !important; object-position: 50% 0 !important; }
html body .cases .cs-case:has(.cs-quote-compact) .cs-screen, html body .cases .cs-case:has(.cs-quote-compact) .cs-view { background: #000 !important; }
/* NOCAP: film anchored to the bottom, the gap above filled with the film's own top yellow (side → centre glow), so it reads as one picture */
html body .cases .cs-case:has(.cs-quote-compact) .cs-view video, html body .cases .cs-case:has(.cs-quote-compact) .cs-view img { object-position: 50% 100% !important; }
html body .cases .cs-case:has(.cs-quote-compact) .cs-screen, html body .cases .cs-case:has(.cs-quote-compact) .cs-view { background: radial-gradient(60% 100% at 50% 0%, #FED95D 0%, #FFC71F 70%) !important; }
html body .cases .cs-case:has(.cs-quote-compact) .cs-panel, html body .cases .cs-case:has(.cs-quote-compact) .cs-panel * :not(video):not(img) { background-color: transparent; }
html body .cases .cs-case:has(.cs-quote-compact) .cs-panel { background: radial-gradient(60% 100% at 50% 0%, #FED95D 0%, #FFC71F 70%) !important; }
html body .cases .cs-case:has(.cs-quote-compact) .cs-screen, html body .cases .cs-case:has(.cs-quote-compact) .cs-view { background: transparent !important; }
html body .cases .cs-case:has(.cs-quote-compact) video.cs-video { background: transparent !important; }
/* Radius v3 sweep (17 Oct, Erfan: "every element of Pentaclay should follow the same roundness rules: big cards, small cards, inner
cards, buttons, images, icons, illustrations, everything"). 2 = buttons, inputs, chips, tooltips, icon tiles · 8 = pictures and inner
boxes · 12 = cards and panels · round = avatars, dots, icon-only round buttons. Leftovers found by the full-page audit: */
html body .links .nl { border-radius: 2px !important; } /* nav text links (hover/focus shape) */
html body .cmp-ico, html body .cmp .cmp-ico, html body .cmp-ico.cmp-logo { border-radius: 2px !important; } /* compare icon tiles */
html body .cl3-ai-btns a::after, html body .ft-social a::after,
html body .ft3 .ft-badges-mini a.stk[data-tip]::after, html body .ft3 .ft-badges-mini .stk-tip { border-radius: 2px !important; } /* tooltips */
html body .cases .cs-read:focus-visible, html body .cases .cs-visit:focus-visible, html body .cases .cs-foot a:focus-visible { border-radius: 2px !important; }
html body .fq-list summary:focus-visible { border-radius: 8px !important; } /* ring sits inside the 12px FAQ row */
html body .cl3-panel { border-radius: 12px !important; } /* contact form panel = large panel */
html body .cmp-row:not(.cmp-cols) { border-radius: 12px !important; } /* compare rows are cards on phones */
html body .nav.menu-open .mm-panel { border-radius: 8px !important; } /* phone menu: submenu box inside the sheet */
/* SVG drawings: rx is in viewBox units, so the attribute values (r8 / r2 classes in the markup) give 8px / 2px at the 1440 layout
(services drawing 552px wide = 0.92, process drawing 384px = 0.96). Where the layout makes the drawing smaller or larger, these keep the
rendered corner near 8 / 2. Text bars and toggles stay fully round (they are lines, not boxes). */
/* ===== RADIUS v4 (17 Oct 2026, Erfan after measuring DesignMe: "DesignMe's cards are square. Then follow our button style") =====
EVERY box is 2px: cards, inner boxes, facts/quote boxes, FAQ rows, forms, menus and their rows, footer badges, proof/sector/case/
service/process cards, hero frame, device frames and screens, pictures inside cards, tags, tooltips, inputs, icon tiles, and the
boxes drawn inside the SVG illustrations (rendered 2px). Round (50%) ONLY for avatars, dots and icon-only round buttons. Pictures flush
with a card edge stay 0 (the card's overflow rounds the corner). Supersedes v2/v3 above: the :not(#r4) id weight beats every earlier
!important class rule. */
html:not(#r4) body :is(.btn, .nav-cta, .btn-subtle, .mm-btn, .menu-btn, .links .nl, .mm-review .mr-btn, .cl3-ai-btns, .cl3-ai-btns a,
input, textarea, select, .tag, .svc-tag, .cs-chips li, .cl3-need label span, .cl3-budget label span, .cmp-tag, .ftl-time, .stk-tip, .cmp-why,
.hero-work, .hi-frame, .hi-video, .hr-video, .cases .cs-case, .cs-facts, .cs-quote, .cs-quote-compact, .se-card, .svc-card, .svc-art,
.pc-card, .pc-art, .p3-card, .wall-link, .dv, .dv-tab, .dv-phone, .dv img, .dv-tab img, .dv-phone img, .ck-form, .cmp-row,
.cmp-ico, .fq-ask, .faq2 details, .fq-list details, .fl-card, .cl3-panel, .cl3-form, .ft3 .ft-badges-mini a.stk, .ft-badges a.stk, .ft-panel,
.mm-panel, .mm-item, .mm-vid, .mv-frame, .mm-bar) { border-radius: 2px !important; }
html:not(#r4) body :is(.ft3 .ft-badges-mini a.stk, .ft-badges a.stk, .cl3-ai-btns a, .ft-social a)::before,
html:not(#r4) body :is(.ft3 .ft-badges-mini a.stk, .ft-badges a.stk, .cl3-ai-btns a, .ft-social a)::after { border-radius: 2px !important; }
/* overlays that cover a whole card (sector hairline, sector hover tint, audit-form ring) take the card's own corner (4px in radius-v5.css) */
html:not(#r4) body :is(.se-card, .ck-form)::before, html:not(#r4) body :is(.se-card, .ck-form, .wi-art.ws)::after { border-radius: inherit !important; }
html:not(#r4) body :is(.fq-list summary, .links .nl, .mm-btn, .mm-item, .cases .cs-read, .cases .cs-visit, .cases .cs-foot a, .wall-link):focus-visible { border-radius: 2px !important; }
html:not(#r4) body .nav.menu-open .links { border-radius: 0 0 2px 2px !important; } /* phone menu sheet hangs from the header */
/* flush pictures: 0, the 2px card clips them */
html:not(#r4) body .cases :is(.cs-panel, .cs-screen, .cs-view, .cs-view video, .cs-view img) { border-radius: 0 !important; }
/* SVG drawings: every drawn box carries class r2; rx is in viewBox units, so these bands keep it at ~2px rendered at each layout width
(attribute values give 2px at 1440: services x0.92 -> 2.2, process x0.96 -> 2.1). Text lines <= 6px tall keep round ends. */
@media (max-width: 400px) { html body .svc-art rect.r2 { rx: 4px; } }
@media (min-width: 401px) and (max-width: 480px) { html body .svc-art rect.r2 { rx: 3.2px; } }
@media (min-width: 481px) and (max-width: 620px) { html body .svc-art rect.r2 { rx: 2.4px; } }
@media (min-width: 621px) and (max-width: 760px) { html body .svc-art rect.r2 { rx: 2px; } }
@media (min-width: 761px) and (max-width: 879px) { html body .svc-art rect.r2 { rx: 1.7px; } }
@media (min-width: 880px) and (max-width: 1040px) { html body .svc-art rect.r2 { rx: 3px; } }
@media (min-width: 1041px) and (max-width: 1199px) { html body .svc-art rect.r2 { rx: 2.5px; } }
@media (min-width: 1200px) and (max-width: 1339px) { html body .svc-art rect.r2 { rx: 2.3px; } }
@media (max-width: 400px) { html body .pc-art rect.r2 { rx: 3.2px; } }
@media (min-width: 401px) and (max-width: 480px) { html body .pc-art rect.r2 { rx: 2.5px; } }
@media (min-width: 481px) and (max-width: 620px) { html body .pc-art rect.r2 { rx: 1.9px; } }
@media (min-width: 621px) and (max-width: 760px) { html body .pc-art rect.r2 { rx: 1.5px; } }
@media (min-width: 761px) and (max-width: 899px) { html body .pc-art rect.r2 { rx: 2.7px; } }
/* Case films v6 (17 Oct, Erfan: "the bottom of the image is cropped", "too much padding on one side", "a different kind of yellow,
there's a cutoff line", "use yesterday's height"). Cards stay 490px tall (yesterday's height, all four). Each film is rendered at the
panel's exact 1440 shape, 1200x980 = 600x490 at 2x, with the browser window 64px in from all four edges, so object-fit: cover shows the
whole film with no crop and no fill. Centred, so any width where the panel is narrower (1280: 576x490) trims both sides equally and the
window stays fully inside. No CSS colour behind any film: overrides the NOCAP contain / bottom-anchor / yellow-gradient rules above. */
html body .cases .cs-panel video, html body .cases .cs-panel .cs-view img, html body .cases .cs-composed .cs-view video,
html body .cases .cs-composed .cs-view img, html body .cases .cs-composed video, html body .cases .cs-still .cs-view img,
html body .cases .cs-case:has(.cs-quote-compact) .cs-view video, html body .cases .cs-case:has(.cs-quote-compact) .cs-view img {
object-fit: cover !important; object-position: 50% 50% !important; }
html body .cases .cs-panel, html body .cases .cs-screen, html body .cases .cs-view, html body .cases video.cs-video,
html body .cases .cs-case:has(.cs-quote-compact) .cs-panel, html body .cases .cs-case:has(.cs-quote-compact) .cs-screen,
html body .cases .cs-case:has(.cs-quote-compact) .cs-view, html body .cases .cs-case:has(.cs-quote-compact) video.cs-video { background: transparent !important; }
/* NOCAP quote sits in the facts-box slot (bottom of the text column) and is no taller than a facts box (100px vs 92-112), so the NOCAP
card is 490 like the others: photo on the left, the quote (16/24, two lines) and one caption line beside it, 16px padding. */
html body .cases .cs-quote-compact { margin-top: auto !important; padding: 16px !important; display: grid !important; grid-template-columns: 32px minmax(0, 1fr);
column-gap: 12px; row-gap: 0; align-items: start; }
html body .cases .cs-quote-compact blockquote { grid-column: 2; grid-row: 1; margin: 0; }
html body .cases .cs-quote-compact figcaption { display: contents !important; }
html body .cases .cs-quote-compact figcaption img { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
html body .cases .cs-quote-compact figcaption span { grid-column: 2; grid-row: 2; display: block; line-height: 20px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .cases .cs-quote-compact figcaption b, html body .cases .cs-quote-compact figcaption small { display: inline !important; }
html body .cases .cs-quote-compact figcaption small::before { content: " · "; color: #444; }
/* ==== parts/radius-v5.css ==== */
/* Radius v5 (17 Oct, Erfan's table): cards 4px (process step card + its drawing panel, case, sector, service, proof cards);
FAQ rows, mega menu, footer badges 2px; buttons and tags 2px. Loaded after radius-v2.css so it wins. */
html:not(#r5):not(#r4) body .pc-card, html:not(#r5):not(#r4) body .process2 .pc-card, html:not(#r5):not(#r4) body .pc-art, html:not(#r5):not(#r4) body .process2 .pc-art,
html:not(#r5):not(#r4) body .cases .cs-case, html:not(#r5):not(#r4) body .cs-case,
html:not(#r5):not(#r4) body .wi .se-card, html:not(#r5):not(#r4) body .se-card,
html:not(#r5):not(#r4) body #services .svc-card, html:not(#r5):not(#r4) body .svc-card,
html:not(#r5):not(#r4) body .proof3 .p3-set > *, html:not(#r5):not(#r4) body .p3-set > * { border-radius: 4px !important; }
html:not(#r5):not(#r4) body .faq2 details, html:not(#r5):not(#r4) body .mm-panel, html:not(#r5):not(#r4) body .ft3 .ft-badges-mini a.stk { border-radius: 2px !important; }
html:not(#r5):not(#r4) body a.btn, html:not(#r5):not(#r4) body button.btn, html:not(#r5):not(#r4) body .btn, html:not(#r5):not(#r4) body .tag, html:not(#r5):not(#r4) body .svc-tag { border-radius: 2px !important; }
/* 4px corners (Erfan, 17 Oct screenshots): proof cards, work-wall devices (screen inside 2px), audit box (+ its chrome ring),
Compare "That's us" row, founder letter card, contact form card, footer location panel */
html:not(#r5):not(#r4) body :is(.proof3 .p3-set > *, .p3-card, .dv, .dv-tab, .dv-phone, .wall-link .dv, form.ck-form, .ck-form, .cmp-us, .cmp-row.cmp-us,
.fl-card, .founder2 .fl-in, .founder2 .fl, .cl3-form, .cl3-panel, .ft-panel) { border-radius: 4px !important; }
html:not(#r5):not(#r4) body :is(.ck-form)::before, html:not(#r5):not(#r4) body :is(.ck-form)::after { border-radius: 4px !important; }
html:not(#r5):not(#r4) body :is(.dv img, .dv-tab img, .dv-phone img) { border-radius: 2px !important; }
/* ==== parts/dm-details.css ==== */
/* DesignMe details (17 Oct, Erfan: "apply the easy wins… plus Soon tags"). Our tokens, their ideas. */
/* 1 · ruled logo band: hairline above and below, full width, logos centred in the band */
html body section.clients { border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; padding-bottom: 48px !important; margin-top: var(--sg2) !important; padding-top: 48px !important; }
@media (max-width: 760px) { html body section.clients { padding-top: 32px !important; padding-bottom: 32px !important; } }
/* 2 · square outlined icon tiles: mega-menu icons and the FAQ + */
html:not(#r5):not(#r4) body .mm-ico { width: 32px; height: 32px; border-radius: 2px !important; background: #FFFFFF; box-shadow: inset 0 0 0 1px #E6E6E6; }
html body .mm-item:hover .mm-ico, html body .mm-item:focus-visible .mm-ico { background: #F6F6F6; }
html body .fq-list summary::after { border-radius: 2px !important; box-shadow: inset 0 0 0 1px #E6E6E6 !important; }
html body .fq-list details[open] summary::after { box-shadow: none !important; }
/* 3 · soft nav hover: a quiet grey 2px highlight behind the link */
html body .links .nl, html body .mm-btn { padding: 8px 12px; border-radius: 2px !important; transition: background-color .4s cubic-bezier(.25,1,.5,1), color .4s cubic-bezier(.25,1,.5,1); }
html body .links .nl:hover, html body .mm-btn:hover, html body .mm.open .mm-btn { background: #F2F2F2; color: var(--ink); }
/* 4 · uppercase meta labels: case year + logo-band label, 12px 500, letter-spaced, grey */
html body .cs-year, html body .clients .clients-label { font: 500 12px/16px var(--text) !important; letter-spacing: .08em !important; text-transform: uppercase; color: #555 !important; }
/* 5 · "Soon" tags on footer links that aren't built yet */
html body .ft3 .ft-soon { display: inline-block; margin-left: 8px; padding: 2px 6px; border-radius: 2px; background: rgba(255,255,255,.08); color: #BDBDBD; font: 500 12px/16px var(--text); letter-spacing: .04em; vertical-align: 1px; }
html body .ft3 .ft-nw { white-space: nowrap; }
/* FAQ open state: the square tile no longer rotates (it became a diamond); open = same square, orange, with a minus */
/* 14 Nov (Erfan: orange comes and goes when one opens and another shuts; + lines not centred): lines are 2px on a 32px tile so they
land on whole pixels (1.75px sat at 15.125px and blurred off-centre). Lines use currentColor and the vertical bar shrinks to 0, so
tile colour, line colour and + → − all move together; a closing card goes back to the closed look at the same moment the new one opens. */
html body .fq-list summary::after { transform: none !important; color: var(--ink); background-color: #fff !important;
background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor) !important;
background-position: center, center !important; background-repeat: no-repeat !important; background-size: 12px 2px, 2px 12px !important;
transition: background-size .25s cubic-bezier(.2,.8,.2,1) !important; }
/* Erfan 14 Nov: "don't change the faq plus background color… no orange": open = same white tile and grey ring, + becomes − */
html body .fq-list details[open]:not(.closing) summary::after { background-size: 12px 2px, 2px 0px !important; }
html body .fq-list details[open] summary::after, html body .fq-list details.closing summary::after { box-shadow: inset 0 0 0 1px #E6E6E6 !important; }
@media (prefers-reduced-motion: reduce) { html body .fq-list summary::after { transition: none !important; } }
/* Footer "Soon" v2 (Erfan: "because of the Soon tags the lines are broken… make it clean"): no tag box. Unbuilt links read quieter
(#858585 on ink, 5.3:1) and say "Coming soon" on hover/focus in the footer tooltip style; one line per link again. */
html body .ft3 .ft-cols a.ft-later { color: #858585 !important; position: relative; }
html body .ft3 .ft-cols a.ft-later::after { content: 'Coming soon'; position: absolute; left: 0; bottom: calc(100% + 6px); padding: 4px 8px; border-radius: 2px;
background: #fff; color: #050505; font: 500 13px/16px var(--text); white-space: nowrap; opacity: 0; transform: translateY(2px); pointer-events: none;
transition: opacity .15s ease, transform .15s ease; }
html body .ft3 .ft-cols a.ft-later:hover::after, html body .ft3 .ft-cols a.ft-later:focus-visible::after { opacity: 1; transform: none; }
html body .ft3 .ft-cols a.ft-later:hover { color: #BDBDBD !important; }
/* v3 (Erfan: "for Healthtech, Cost estimator, RFP generator we can write Soon, those lines will not break"): short names + inline Soon tag, no tooltip */
html body .ft3 .ft-cols a.ft-later { color: #BDBDBD !important; }
html body .ft3 .ft-cols a.ft-later::after { content: none !important; }
/* footer columns rebalanced so "Cost estimator Soon" / "RFP generator Soon" fit on one line inside the grid */
@media (min-width: 1101px) {
html body .ft3 .ft-top { grid-template-columns: 240px minmax(0, 1fr) !important; }
html body .ft3 .ft-cols { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr) !important; }
}
/* footer: four link columns (Platforms removed, still in the Services menu) — Erfan, 17 Oct "instead of five, remove one" */
@media (min-width: 1101px) { html body .ft3 .ft-cols { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
/* brand column wide enough for its line + the three badges; 64px gutter before the link columns */
@media (min-width: 1101px) { html body .ft3 .ft-top { grid-template-columns: 320px minmax(0, 1fr) !important; column-gap: 64px !important; } }
/* nav reveal: slides up out of view on scroll down, back on scroll up (parts/nav-reveal.js) */
html body .nav { transition: transform .35s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; will-change: transform; }
html body .nav.nav-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { html body .nav { transition: none; } }
/* contact: left column (title, line, three promises) stays in view while the form scrolls past (Erfan, 17 Oct: "make this section sticky") */
@media (min-width: 861px) { html body .cl2-in .cl3-side { position: sticky; top: 96px; align-self: start; } }
/* contact copy: top-aligned with the form card at rest (no 40px inset); while scrolling it holds at the section's own top padding (128) */
@media (min-width: 861px) { html body .cl2-in .cl3-side { padding-top: 0 !important; top: var(--sg2, 128px) !important; } }
/* ==== parts/hero-proof.css ==== */
/* Hero proof row (17 Oct, Erfan approved "proof row in the hero: quick and sourced"). Sources: 12 years + 140+ clients over 12 years =
decisions row 35 (11 Oct, Erfan); Framer Pro Expert = 16 Oct (Erfan). Contra 5.0 stays in the review badge above, not repeated. */
html body .hero .hero-proof { list-style: none; margin: 40px auto 0; padding: 24px 0 0; display: flex; justify-content: center; gap: 0; border-top: 1px solid #E6E6E6; max-width: 640px; }
html body .hero .hero-proof li { flex: 1 1 0; padding: 0 24px; text-align: center; }
html body .hero .hero-proof li + li { border-left: 1px solid #E6E6E6; }
html body .hero .hero-proof b { display: block; font: 600 24px/32px var(--head, Inter, sans-serif); letter-spacing: -0.02em; color: #050505; }
html body .hero .hero-proof span { display: block; margin-top: 4px; font: 400 14px/20px var(--text, Inter, sans-serif); color: #444; }
@media (max-width: 760px) {
html body .hero .hero-proof { margin-top: 32px; padding-top: 16px; }
html body .hero .hero-proof li { padding: 0 8px; }
html body .hero .hero-proof b { font-size: 20px; line-height: 28px; }
}
@media (min-width: 761px) {
html body .hero .hero-proof { max-width: 720px; }
html body .hero .hero-proof li { flex: 0 1 auto; padding: 0 40px; }
html body .hero .hero-proof span { white-space: nowrap; }
}
html body .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width: 761px) { html body .hero .hero-proof { max-width: 800px; } html body .hero .hero-proof li { padding: 0 32px; } }
@media (max-width: 760px) {
html body .hero .hero-proof { display: grid; grid-template-columns: 1fr 1fr; row-gap: 16px; }
html body .hero .hero-proof li:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #E6E6E6; padding-top: 16px; }
}
/* ==== parts/case-play.css ==== */
/* Case films, click to play (17 Oct 2026, Erfan: "click-to-play case films: speed is a ranking factor"). parts/case-play.js.
The picture is the play control (a , no longer a link); one round icon-only button sits in the middle of it.
48px, round (icon-only round button), white, ink icon, 1px hairline, no shadow. Panel hover scales the button 1.04. */
html body .cases .cs-panel { cursor: pointer; }
html body .cases .cs-panel .cs-play {
position: absolute; z-index: 3; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0;
display: grid; place-items: center; border: 1px solid #E6E6E6; border-radius: 50% !important; background: #FFFFFF; color: #050505;
box-shadow: none; cursor: pointer; transform: scale(1); transition: transform .2s ease; -webkit-tap-highlight-color: transparent;
}
html body .cases .cs-panel .cs-play svg { display: block; width: 20px; height: 20px; fill: currentColor; }
html body .cases .cs-panel:hover .cs-play { transform: scale(1.04); }
html body .cases .cs-panel .cs-play:focus-visible { outline: 2px solid #FF3C00; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html body .cases .cs-panel .cs-play { transition: none; } }
/* while a film plays, the pause button hides until the picture is hovered or the button has focus (it covered the film) */
html body .cases .cs-panel.is-on .cs-play { opacity: 0; transition: opacity .2s ease, transform .2s ease; }
html body .cases .cs-panel.is-on:hover .cs-play, html body .cases .cs-panel.is-on .cs-play:focus-visible { opacity: 1; }
@media (hover: none) { html body .cases .cs-panel.is-on .cs-play { opacity: .9; width: 40px; height: 40px; left: auto; top: auto; right: 16px; bottom: 16px; margin: 0; } }
/* ==== parts/in-short.css ==== */
/* "Pentaclay, in short" (17 Oct, Erfan: Build #2, after DesignMe /industries/ai) — dated summary + 4 fact tiles inside the Ask AI band */
html body .cl3 .cl3-short { justify-self: stretch; width: 100%; max-width: 1200px; margin: 0 auto; text-align: left;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
html body .cl3 .cl3-short-head { grid-column: 1; display: grid; gap: 8px; align-content: start; padding-top: 4px; }
html body .cl3 .cl3-short-k { margin: 0; font: 500 12px/16px var(--text, Inter, sans-serif); letter-spacing: 0.06em; text-transform: uppercase; color: #050505; max-width: none; }
html body .cl3 .cl3-short-d { margin: 0; font: 400 14px/20px var(--text, Inter, sans-serif); color: #555; }
html body .cl3 .cl3-short-p { grid-column: 2 / span 3; margin: 0; max-width: 760px; font: 400 20px/32px var(--text, Inter, sans-serif); letter-spacing: -0.01em; color: #444; text-wrap: pretty; }
html body .cl3 .cl3-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
html body .cl3 .cl3-facts li { display: grid; gap: 8px; align-content: start; margin: 0; padding: 24px; background: #fff; border: 1px solid #E6E6E6; border-radius: 2px; box-shadow: none; }
html body .cl3 .cl3-facts b { font: 600 24px/32px var(--text, Inter, sans-serif); letter-spacing: -0.02em; color: #050505; }
html body .cl3 .cl3-facts span { font: 400 14px/20px var(--text, Inter, sans-serif); color: #444; }
@media (max-width: 860px) {
html body .cl3 .cl3-short { grid-template-columns: minmax(0, 1fr); gap: 16px; }
html body .cl3 .cl3-short-head, html body .cl3 .cl3-short-p, html body .cl3 .cl3-facts { grid-column: 1; }
html body .cl3 .cl3-short-head { padding-top: 0; }
html body .cl3 .cl3-short-p { font-size: 18px; line-height: 28px; }
html body .cl3 .cl3-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
html body .cl3 .cl3-facts li { padding: 16px; }
}
/* ==== parts/question-chips.css ==== */
/* Before the demo: question chips restored (17 Oct, Erfan: "You didn't revert this back"). The tick-box self-check is archived in
site/_archive/self-check-2026-10-17/. These are the chips exactly as they rendered before the swap: tinted speech bubbles, small tilt
that straightens on hover, 2px corners (radius v5: tags and chips 2px). */
html body .ck-qs { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; max-width: 860px; }
html body .ck-qs li { --r: 0deg; padding: 10px 16px; border-radius: 2px !important; font: 500 16px/24px var(--text); transform: rotate(var(--r)); transition: transform .4s cubic-bezier(.25, 1, .5, 1); }
html body .ck-qs li:nth-child(3n+1) { background: #FCE6DC; color: #7A2A0E; }
html body .ck-qs li:nth-child(3n+2) { background: #E4EEDF; color: #2E5631; }
html body .ck-qs li:nth-child(3n+3) { background: #E0E8F4; color: #23426B; }
html body .ck-qs li:nth-child(1) { --r: -2deg; } html body .ck-qs li:nth-child(2) { --r: 1.5deg; } html body .ck-qs li:nth-child(3) { --r: -1deg; }
html body .ck-qs li:nth-child(4) { --r: 2deg; } html body .ck-qs li:nth-child(5) { --r: -1.5deg; } html body .ck-qs li:nth-child(6) { --r: 1deg; }
html body .checks2 .ck-qs li:hover { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { html body .ck-qs li { transition-duration: .01s !important; } html body .checks2 .ck-qs li:hover { transform: rotate(var(--r)); } }
@media (max-width: 760px) { html body .ck-qs li { font-size: 14px; line-height: 20px; padding: 8px 12px; } }
/* ==== parts/ds-fix-1017.css ==== */
/* design-system v3 audit fixes (17 Oct): page values that broke the written rules */
html body .tag, html body .svc-tag { opacity: 1 !important; } /* 70% opacity made 12px tag text fail contrast */
html body #services .sl-cols small { font: 500 12px/16px var(--text) !important; letter-spacing: .08em !important; text-transform: uppercase; color: #555 !important; }
html body .se-meta, html body .se-meta b, html body .mm-label { letter-spacing: .08em !important; line-height: 16px !important; }
html body #services .sl-who-h, html body .pc-desc, html body .cmp-name small, html body .cmp-name b + small { color: #444 !important; }
html body .pc-lead { line-height: 28px !important; }
html body .ftl p { line-height: 20px !important; }
@media (max-width: 760px) { html body .se-title { line-height: 28px !important; } html body .pc-num { line-height: 64px !important; } html body .faq2 .fq-list { margin-top: 8px; } }
html body .cases .cs-panel:hover .cs-play { transform: none !important; }
html body .cases .cs-panel .cs-play:focus-visible { outline-color: #D23100 !important; }
html body #services .sl-ico, html body #services .sl-who-h, html body .ft3 .ft-badges-mini .stk-tip { transition-duration: .4s !important; transition-timing-function: cubic-bezier(.25,1,.5,1) !important; }
/* ==== parts/ask-ai-v2.css ==== */
/* Ask AI band v2 (17 Oct, Erfan: "this design is not good… take inspiration from DesignMe"). DesignMe: a compact block, small
left-aligned title over a row of separate square icon tiles, beside other content. Ours: two columns inside the 1200 column —
left: title (32/40 600, left) + 5 separate 48px tiles (white, 1px hairline, 2px radius, 8px gap, hover #F6F6F6, tooltip kept);
right: "Pentaclay, in short" label + date over the paragraph. Hairline under the band separates it from the contact grid. */
html body .cl3 .cl3-ai { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 24px;
max-width: 1200px; margin: 0 auto !important; padding: 0 0 64px !important; text-align: left !important; border-bottom: 1px solid #E6E6E6; }
html body .cl3 .cl3-ai > h2.tt { grid-column: 1; grid-row: 1; margin: 0 !important; max-width: none !important; text-align: left !important;
font-size: 32px !important; line-height: 40px !important; letter-spacing: -0.03em !important; }
html body .cl3 .cl3-ai .cl3-ai-btns { grid-column: 1; grid-row: 2; align-self: start; display: flex !important; gap: 8px !important; margin: 0 !important;
padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; width: auto !important; justify-content: flex-start !important; }
html body .cl3 .cl3-ai .cl3-ai-btns a { width: 48px !important; height: 48px !important; display: grid; place-items: center; margin: 0 !important;
background: #FFFFFF !important; border: 0 !important; box-shadow: inset 0 0 0 1px #E6E6E6 !important; border-radius: 2px !important; color: #050505 !important;
transition: background-color .4s cubic-bezier(.25,1,.5,1) !important; }
html body .cl3 .cl3-ai .cl3-ai-btns a:hover, html body .cl3 .cl3-ai .cl3-ai-btns a:focus-visible { background: #F6F6F6 !important; }
html body .cl3 .cl3-ai .cl3-ai-btns a svg { width: 20px; height: 20px; }
html body .cl3 .cl3-ai .cl3-short { grid-column: 2; grid-row: 1 / span 2; display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; }
html body .cl3 .cl3-ai .cl3-short-head { display: flex !important; gap: 12px; align-items: baseline; }
html body .cl3 .cl3-ai .cl3-short-k { margin: 0; font: 500 12px/16px var(--text) !important; letter-spacing: .08em !important; text-transform: uppercase; color: #050505 !important; }
html body .cl3 .cl3-ai .cl3-short-d { margin: 0; font: 400 12px/16px var(--text) !important; color: #555 !important; }
html body .cl3 .cl3-ai .cl3-short-p { margin: 0 !important; max-width: none !important; font: 400 18px/28px var(--text) !important; color: #444 !important; }
@media (max-width: 860px) {
html body .cl3 .cl3-ai { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding-bottom: 48px !important; }
html body .cl3 .cl3-ai > h2.tt, html body .cl3 .cl3-ai .cl3-ai-btns, html body .cl3 .cl3-ai .cl3-short { grid-column: 1; grid-row: auto; }
html body .cl3 .cl3-ai > h2.tt { font-size: 24px !important; line-height: 32px !important; }
html body .cl3 .cl3-ai .cl3-short-p { font-size: 16px !important; line-height: 24px !important; }
}
/* fixes: full-width band ground kept (content centred via padding), label above the paragraph, tiles start-aligned */
html body .cl3 .cl3-ai { max-width: none !important; padding-left: max(var(--gut, 16px), calc((100% - 1200px) / 2)) !important; padding-right: max(var(--gut, 16px), calc((100% - 1200px) / 2)) !important; border-bottom: 0 !important; }
html body .cl3 .cl3-ai .cl3-ai-btns { justify-self: start !important; }
html body .cl3 .cl3-ai .cl3-short { display: block !important; }
html body .cl3 .cl3-ai .cl3-short-head { display: flex !important; flex-direction: row !important; gap: 12px !important; margin: 0 0 12px !important; width: auto !important; }
html body .cl3 .cl3-ai .cl3-short-head > * { white-space: nowrap; }
html:not(#ai2) body .cl3 .cl3-ai > h2.tt, html:not(#ai2) body .cl3 .cl3-ai > h2.tt * { text-align: left !important; margin-left: 0 !important; justify-self: start !important; }
html:not(#ai2) body .cl3 .cl3-ai > h2.tt .tt-g { display: inline !important; }
html:not(#ai2) body .cl3 .cl3-ai { padding-top: var(--sg2, 128px) !important; padding-bottom: 0 !important; }
/* same columns as the contact grid below (5fr / 6fr, 96px gap), so "in short" starts exactly where the form card starts */
@media (min-width: 861px) { html:not(#ai2) body .cl3 .cl3-ai { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; column-gap: 96px !important; } }
@media (max-width: 1100px) {
html:not(#ai2) body .cl3 .cl3-ai { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto !important; row-gap: 24px !important; }
html:not(#ai2) body .cl3 .cl3-ai > h2.tt, html:not(#ai2) body .cl3 .cl3-ai .cl3-ai-btns, html:not(#ai2) body .cl3 .cl3-ai .cl3-short { grid-column: 1 !important; grid-row: auto !important; }
}
/* 17 Oct: Ask AI band now sits after the contact form, right above the footer (Erfan). One 128/96/64 gap on each side. */
html:not(#ai2) body .cl3 .cl3-ai { padding-top: var(--sg2, 128px) !important; padding-bottom: var(--sg2, 128px) !important; }
/* 17 Oct, Erfan: the grey contact band is a coloured band, so it carries one unit inside at the top; the Ask AI band below closes it with one unit at the bottom. */
html:not(#ai2) body .cl3 .cl2-in { padding-top: var(--sg2, 128px) !important; padding-bottom: 0 !important; } /* Ask AI shares the grey; its own top padding is the one gap */
/* ==== parts/mobile-1017.css ==== */
/* Mobile tidy-up (17 Oct 2026, Erfan: "Tidy up the mobile design, tidy up the spacing, also the menu. Menu should have a good UX…
use your best judgment"). Audit: research/mobile-audit-2026-10-17/. Only design-system values: 16px gutter, 8-pt grid,
type 12/14/16/18/20/24, 2px boxes, 1px #E6E6E6 hairlines, no shadows. Loaded just before no-shadow.css. */
/* ---------- Phone menu (≤900): full-height sheet, page locked behind it ---------- */
@media (max-width: 900px) {
html.menu-lock, html.menu-lock body { overflow: hidden; }
html:not(#mb) body .nav.menu-open .links {
position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - 56px); max-height: none;
display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px; margin: 0;
background: #fff; border: 0; border-top: 1px solid #E6E6E6; border-radius: 0 !important;
overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* top-level rows: 20/28 600 ink, 56px tall, hairline between */
html:not(#mb) body .nav.menu-open .links > .mm, html:not(#mb) body .nav.menu-open .links > .nl { border-bottom: 1px solid #E6E6E6; }
html:not(#mb) body .nav.menu-open .links > .nl,
html:not(#mb) body .nav.menu-open .links > .mm > .mm-btn {
display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 !important; margin: 0;
font: 600 20px/28px var(--text) !important; letter-spacing: -0.01em; color: var(--ink, #050505) !important; background: none !important; border-radius: 0 !important; }
html:not(#mb) body .nav.menu-open .links > .mm > .mm-btn .mm-arrow { width: 20px; height: 20px; transition: transform .4s cubic-bezier(.25, 1, .5, 1); }
html:not(#mb) body .nav.menu-open .links > .mm.open > .mm-btn .mm-arrow { transform: rotate(180deg); }
/* sub-menu: a plain list under its row, no boxed panel, no video promo */
html:not(#mb) body .nav.menu-open .mm-panel { padding: 0 0 16px !important; margin: 0; border: 0 !important; box-shadow: none !important; background: none !important; border-radius: 0 !important; }
html:not(#mb) body .nav.menu-open .mm-wrap, html:not(#mb) body .nav.menu-open .mm-grid { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
html:not(#mb) body .nav.menu-open .mm-col { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
html:not(#mb) body .nav.menu-open .mm-col + .mm-col { margin-top: 16px !important; }
html:not(#mb) body .nav.menu-open .mm-vid { display: none !important; }
html:not(#mb) body .nav.menu-open .mm-label { margin: 8px 0 4px !important; padding: 0 !important; font: 500 12px/16px var(--text) !important; letter-spacing: .08em; text-transform: uppercase; color: #555 !important; border: 0 !important; }
html:not(#mb) body .nav.menu-open .mm-item { display: grid !important; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 48px;
padding: 8px 0 !important; margin: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; }
html:not(#mb) body .nav.menu-open .mm-item > :first-child:not(:only-child) { width: 32px !important; height: 32px !important; }
html:not(#mb) body .nav.menu-open .mm-item b, html:not(#mb) body .nav.menu-open .mm-item strong { display: block; font: 500 16px/24px var(--text) !important; color: var(--ink, #050505) !important; }
html:not(#mb) body .nav.menu-open .mm-item small, html:not(#mb) body .nav.menu-open .mm-item em, html:not(#mb) body .nav.menu-open .mm-item p { display: block; font: 400 14px/20px var(--text) !important; font-style: normal; color: #444 !important; margin: 0 !important; }
html:not(#mb) body .nav.menu-open .mm-bar { display: inline-flex !important; align-items: center; gap: 8px; min-height: 48px; width: auto !important; margin: 8px 0 0 !important; padding: 0 !important;
background: none !important; border: 0 !important; font: 500 16px/24px var(--text) !important; color: var(--ink, #050505) !important; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* pinned foot: one primary action + email, always in reach */
html:not(#mb) body .nav .links-foot { display: none; }
html:not(#mb) body .nav.menu-open .links-foot { display: grid; gap: 8px; position: sticky; bottom: 0; margin: auto -16px 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #E6E6E6; }
html:not(#mb) body .nav.menu-open .links-foot .btn { display: flex; justify-content: center; width: 100%; height: 48px; min-height: 48px; font: 500 16px/24px var(--text); }
html:not(#mb) body .nav.menu-open .links-foot .lf-mail { display: flex; align-items: center; justify-content: center; min-height: 40px; font: 400 14px/20px var(--text); color: #444; text-decoration: none; }
html:not(#mb) body .nav.menu-open .links-foot .lf-mail span { color: var(--ink, #050505); text-decoration: underline; text-underline-offset: 4px; margin-left: 4px; }
/* header stays put while the sheet is open */
html:not(#mb) body .nav.menu-open { transform: none !important; background: #fff !important; }
}
@media (min-width: 901px) { html:not(#mb) body .nav .links-foot { display: none !important; } }
@media (prefers-reduced-motion: reduce) { html:not(#mb) body .nav.menu-open .mm-btn .mm-arrow { transition: none; } }
/* ---------- Hero: keep "buyers understand." whole only where it fits ---------- */
html body .hero h1 .nw { white-space: nowrap; }
@media (max-width: 760px) { html body .hero h1 .nw { white-space: normal; } }
/* ---------- Case cards (≤900): same gap under every picture; one meta order ---------- */
@media (max-width: 900px) {
html:not(#mb) body .cases .cs-case, html:not(#mb) body .cases .cs-case:nth-child(even) { gap: 0 !important; row-gap: 0 !important; }
html:not(#mb) body .cases .cs-case .cs-copy { margin: 0 !important; padding: 24px !important; }
html:not(#mb) body .cases .cs-id { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
html:not(#mb) body .cases .cs-year { order: -1 !important; }
html:not(#mb) body .cases .cs-name { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; }
html:not(#mb) body .cases .cs-name h3 { flex: 0 0 100%; margin: 0 0 4px !important; }
}
/* ---------- Who we build for (≤760): picture starts 32px under the text, no blank band ---------- */
@media (max-width: 760px) {
html:not(#mb) body .wi .se-card { min-height: calc(200px + 61cqw) !important; }
}
/* ---------- Process tabs: 44px tap targets ---------- */
@media (max-width: 900px) { html:not(#mb) body .pc-tabs button { min-height: 44px; align-content: center; } }
/* ---------- FAQ (≤900): questions first, the "Can't find your answer?" box after them ---------- */
@media (max-width: 900px) {
html:not(#mb) body .faq2 .fq-in { display: flex !important; flex-direction: column; }
html:not(#mb) body .faq2 .fq-head { display: contents; }
html:not(#mb) body .faq2 .fq-head > :not(.fq-ask) { order: 1; }
html:not(#mb) body .faq2 .fq-list { order: 2; margin-top: 40px !important; }
html:not(#mb) body .faq2 .fq-ask { order: 3; margin-top: 24px !important; }
}
/* ---------- Founder: illustration stays inside the card ---------- */
@media (max-width: 760px) { html:not(#mb) body .fl-photo { max-width: 100%; margin-left: auto; margin-right: 0; right: auto; } html:not(#mb) body .fl-card { overflow: hidden; } }
/* ---------- Ask AI (≤1100): same order as desktop — title, the five tiles, then the paragraph ---------- */
@media (max-width: 1100px) {
html:not(#mb) body .cl3 .cl3-ai > h2.tt { order: 1; }
html:not(#mb) body .cl3 .cl3-ai .cl3-ai-btns { order: 2; }
html:not(#mb) body .cl3 .cl3-ai .cl3-short { order: 3; margin-top: 16px !important; }
}
/* ---------- Footer (≤760): badge tiles fill the row; 40px link rows (the wordmark keeps sitting on the panel edge, same as desktop) ---------- */
@media (max-width: 760px) {
html:not(#mb) body .ft3 .ft-badges { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important; width: 100% !important; padding: 0 !important; }
html:not(#mb) body .ft3 .ft-badges a { width: auto !important; margin: 0 !important; }
html:not(#mb) body .ft3 .ft-cols a { display: flex; align-items: center; min-height: 40px; }
}
/* ---------- Services open row (≤760): margins were stacking on the flex gap (56px steps); one 24px rhythm ---------- */
@media (max-width: 760px) {
html:not(#mb) body .sl .sl-txt { gap: 24px !important; }
html:not(#mb) body .sl .sl-who, html:not(#mb) body .sl .sl-link { margin: 0 !important; }
}
/* ---------- FAQ (≤900): title → first question is one 40px step (the column gap was adding 32 more); ask box full width ---------- */
@media (max-width: 900px) {
html:not(#mb) body .faq2 .fq-in { gap: 0 !important; }
html:not(#mb) body .faq2 .fq-ask { width: 100% !important; max-width: none !important; box-sizing: border-box; }
}
/* ---------- Phone menu fixes from the reference study (research/mobile-ref-2026-10-17/findings.md) ---------- */
@media (max-width: 900px) {
/* the base .links centres its column, which pushed an opened row above the top of the sheet; start at the top */
html:not(#mb) body .nav.menu-open .links { justify-content: flex-start !important; animation: mb-in .24s cubic-bezier(.22, 1, .36, 1); }
html:not(#mb) body .nav.menu-open .links > * { flex: none; }
/* no Android blue tap flash; pressed state is the system's light grey */
html body .menu-btn, html body .nav .mm-btn, html body .nav .nl, html body .nav .mm-item, html body .nav .links-foot a { -webkit-tap-highlight-color: transparent; }
html:not(#mb) body .nav.menu-open .links > .nl:active, html:not(#mb) body .nav.menu-open .links > .mm > .mm-btn:active, html:not(#mb) body .nav.menu-open .mm-item:active { background: #F6F6F6 !important; }
}
@keyframes mb-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html:not(#mb) body .nav.menu-open .links { animation: none; } }
/* ---------- Phone menu button: ghost icon that turns into × (17 Oct, Erfan: "switch… to a ghost icon… like DesignMe") ----------
40x40 box, 1px #E6E6E6 hairline, 2px corners, no fill; a 48x48 tap area; two 16px ink lines 6px apart rotate into × in place. */
@media (max-width: 900px) {
html:not(#mb) body .nav .menu-btn { all: unset; box-sizing: border-box; position: relative; display: inline-grid; place-items: center; justify-self: end; grid-column: 3;
width: 40px; height: 40px; padding: 0; border: 1px solid #E6E6E6; border-radius: 2px !important; background: transparent; color: var(--ink, #050505);
cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .4s cubic-bezier(.25, 1, .5, 1); }
html:not(#mb) body .nav .menu-btn::before { content: ''; position: absolute; inset: -4px; } /* 48x48 tap area */
html:not(#mb) body .nav .menu-btn:active { background: #F6F6F6; }
html:not(#mb) body .nav .menu-btn:focus-visible { outline: 2px solid #D23100; outline-offset: 2px; }
html:not(#mb) body .nav .menu-btn .mb-ico { position: relative; display: block; width: 16px; height: 8px; }
html:not(#mb) body .nav .menu-btn .mb-ico i { position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
transition: transform .24s cubic-bezier(.22, 1, .36, 1), top .24s cubic-bezier(.22, 1, .36, 1); }
html:not(#mb) body .nav .menu-btn .mb-ico i:first-child { top: 0; }
html:not(#mb) body .nav .menu-btn .mb-ico i:last-child { top: 6px; }
html:not(#mb) body .nav.menu-open .menu-btn .mb-ico i:first-child { top: 3px; transform: rotate(45deg); }
html:not(#mb) body .nav.menu-open .menu-btn .mb-ico i:last-child { top: 3px; transform: rotate(-45deg); }
}
@media (hover: hover) and (max-width: 900px) { html:not(#mb) body .nav .menu-btn:hover { background: #F6F6F6; } }
@media (prefers-reduced-motion: reduce) { html:not(#mb) body .nav .menu-btn .mb-ico i { transition: none; } }
/* ==== parts/no-shadow.css ==== */
/* No shadows anywhere (16 Oct 2026, Erfan: "can we not use shadow? … remove shadow from all our designs").
Loaded last. Drop shadows, glows and drop-shadow filters are removed; 1px hairlines (inset or 0-blur spread) stay because they are
borders, not shadows. Elevation now comes from the hairline and the ground colour only. */
html body .svc-card, html body #services .svc-card { box-shadow: inset 0 0 0 1px #E6E6E6; }
html body .mm-panel { box-shadow: inset 0 0 0 1px #E6E6E6; }
html body form.ck-form { box-shadow: inset 0 0 0 1px #E6E6E6; }
html body .cmp-row.cmp-us, html body .cmp-row.cmp-us.draw { box-shadow: inset 0 0 0 1px #FF3C00; }
html body .cmp-tag, html body .cmp-why { box-shadow: none; }
html body .dv { box-shadow: inset 0 0 0 1px #2A2A2A; }
html body .pc-art .p-lift { filter: none; }
html body .wi .se-card:hover, html body .wi .se-card:focus-visible { box-shadow: inset 0 0 0 1px #BDBDBA; }
html body .fq-list details, html body .fq-list details[open], html body .faq2 details[open] { box-shadow: inset 0 0 0 1px #E6E6E6 !important; } /* no drop shadow on the open FAQ row */
/* ==== parts/phone-round.css ==== */
/* Rounded phone mockups (design system v3.2, token r-phone, approved exception, Erfan 17 Oct 2026).
Phone frame corner = 15% of the frame width (was 12.5%; Erfan 17 Oct "iPhone style… a bit more round"); screen corner = frame corner - 6px bezel (nested rule).
Frame width on the work wall = (var(--dh) - 12px) * 0.46209 + 12px, so: 24px at --dh 400, 16px at --dh 260.
Tablets and browser windows keep radius v5 (4px frame, 2px screen). Loaded last so it beats radius-v5.css. */
html:not(#r5):not(#r4):not(#rp) body .dv.dv-phone,
html:not(#r5):not(#r4):not(#rp) body .wall-link .dv.dv-phone {
--phone-r: calc(((var(--dh, 400px) - 12px) * 0.46209 + 12px) * 0.15);
border-radius: var(--phone-r) !important;
}
html:not(#r5):not(#r4):not(#rp) body .dv.dv-phone img { border-radius: calc(var(--phone-r) - 6px) !important; }
/* ==== parts/founder-photo.css ==== */
/* Founder letter photo (Erfan, 17 Oct 2026: option E). The pencil-sketch cut-out at the card's bottom-right is retired:
its greyscale, drawn look and corner bleed matched DesignMe's founder note. Now: the real photo, square, at the top of
the facts column, only the flat wall recoloured to brand orange #FF3C00 (face and clothes untouched). 2px corners (a box).
Research: agency-plan/research/founder-sections-2026-10-17/README.md. Loaded last. */
html body .fl-card .fl-portrait { grid-column: 2; grid-row: 2; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px; margin: 4px 0 32px; }
html body .fl-card .fl-stats { grid-row: 3; }
html body .fl-card .fl-copy { grid-row: 2 / span 2; }
@media (max-width: 860px) {
html body .fl-card .fl-portrait, html body .fl-card .fl-stats, html body .fl-card .fl-copy { grid-column: auto; grid-row: auto; }
html body .fl-card .fl-portrait { max-width: 320px; margin: 0 0 32px; }
}
/* "From the founder" as a small label above the heading (Erfan, 17 Oct: the two sentences read as one heading and didn't
connect). meta-label style: 12/16 500 uppercase 0.08em, mute #555; 16px to the heading. Label + heading share grid row 1. */
html body .fl-card .fl-head { grid-column: 1 / -1; grid-row: 1; }
html body .fl-card .fl-kicker { margin: 0 0 16px; font: 500 12px/16px var(--text, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #555555 !important; } /* beats the site-wide reading-grey #444 !important on section paragraphs */
/* ==== parts/title-align.css ==== */
/* Title alignment rule (Erfan 17 Oct, content-rules "Words"): a title sits on the left edge of left-aligned content under it (lists, tables, tabs, FAQ, forms); grids, strips and card walls keep centred titles. */
html body .svc-head, html body .pr-head, html body .cmp-head { justify-items: start; text-align: left; }
/* ==== parts/form-autofill.css ==== */
/* Browser autofill must not change our field style (README "Form fields": white box, 1px line border, ink text).
Chrome and Safari paint autofilled fields light blue with a browser rule that page CSS cannot override by
background-color, so the white comes from a 0-blur inset fill (a fill, not a shadow: no blur, no offset; the
no-shadow rule holds). On focus the 1px ink focus ring is drawn on top of the fill, as on any field. Loaded last.
!important because the field focus rule in ds-audit.css (.cl3-form input[type=text]:focus) is more specific and
replaced the fill on a focused autofilled field, letting the blue show (Erfan 17 Oct).
Rest and focus keep the same two shadows in the same order (ring, then fill). With one shadow at rest the 0.4s
focus transition morphed the 1000px white fill into the 1px ink ring and the field flashed black (Erfan's recording, 17 Oct). */
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body textarea:-webkit-autofill,
html body select:-webkit-autofill {
-webkit-text-fill-color: #050505 !important;
caret-color: #050505;
-webkit-box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0), inset 0 0 0 1000px #FFFFFF !important;
box-shadow: inset 0 0 0 1px rgba(5, 5, 5, 0), inset 0 0 0 1000px #FFFFFF !important;
}
html body input:-webkit-autofill:focus,
html body textarea:-webkit-autofill:focus {
-webkit-text-fill-color: #050505 !important;
-webkit-box-shadow: inset 0 0 0 1px #050505, inset 0 0 0 1000px #FFFFFF !important;
box-shadow: inset 0 0 0 1px #050505, inset 0 0 0 1000px #FFFFFF !important;
}
/* ==== parts/form-errors.css ==== */
/* Form errors (Erfan 17 Oct: "show which fields are not filled, with an error icon"). On Send every problem is shown at once:
- the field's own border turns accent-deep and becomes 2px (1px border + 1px inset hairline), the same shape as focus, and
stays red while focused so the problem never hides under the ink focus border;
- unpicked chips in a group with no choice get an accent-deep border;
- a 14/20 500 accent-deep message with a 16px alert icon (1.75 stroke, like every line icon) sits 8px under the field;
- the note under Send repeats the count ("Fix the 2 fields marked in red."), with the same icon.
accent-deep is used only for errors on forms now: focus is ink and picked chips are ink. Loaded after ds-audit.css. */
html body .cl3-form input[type][aria-invalid=true],
html body .cl3-form input[type][aria-invalid=true]:focus,
html body .cl3-form input[type][aria-invalid=true]:focus-visible {
border-color: var(--accent-deep, #D23100); box-shadow: inset 0 0 0 1px var(--accent-deep, #D23100); }
html body input[type][aria-invalid=true]:-webkit-autofill,
html body input[type][aria-invalid=true]:-webkit-autofill:focus {
-webkit-box-shadow: inset 0 0 0 1px #D23100, inset 0 0 0 1000px #FFFFFF !important;
box-shadow: inset 0 0 0 1px #D23100, inset 0 0 0 1000px #FFFFFF !important; }
html body .cl3-need.is-err label input:not(:checked) + span { border-color: var(--accent-deep, #D23100); }
html body .cl3-form .cl3-err, html body .cl3-form label > span.cl3-err {
display: flex; align-items: flex-start; gap: 6px; width: 100%; margin: 8px 0 0;
font: 500 14px/20px var(--text); color: var(--accent-deep, #D23100); }
html body .cl3-form .cl3-need .cl3-err { margin: 0; } /* the chip group's 8px gap already spaces it */
html body .cl3-form .cl3-err[hidden] { display: none; }
html body .cl3 .cl3-note.err { display: flex; align-items: flex-start; gap: 6px; font-weight: 500; color: var(--accent-deep, #D23100); }
html body .cl3-form .cl3-err svg, html body .cl3 .cl3-note.err svg {
flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* ==== parts/form-sent.css ==== */
/* Contact form after Send (Erfan 17 Oct: the old green note picked up the comparison table's global .ok dot and broke).
- Sending: the button says "Sending…", its arrow hides, it can't be pressed twice.
- Sent: the form is replaced in the same panel by a 48px round tick (1px line ring, accent tick, like the contact promises),
"Message sent" 24/32 500, one 16/24 line naming who replies and where, a Book a call text link and a quiet
"Send another message" button. No green: success is ink and one accent tick.
- Failed: the error note (form-errors.css) with an email link and a book-a-call link; what they typed stays. */
html body .cl3-form .cl3-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html body .ck-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* audit forms' spam trap (14 Nov 2026) */
html body .cl3 .cl3-send .btn-dark[aria-busy=true] { cursor: progress; }
html body .cl3 .cl3-send .btn-dark[aria-busy=true] .arr-swap { display: none; }
html body .cl3 .cl3-note.err a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
html body .cl3 .cl3-sent { display: grid; justify-items: start; gap: 16px; padding: 8px 0 4px; }
html body .cl3 .cl3-sent[hidden] { display: none; }
html body .cl3 .cl3-sent-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line, #E6E6E6); }
html body .cl3 .cl3-sent-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--accent, #FF3C00); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body .cl3 .cl3-sent h3 { margin: 8px 0 0; font: 500 24px/32px var(--text); letter-spacing: -0.01em; color: var(--ink, #050505); outline: none; }
html body .cl3 .cl3-sent p { margin: 0; max-width: none; font-size: 16px; line-height: 24px; color: #444444; }
html body .cl3 .cl3-sent p b { font-weight: 500; color: var(--ink, #050505); overflow-wrap: anywhere; }
html body .cl3 .cl3-sent .cl3-sent-alt a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink, #050505); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
html body .cl3 .cl3-sent .cl3-sent-alt a:focus-visible, html body .cl3 .cl3-sent-again:focus-visible { outline: 2px solid var(--accent-deep, #D23100); outline-offset: 2px; border-radius: 2px; }
html body .cl3 .cl3-sent-again { margin-top: 8px; padding: 0; border: 0; background: none; font: 500 14px/20px var(--text); color: #555555; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html body .cl3 .cl3-sent-again:hover { color: var(--ink, #050505); }
/* ==== parts/svc-head-center.css ==== */
/* "Four ways to work with us" heading + intro centred (Erfan, 17 Oct 2026: "make this font center aligned too").
Overrides the left title rule for this one section; intro capped at 640px so it centres as a block. Loaded last. */
html body .svc .svc-head { justify-items: center; text-align: center; margin-left: auto; margin-right: auto; }
html body .svc .svc-head > p { max-width: 800px; margin-left: auto; margin-right: auto; }
/* Process "Typical outputs" under each step (src/data/process.json, Process.astro). Every page that shows the section
(home, Launch page) shows it the same way (Erfan 18 Oct). Moved here from pages.css, which the home page does not load.
Values are the design-system tokens: line #E6E6E6, mute #555, text-2 #444, accent #FF3C00. */
html body .pc-card .pc-outs { margin-top: 24px; padding-top: 16px; border-top: 1px solid #E6E6E6; }
html body .pc-card .pc-outs-k { margin: 0 0 8px; font: 500 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: #555555; }
html body .pc-card .pc-outs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
html body .pc-card .pc-outs li { position: relative; padding-left: 16px; font: 400 16px/24px var(--text); color: #444444; }
html body .pc-card .pc-outs li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* One width for every stacked section head, on every page (Erfan 18 Oct: "give a fixed width to all the titles and
subtitles in all pages"; 21 Oct: title and subtitle share it, so a one-line title never runs wider than its subtitle).
Title and subtitle: 800px (token head-width; the old 26ch title width, so approved titles keep their breaks). Side-by-side heads (FAQ, Compare, Contact, Founder) keep their column widths. */
html body .p-head { max-width: none; }
html body .p-head .p-h2, html body .se-head h2, html body .pr-head h2, html body .ck-head h2,
html body .wall-head h2, html body .proof3-head h2, html body .svc h2.tt, html body .cases .cs-head-c h2.tt { max-width: 800px; text-wrap: balance; }
html body .p-head .p-intro, html body .se-head p, html body .pr-head p, html body .ck-head p,
html body .svc .svc-head > p, html body .cases .cs-intro { max-width: 800px; }
html body .p-head-c .p-h2, html body .p-head-c .p-intro { margin-left: auto; margin-right: auto; }
/* Underlined links: one hover everywhere (Erfan 18 Oct: "every hover which has underlined text should have the same kind of
hover"). The label sits in .ul; its 1.5px underline is a background 3px under the text box. On hover / keyboard focus it wipes
out to the right and draws back in from the left (0.6s, the arrow-swap curve); an arrow, if the link has one, swaps at the same
time. The colour never changes (this replaces the old orange email hover). Used by ArrowLink, case study, Explore…, email,
Book a call directly, Follow me on X and inline links in sentences. Rule: design-system/project/interaction.md. */
html:not(#ul) body a:has(> .ul) { text-decoration: none !important; }
html:not(#ul) body .ul { padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@keyframes ul-swap { 0% { background-position: 100% 100%; background-size: 100% 1.5px; } 45% { background-position: 100% 100%; background-size: 0 1.5px; } 46% { background-position: 0 100%; background-size: 0 1.5px; } 100% { background-position: 0 100%; background-size: 100% 1.5px; } }
html:not(#ul) body a:hover > .ul, html:not(#ul) body a:focus-visible > .ul { animation: ul-swap .6s cubic-bezier(.16, 1, .3, 1); }
html:not(#ul) body a:has(> .ul):hover .arr-swap .arr:first-child, html:not(#ul) body a:has(> .ul):focus-visible .arr-swap .arr:first-child { transform: translateX(120%); opacity: 0; }
html:not(#ul) body a:has(> .ul):hover .arr-swap .arr + .arr, html:not(#ul) body a:has(> .ul):focus-visible .arr-swap .arr + .arr { transform: none; opacity: 1; transition-delay: .06s; }
html:not(#ul) body :is(a.mail-link, .cases .cs-read, .fl-sign a, .p-cap a, .cl3-switch a, .cl3-sent-alt a):is(:hover, :focus-visible) { color: var(--ink) !important; }
html:not(#ul) body :is(.ft3 a.mail-link, a.ftl-mail):is(:hover, :focus-visible) { color: #fff !important; }
@media (prefers-reduced-motion: reduce) { html:not(#ul) body a:hover > .ul, html:not(#ul) body a:focus-visible > .ul { animation: none; } }
/* Links inside a sentence (Erfan 21 Oct: "darker ink with a thin light underline that turns dark on hover", every page): ink 500 text
in the grey sentence, a 1px link-line (#BDBDBD) underline; on hover / focus an ink line draws over it from the left (0.6s, the
wipe curve) and draws back on leave. Standalone underlined links (Book a call directly, Follow me on X, footer email) keep the
1.5px ink underline above. Blog bodies (.p-prose) use the same look with a text-decoration underline. */
html:not(#ul) body :is(a.p-inl.p-ul, .fq-mail a, .cl3-sent-alt a, .p-prose :is(p, li) > a) { color: var(--ink) !important; font-weight: 500; }
html:not(#ul) body :is(a.p-inl.p-ul, .fq-mail a, .cl3-sent-alt a) > .ul { padding-bottom: 3px; animation: none !important;
background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat, linear-gradient(#BDBDBD, #BDBDBD) 0 100% / 100% 1px no-repeat;
transition: background-size .6s cubic-bezier(.16, 1, .3, 1); }
html:not(#ul) body :is(a.p-inl.p-ul, .fq-mail a, .cl3-sent-alt a):is(:hover, :focus-visible) > .ul { background-size: 100% 1px, 100% 1px; }
html:not(#ul) body .p-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: #BDBDBD; transition: text-decoration-color .3s ease; }
html:not(#ul) body .p-prose a:is(:hover, :focus-visible) { text-decoration-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { html:not(#ul) body :is(a.p-inl.p-ul, .fq-mail a, .cl3-sent-alt a) > .ul { transition: none; } }
/* Tools that don't exist yet (18 Oct audit: their links were 404s). Footer: plain text, same size as the links, with the Soon
chip, not clickable. Menu: the card stays, with a Soon tag, and isn't a link. */
html body .ft3 .ft-cols span.ft-later { display: block; padding: 4px 0; font-size: 16px; line-height: 24px; color: #858585; cursor: default; }
html body .mm-item.mm-soon { cursor: default; }
html body .mm-item.mm-soon:hover b, html body .mm-item.mm-soon b { color: #2A2A2A; }
html body .mm-item.mm-soon:hover svg { stroke: #9A9A9A; }
html body .mm-item.mm-soon .tag { margin-left: 6px; vertical-align: 2px; }
/* Skip link (18 Oct UX audit): first Tab stop on every page, hidden until focused, jumps to . */
html body .skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 12px 16px; border-radius: 2px; background: var(--ink); color: #fff; font: 500 16px/24px var(--text); transform: translateY(-200%); }
html body .skip-link:focus-visible { transform: none; outline: 2px solid var(--accent); outline-offset: 2px; }
/* Form chips ("What do you need?", budget): 44px, the tap-target minimum (Erfan 18 Oct audit #11: "yes, 44"). */
html:not(#ch) body :is(.cl3-need, .cl3-budget) label span { height: 44px; min-height: 44px; }
/* ==== Style v6: flat (Erfan 18 Oct 2026, from /preview/personality) ====================================================
ONE style: flat colour + the four category tints + a canvas dot grid inside picture frames + thin lines.
No gradients, silk, glows, light beams or frosted glass. The turning chrome rim stays only on the two action points:
Book a call (.btn-rim) and the free-audit form (.ck-form). Rules (design-system README, "Style v6"):
- Tints (tokens tint-*): peach = messaging, sage = website, blue = launch and care, sand = support. Text on a tint uses
that tint's dark text colour. Usage: class="tint t-peach" (+ "dots" on picture frames only, never behind text).
- A tinted tile never sits on a tint (tiles on a tinted band go white).
- Big numbers in cards stay below the section title (40px under a 48px title). */
html body .t-peach { --t-bg: #FCE6DC; --t-fg: #7A2A0E; }
html body .t-sage { --t-bg: #E4EEDF; --t-fg: #2E5631; }
html body .t-blue { --t-bg: #E0E8F4; --t-fg: #23426B; }
html body .t-sand { --t-bg: #EFEAE3; --t-fg: #5C4A33; }
html body .tint { background-color: var(--t-bg) !important; }
html body .tint.dots { background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--t-fg) 22%, transparent) 1px, transparent 1.4px) !important;
background-size: 16px 16px !important; background-position: 8px 8px !important; }
/* hero (home): no coloured glow behind the work, no moving sheen; the thin column lines stay as the hero's one pattern */
html body .hero-work::before, html body .hero-intro::before { display: none !important; }
html[data-hero=grey] .hero::after { display: none !important; }
/* process band: flat ink (no silk photo); the step pictures carry the tints + dots */
html body section.process2.pr-dark.pc { background: #050505 !important; }
html body .pc-art.tint { box-shadow: none; }
/* services pictures: flat tint + dots; the white wireframes redrawn in the tint's dark colour */
html body .svc-art.tint svg .s { stroke: var(--t-fg) !important; fill: #fff !important; }
html body .svc-art.tint svg path.s { fill: none !important; } /* lines and arrowheads are strokes only; the white fill is for boxes (Erfan 22 Oct: white inside the arrowheads) */
html body .svc-art.tint svg .d { stroke: color-mix(in srgb, var(--t-fg) 55%, transparent) !important; }
html body .svc-art.tint svg .ln { stroke: color-mix(in srgb, var(--t-fg) 35%, transparent) !important; }
html body .svc-art.tint svg .pill { stroke: var(--t-fg) !important; }
html body .svc-art.tint svg .f { fill: color-mix(in srgb, var(--t-fg) 28%, transparent) !important; }
html body .svc-art.tint svg .f:not(.o) { fill: color-mix(in srgb, var(--t-fg) 45%, transparent) !important; }
html body .svc-art.tint svg rect.r2:not(.s):not(.f):not(.d):not(.pill) { fill: #fff !important; stroke: var(--t-fg) !important; }
html body .svc-art.tint svg text { fill: var(--t-fg) !important; }
/* industry cards: card ground = its scene's tint (the scenes are flat since 18 Oct) */
html body .se-card.tint { box-shadow: none; }
/* case-study fact boxes on tints, text in the tint's dark colour */
html body .cs-facts.tint, html body .cs-facts.tint * { color: var(--t-fg) !important; }
/* proof: number tiles between the quotes; numbers 40px (title is 48px); the Contra 5.0 matches */
html body .p3-stat { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 4px; color: var(--t-fg); box-shadow: none; }
html body .p3-stat b { font: 500 40px/44px var(--text); letter-spacing: -0.035em; }
html body .p3-stat span { max-width: 18em; font: 500 16px/24px var(--text); }
html body .p3-num { font-size: 40px !important; line-height: 44px !important; }
@media (max-width: 760px) { html body .p3-stat { padding: 24px; } html body .p3-stat b { font-size: 32px; line-height: 36px; } }
/* compare band: flat sand, no light beams; icon tiles white (a tint tile never sits on a tint), icons ink */
html body .cmp { background: #EFEAE3 !important; }
html body .cmp::before, html body .cmp::after { display: none !important; }
html body .cmp .cmp-ico:not(.cmp-logo) { background-color: #FFFFFF !important; box-shadow: inset 0 0 0 1px #E6E6E6 !important; }
html body .cmp .cmp-ico:not(.cmp-logo) svg, html body .cmp .cmp-ico:not(.cmp-logo) svg * { stroke: #050505 !important; color: #050505 !important; }
/* founder portrait: the cut-out of Erfan on peach with the dot grid */
html body .fl-portrait.tint { object-fit: cover; }
/* FAQ help card (peach) and the contact Ask AI band (blue): flat, text on them so no dots */
html body .fq-ask.tint, html body .cl3-ai.tint { box-shadow: none; }
html:not(#ai2) body #contact.cl3 .cl2-in { padding-bottom: var(--section-gap) !important; } /* the grey contact band ends before the blue Ask AI band (beats the older "Ask AI shares the grey" rule, which set 0) */
/* 15 Nov 2026 (Erfan, after the /home-zeal trial: "apply to every page"). Two elements kept from the Zeal design system:
1. the comparison and the FAQ sit on a grey band (--sheet) with white bordered cards (4px), 2. calmer body text (--text-2).
FaqBlock (inner pages) uses the same .faq2 markup, so the FAQ looks the same everywhere. The trial page was removed. */
:root { --text-2: #646464; }
html body .cmp { background: var(--sheet, #F6F6F6) !important; }
html body section.faq2 { background: var(--sheet, #F6F6F6); padding-bottom: var(--section-gap, 128px) !important; }
html body .fq-list details, html body .fq-list details[open] { background: var(--white, #fff) !important; border-radius: 4px !important; box-shadow: inset 0 0 0 1px var(--line, #E6E6E6), 0 1px 3px rgba(0,0,0,.05) !important; }
html body .cs-sum, html body .faq2 p, html body .fq-ask p, html body .checks2 .ck-form p, html body .founder2 p, html body .hero .hero-sub { color: var(--text-2) !important; }
html body :is(.hero, .cases, .sectors, .svc, .proof3, .wall, .checks2, .cmp, .faq2, .founder2, .close2) p:not([class*="-k"]) { color: var(--text-2); }
/* Cookie banner (Base.astro, 15 Nov 2026): bottom-left card in our style, two equal buttons (Reject / Accept). */
html body .pcc { position: fixed; left: 16px; bottom: 16px; z-index: 9990; width: min(380px, calc(100vw - 32px)); padding: 20px; border-radius: var(--r-xs, 4px); background: #FFFFFF; box-shadow: 0 0 0 1px #E6E6E6, 0 12px 32px rgba(5,5,5,.12); }
html body .pcc-t { margin: 0; font: 400 14px/21px var(--text); color: #444444; }
html body .pcc-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
html body .pcc-b .btn { justify-content: center; min-height: 40px; }
html body .pcc-no { background: #FFFFFF; color: #050505; box-shadow: inset 0 0 0 1px #050505; }
html body .pcc-no:hover { background: #F4F4F5; color: #050505; }
/* 15 Nov 2026 (Erfan, phone review: "Why Pentaclay? … the four cards: the mobile design isn't working, make it horizontal
scrolling on every page"). Phones: the five rows (us + four others) become one swipe row, each card 82% wide so the next
one peeks in, edge to edge with the gutter as scroll padding. Desktop and tablet table unchanged. */
@media (max-width: 760px) {
html body .cmp .cmp-table { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
margin-inline: calc(var(--gut) * -1); padding: 4px var(--gut) 8px; scroll-padding-inline: var(--gut); scrollbar-width: none; }
html body .cmp .cmp-table::-webkit-scrollbar { display: none; }
html body .cmp .cmp-table > .cmp-row:not(.cmp-cols) { flex: 0 0 82%; scroll-snap-align: start; align-content: start; padding: 20px 12px; }
}
/* 15 Nov 2026 (found while test-sending the home audit form): after Send the note gets class "ok", which also matches the old
comparison table's global .ok (a 20px circle), so "Got it. Your audit will reach …" was squeezed into a 20px column.
The audit note keeps its own full-width line. */
html body .ck-note.ok, html body .ck-note.err { display: block; width: auto; height: auto; border-radius: 0; background: none; place-items: initial; font-size: 14px; line-height: 20px; }
/* ==== 15 Nov 2026: phone pass (Erfan: "full mobile check of every page"; "cards' top and bottom padding don't match";
"FAQ answers leave a lot of white space on the right"; "centre-aligned things read better left-aligned on mobile") ==== */
@media (max-width: 760px) {
/* How a project runs: the swipe cards stretch to the tallest card. The lead floated down (margin-top:auto) and the picture
stopped short, so short cards had 48–74px under the picture against 24px on top. Lead sits under the title; the spare
height goes between the list and the picture, so every card ends 24px under its picture. */
html body .pc-track > .pc-card { grid-template-rows: 1fr auto; }
html body .pc-track > .pc-card .pc-lead { margin-top: 0; padding-top: 12px; }
}
@media (max-width: 760px) {
/* FAQ answers: the desktop rule ".fq-list details[open] p { padding-right: 56px }" outranked the phone reset, so answers stopped
~68px short of the card edge. On phones they run the full width of the card. */
html body .fq-list details p, html body .fq-list details[open] p { padding-right: 0; max-width: none; }
}
@media (max-width: 760px) {
/* Centred blocks → left on phones (Erfan: "a lot of centre-aligned things look better left-aligned on mobile"). Most inner
pages already start their headings on the left; centred 3–5 line headings and intros gave a ragged left edge. Kept centred:
the client-logo label, the logo wall and single buttons on their own. */
html body :is(.hero-copy, .proof3-head, .pr-head, .cs-head, .se-head, .svc-head, .wall-head, .ck-head, .ck-form, .ck-form-copy),
html body :is(.hero-copy, .proof3-head, .pr-head, .cs-head, .se-head, .svc-head, .wall-head, .ck-head, .ck-form-copy) > :is(h1, h2, h3, p) { text-align: left; }
html body .cs-head { justify-content: start; }
html body .ck-form-copy p { margin-left: 0; }
html body :is(.hero-cta, .ck-qs) { justify-content: flex-start; }
html body .hero-proof { justify-content: start; text-align: left; }
html body .hero-proof li { text-align: left; justify-items: start; }
html body .pc-cta { align-items: flex-start; text-align: left; }
html body .pc-cta .cta-promise { text-align: left; }
}
@media (max-width: 760px) {
html body .cases .cs-head-c { justify-items: start; justify-content: start; text-align: left; }
html body .cases .cs-head-c > * { text-align: left; }
}
@media (max-width: 760px) {
html body .cases .cs-head, html body .cases .cs-head > p.cs-intro, html body .cases .cs-head > h2 { text-align: left; margin-left: 0; }
/* 320px phones: "…Infrastructure" / "…Manufacturing" in the FAQ title was wider than the screen */
html body .faq2 h2.tt { overflow-wrap: break-word; hyphens: auto; }
}
@media (max-width: 760px) {
html body .hero .hero-proof li, html body .hero .hero-proof li * { text-align: left; }
}