:root { --paper:#f7f7f4; --ink:#171717; --muted:#6f6f6a; --line:#d7d7d1; --coral:#ff4f3d; --yellow:#ffd735; --blue:#4c72ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:68px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Inter",sans-serif; overflow-x:hidden; }
body.draw-mode { overflow:hidden; cursor:crosshair; user-select:none; }
a { color:inherit; }
button { font:inherit; }
button:focus-visible, a:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }

.topbar { height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,4vw,64px); border-bottom:1px solid var(--line); background:rgba(247,247,244,.92); position:fixed; inset:0 0 auto; z-index:30; backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:14px; font-weight:600; }
.brand-mark { display:block; width:32px; height:28px; object-fit:contain; }
nav { display:flex; gap:clamp(14px,2.8vw,38px); }
nav a { color:#555; text-decoration:none; font-size:12px; }
nav a:hover { color:#000; }

.draw-layer { position:absolute; inset:0 auto auto 0; width:100%; z-index:40; pointer-events:none; touch-action:none; }
body.draw-mode .draw-layer { pointer-events:auto; }
.draw-tools { position:fixed; z-index:50; top:50%; right:18px; transform:translateY(-50%); display:grid; justify-items:center; gap:7px; padding:10px 8px 8px; border:1px solid #cfcfc9; border-radius:18px; background:rgba(255,255,252,.95); box-shadow:0 14px 45px rgba(0,0,0,.12); }
.draw-tools__hint { width:64px; margin:1px 0 5px; color:var(--muted); font:500 8px/1.35 "DM Mono"; text-align:center; text-transform:uppercase; }
.marker-stack { display:grid; gap:7px; }
.marker-button { width:28px; height:28px; padding:3px; border:1px solid #aaa; border-radius:50%; background:#eee; cursor:pointer; transition:transform .18s, border-color .18s; }
.marker-button:hover { transform:translateX(-4px); border-color:#222; }
.marker-button.is-active { transform:translateX(-8px); border-color:#111; box-shadow:2px 2px 0 #111; }
.marker-swatch { display:block; width:100%; height:100%; border-radius:50%; }
.coral { background:var(--coral); }.yellow { background:var(--yellow); }.blue { background:var(--blue); }
.tool-action { width:48px; padding:7px 3px; border:0; background:transparent; color:var(--muted); font:500 8px/1 "DM Mono"; text-transform:uppercase; text-decoration:underline; cursor:pointer; }
.tool-action--done { border-radius:4px; background:var(--ink); color:white; text-decoration:none; }

.hero { min-height:100svh; padding:128px clamp(30px,7vw,110px) 100px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; isolation:isolate; }
.hero-grid { position:absolute; inset:68px 0 0; z-index:-1; opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,black,transparent 95%); }
h1 { max-width:1120px; margin:0; font-size:clamp(3.7rem,9.3vw,9.2rem); line-height:.9; letter-spacing:-.078em; font-weight:600; }
h1 em,.contact h2 em { font-family:Georgia,serif; font-weight:400; }
.hero-intro { max-width:520px; margin:32px 0 0; color:var(--muted); font-size:clamp(15px,1.5vw,19px); line-height:1.65; }
.scroll-cue { position:absolute; left:clamp(30px,7vw,110px); bottom:28px; display:flex; gap:14px; font:10px/1 "DM Mono"; text-decoration:none; text-transform:uppercase; }

.section { padding:clamp(90px,13vw,180px) clamp(30px,7vw,110px); border-top:1px solid var(--line); }
.section-label { display:flex; align-items:center; gap:15px; margin-bottom:clamp(55px,8vw,100px); color:var(--muted); font:500 11px/1 "DM Mono"; letter-spacing:.08em; text-transform:uppercase; }
.section-label span { color:var(--ink); }
.section h2 { margin:0; font-size:clamp(3rem,6vw,6.5rem); line-height:.96; letter-spacing:-.06em; }
.why-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); gap:clamp(50px,9vw,140px); align-items:start; }
.why-copy .lead { margin-top:52px; font-size:clamp(20px,2vw,27px); line-height:1.5; color:var(--ink); }
.why-copy p { max-width:760px; color:#50504b; font-size:clamp(15px,1.25vw,18px); line-height:1.8; }
.linkedin-link { display:inline-flex; align-items:center; gap:14px; margin-top:20px; padding-bottom:8px; border-bottom:1px solid var(--ink); font:10px/1 "DM Mono"; text-decoration:none; text-transform:uppercase; }
.linkedin-link span { transition:transform .18s; }
.linkedin-link:hover span { transform:translate(3px,-3px); }
.portrait { margin:0; }
.portrait img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 34%; border:1px solid #bdbdb8; filter:grayscale(1); }
.portrait figcaption { margin-top:12px; color:var(--muted); font:9px/1 "DM Mono"; text-transform:uppercase; }
.how { background:#ecece8; }
.section-heading-row { display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(40px,8vw,120px); align-items:end; margin-bottom:clamp(70px,10vw,130px); }
.section-heading-row > p { max-width:440px; margin:0 0 8px; color:var(--muted); font-size:clamp(15px,1.4vw,18px); line-height:1.7; }
.section-heading-row--stacked { grid-template-columns:1fr; gap:28px; align-items:start; }
.section-heading-row--stacked > p { max-width:720px; margin:0; }
.venture-list { display:grid; gap:1px; background:#bfbfba; border:1px solid #bfbfba; }
.venture { min-height:530px; display:grid; grid-template-columns:minmax(280px,.8fr) minmax(320px,1fr); gap:clamp(35px,6vw,90px); padding:clamp(32px,5vw,72px); background:var(--paper); }
.venture-logo { min-height:260px; display:grid; place-items:center; align-self:start; }
.venture-logo--websynt { padding:38px; border:1px solid var(--line); background:white; }
.venture-logo--websynt img { width:100%; height:auto; }
.venture-logo--classroom { padding:38px; border:1px solid var(--line); background:#fff; overflow:hidden; }
.venture-logo--classroom img { width:100%; height:100%; object-fit:contain; }
.venture-kicker { margin:0 0 24px; color:var(--muted); font:10px/1 "DM Mono"; text-transform:uppercase; }
.venture-copy h3 { max-width:620px; margin:0 0 25px; font-size:clamp(28px,3.3vw,48px); line-height:1.05; letter-spacing:-.05em; }
.venture-copy > p:not(.venture-kicker) { color:#555550; line-height:1.75; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin:32px 0; }
.tags span { padding:8px 10px; border:1px solid var(--line); border-radius:4px; color:#555; font:8px/1 "DM Mono"; text-transform:uppercase; }
.venture-button { display:inline-flex; align-items:center; gap:14px; padding:13px 16px; border:1px solid var(--ink); border-radius:4px; background:var(--ink); color:#fff; font:9px/1 "DM Mono"; text-decoration:none; text-transform:uppercase; transition:background .18s,color .18s; }
.venture-button:hover { background:transparent; color:var(--ink); }

.work { background:var(--paper); }
.project-accordion { border-top:1px solid #aaa; }
.project-item { border-bottom:1px solid #aaa; }
.project-item h3 { margin:0; }
.project-trigger { width:100%; min-height:110px; display:grid; grid-template-columns:70px 1fr auto 32px; align-items:center; gap:22px; padding:18px 0; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.project-trigger > span:nth-child(2) { font-size:clamp(25px,3.4vw,47px); font-weight:500; letter-spacing:-.05em; }
.project-trigger small,.project-index { color:var(--muted); font:9px/1 "DM Mono"; text-transform:uppercase; }
.project-trigger i { width:28px; height:28px; border:1px solid #aaa; border-radius:50%; position:relative; }
.project-trigger i::before,.project-trigger i::after { position:absolute; width:10px; height:1px; left:8px; top:13px; background:currentColor; content:""; }
.project-trigger i::after { transform:rotate(90deg); transition:transform .18s; }
.project-trigger[aria-expanded="true"] i::after { transform:rotate(0); }
.project-panel { display:grid; grid-template-columns:minmax(280px,.75fr) 1fr; gap:clamp(30px,7vw,100px); padding:5px 0 55px 92px; }
.project-panel[hidden] { display:none; }
.project-visual { aspect-ratio:4/3; padding:18px; display:flex; align-items:flex-end; justify-content:space-between; border:1px solid #bdbdb8; position:relative; overflow:hidden; }
.project-visual::after { position:absolute; width:65%; aspect-ratio:1; border:1px solid rgba(0,0,0,.22); border-radius:50%; top:-25%; right:-20%; content:""; }
.project-visual--one { background:#f3d8d2; }.project-visual--two { background:#e9dfaa; }.project-visual--three { background:#cfd8f2; }
.project-visual span { font:8px/1 "DM Mono"; text-transform:uppercase; }.project-visual b { font:70px/1 Georgia,serif; font-style:italic; font-weight:400; opacity:.55; }
.project-visual--image { padding:0; background:#eee; }
.project-visual--image::after { display:none; }
.project-visual--image img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 32%; }
.project-visual--logo { padding:clamp(24px,4vw,52px); background:#f1f0ec; }
.project-visual--logo img { object-fit:contain; object-position:center; }
.project-visual--book { aspect-ratio:4/5; }
.project-visual--book img { object-position:center; }
.project-detail { align-self:end; max-width:500px; }
.project-detail span { color:var(--muted); font:8px/1 "DM Mono"; text-transform:uppercase; }
.project-detail p { margin:18px 0 0; color:#555; font-size:clamp(15px,1.5vw,19px); line-height:1.7; }
.project-services { display:flex; flex-wrap:wrap; gap:7px; margin-top:26px; }
.project-services span { padding:8px 10px; border:1px solid var(--line); border-radius:4px; color:#555; font:8px/1.25 "DM Mono"; text-transform:uppercase; }
.project-link { display:inline-flex; align-items:center; gap:14px; margin-top:24px; padding-bottom:7px; border-bottom:1px solid var(--ink); font:9px/1.2 "DM Mono"; text-decoration:none; text-transform:uppercase; }
.project-link span { transition:transform .18s; }
.project-link:hover span { transform:translate(3px,-3px); }
.project-results { grid-column:1/-1; margin-top:clamp(24px,3vw,40px); padding-top:clamp(28px,3.5vw,45px); border-top:1px solid #aaa; }
.project-gallery { grid-column:1/-1; margin-top:clamp(24px,3vw,40px); padding-top:clamp(28px,3.5vw,45px); border-top:1px solid #aaa; }
.project-gallery h4 { margin:8px 0 0; font-size:clamp(24px,3vw,40px); letter-spacing:-.045em; }
.project-results__heading { display:block; max-width:720px; }
.project-results__heading h4 { margin:0; font-size:clamp(30px,4vw,58px); line-height:1; letter-spacing:-.055em; }
.project-results__heading p { max-width:620px; margin:18px 0 0; color:#555; font-size:clamp(14px,1.35vw,18px); line-height:1.7; }
.work-carousel { margin-top:clamp(30px,4vw,50px); }
.work-carousel__header { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:18px; }
.work-carousel__header span { color:var(--muted); font:8px/1.3 "DM Mono"; text-transform:uppercase; }
.work-carousel__header h5 { margin:8px 0 0; font-size:clamp(19px,2.2vw,30px); letter-spacing:-.04em; }
.work-carousel__controls { display:flex; align-items:center; gap:8px; }
.work-carousel__controls button { width:38px; height:38px; border:1px solid #aaa; border-radius:50%; background:transparent; cursor:pointer; }
.work-carousel__controls button:hover { background:var(--ink); color:#fff; }
.work-carousel__count { margin-right:8px; white-space:nowrap; }
.work-carousel__count b { color:var(--ink); font-weight:500; }
.work-carousel__viewport { overflow:hidden; outline:none; }
.work-carousel__viewport:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.work-carousel__track { display:flex; gap:clamp(12px,1.5vw,20px); transition:transform .35s ease; }
.work-slide { min-width:100%; margin:0; background:#eee; }
.work-carousel--gallery .work-slide { min-width:calc((100% - clamp(12px,1.5vw,20px))/2); }
.work-slide a,.work-slide figure { height:clamp(360px,42vw,580px); margin:0; display:grid; grid-template-rows:minmax(0,1fr) auto; color:inherit; background:#e9e9e5; text-decoration:none; overflow:hidden; }
.work-slide img { width:100%; height:100%; min-height:0; display:block; object-fit:contain; background:#f5f5f2; }
.work-slide span,.work-slide figcaption { padding:14px 16px; border-top:1px solid #c8c8c3; background:var(--paper); color:var(--muted); font:8px/1.3 "DM Mono"; text-transform:uppercase; }
.work-slide a:hover span { color:var(--ink); }
.result-stats { display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(35px,5vw,65px); border-block:1px solid #aaa; }
.result-stats div { min-width:0; padding:25px 18px; border-right:1px solid #aaa; }
.result-stats div:last-child { border-right:0; }
.result-stats strong { display:block; font-size:clamp(27px,3.5vw,48px); letter-spacing:-.05em; }
.result-stats span { display:block; margin-top:8px; color:var(--muted); font:8px/1.3 "DM Mono"; text-transform:uppercase; }
.result-charts { display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,40px); margin-top:clamp(30px,5vw,55px); }
.result-charts figure { margin:0; }
.result-charts img { display:block; width:100%; height:auto; border:1px solid var(--line); }
.result-charts figcaption { margin-top:10px; color:var(--muted); font:8px/1.3 "DM Mono"; text-transform:uppercase; }

.contact { min-height:90svh; display:flex; flex-direction:column; color:#f6f6f1; background:#171717; }
.section-label--light { color:#92928e; }.section-label--light span { color:#fff; }
.contact-note { margin:0 0 18px; color:#aaa; font:10px/1 "DM Mono"; text-transform:uppercase; }
.contact h2 { max-width:1100px; font-size:clamp(3.5rem,8vw,8.5rem); }
.email-link { width:fit-content; margin-top:56px; padding-bottom:8px; border-bottom:1px solid #666; font:clamp(16px,2vw,23px)/1.2 "DM Mono"; text-decoration:none; }
.email-link span { margin-left:15px; }
footer { display:flex; justify-content:space-between; gap:20px; margin-top:auto; padding-top:100px; color:#777; font:9px/1 "DM Mono"; text-transform:uppercase; }

@media (max-width:900px) {
  .why-grid,.section-heading-row { grid-template-columns:1fr; }
  .portrait { max-width:520px; }
  .venture { grid-template-columns:1fr 1fr; }
  .project-panel { padding-left:0; }
}
@media (max-width:650px) {
  html { scroll-padding-top:60px; }
  .topbar { height:60px; }.brand > span:last-child { display:none; }
  nav { gap:12px; } nav a { font-size:9px; }
  .draw-tools { right:9px; top:auto; bottom:16px; transform:none; grid-template-columns:auto auto auto; align-items:center; }
  .draw-tools__hint { display:none; }.marker-stack { display:flex; }.tool-action { width:42px; }
  .hero { padding-top:105px; padding-right:50px; justify-content:flex-start; }
  .hero-grid { top:60px; } h1 { margin-top:11vh; font-size:clamp(3.25rem,16vw,5.6rem); }
  .section { padding-inline:24px; }
  .venture { grid-template-columns:1fr; padding:28px; }
  .venture-copy { grid-column:1; }
  .venture-logo { min-height:220px; }
  .project-trigger { grid-template-columns:38px 1fr 28px; gap:10px; }
  .project-trigger small { display:none; }
  .project-panel { grid-template-columns:1fr; gap:22px; padding-bottom:38px; }
  .result-stats { grid-template-columns:1fr 1fr; }
  .result-stats div:nth-child(2) { border-right:0; }
  .result-stats div:nth-child(-n+2) { border-bottom:1px solid #aaa; }
  .result-charts { grid-template-columns:1fr; }
  .work-carousel__header { align-items:start; flex-direction:column; }
  .work-carousel--gallery .work-slide { min-width:100%; }
  .work-slide a,.work-slide figure { height:430px; }
  footer { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }