/* Adel Labs sub-pages in the landing's language.
   Tokens, base, type, links and buttons, the segmented control, header, phone menu, panels, disclosures, tables,
   project cards, contact and footer follow the landing. The rest maps the sub-page classes onto those
   components. The header is always the floating pill here: no film sits behind it. The landing's heading and label
   scale sets the type. Every section sits on the page's own flat ground. */

/* ══════════ tokens (the landing's) ══════════ */
:root{
  --font-sans:'Manrope',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --t-state:200ms;
  --t-reveal:600ms;
  --r-sm:6px;
  --r:12px;
  --r-pill:999px;
  --rail:1200px;
  --gutter:clamp(16px,4vw,40px);
  --section-y:clamp(52px,5.6vw,80px);
  --header-h:76px;
  --fs-h1:clamp(2.05rem,1.08rem + 4.4vw,5rem);
  --fs-h2:clamp(2.05rem,1.1rem + 3.05vw,3.9rem);
  --fs-h2-xl:clamp(2.3rem,1.1rem + 3.3vw,4rem);
  --fs-h3:clamp(1.1rem,1.01rem + .4vw,1.34rem);
  --fs-lead:clamp(1.02rem,.97rem + .25vw,1.15rem);
  --fs-lead-open:clamp(1.02rem,.9rem + .35vw,1.25rem);
  --fs-body:1rem;
  --fs-small:.9rem;
  --fs-micro:.72rem;
  --film-bg:#0b0c0e;
  --film-ink:#F1EFE9;
  --film-body:#d8d2c6;
  --film-accent:#E4B48A;
  --film-line:rgba(241,239,233,.14);
  --film-line-2:rgba(241,239,233,.26);
  --film-line-3:rgba(241,239,233,.45);
  --film-glass:rgba(13,14,17,.58);
  --film-plate:rgba(13,14,17,.93);
  --hi-edge:rgba(255,255,255,.18);
  --lit-edge:rgba(241,239,233,.34);
}
:root[data-appearance="dark"]{
  --bg:#0e1013;--bg-2:#111317;--surface:#15181d;--surface-2:#1b1f25;--surface-3:#232830;
  --ink:#F1EFE9;--body:#cfcabf;--muted:#9a9487;
  --line:rgba(241,239,233,.09);--line-2:rgba(241,239,233,.16);--line-3:rgba(241,239,233,.28);
  --accent:#B87942;--accent-hi:#E4B48A;--accent-deep:#825027;--accent-text:#E4B48A;
  --btn-bg:#B87942;--btn-bg-hover:#CD9161;--on-accent:#0e1013;
  --edge:rgba(255,255,255,.055);
  --shadow:rgba(0,0,0,.55);--glow:rgba(228,180,138,.26);--wash:rgba(184,121,66,.07);
  --pill-bg:rgba(17,19,23,.84);--pill-solid:#14171b;
  --plate-solid:#14171b;
  --field-line:#6f6b64;
  color-scheme:dark;
}
:root[data-appearance="black"]{
  --bg:#000;--bg-2:#050607;--surface:#0b0c0e;--surface-2:#111316;--surface-3:#191c21;
  --ink:#F1EFE9;--body:#cfcabf;--muted:#968f82;
  --line:rgba(241,239,233,.10);--line-2:rgba(241,239,233,.17);--line-3:rgba(241,239,233,.30);
  --accent:#B87942;--accent-hi:#E4B48A;--accent-deep:#825027;--accent-text:#E4B48A;
  --btn-bg:#B87942;--btn-bg-hover:#CD9161;--on-accent:#000;
  --edge:rgba(255,255,255,.05);
  --shadow:rgba(0,0,0,.7);--glow:rgba(228,180,138,.24);--wash:rgba(184,121,66,.06);
  --pill-bg:rgba(7,8,9,.86);--pill-solid:#08090b;
  --plate-solid:#08090b;
  --field-line:#6f6b64;
  --film-bg:#000;
  color-scheme:dark;
}
:root[data-appearance="light"]{
  --bg:#F4F1EA;--bg-2:#EEEAE0;--surface:#FAF8F3;--surface-2:#F2EEE5;--surface-3:#E7E1D5;
  --ink:#14171b;--body:#34332f;--muted:#5d574c;
  --line:rgba(20,23,27,.10);--line-2:rgba(20,23,27,.17);--line-3:rgba(20,23,27,.30);
  --accent:#B87942;--accent-hi:#9A5F2E;--accent-deep:#825027;--accent-text:#825027;
  --btn-bg:#825027;--btn-bg-hover:#6d421f;--on-accent:#FBF9F4;
  --edge:rgba(255,255,255,.75);
  --shadow:rgba(64,46,24,.16);--glow:rgba(184,121,66,.22);--wash:rgba(184,121,66,.07);
  --pill-bg:rgba(250,248,243,.9);--pill-solid:#FAF8F3;
  --plate-solid:#FBF9F4;
  --field-line:#7d786e;
  --lit-edge:rgba(255,255,255,1);
  color-scheme:light;
}

/* ══════════ base ══════════ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);overflow-x:clip;scrollbar-gutter:stable}
html.menu-open{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color var(--t-state) var(--ease),color var(--t-state) var(--ease)}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,pre){margin:0}
:where(ul,ol){padding:0;list-style:none}
h1,h2,h3,h4{color:var(--ink);font-weight:700;font-style:normal;overflow-wrap:anywhere;min-width:0}
strong{color:var(--ink);font-weight:700}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:var(--r-sm)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 16px;background:var(--btn-bg);color:var(--on-accent);border-radius:var(--r-sm);font-weight:700}
.skip:focus{top:16px}
.rail,.wrap{width:100%;max-width:calc(var(--rail) + 2 * var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.wrap .wrap{max-width:none;padding-inline:0}
.section{position:relative;padding-block:var(--section-y)}
/* the pointer light that site.js still creates belongs to the retired design */
.site-pointer-light{display:none!important}

/* ══════════ type ══════════ */
h1{font-size:var(--fs-h1);line-height:1;letter-spacing:-.04em;text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
h3{font-size:var(--fs-h3);line-height:1.24;letter-spacing:-.018em}
h4{font-size:.98rem;line-height:1.35;letter-spacing:-.01em}
.lead{font-size:var(--fs-lead);line-height:1.62;color:var(--body);max-width:62ch}
main p,main li,main dd{max-width:70ch}
main p:not(.contact-email) a:not([class]),main dd a:not([class]),.about-source a{color:var(--ink);font-weight:700;background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;transition:color var(--t-state) var(--ease)}
main p:not(.contact-email) a:not([class]):hover,main dd a:not([class]):hover,.about-source a:hover{color:var(--accent-text)}
.eyebrow,.breadcrumb,.breadcrumbs,.service-breadcrumbs,.case-label,.research-family,.step-number,.policy-num,.catalog-status,.collection-count,.service-evidence-label,.founder-title,.media-caption,.locus-delivery-label,.service-receive > span,.deliverable-check > summary{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted);line-height:1.5}
.eyebrow{display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--accent)}
/* inside panels and boxes the label reads like the landing's "What you receive" caption: accent, no ring */
:is(.service-card,.service-framing,.service-engagement,.workflow-proof-panel,.founder-context,.project-evidence-check,.work-starting-points,.locus-offer-heading,.agent-workflows,.service-evidence,.project-story) .eyebrow{color:var(--accent-text)}
:is(.service-framing,.service-engagement,.workflow-proof-panel,.founder-context,.project-evidence-check,.work-starting-points,.service-card) .eyebrow::before{content:none}

/* prose flow: zero specificity, so every component with its own gaps overrides it */
:where(main) :where(*) + :where(p,h2,h3,h4,ul,ol,dl,pre,table,figure,form,details,section,aside,.actions,.media,.service-table-scroll,.filters,.catalog-tools,.catalog-status,.catalog-grid,.catalog-groups,.faq-list,.workflow-grid,.project-facts,.agent-capabilities,.founder-profiles){margin-top:14px}
:where(main) :where(*) + :where(h2){margin-top:28px}
:where(main) :where(.eyebrow,.project-name,.research-family) + :where(h1,h2){margin-top:20px}
:where(main) :where(.eyebrow,.project-name,.research-family) + :where(h3){margin-top:12px}
:where(main) :where(*) + :where(h1){margin-top:16px}
:where(main) :where(h1) + :where(*){margin-top:20px}
:where(main) :where(h2,h3) + :where(p,ul,ol){margin-top:12px}
:where(main) :where(*) + :where(.actions){margin-top:28px}

/* ══════════ links & buttons ══════════ */
.tlink,.text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--ink);font-weight:700;font-size:.95rem;line-height:1.35;text-align:left;background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:2px;transition:background-size var(--t-reveal) var(--ease),color var(--t-state) var(--ease)}
.tlink:hover,.text-link:hover{background-size:100% 1px;color:var(--accent-text)}
.btn,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-pill);font-weight:700;font-size:.95rem;line-height:1.25;letter-spacing:-.005em;text-align:center;transition:background-color var(--t-state) var(--ease),color var(--t-state) var(--ease),border-color var(--t-state) var(--ease),transform var(--t-state) var(--ease)}
.btn{white-space:nowrap}
.button{padding-block:10px;max-width:100%}
.btn:active,.button:active{transform:scale(.98)}
.btn-primary,.button{background:var(--btn-bg);color:var(--on-accent);box-shadow:inset 0 1px 0 var(--hi-edge)}
.btn-primary:hover,.button:hover{background:var(--btn-bg-hover)}
.btn-quiet,.button.secondary{border:1px solid var(--line-2);color:var(--ink);background:var(--surface);box-shadow:none}
.btn-quiet:hover,.button.secondary:hover{border-color:var(--line-3);background:var(--surface-2)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.88rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.actions > *{margin:0}

/* segmented control with a gliding pill (the landing's) */
.seg{--n:3;position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge)}
.seg button{position:relative;z-index:1;min-height:34px;padding:0 12px;border-radius:var(--r-pill);font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap;transition:color var(--t-state) var(--ease)}
.seg button[aria-pressed="true"],.seg button:hover{color:var(--ink)}
.seg-mark{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n));border-radius:var(--r-pill);background:var(--surface-3);box-shadow:inset 0 1px 0 var(--edge);transform:translateX(calc(var(--k,0) * 100%));transition:transform var(--t-reveal) var(--ease)}

/* ══════════ header: the landing's floating pill, always ══════════ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--header-h);color:var(--ink)}
.header-inner{position:relative;height:100%;max-width:calc(var(--rail) + 2 * var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));display:flex;align-items:center;gap:20px}
.hdr-pill{position:absolute;top:8px;bottom:8px;left:calc(var(--gutter) - 14px);right:calc(var(--gutter) - 14px);border-radius:var(--r-pill);background:var(--pill-bg);border:1px solid var(--line-2);-webkit-backdrop-filter:saturate(1.3) blur(16px);backdrop-filter:saturate(1.3) blur(16px);box-shadow:0 14px 34px -22px var(--shadow);overflow:hidden;pointer-events:none}
.progress{position:absolute;left:22px;right:22px;bottom:0;height:1px;overflow:hidden}
.progress-bar{display:block;height:100%;background:linear-gradient(90deg,transparent,var(--accent));transform-origin:0 50%;transform:scaleX(var(--p,0))}
.wordmark{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;color:inherit;font-weight:700;letter-spacing:-.01em;font-size:1.02rem;flex:none}
.nav{position:relative;display:flex;align-items:center;gap:2px;margin-inline:auto}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 10px;font-size:.86rem;font-weight:700;color:var(--muted);white-space:nowrap;border-radius:var(--r-sm);transition:color var(--t-state) var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
/* the landing's section underline; here it rests on the current section (placed once by the shell script, no glide) */
.nav-mark{position:absolute;left:0;bottom:4px;width:100px;height:2px;border-radius:2px;background:var(--accent);transform-origin:0 50%;transform:translateX(var(--nx,0px)) scaleX(var(--ns,0));opacity:var(--no,0)}
.header-tail{position:relative;display:flex;align-items:center;gap:14px;flex:none}
.site-header .seg{background:var(--surface);border-color:var(--line)}
.menu-toggle{display:none;min-height:44px;min-width:44px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-weight:700;font-size:.88rem;color:inherit;background:var(--surface)}
.cta-short{display:none}
.mobile-nav{position:fixed;inset:var(--header-h) 0 0 0;z-index:39;background:var(--pill-solid);border-top:1px solid var(--line);padding-block:8px calc(24px + env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}
.mobile-nav .rail{display:flex;flex-direction:column}
.mobile-nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:700;font-size:1.05rem}
.mobile-nav a[aria-current="page"]{color:var(--accent-text)}
.mobile-nav .seg{margin-top:24px;align-self:flex-start}
.seg-wide button{min-height:44px;padding:0 18px}

/* ══════════ page frame ══════════ */
main{display:block;padding-top:var(--header-h)}
/* top-level blocks meet edge to edge; their own padding sets the rhythm, so toned bands touch (the 404's main holds its text directly) */
main:not(.section) > *{margin-block:0}
main > :first-child{padding-top:clamp(24px,3vw,40px)}
main.wrap.section{padding-top:calc(var(--header-h) + clamp(24px,3vw,40px))}
:where(main) :where(p,h1,h2) + :where(.button){margin-top:24px}
main > .breadcrumbs:first-child{padding-top:clamp(20px,2.6vw,32px)}
main > .breadcrumbs + .section{padding-top:clamp(16px,2vw,24px)}
/* toned bands (the landing's alternation): full bleed behind a rail-wide block */
/* box-shadow and border-image outset are ink overflow: they paint full width without widening the page */
.project-workflow,.collection-next,.audit-service-compute,.enquiry-section{background:var(--bg-2);box-shadow:0 0 0 100vmax var(--bg-2);clip-path:inset(0 -100vmax);border-top:1px solid var(--line);border-image:linear-gradient(var(--line),var(--line)) 1 / 1px 0 0 0 / 0 100vmax}

/* breadcrumbs */
.breadcrumb,.breadcrumbs ol,.service-breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px}
.breadcrumb > span[aria-hidden]{color:var(--muted)}
:is(.breadcrumbs,.service-breadcrumbs) li{display:inline-flex;align-items:center;min-height:44px}
:is(.breadcrumbs,.service-breadcrumbs) li + li::before{content:"/";margin-right:10px;color:var(--muted)}
.breadcrumb a,.breadcrumbs a,.service-breadcrumbs a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--body);transition:color var(--t-state) var(--ease)}
.breadcrumb a:hover,.breadcrumbs a:hover,.service-breadcrumbs a:hover{color:var(--ink)}
:is(.breadcrumb,.breadcrumbs,.service-breadcrumbs) [aria-current]{color:var(--ink)}
.breadcrumb + *,.service-breadcrumbs + *{margin-top:6px}
.service-breadcrumbs{margin-bottom:6px}

/* page openings */
.page-intro .lead,.project-intro .lead,.service-opening-chapter .lead{max-width:64ch;font-size:var(--fs-lead-open);line-height:1.56}
.project-name{font-weight:700;font-size:1.15rem;color:var(--ink);letter-spacing:-.01em}

/* ══════════ panels (the landing's) ══════════ */
.panel,.service-card,.work-starting-points > a,.workflow-grid > article,.service-evidence,.locus-delivery > article,.founder-context > div,.project-evidence-check,.workflow-proof-panel,.agent-workflows,.collection-resources,.locus-location{position:relative;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-2),var(--surface) 62%);box-shadow:inset 0 1px 0 var(--edge)}
/* the receive box */
.service-receive,.service-framing > div,.project-facts > div,.founder-education,.service-supplement,.empty-state{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg)}
.gloss,.scope-note,.project-note,.case-essential,.public-profile-note,.service-table-hint,.media-caption,.project-screen figcaption,.service-recording figcaption{font-size:var(--fs-small);line-height:1.62;color:var(--muted);max-width:64ch}
.media-caption{font-size:var(--fs-micro)}

/* ══════════ disclosures: the landing's box and plus; the content fades in ══════════ */
main details{border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:inset 0 1px 0 var(--edge);transition:border-color var(--t-state) var(--ease)}
main details[open]{border-color:var(--line-2)}
main summary{position:relative;display:block;min-height:60px;padding:17px 64px 17px 20px;cursor:pointer;list-style:none;border-radius:var(--r);color:var(--ink);font-weight:700;font-size:.98rem;letter-spacing:-.01em;line-height:1.35}
main summary::-webkit-details-marker{display:none}
main summary::after{content:"";position:absolute;right:16px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;border:1px solid var(--line-2);background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;transition:transform var(--t-reveal) var(--ease),border-color var(--t-state) var(--ease),background-color var(--t-state) var(--ease)}
main details[open] > summary::after{transform:rotate(45deg);border-color:var(--accent);background-color:var(--wash)}
.audit-disclosure > summary > span,.brief-details > summary > span{display:block;margin-top:2px;font-weight:400;color:var(--muted);font-size:.86rem;letter-spacing:0}
main details > :not(summary){margin-inline:20px}
main details > summary + *{margin-top:4px}
main details > :not(summary):last-child{margin-bottom:26px}
html.anim main details[open] > :not(summary){animation:acc-in var(--t-reveal) var(--ease) both}
@keyframes acc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
main details + details{margin-top:8px}
/* content lists inside prose */
main :not(nav) > ul:not([class]) > li,.deliverables > li{position:relative;padding-left:24px;line-height:1.55}
main :not(nav) > ul:not([class]) > li::before{content:"";position:absolute;left:5px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--line-3)}
main :not(nav) > ul:not([class]) > li + li,main :not(nav) > ol:not([class]) > li + li{margin-top:8px}
main :not(nav) > ol:not([class]){counter-reset:step}
main :not(nav) > ol:not([class]) > li{position:relative;padding-left:40px;line-height:1.55;counter-increment:step}
main :not(nav) > ol:not([class]) > li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:.2em;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--accent-text)}

/* ══════════ tables (the landing's table-scroll) ══════════ */
.service-table-scroll{overflow-x:auto;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.service-mode-table{width:100%;min-width:720px;border-collapse:collapse;font-size:.88rem;line-height:1.5}
.service-mode-table th,.service-mode-table td{padding:13px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.service-mode-table tr:last-child > *{border-bottom:0}
.service-mode-table thead th{color:var(--ink);font-weight:700;background:var(--surface)}
.service-mode-table tbody th{color:var(--ink);font-weight:700;width:22%}
.service-mode-table td{color:var(--body)}

/* ══════════ media: the landing's poster frame, recording tag and round button ══════════ */
.media{position:relative;isolation:isolate;aspect-ratio:16 / 10!important;background:var(--film-bg);border-radius:var(--r);border:1px solid var(--line-2);overflow:hidden}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.media video{opacity:0;transition:opacity var(--t-reveal) var(--ease)}
.media.is-playing video{opacity:1}
.rec-tag{position:absolute;left:10px;top:10px;z-index:1;display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 9px;border-radius:var(--r-pill);background:var(--film-plate);border:1px solid var(--film-line-2);color:var(--film-body);font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity var(--t-state) var(--ease)}
.rec-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--film-accent)}
.media.is-playing .rec-tag{opacity:1}
/* site.js writes "Play preview" / "Pause preview" into the button: the words stay its accessible name, the icon shows the state */
.media-button{position:absolute;right:10px;top:10px;z-index:2;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--film-line-2);background:var(--film-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:transparent;font-size:0;line-height:0;overflow:hidden;transition:border-color var(--t-state) var(--ease),background-color var(--t-state) var(--ease)}
.media-button:hover{border-color:var(--film-line-3);background:var(--film-plate)}
.media-button::before{content:"";width:13px;height:15px;margin-left:3px;background:var(--film-ink);clip-path:polygon(0 0,100% 50%,0 100%)}
.media-button[aria-pressed="true"]::before{width:12px;height:14px;margin-left:0;clip-path:none;background:linear-gradient(90deg,var(--film-ink) 0 34%,transparent 34% 66%,var(--film-ink) 66%)}
/* the focus ring sits on a dark halo so it reads over pale posters too */
.media-button:focus-visible{outline:2px solid var(--film-ink);outline-offset:2px;border-radius:50%;box-shadow:0 0 0 6px rgba(11,12,14,.72)}
@media (forced-colors:active){
  .media-button{width:auto;padding:0 12px;border-radius:22px;font-size:.8rem;line-height:1.2;color:ButtonText;background:ButtonFace}
  .media-button::before{display:none}
}

/* ══════════ project cards: the landing's li.project ══════════ */
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* rows keep equal bottoms while every context is closed; an open one grows its own card only */
.catalog-grid:has(> .catalog-card > details.project-context[open]){align-items:start}
.catalog-card{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:inset 0 1px 0 var(--edge);overflow:hidden;transition:border-color var(--t-state) var(--ease),transform var(--t-state) var(--ease)}
.catalog-card:hover,.catalog-card:focus-within{border-color:var(--line-3)}
.catalog-card:hover{transform:translateY(-2px)}
.catalog-card > *{margin:0 18px;min-width:0}
.catalog-card > .media{margin:0 0 8px;border:0;border-bottom:1px solid var(--line);border-radius:0}
.catalog-card > :last-child{margin-bottom:14px}
.catalog-card > .research-family,.catalog-card > .case-label{color:var(--accent-text)}
.catalog-card > .research-family + .case-label{margin-top:-5px}
.catalog-card > h3{font-size:1.06rem;line-height:1.3;letter-spacing:-.015em}
.catalog-card > p:not([class]){font-size:.88rem;line-height:1.52;color:var(--body)}
.project-caveat,.project-attribution{font-size:.83rem;line-height:1.5;color:var(--muted)}
.project-origin{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-block:-11px -9px!important;font-size:.83rem;font-weight:700;color:var(--muted);background-image:linear-gradient(var(--line-3),var(--line-3));background-size:100% 1px;background-position:0 calc(50% + .8em);background-repeat:no-repeat;transition:color var(--t-state) var(--ease)}
.project-origin:hover{color:var(--ink)}
.project-card-actions,.project-child-links,.project-related-links,.project-resource-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.project-card-actions{margin-top:auto!important;padding-top:4px}
.catalog-card :is(.project-card-actions,.project-child-links,.project-related-links,.project-resource-links) .text-link{font-size:.9rem}
.project-child-links .text-link,.project-related-links .text-link,.project-resource-links .text-link{font-weight:700;color:var(--body)}
/* the context disclosure: compact, under the card */
.catalog-card > details.project-context{margin:4px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
.catalog-card > details.project-context:last-child{margin-bottom:0}
.project-context > summary{min-height:48px;padding:13px 56px 13px 18px;font-size:.88rem;border-radius:0}
.project-context > summary:focus-visible{outline-offset:-3px}
.project-context > summary::after{right:14px;width:28px;height:28px;margin-top:-14px;background-size:11px 1.5px,1.5px 11px}
.project-context > .project-context-body{margin:0 18px 16px}
.project-context-body > * + *{margin-top:12px}
.project-context-body dl{display:grid;gap:10px}
.project-context-body dt,.formal-project-title strong{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--accent-text)}
.project-context-body dd,.formal-project-title{margin-top:2px;font-size:.86rem;line-height:1.55;color:var(--body)}
.project-secondary-media > * + *{margin-top:8px}
.catalog-card > .project-related-links{margin-top:0}

/* ══════════ work: collection tabs, search, groups ══════════ */
.catalog-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px clamp(24px,5vw,80px);align-items:end}
.eyebrow + .catalog-head{margin-top:20px}
.catalog-head > *,.catalog-head > div > *{margin:0}
.catalog-head > div{display:grid;gap:12px}
.catalog-head h2{font-size:var(--fs-h3);letter-spacing:-.018em}
.catalog-head p,.collection-attribution{color:var(--body)}
.collection-attribution{font-size:var(--fs-small);color:var(--muted)}
.collection-case-links{display:flex;flex-wrap:wrap;gap:0 24px}
/* the filter row: the landing's work tabs, a static underline on the selected one; the row wraps instead of scrolling,
   so every tab and count stays in view at any width */
.filters{position:relative;display:flex;flex-wrap:wrap;column-gap:4px;border-bottom:1px solid var(--line)}
.filter{position:relative;display:inline-flex;align-items:center;gap:10px;flex:none;min-height:52px;padding:0 14px;font-weight:700;font-size:.93rem;color:var(--muted);white-space:nowrap;transition:color var(--t-state) var(--ease)}
.filter:first-child{padding-left:2px}
.filter > span{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.1em;font-weight:500;color:var(--muted)}
.filter:hover,.filter[aria-current="page"],.filter[aria-pressed="true"]{color:var(--ink)}
.filter[aria-current="page"] > span,.filter[aria-pressed="true"] > span{color:var(--accent-text)}
.filter[aria-current="page"]::after,.filter[aria-pressed="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:var(--accent-text)}
.filter:first-child::after{left:2px}
.catalog-tools{display:grid;gap:18px}
.catalog-tools > *{margin:0;min-width:0}
.catalog-search{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;max-width:520px}
.search-wrap{flex:1 1 220px;min-width:0}
#clear-project-search{flex:none;white-space:nowrap}
.catalog-status{letter-spacing:.08em}
.catalog-status + *{margin-top:18px!important}
.empty-state{padding:18px 20px;color:var(--body)}
.collection-directory{margin-top:28px}
.collection-directory > .filters{margin:0 20px 18px;border-bottom:0}
.catalog-groups{display:grid;gap:0}
.catalog-groups > *{margin:0}
.collection-disclosure{border:0;border-top:1px solid var(--line-2);border-radius:0;background:none;box-shadow:none}
.collection-disclosure:last-of-type{border-bottom:1px solid var(--line-2)}
.collection-disclosure > summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;min-height:76px;padding:22px 64px 22px 0;border-radius:0;font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);letter-spacing:-.02em}
.collection-disclosure > summary::after{right:0}
.collection-disclosure > .catalog-grid{margin:6px 0 36px}
.related-projects{margin-top:clamp(40px,5vw,64px)!important;padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line-2)}
.catalog-group-heading{display:grid;gap:10px;margin-bottom:24px}
.catalog-group-heading > *{margin:0}
.catalog-group-heading h2{font-size:clamp(1.3rem,1.05rem + .9vw,1.8rem)}
.catalog-group-heading p{color:var(--muted)}
.collection-resources{display:grid;gap:10px;justify-items:start;margin-top:clamp(32px,4vw,48px)!important;padding:clamp(20px,2.4vw,28px)}
.collection-resources > *{margin:0}
.collection-resources h2{font-size:var(--fs-h3)}
.work-starting-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.4vw,44px)!important}
.work-starting-points > a{display:flex;flex-direction:column;gap:10px;padding:22px 20px 16px;transition:border-color var(--t-state) var(--ease),transform var(--t-state) var(--ease)}
.work-starting-points > a > *{margin:0}
.work-starting-points > a:hover{border-color:var(--line-3);transform:translateY(-2px)}
.work-starting-points h2{font-size:clamp(1.15rem,1.02rem + .45vw,1.35rem);line-height:1.2;letter-spacing:-.02em}
.work-starting-points p{font-size:.92rem;color:var(--body)}
.work-starting-points .text-link{margin-top:auto;font-size:.92rem}
.work-starting-points > a:hover .text-link{background-size:100% 1px;color:var(--accent-text)}

/* ══════════ forms (search, brief) ══════════ */
input[type="search"],input[type="text"],input:not([type]),select,textarea{display:block;width:100%;min-height:48px;margin:0;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--field-line);background:var(--surface);color:var(--ink);font:inherit;font-size:1rem;line-height:1.45;box-shadow:inset 0 1px 0 var(--edge);transition:border-color var(--t-state) var(--ease)}
textarea{min-height:148px;resize:vertical}
select{-webkit-appearance:none;appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 23px) 52%,calc(100% - 17px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
select option{background:var(--surface);color:var(--ink)}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--muted)}
::placeholder{color:var(--muted);opacity:1}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--accent-text);box-shadow:0 0 0 1px var(--accent-text)}
#brief-form{display:grid;gap:18px}
#brief-form > *{margin:0}
#brief-form label{display:grid;gap:8px;color:var(--ink);font-weight:700;font-size:1rem;line-height:1.4}
#brief-form > p{font-size:var(--fs-small);color:var(--muted);margin-top:-8px}
#brief-form .brief-details{background:var(--bg)}
.brief-details > label{margin-top:14px!important}
#brief-form .button{justify-self:start;min-width:200px}
#brief-result{display:grid;gap:14px;padding:clamp(20px,2.4vw,28px);border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface)}
#brief-result > *{margin:0}
#brief-result h2{font-size:var(--fs-h3)}
#brief-text{padding:16px 18px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:var(--font-mono);font-size:.84rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
#copy-status{color:var(--body)}

/* ══════════ services ══════════ */
.service-list{padding-bottom:var(--section-y)}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(7,auto);gap:16px}
/* rows aligned across the set: every card spans the same seven rows, so each row of cards ends level */
.service-card{grid-row:span 7;display:grid;grid-template-rows:subgrid;row-gap:11px;padding:22px 18px 14px;overflow:hidden}
.service-card > *{margin:0}
.service-card::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--lit-edge),transparent);pointer-events:none}
.service-card > .eyebrow:first-child{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);letter-spacing:.04em}
.service-card h3{font-size:clamp(1.24rem,1.02rem + .5vw,1.5rem);line-height:1.16;letter-spacing:-.024em;text-wrap:balance}
.service-card > p:not([class]){font-size:.9rem;line-height:1.56}
.service-receive{align-self:end;padding:12px 14px;color:var(--ink);font-size:.9rem;line-height:1.55}
.service-receive > span{display:block;margin-bottom:6px;color:var(--accent-text)}
.service-card .text-link{align-self:start;justify-self:start;font-size:.9rem}
.service-supplement{display:grid;gap:4px;justify-items:start;padding:12px 14px}
.service-supplement > *{margin:0}
.service-supplement p{font-size:.86rem;color:var(--muted)}
.service-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.service-bottom > *{margin:0}
.audit-service-compute{padding-block:var(--section-y)}
.audit-disclosure{background:var(--surface)}
.audit-disclosure > summary{min-height:72px;font-size:1.1rem}
.audit-disclosure > .audit-disclosure-body{margin-inline:0}
.locus-offer.section{padding-block:8px 8px}
.locus-offer .wrap{padding-inline:clamp(16px,2.4vw,28px)}
.locus-offer .wrap > * + *{margin-top:20px}
.locus-offer-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(24px,4vw,56px);align-items:end}
.locus-offer-heading > *,.locus-offer-heading > div > *{margin:0}
.locus-offer-heading > div{display:grid;gap:12px}
.locus-offer-heading h2 span{color:var(--accent-text)}
.locus-delivery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.locus-delivery > article{display:flex;flex-direction:column;gap:10px;padding:20px}
.locus-delivery > article > *{margin:0}
.locus-delivery-label{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--accent-text)}
.locus-delivery-label span + span{color:var(--muted)}
.locus-delivery-result{padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:.92rem}
.locus-offer-links{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:auto!important}
.locus-location{display:grid;gap:8px;padding:18px 20px}
.locus-location > *{margin:0}
.locus-offer-close{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.locus-offer-close > *{margin:0}
/* service detail pages */
.service-detail > *{margin-top:clamp(40px,5vw,64px)}
.service-detail > :first-child{margin-top:0}
.service-detail > details + details,.service-detail > details + .service-disclosure{margin-top:10px}
.service-opening-chapter > *{margin-top:0}
.service-opening-chapter .eyebrow{margin-top:10px}
.service-opening-chapter h1{margin-top:14px}
.service-opening-chapter .lead{margin-top:20px}
.service-opening-chapter .actions{margin-top:28px}
.service-framing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(32px,4vw,48px)!important;max-width:980px}
.service-framing > div{display:grid;gap:8px;align-content:start;padding:16px 18px}
.service-framing > div > *{margin:0}
.service-framing p:not(.eyebrow){color:var(--ink);font-size:.95rem;line-height:1.55}
.service-evidence{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(24px,3.4vw,48px);row-gap:0;align-items:start;padding:clamp(20px,2.6vw,32px)}
.service-evidence > *{grid-column:2;margin:10px 0 0}
.service-evidence > .eyebrow:first-child{grid-column:1 / -1;margin:0 0 6px}
.service-evidence > .service-recording{grid-column:1;grid-row:2 / span 30}
.service-evidence-label{color:var(--accent-text);margin-top:10px!important}
.service-evidence > .eyebrow:first-child + .service-evidence-label{margin-top:0!important}
.service-recording > * + *{margin-top:10px}
.service-example{display:grid;gap:2px;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);transition:border-color var(--t-state) var(--ease),background-color var(--t-state) var(--ease)}
.service-example:hover{border-color:var(--line-3);background:var(--surface-2)}
.service-example strong{display:inline-flex;gap:8px;font-size:1rem}
.service-example > span{font-size:.88rem;line-height:1.5;color:var(--body)}
.service-evidence .scope-note{margin-top:8px!important}
.related-label{margin-top:12px!important}
.collection-link{display:inline-flex;align-items:center;min-height:44px;justify-self:start;font-weight:700;font-size:.95rem;color:var(--ink);background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size var(--t-reveal) var(--ease),color var(--t-state) var(--ease)}
.collection-link:hover{background-size:100% 1px;color:var(--accent-text)}
.service-evidence > .collection-link + .collection-link{margin-top:-8px!important}
.scope-disclosure > summary,.service-proof > summary{min-height:72px;font-size:1.1rem}
.scope-disclosure > div > * + *{margin-top:14px}
.service-scope-intro{color:var(--body)}
.deliverables{display:grid;gap:0;margin-top:18px!important;border-top:1px solid var(--line)}
.deliverables > li{padding:14px 0 6px 28px;border-bottom:1px solid var(--line);max-width:none}
.deliverables > li::before{content:"";position:absolute;left:2px;top:1.25em;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--accent)}
.deliverables > li > p{color:var(--ink);max-width:78ch}
.deliverable-check{margin-top:2px!important;border:0;background:none;box-shadow:none}
.deliverable-check > summary{display:inline-flex;align-items:center;min-height:44px;padding:0 40px 0 0;color:var(--accent-text);letter-spacing:.1em}
.deliverable-check > summary::after{right:0;width:26px;height:26px;margin-top:-13px;background-size:10px 1.5px,1.5px 10px}
.deliverable-check > :not(summary){margin:0 0 10px}
.service-check{padding:10px 14px;border-radius:var(--r-sm);border-left:2px solid var(--accent);background:var(--wash);color:var(--body);font-size:.92rem}
.service-engagement{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:clamp(18px,2.4vw,28px);border-radius:var(--r);border:1px solid var(--line);background:var(--bg-2)}
.service-engagement > *{margin:0}
.service-engagement > div{display:grid;gap:8px;align-content:start;padding:4px 4px 8px}
.service-engagement > div > *{margin:0}
.service-engagement > details{grid-column:1 / -1}
.service-block > .eyebrow + h2{margin-top:12px}
.service-block > p:not([class]){color:var(--body)}
.service-block > details{margin-top:16px}
.service-block > details + details{margin-top:8px}
.service-proof ol{margin-top:16px}
/* the worked example: step buttons as the landing's segmented control, panels as its service panels */
.workflow-proof-nav{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,auto);gap:2px;margin-top:22px!important;padding:3px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge);max-width:100%}
.workflow-proof-nav button{min-height:44px;padding:0 16px;border-radius:var(--r-pill);font-size:.86rem;font-weight:700;color:var(--muted);white-space:nowrap;transition:color var(--t-state) var(--ease),background-color var(--t-state) var(--ease)}
.workflow-proof-nav button:hover{color:var(--ink)}
.workflow-proof-nav button[aria-pressed="true"]{color:var(--ink);background:var(--surface-3);box-shadow:inset 0 1px 0 var(--edge)}
.workflow-proof-panel{display:grid;gap:10px;margin-top:14px!important;padding:clamp(20px,2.4vw,28px);max-width:820px}
.workflow-proof-panel > *{margin:0}
.workflow-proof > .text-link{margin-top:10px}
.agent-workflows{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);gap:14px clamp(28px,4vw,56px);padding:clamp(22px,2.6vw,34px)}
.agent-workflows > *{grid-column:1;margin:0}
.agent-workflows > .agent-capabilities{grid-column:2;grid-row:1 / span 4}
.agent-workflows > h3{font-size:clamp(1.3rem,1.05rem + .9vw,1.8rem);line-height:1.15}
.agent-capabilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px;align-content:start}
.agent-capabilities article{padding:11px 0;border-top:1px solid var(--line)}
.agent-capabilities h4{font-size:.94rem}
.agent-capabilities p{margin-top:4px;font-size:.88rem;line-height:1.55;color:var(--muted)}
.agent-workflows > details{align-self:start}
/* FAQ */
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;align-items:start;margin-top:clamp(22px,2.8vw,34px)!important}
.faq-list > details{margin:0}
.faq-list details > p{color:var(--body)}
.faq-list details > .text-link{margin-top:6px}

/* ══════════ projects ══════════ */
.project-intro{padding-bottom:clamp(28px,3.4vw,44px)}
.project-screen{padding-bottom:clamp(40px,5vw,64px)}
.project-screen figcaption{margin-top:12px}
.project-story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(28px,5vw,80px);border-top:1px solid var(--line);border-image:linear-gradient(var(--line),var(--line)) 1 / 1px 0 0 0 / 0 100vmax}
.project-story > div > *{margin:0}
.project-story > div{display:grid;gap:12px;align-content:start}
.project-story > *{margin:0}
.workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(24px,3vw,36px)!important}
@media (min-width:861px){.workflow-grid.workflow-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.workflow-grid > article{display:grid;gap:10px;align-content:start;padding:22px 20px 20px}
.workflow-grid > article > *{margin:0}
.step-number{display:inline-grid;place-items:center;justify-self:start;width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);color:var(--accent-text);letter-spacing:.04em}
.workflow-grid p{font-size:.94rem}
.project-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px!important}
.project-facts > div{padding:12px 14px}
.project-facts dt{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--accent-text)}
.project-facts dd{margin-top:6px;color:var(--ink);font-size:.9rem;line-height:1.55}
.project-note{margin-top:16px!important}
.project-evidence-check{display:grid;gap:10px;justify-items:start;margin-top:24px!important;padding:clamp(20px,2.4vw,28px);max-width:880px}
.project-evidence-check > *{margin:0}
.project-workflow > .actions{margin-top:24px}
.comfy-case-assets{margin-top:clamp(32px,4vw,48px)!important}
.comfy-case-assets h2{font-size:clamp(1.3rem,1.05rem + .9vw,1.8rem)}
.comfy-case-assets > div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.comfy-case-assets figure{margin:0}
.comfy-case-assets img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--r);border:1px solid var(--line-2);background:var(--film-bg)}
.comfy-case-assets figcaption{display:grid;gap:2px;margin-top:10px;font-size:.88rem;line-height:1.5;color:var(--muted)}

/* ══════════ founder ══════════ */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.about-grid > *{margin:0}
.about-grid figure{position:sticky;top:calc(var(--header-h) + 24px)}
.about-photo{width:100%;aspect-ratio:4 / 3;object-fit:cover;object-position:50% 30%;border-radius:var(--r);border:1px solid var(--line-2);background:var(--film-bg)}
.about-photo.about-portrait{aspect-ratio:1 / 1}
.about-source{margin-top:12px;font-size:.87rem;color:var(--muted);line-height:1.55}
.about-source a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.about-grid > div > * + *{margin-top:14px}
.about-grid h1{margin-top:12px!important}
.about-grid .lead{margin-top:20px!important;color:var(--ink);font-weight:700}
.founder-title{color:var(--accent-text)!important}
/* the title breaks only between its two roles (the dot stays with the first) */
.founder-title .founder-role{white-space:nowrap}
.founder-profiles{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px!important}
.founder-education{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 24px;margin-top:clamp(32px,4vw,48px)!important;padding:16px 18px;max-width:880px}
.founder-education dt{color:var(--accent-text);font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:500;line-height:1.9}
.founder-education dd{color:var(--ink);font-size:.95rem}
.founder-context{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-top:clamp(32px,4vw,48px)!important}
.founder-context > div{display:grid;gap:10px;align-content:start;justify-items:start;padding:clamp(20px,2.4vw,28px)}
.founder-context > div > *{margin:0}
.founder-context h2{font-size:clamp(1.3rem,1.05rem + .9vw,1.8rem)}

/* ══════════ start ══════════ */
.enquiry-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px clamp(32px,5vw,80px);align-items:start;padding-block:var(--section-y)}
.enquiry-section > *{margin:0;grid-column:2}
.enquiry-section > .enquiry-direct{grid-column:1;grid-row:1 / span 4;display:grid;gap:14px;justify-items:start}
.enquiry-direct > *{margin:0}
.enquiry-direct p{color:var(--body)}
.brief-next{display:flex;flex-wrap:wrap;gap:0 24px}
.brief-privacy a,.policy-contact a{display:inline-flex;align-items:center;min-height:44px}

/* ══════════ privacy and legal: a readable measure, numbered parts in mono ══════════ */
.policy{padding-bottom:var(--section-y)}
.policy-part{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px clamp(24px,4vw,64px);padding-block:26px;border-top:1px solid var(--line)}
.policy-part > *{margin:0}
.policy-part > p,.policy-part > ul{grid-column:2;max-width:70ch}
.policy-part h2{grid-column:1;display:grid;gap:8px;align-content:start;font-size:var(--fs-h3);letter-spacing:-.018em}
.policy-num{color:var(--accent-text)}
.policy-contact{max-width:none;margin-top:0!important;padding-top:26px;border-top:1px solid var(--line)}

/* ══════════ contact: the landing's, the text straight on the page ground (no plate, no band), no film ══════════ */
main > .contact{position:relative;padding-block:clamp(56px,7vw,100px)}
.contact .contact-inner{display:grid;gap:14px;justify-items:start;width:min(780px,calc(100% - 2 * var(--gutter)));max-width:none;margin-inline:max(var(--gutter),calc((100% - var(--rail)) / 2)) auto}
.contact-inner > *,.contact-inner > div > *{margin:0}
.contact-inner > div{display:grid;gap:14px;justify-items:start}
.contact h2{font-size:var(--fs-h2-xl);line-height:1.02;letter-spacing:-.035em}
.contact-inner > .actions,.contact-inner > .button{margin-top:10px}
.contact-inner .actions{gap:14px 28px}
.contact-email{margin-top:6px;color:var(--body);font-size:1.05rem}
.contact-email a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700;border-bottom:1px solid var(--accent)}

/* ══════════ footer (the landing's) ══════════ */
.site-footer{border-top:1px solid var(--line);background:var(--bg-2);padding-block:clamp(44px,5vw,64px) 28px}
.footer-statement{display:flex;align-items:center;gap:16px;color:var(--ink);font-weight:700;font-size:clamp(1.45rem,1rem + 1.7vw,2.3rem);line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.footer-statement img{flex:none;width:40px;height:40px}
.footer-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:32px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.footer-note{font-size:.88rem;color:var(--muted);max-width:32ch}
.footer-dir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.footer-dir h2{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:6px;line-height:1.5}
.footer-dir a{display:flex;align-items:center;min-height:36px;color:var(--body);font-size:.92rem;white-space:nowrap;transition:color var(--t-state) var(--ease)}
.footer-dir a:hover{color:var(--ink)}
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:32px;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.footer-legal a{display:inline-flex;align-items:center;min-height:36px}
.footer-legal a:hover{color:var(--ink)}

/* ══════════ reduced motion ══════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  .catalog-card:hover,.work-starting-points > a:hover{transform:none}
}

/* ══════════ responsive ══════════ */
@media (max-width:1279px){
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(14,auto)}
}
@media (max-width:1179px){
  .nav a{padding:0 7px;font-size:.82rem}
  .header-inner{gap:14px}
  .agent-workflows{grid-template-columns:minmax(0,1fr)}
  .agent-workflows > .agent-capabilities{grid-column:1;grid-row:auto}
}
@media (max-width:1079px){
  .nav,.header-tail .seg-appearance{display:none}
  .menu-toggle{display:inline-flex;align-items:center}
  .header-inner{justify-content:space-between}
  .hdr-pill{background:var(--pill-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-head,.locus-offer-heading{grid-template-columns:minmax(0,1fr);align-items:start}
  .footer-inner{grid-template-columns:minmax(0,1fr);gap:28px}
  .service-evidence{grid-template-columns:minmax(0,1fr)}
  .service-evidence > *,.service-evidence > .service-recording{grid-column:1;grid-row:auto}
  .enquiry-section{grid-template-columns:minmax(0,1fr)}
  .enquiry-section > *,.enquiry-section > .enquiry-direct{grid-column:1;grid-row:auto}
  .about-grid{grid-template-columns:minmax(0,1fr)}
  .about-grid figure{position:static;max-width:640px}
  .project-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-starting-points{grid-template-columns:minmax(0,1fr)}
  .nav a,.footer-dir a,.footer-legal a,.tlink{min-height:44px}
  .btn-sm,.seg button{min-height:44px}
  .footer-legal a{min-width:44px;justify-content:center}
  /* the collection row closes up so the six tabs fit on one line down to 1024 px and wrap cleanly below */
  .filters{column-gap:22px;row-gap:0}
  .filter,.filter:first-child{min-height:44px;padding:0}
  .filter::after,.filter:first-child::after{left:0;right:0}
}
@media (max-width:860px){
  .faq-list,.project-story,.founder-context,.locus-delivery,.service-framing,.service-engagement,.agent-capabilities{grid-template-columns:minmax(0,1fr)}
  .workflow-grid{grid-template-columns:minmax(0,1fr)}
  .comfy-case-assets > div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .policy-part{grid-template-columns:minmax(0,1fr)}
  .policy-part > p,.policy-part > ul,.policy-part h2{grid-column:1}
  .footer-dir{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699px){
  .service-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .service-card{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column;gap:12px}
  .service-receive{align-self:stretch}
  .service-card .text-link{align-self:flex-start}
}
@media (max-width:639px){
  :root{--header-h:64px;--section-y:56px}
  .wordmark span{font-size:.98rem}
  .site-footer{padding-top:40px}
  .footer-inner{margin-top:24px;padding-top:20px;gap:22px}
  .footer-legal{margin-top:22px}
  .footer-dir{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px 14px}
  .footer-dir a{font-size:.86rem}
  .footer-dir section:last-child{grid-column:1 / -1}
  .footer-dir a,.footer-legal a{min-height:44px}
  main details > :not(summary){margin-inline:16px}
  main summary{padding-left:16px}
  .workflow-proof-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;border-radius:var(--r)}
  .workflow-proof-nav button{padding:0 10px;border-radius:calc(var(--r) - 3px)}
  .founder-education{grid-template-columns:minmax(0,1fr)}
  .founder-education dd{margin-bottom:6px}
}
@media (max-width:599px){
  .catalog-grid{grid-template-columns:minmax(0,1fr)}
  .comfy-case-assets > div{grid-template-columns:minmax(0,1fr)}
  .project-facts{grid-template-columns:minmax(0,1fr)}
}
/* "Start a project" is wider than the old label: between 361 and 374 px the header closes up to keep it on the row */
@media (max-width:374px){
  .header-tail{gap:8px}
  .header-tail .btn-sm{padding:0 14px}
}
@media (max-width:360px){
  .footer-dir{grid-template-columns:minmax(0,1fr)}
  .cta-long{display:none}
  .cta-short{display:inline}
  .header-tail{gap:8px}
  .header-tail .btn-sm{padding:0 14px}
  /* the founder's first role stays on one line down to a 273 px column (320 px with a scrollbar) */
  .founder-title{letter-spacing:.04em}
}