/* ============================================================================ work.css : editorial-paper design system Consulting hub (/work/) + 5 service-line deep pages. Warm-paper light theme. Color is the wayfinding system: one hue per service. Token-driven so a light/dark swap is one block. Self-contained: does not depend on styles.css. Fonts (Fraunces, Mona Sans, IBM Plex Mono) are loaded in each page . ========================================================================== */ :root{ /* Warm paper base, not pure white. Warm near-black ink, not #000. */ --paper: #f6f1e7; --paper-2: #efe6d6; --paper-3: #e7dcc7; --ink: #211c16; --ink-dim: #5d5446; --ink-faint:#8a8071; --rule: #ddd1bb; /* The wayfinding system: one hue per service line. Saturated but grounded. */ --c-lead: #2f5fd0; /* cobalt : fractional leadership */ --c-agent: #e2581f; /* signal orange : agents to production */ --c-adopt: #1f8a6d; /* viridian : adoption / enablement */ --c-shop: #c6890c; /* amber : workshops */ --c-design:#9b357f; /* plum : service design */ --c-ux: #0e7490; /* deep teal : interim ux + research leadership */ --serif: "Fraunces","Source Serif Pro",ui-serif,Georgia,serif; --sans: "Mona Sans","Helvetica Now",ui-sans-serif,system-ui,sans-serif; --mono: "IBM Plex Mono",ui-monospace,Menlo,monospace; --maxw: 1180px; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; /* paper grain */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } img{max-width:100%;display:block;} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper); padding:10px 16px;border-radius:0 0 8px 0;z-index:200;font-family:var(--mono);font-size:13px;} .skip:focus{left:0;} @media (prefers-reduced-motion:no-preference){ .rise{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;} @keyframes rise{to{opacity:1;transform:none;}} } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} /* ---------- top bar ---------- */ .topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);} .topbar-in{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;} .brand{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;} .brand .dot{color:var(--c-agent);} .topnav{display:flex;gap:22px;align-items:center;} .topnav a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;} .topnav a:hover{color:var(--ink);} .topnav a[aria-current="page"]{color:var(--ink);} .topnav a[aria-current="page"]::after{content:"";display:block;height:2px;background:var(--c-agent);margin-top:3px;} .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:650;font-size:15px; padding:11px 18px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--paper); text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;} .btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 -2px var(--c-agent);} .btn .arr{transition:transform .2s ease;} .btn:hover .arr{transform:translate(3px,-3px);} .btn.ghost{background:transparent;color:var(--ink);} .btn.ghost:hover{box-shadow:0 8px 0 -2px var(--ink);} /* on a service deep page, --c is set so the button accent matches the hue */ .btn.tinted:hover{box-shadow:0 8px 0 -2px var(--c,var(--c-agent));} @media(max-width:760px){.topnav{display:none;}} /* ---------- hero (hub) ---------- */ .hero{padding:74px 0 40px;position:relative;} .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint); display:flex;align-items:center;gap:10px;margin-bottom:26px;} .eyebrow .tick{width:30px;height:2px;background:var(--c-agent);display:inline-block;} .hero h1{ font-family:var(--serif); font-weight:570; font-size:clamp(40px,7.4vw,90px); line-height:.99; letter-spacing:-.02em; margin:0 0 .5em; font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 1; max-width:14ch; } .hero h1 .build{color:var(--c-agent);font-style:italic;} .hero h1 .design{color:var(--c-design);font-style:italic;} .hero h1 .lead{color:var(--c-lead);font-style:italic;} .hero-lede{font-size:clamp(18px,2.2vw,21px);max-width:52ch;color:var(--ink-dim);margin:0 0 30px;} .hero-lede b{color:var(--ink);font-weight:650;} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .hero-meta{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--mono);font-size:12.5px; letter-spacing:.04em;color:var(--ink-faint);} .hero-meta b{color:var(--ink);font-weight:600;} /* ---------- legend / wayfinding ---------- */ .legend{margin:54px 0 8px;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); display:flex;flex-wrap:wrap;gap:10px 8px;align-items:center;} .legend .lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-right:10px;} .chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:6px 13px 6px 10px; border-radius:999px;border:1.5px solid currentColor;text-decoration:none;transition:background .15s ease,color .15s ease;} .chip .swatch{width:11px;height:11px;border-radius:3px;background:currentColor;} .chip span.t{color:var(--ink);} .chip:hover{background:currentColor;} .chip:hover span.t,.chip:hover .swatch{color:var(--paper);} .chip:hover .swatch{background:var(--paper);} .chip[aria-current="page"]{background:currentColor;} .chip[aria-current="page"] span.t,.chip[aria-current="page"] .swatch{color:var(--paper);} .chip[aria-current="page"] .swatch{background:var(--paper);} /* ---------- services grid (hub) ---------- */ .services{padding:44px 0 20px;display:grid;grid-template-columns:repeat(6,1fr);gap:22px;} .svc{--c:var(--ink);position:relative;background:var(--paper-2);border:1px solid var(--rule);border-radius:16px; overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;text-decoration:none;color:inherit;} .svc:hover{transform:translateY(-4px);box-shadow:-10px 14px 0 -4px var(--c);} .svc .cap{padding:22px 26px;color:var(--paper);background:var(--c);position:relative;overflow:hidden;} .svc .cap .num{font-family:var(--serif);font-weight:600;font-size:60px;line-height:.8;opacity:.32; font-variation-settings:"opsz" 144,"WONK" 1;} .svc .cap .knd{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; position:absolute;top:24px;right:26px;opacity:.85;} .svc .cap h3{font-family:var(--serif);font-weight:560;font-size:27px;line-height:1.05;letter-spacing:-.01em; margin:.35em 0 0;max-width:18ch;font-variation-settings:"opsz" 60,"SOFT" 30;} /* duotone texture in the cap */ .svc .cap::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.5' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");} .svc .body{padding:22px 26px 24px;display:flex;flex-direction:column;gap:14px;flex:1;} .svc .promise{font-size:18px;font-weight:600;line-height:1.4;color:var(--ink);} .svc .who{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-faint);text-transform:uppercase;} .svc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;} .svc li{position:relative;padding-left:20px;font-size:15px;color:var(--ink-dim);line-height:1.45;} .svc li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:2px;background:var(--c);} .proof{margin-top:auto;font-size:14px;line-height:1.45;color:var(--ink);background:var(--paper);border-left:3px solid var(--c); padding:12px 14px;border-radius:0 8px 8px 0;} .proof b{color:var(--c);} .svc .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; margin-top:4px;padding-top:16px;border-top:1px dashed var(--rule);} .svc .price{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500;} .svc .price small{color:var(--ink-faint);display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px;} .svc-link{font-weight:650;font-size:14.5px;color:var(--c);text-decoration:none;display:inline-flex;gap:.4em;align-items:center;border-bottom:2px solid var(--c);padding-bottom:1px;} .svc:hover .svc-link{color:var(--paper);background:var(--c);} /* deliberate grid-breaking: vary spans + cap heights so cards are NOT identical lockups */ .svc.s1{grid-column:span 4;} .svc.s2{grid-column:span 2;} .svc.s3{grid-column:span 3;} .svc.s4{grid-column:span 3;} .svc.s5,.svc.s6{grid-column:span 6;flex-direction:row;} .svc.s5 .cap,.svc.s6 .cap{flex:0 0 40%;display:flex;flex-direction:column;justify-content:flex-end;} .svc.s5 .cap h3,.svc.s6 .cap h3{font-size:40px;max-width:14ch;} .svc.s5 .cap .num,.svc.s6 .cap .num{font-size:104px;} .svc.s5 .body,.svc.s6 .body{flex:1;} .svc.s2 .cap .num{font-size:46px;} @media(max-width:900px){ .services{grid-template-columns:1fr;} .svc,.svc.s1,.svc.s2,.svc.s3,.svc.s4,.svc.s5,.svc.s6{grid-column:auto;flex-direction:column;} .svc.s5 .cap,.svc.s6 .cap{flex:auto;} } /* ---------- budget + close ---------- */ .budget{margin:42px 0;padding:30px;background:var(--ink);color:var(--paper);border-radius:18px;position:relative;overflow:hidden;} .budget h2{font-family:var(--serif);font-weight:560;font-size:30px;margin:0 0 4px;font-variation-settings:"opsz" 72;} .budget .sub{color:#cabfaa;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px;} .brows{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .brow{border-top:2px solid var(--c-agent);padding-top:14px;} .brow:nth-child(2){border-color:var(--c-lead);} .brow:nth-child(3){border-color:var(--c-adopt);} .brow .l{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#cabfaa;margin-bottom:6px;} .brow .a{font-family:var(--serif);font-size:23px;font-weight:560;} .budget .note{margin-top:20px;color:#cabfaa;font-size:14px;max-width:60ch;} @media(max-width:760px){.brows{grid-template-columns:1fr;}} .close{padding:60px 0 30px;text-align:center;} .close h2{font-family:var(--serif);font-weight:560;font-size:clamp(30px,5vw,52px);line-height:1.04;letter-spacing:-.015em; margin:0 auto .3em;max-width:18ch;font-variation-settings:"opsz" 110,"WONK" 1;} .close p{color:var(--ink-dim);max-width:46ch;margin:0 auto 28px;font-size:18px;} .close .hero-cta{justify-content:center;} .flag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; background:var(--c-agent);color:var(--paper);padding:3px 9px;border-radius:5px;margin-bottom:18px;} footer.foot{border-top:1px solid var(--rule);padding:26px 0 90px;} .foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:12px; letter-spacing:.04em;color:var(--ink-faint);} .foot-in a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px;} .foot-in a:hover{color:var(--ink);} @media(min-width:761px){footer.foot{padding-bottom:50px;}} /* ============================================================================ DEEP PAGES : one service per page. Set --c on and every accent maps to that service hue. ========================================================================== */ .dpage{--c:var(--ink);} /* colored full-bleed hero */ .d-hero{background:var(--c);color:var(--paper);position:relative;overflow:hidden;} .d-hero::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.45; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='dm'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.4' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23dm)'/%3E%3C/svg%3E");} .d-hero-in{max-width:var(--maxw);margin:0 auto;padding:30px 28px 58px;position:relative;z-index:1;} .crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper); opacity:.82;margin:14px 0 36px;display:flex;align-items:center;gap:10px;} .crumbs a{color:var(--paper);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--paper) 55%,transparent);} .crumbs a:hover{border-color:var(--paper);} .crumbs .sep{opacity:.6;} .d-index{font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.04em;opacity:.7; display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;} .d-index .knd{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; border:1px solid color-mix(in srgb,var(--paper) 55%,transparent);border-radius:999px;padding:3px 10px;} .d-hero h1{font-family:var(--serif);font-weight:560;font-size:clamp(38px,6.4vw,76px);line-height:1.0; letter-spacing:-.02em;margin:0 0 .4em;max-width:16ch;font-variation-settings:"opsz" 144,"WONK" 1;} .d-hero .d-promise{font-size:clamp(18px,2.3vw,23px);line-height:1.5;max-width:48ch;margin:0 0 30px; color:var(--paper);opacity:.94;font-weight:500;} .d-hero .hero-cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);} .d-hero .hero-cta .btn:hover{box-shadow:0 8px 0 -2px rgba(0,0,0,.28);} .d-hero .hero-cta .btn.ghost{background:transparent;color:var(--paper);border-color:var(--paper);} .d-hero .hero-cta .btn.ghost:hover{box-shadow:0 8px 0 -2px rgba(0,0,0,.28);} /* generic deep-page section */ .d-sec{padding:54px 0 8px;} .d-sec.tight{padding-top:30px;} .d-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c); display:flex;align-items:center;gap:10px;margin:0 0 18px;} .d-eyebrow .tick{width:26px;height:2px;background:var(--c);display:inline-block;} .d-h2{font-family:var(--serif);font-weight:560;font-size:clamp(26px,3.6vw,40px);line-height:1.06;letter-spacing:-.015em; margin:0 0 .5em;max-width:20ch;font-variation-settings:"opsz" 80,"WONK" 1;} .d-lead{font-size:clamp(17px,2vw,20px);color:var(--ink-dim);max-width:60ch;margin:0 0 8px;} .d-lead b{color:var(--ink);font-weight:650;} /* "who it's for" pills */ .d-who{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;} .d-who span{font-size:14px;font-weight:600;color:var(--ink);background:var(--paper-2);border:1px solid var(--rule); border-left:3px solid var(--c);border-radius:7px;padding:8px 13px;} /* buyer-lens "sounds like you" triggers: first-person buyer situations */ .d-triggers{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:18px;} .d-triggers .trg{position:relative;background:var(--paper-2);border:1px solid var(--rule);border-radius:12px; padding:16px 18px 16px 22px;font-size:16.5px;line-height:1.45;color:var(--ink);} .d-triggers .trg::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--c);} .d-triggers .trg .q{color:var(--c);font-weight:700;margin-right:2px;} @media(max-width:720px){.d-triggers{grid-template-columns:1fr;}} /* "what you get" list */ .d-get{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;} .d-get li{position:relative;padding-left:24px;font-size:16px;line-height:1.5;color:var(--ink-dim);} .d-get li b{color:var(--ink);font-weight:650;} .d-get li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:3px;background:var(--c);} @media(max-width:720px){.d-get{grid-template-columns:1fr;}} /* proof / case block */ .d-proof{margin-top:26px;background:var(--paper-2);border:1px solid var(--rule);border-left:4px solid var(--c); border-radius:0 14px 14px 0;padding:24px 26px;} .d-proof .pl{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin:0 0 8px;} .d-proof p{margin:0;font-size:17px;line-height:1.55;color:var(--ink);} .d-proof p b{color:var(--c);} /* process strip */ .d-proc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px;} .d-step{border-top:2px solid var(--c);padding-top:14px;} .d-step .n{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--c);letter-spacing:.04em; font-family:var(--mono);font-size:12px;} .d-step h3{font-family:var(--serif);font-weight:560;font-size:19px;margin:6px 0 6px;line-height:1.15;} .d-step p{margin:0;font-size:14.5px;color:var(--ink-dim);line-height:1.45;} @media(max-width:720px){.d-proc{grid-template-columns:1fr 1fr;}} @media(max-width:460px){.d-proc{grid-template-columns:1fr;}} /* FAQ */ .d-faq{margin-top:18px;border-top:1px solid var(--rule);} .d-faq details{border-bottom:1px solid var(--rule);} .d-faq summary{list-style:none;cursor:pointer;padding:18px 2px;display:flex;align-items:center;justify-content:space-between;gap:16px; font-family:var(--serif);font-weight:560;font-size:19px;color:var(--ink);} .d-faq summary::-webkit-details-marker{display:none;} .d-faq summary .mk{flex:0 0 auto;width:22px;height:22px;border-radius:999px;border:1.5px solid var(--c);color:var(--c); display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;transition:transform .2s ease;} .d-faq details[open] summary .mk{transform:rotate(45deg);} .d-faq .ans{padding:0 2px 20px;color:var(--ink-dim);font-size:16px;line-height:1.6;max-width:64ch;} .d-faq .ans b{color:var(--ink);font-weight:650;} /* deep-page close band tinted in the service color */ .d-close{margin:56px 0 0;background:var(--c);color:var(--paper);border-radius:20px;padding:48px 34px;text-align:center; position:relative;overflow:hidden;} .d-close::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.4; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='cm'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01 0.4' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cm)'/%3E%3C/svg%3E");} .d-close > *{position:relative;z-index:1;} .d-close h2{font-family:var(--serif);font-weight:560;font-size:clamp(26px,4vw,42px);line-height:1.08;letter-spacing:-.015em; margin:0 auto .3em;max-width:20ch;font-variation-settings:"opsz" 100,"WONK" 1;} .d-close p{max-width:48ch;margin:0 auto 26px;font-size:18px;opacity:.92;} .d-close .hero-cta{justify-content:center;} .d-close .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);} .d-close .btn:hover{box-shadow:0 8px 0 -2px rgba(0,0,0,.28);} .d-close .btn.ghost{background:transparent;color:var(--paper);border-color:var(--paper);} .d-close .btn.ghost:hover{box-shadow:0 8px 0 -2px rgba(0,0,0,.28);} /* "explore the other lanes" legend on deep pages */ .d-also{margin:46px 0 0;padding:24px 0 6px;border-top:1px solid var(--rule);} .d-also .lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint); display:block;margin-bottom:14px;} .d-also-row{display:flex;flex-wrap:wrap;gap:10px;} /* ---------- mobile sticky dock (both hub + deep pages) ---------- */ .workdock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none; background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px); border-top:1px solid var(--rule);padding:9px 16px calc(9px + env(safe-area-inset-bottom));} .workdock-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:12px;} .workdock a{flex:1;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase; color:var(--ink-dim);text-decoration:none;padding:9px 8px;border-radius:10px;border:1.5px solid var(--rule);} .workdock a.book{flex:1.3;background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:650;letter-spacing:.02em;} @media(max-width:760px){.workdock{display:block;}} /* ============================================================================ HOMEPAGE : buyer-first front door (light paper). Reuses hero/budget/btn, .d-eyebrow/.d-h2 from above; sets --c per section for accent ticks. ========================================================================== */ body.home{--c:var(--ink);} .hsec{padding:58px 0 6px;} .hsec.tight{padding-top:34px;} .hsec-head{margin-bottom:26px;} .hsec .h-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c); display:flex;align-items:center;gap:10px;margin:0 0 16px;} .hsec .h-kicker .tick{width:26px;height:2px;background:var(--c);display:inline-block;} .hsec .h-h2{font-family:var(--serif);font-weight:560;font-size:clamp(28px,4vw,46px);line-height:1.05;letter-spacing:-.018em; margin:0 0 .35em;max-width:20ch;font-variation-settings:"opsz" 90,"WONK" 1;} .hsec .h-lead{font-size:clamp(17px,2vw,20px);color:var(--ink-dim);max-width:60ch;margin:0;} .hsec .h-lead b{color:var(--ink);font-weight:650;} /* availability + current titles line under the hero headline */ .now-line{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;margin:0 0 26px;font-size:15px;color:var(--ink-dim);} .now-line .pip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--c-adopt);font-weight:600;} .now-line .pip .led{width:8px;height:8px;border-radius:999px;background:var(--c-adopt);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-adopt) 22%,transparent);} .now-line b{color:var(--ink);font-weight:650;} /* clients marquee, light theme (logos as warm ink on paper) */ .clients{padding:30px 0 6px;} .clients-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint); text-align:center;margin:0 0 18px;} .cl-marquee{position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .cl-track{display:flex;align-items:center;gap:46px;width:max-content;animation:cl-scroll 80s linear infinite;} .cl-track img{height:30px;width:auto;opacity:.62;filter:brightness(0) saturate(0); /* warm the black slightly toward ink */ } .cl-track .logo{display:inline-flex;align-items:center;flex:0 0 auto;} .cl-marquee:hover .cl-track{animation-play-state:paused;} @keyframes cl-scroll{to{transform:translateX(-50%);}} @media (prefers-reduced-motion:reduce){.cl-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}} /* "how I can help" : compact service mini-cards linking into /work */ .smini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px;} .smini{--c:var(--ink);display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--rule); border-radius:14px;overflow:hidden;text-decoration:none;color:inherit; transition:transform .16s ease,box-shadow .16s ease;} .smini:hover{transform:translateY(-3px);box-shadow:-8px 11px 0 -3px var(--c);} .smini .cap{height:7px;background:var(--c);} .smini .in{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1;} .smini .n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:600;} .smini h3{font-family:var(--serif);font-weight:560;font-size:21px;line-height:1.1;margin:0;letter-spacing:-.01em;} .smini p{margin:0;font-size:14.5px;color:var(--ink-dim);line-height:1.45;flex:1;} .smini .go{font-weight:650;font-size:14px;color:var(--c);display:inline-flex;gap:.4em;align-items:center;} @media(max-width:860px){.smini-grid{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.smini-grid{grid-template-columns:1fr;}} /* outcomes: big production figures + current engagements */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:6px;padding:26px 0; border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);} .stat .fig{font-family:var(--serif);font-weight:580;font-size:clamp(30px,4vw,44px);line-height:1;letter-spacing:-.02em; font-variation-settings:"opsz" 90;} .stat .lab{margin-top:8px;font-size:14px;color:var(--ink-dim);line-height:1.35;} .stat:nth-child(1) .fig{color:var(--c-agent);} .stat:nth-child(2) .fig{color:var(--c-lead);} .stat:nth-child(3) .fig{color:var(--c-adopt);} .stat:nth-child(4) .fig{color:var(--c-design);} @media(max-width:720px){.stats{grid-template-columns:1fr 1fr;gap:24px 18px;}} .engs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;} .eng{background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--c-lead);border-radius:0 12px 12px 0;padding:18px 20px;} .eng:nth-child(2){border-left-color:var(--c-agent);} .eng:nth-child(3){border-left-color:var(--c-adopt);} .eng .when{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);} .eng h3{font-family:var(--serif);font-weight:560;font-size:19px;margin:6px 0 7px;line-height:1.1;} .eng p{margin:0;font-size:14.5px;color:var(--ink-dim);line-height:1.5;} @media(max-width:760px){.engs{grid-template-columns:1fr;}} /* how we can work together: three engagement shapes */ .ways{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 26px;} .way{border-top:2px solid var(--c-agent);padding-top:14px;} .way:nth-child(2){border-color:var(--c-lead);} .way:nth-child(3){border-color:var(--c-adopt);} .way .wl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);} .way h3{font-family:var(--serif);font-weight:560;font-size:21px;margin:6px 0 7px;} .way p{margin:0;font-size:15px;color:var(--ink-dim);line-height:1.5;} @media(max-width:760px){.ways{grid-template-columns:1fr;}} /* about-short */ .about-short{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:center;} .about-short .at-body p{font-size:17px;color:var(--ink-dim);line-height:1.6;margin:0 0 14px;} .about-short .at-body b{color:var(--ink);font-weight:650;} .about-short .at-portrait img{border-radius:16px;border:1px solid var(--rule);width:100%;height:auto;display:block;} @media(max-width:760px){.about-short{grid-template-columns:1fr;}.about-short .at-portrait{order:-1;}} /* voices, light grid (curated, masonry columns) */ .vx-grid{columns:3;column-gap:18px;margin-top:6px;} .vx{break-inside:avoid;background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;padding:18px 20px;margin:0 0 18px;} .vx blockquote{margin:0 0 12px;font-size:15.5px;line-height:1.55;color:var(--ink);} .vx blockquote em{font-style:italic;} .vx cite{font-style:normal;display:block;border-top:1px dashed var(--rule);padding-top:10px;} .vx cite b{display:block;font-weight:650;font-size:14px;color:var(--ink);} .vx cite span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-faint);text-transform:uppercase;margin-top:2px;} @media(max-width:900px){.vx-grid{columns:2;}} @media(max-width:600px){.vx-grid{columns:1;}} /* contact channels */ .ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px;} .ct-grid a{display:flex;align-items:center;gap:14px;background:var(--paper-2);border:1px solid var(--rule);border-radius:12px; padding:18px 20px;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;} .ct-grid a:hover{transform:translateY(-2px);box-shadow:0 8px 0 -3px var(--c-lead);border-color:var(--c-lead);} .ct-grid .cl-stk{display:flex;flex-direction:column;} .ct-grid .cl-stk b{font-weight:650;font-size:16px;} .ct-grid .cl-stk span{font-family:var(--mono);font-size:12px;color:var(--ink-faint);margin-top:2px;} .ct-grid .cl-ar{margin-left:auto;color:var(--ink-faint);} @media(max-width:600px){.ct-grid{grid-template-columns:1fr;}} .ct-note{margin-top:18px;font-size:14.5px;color:var(--ink-dim);max-width:62ch;} .ct-note b{color:var(--ink);} /* writing / subscribe band */ .sub{margin-top:8px;background:var(--paper-2);border:1px solid var(--rule);border-radius:18px;padding:30px 32px;} .sub .sk{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-design);margin:0 0 10px;} .sub h2{font-family:var(--serif);font-weight:560;font-size:clamp(22px,2.6vw,28px);line-height:1.2;margin:0 0 18px;max-width:40ch;} .sub h2 em{font-style:italic;color:var(--ink-dim);} .sub form{display:flex;gap:10px;flex-wrap:wrap;} .sub input[type=email]{flex:1;min-width:220px;font:inherit;font-size:15px;padding:11px 14px;border-radius:999px; border:2px solid var(--rule);background:var(--paper);color:var(--ink);} .sub input[type=email]:focus{outline:none;border-color:var(--c-lead);} .sub button{font-family:var(--sans);font-weight:650;font-size:15px;padding:11px 20px;border-radius:999px;border:2px solid var(--ink); background:var(--ink);color:var(--paper);cursor:pointer;} .sub .sn{margin:14px 0 0;font-size:13.5px;color:var(--ink-faint);} .sub .sn a{color:var(--ink-dim);} /* big light footer */ .bigfoot{border-top:1px solid var(--rule);margin-top:54px;padding:30px 0 96px;} .bigfoot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:flex-start;} .bigfoot .bf-l{font-size:14px;color:var(--ink-dim);max-width:46ch;line-height:1.55;} .bigfoot .bf-l a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;} .bigfoot .bf-nav{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;} .bigfoot .bf-nav a{color:var(--ink-dim);text-decoration:none;} .bigfoot .bf-nav a:hover{color:var(--ink);} @media(min-width:761px){.bigfoot{padding-bottom:54px;}} /* field office band (reused asset, light frame) */ .fo{margin-top:30px;border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:var(--paper-2);} .fo img{width:100%;height:auto;display:block;} .fo-bar{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:12px 18px;font-family:var(--mono);font-size:12px; letter-spacing:.04em;color:var(--ink-dim);} .fo-bar .fo-place{color:var(--ink);font-weight:600;} .fo-bar .sep{opacity:.5;} /* ============================================================================ ABOUT PAGE : the human story, full record, demoted off the homepage. Reuses .hsec/.h-kicker/.h-h2/.btn; adds timeline + record-cols + promises. ========================================================================== */ body.about{--c:var(--ink);} .about-hero{padding:54px 0 18px;} .about-hero h1{font-family:var(--serif);font-weight:560;font-size:clamp(36px,6vw,72px);line-height:1.0;letter-spacing:-.02em; margin:.2em 0 .3em;max-width:18ch;font-variation-settings:"opsz" 144,"WONK" 1;} .about-hero .lede{font-size:clamp(18px,2.2vw,22px);color:var(--ink-dim);max-width:54ch;margin:0;} .about-hero .lede b{color:var(--ink);font-weight:650;} /* operating promises */ .promises{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;} .promises li{position:relative;padding-left:24px;font-size:16px;color:var(--ink-dim);line-height:1.5;} .promises li em{font-style:italic;color:var(--ink);font-weight:600;} .promises li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--c-agent);font-weight:700;} @media(max-width:720px){.promises{grid-template-columns:1fr;}} /* thesis cards */ .tcards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;} .tcard{background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;padding:22px 24px;} .tcard .rn{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--c-lead);} .tcard:nth-child(2) .rn{color:var(--c-agent);} .tcard:nth-child(3) .rn{color:var(--c-adopt);} .tcard:nth-child(4) .rn{color:var(--c-design);} .tcard h3{font-family:var(--serif);font-weight:560;font-size:21px;margin:4px 0 8px;line-height:1.15;} .tcard p{margin:0;font-size:15px;color:var(--ink-dim);line-height:1.55;} @media(max-width:720px){.tcards{grid-template-columns:1fr;}} /* vertical timeline */ .tl{list-style:none;margin:8px 0 0;padding:0 0 0 24px;border-left:2px solid var(--rule);} .tl li{position:relative;padding:0 0 22px 18px;} .tl li::before{content:"";position:absolute;left:-31px;top:5px;width:11px;height:11px;border-radius:999px; background:var(--paper);border:2px solid var(--c-lead);} .tl .tw{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);} .tl h3{font-family:var(--serif);font-weight:560;font-size:19px;margin:3px 0 5px;line-height:1.15;} .tl p{margin:0;font-size:15px;color:var(--ink-dim);line-height:1.5;max-width:64ch;} .tl-toggle{margin-top:18px;} /* record columns (clients / awards / speaking) */ .rec-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 34px;margin-top:8px;} .rec-cols h3{font-family:var(--serif);font-weight:560;font-size:19px;margin:0 0 10px;} .rec-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;} .rec-cols li{position:relative;padding-left:16px;font-size:15px;color:var(--ink-dim);line-height:1.45;} .rec-cols li em{font-style:italic;color:var(--ink);} .rec-cols li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--c-shop);} @media(max-width:720px){.rec-cols{grid-template-columns:1fr;}} .civic{margin-top:22px;background:var(--ink);color:var(--paper);border-radius:14px;padding:20px 24px;font-size:16px;line-height:1.5;} .civic b{color:var(--c-shop);}