@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/bricolage-grotesque.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/manrope.woff2') format('woff2'); }
:root {
  --paper:#f0f2f3; --ink:#182326; --accent:#204fe2; --muted:#526166;
  --line:#bbc6cb; --selection:#f0f2f3; --hover:#153bb7; --focus:#204fe2;
  --body:'Manrope',sans-serif; --display:'Bricolage Grotesque',sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --duration-feedback:160ms;
  --duration-reveal:850ms;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; padding-inline:48px; background:var(--paper); color:var(--ink); font:16px/1.6 var(--body); }
::selection { background:var(--accent); color:var(--selection); }
a { color:inherit; text-decoration:none; text-underline-offset:6px; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
a:hover { text-decoration:underline; }
a:focus-visible { outline:3px solid var(--focus); outline-offset:6px; }
a:active { opacity:.8; }
svg { width:24px; height:24px; flex-shrink:0; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { text-wrap:balance; font-weight:500; }
p { max-width:68ch; }
section,footer { scroll-margin-top:32px; }
header,main,footer { max-width:1360px; margin-inline:auto; }
main { isolation:isolate; }
.skip { position:fixed; left:16px; top:16px; min-height:44px; padding:8px 16px; background:var(--ink); color:var(--paper); transform:translateY(-200%); z-index:3; }
.skip:focus { transform:none; }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:16px; border-bottom:1px solid var(--line); }
.wordmark { display:inline-flex; align-items:center; min-height:44px; font:600 24px/1.1 var(--display); letter-spacing:-.025em; white-space:nowrap; }
header nav { display:flex; align-items:center; gap:32px; font-size:14px; }
header nav a { display:inline-flex; align-items:center; gap:16px; min-height:44px; }
.nav-contact svg { transition:transform var(--duration-feedback) var(--ease-out); }
.hero { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:80px; padding-block:48px 64px; }
.hero h1 { margin-bottom:32px; font:600 clamp(48px,6.3vw,88px)/1.02 var(--display); letter-spacing:-.04em; max-width:14ch; }
.hero h1 em { color:var(--accent); font-style:normal; }
.intro { max-width:52ch; margin-bottom:32px; font-size:17px; line-height:1.75; }
.actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; min-height:56px; padding:16px 24px; background:var(--accent); color:var(--selection); font-weight:500; transition:background-color var(--duration-feedback) ease,transform var(--duration-feedback) var(--ease-out); }
.button:hover { background:var(--hover); text-decoration:none; }
.button:active { transform:scale(.97); }
.button svg,.text-link svg { transition:transform var(--duration-feedback) var(--ease-out); }
.secondary-link { display:inline-flex; align-items:center; min-height:44px; border-bottom:1px solid var(--line); font-size:14px; }
.portrait { margin:0; width:100%; max-width:390px; justify-self:end; }
.portrait-frame { position:relative; isolation:isolate; }
.portrait-frame::before { content:""; position:absolute; z-index:-1; inset:24% 0 0; background:var(--accent); border-radius:160px 160px 0 0; }
.portrait img { display:block; width:100%; height:auto; object-fit:contain; }
.portrait figcaption { display:flex; justify-content:space-between; gap:16px; padding-block:16px; color:var(--muted); font-size:12px; }
.about { padding-block:80px; }
.about-header { display:flex; flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:32px; }
.about-header p { max-width:68ch; font-size:18px; line-height:1.65; }
.about-header strong { font-weight:600; }
.about-copy { display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.about h2 { font:500 clamp(32px,3.5vw,48px)/1.15 var(--display); letter-spacing:-.03em; max-width:100%; }
.about-copy p { margin:0; }
.portfolio-scope { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:32px 0 0; padding-block:24px; border-block:1px solid var(--line); }
.portfolio-scope>div+div { border-left:1px solid var(--line); padding-left:32px; }
.portfolio-scope dt { font:500 32px/1.15 var(--display); letter-spacing:-.02em; }
.portfolio-scope dd { margin:8px 0 0; font-size:13px; color:var(--muted); }
.text-link { display:inline-flex; align-items:center; gap:24px; min-height:44px; border-bottom:1px solid currentColor; }
.text-link:hover { text-decoration:none; }
.cases { margin-inline:-48px; padding:96px 48px; background:var(--accent); color:var(--selection); --line:#6c88e9; --muted:#e0e7fc; }
.section-intro { display:grid; grid-template-columns:.85fr 1.15fr; align-items:end; gap:64px; margin-bottom:56px; }
.section-intro h2 { font:500 clamp(36px,4vw,56px)/1.1 var(--display); letter-spacing:-.03em; max-width:16ch; }
.section-intro p { max-width:42ch; color:var(--muted); }
.case { display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; padding-block:40px; border-top:1px solid var(--line); }
.result { font:400 clamp(40px,5vw,64px)/1.1 var(--display); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.result-label { font-size:13px; margin-top:12px; color:var(--muted); }
.case h3 { max-width:30ch; margin-bottom:16px; font-size:24px; line-height:1.25; }
.case-copy>p { color:var(--muted); max-width:58ch; line-height:1.75; }
.case-copy>p+p { margin-top:16px; }
.planning-section { padding-block:80px; border-bottom:1px solid var(--line); }
.planning-flow { margin:0; }
.planning-case .result { font-size:clamp(36px,4.5vw,56px); }
.planning-case .result-label { max-width:30ch; }
.planning-flow figcaption { margin-bottom:40px; }
.planning-flow h2 { max-width:26ch; font:500 clamp(32px,3.5vw,48px)/1.15 var(--display); letter-spacing:-.03em; }
.planning-diagram { display:grid; grid-template-columns:minmax(0,1fr) 80px minmax(0,1.2fr) 80px minmax(0,1fr); align-items:stretch; }
.planning-diagram ul { list-style:none; margin:0; padding:0; }
.planning-inputs,.planning-outputs { display:grid; }
.planning-inputs { grid-template-rows:repeat(3,1fr); }
.planning-outputs { grid-template-rows:repeat(2,1fr); }
.planning-inputs li,.planning-outputs li { display:flex; flex-direction:column; justify-content:center; padding-block:16px; min-height:88px; }
.planning-inputs li+li,.planning-outputs li+li { border-top:1px solid var(--line); }
.planning-diagram strong { font:500 21px/1.25 var(--display); letter-spacing:-.02em; }
.planning-diagram li span { margin-top:8px; color:var(--muted); font-size:14px; line-height:1.6; }
.planning-connector { padding-inline:12px; }
.planning-connector svg { display:block; width:100%; height:100%; stroke:var(--accent); stroke-width:1.5; overflow:visible; }
.planning-connector path { vector-effect:non-scaling-stroke; }
.planning-connector .connector-stacked { display:none; }
.planning-calculation { align-self:center; padding:28px; background:var(--accent); color:var(--selection); --line:#6c88e9; }
.planning-calculation h3 { margin:0 0 12px; font:500 28px/1.15 var(--display); letter-spacing:-.02em; text-wrap:balance; }
.planning-outputs strong { color:var(--accent); }
.planning-calculation p { font-size:14px; line-height:1.6; margin-bottom:16px; }
.planning-calculation li { padding-block:8px; border-top:1px solid var(--line); font-size:13px; line-height:1.5; }
.skills { padding-block:80px; border-bottom:1px solid var(--line); }
.skills h2 { font:500 clamp(32px,3.5vw,48px)/1.12 var(--display); letter-spacing:-.03em; }
.skills-intro { margin-top:16px; max-width:60ch; color:var(--muted); }
.skills ul { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(4,auto); grid-auto-flow:column; column-gap:64px; margin:32px 0 0; padding:0; list-style:none; }
.skills li { border-top:1px solid var(--line); padding-block:22px; }

.skills li strong { display:block; font:500 23px/1.3 var(--display); letter-spacing:-.02em; }
.skills li span { display:block; margin-top:4px; font-size:14px; color:var(--muted); }
footer { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; padding-block:80px 24px; }
footer h2 { color:var(--accent); font:500 clamp(40px,5vw,64px)/1.08 var(--display); letter-spacing:-.03em; max-width:15ch; }
.contact-copy { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.contact-copy p { color:var(--muted); max-width:48ch; }
.contact-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px 28px; }
.email-address { font-size:14px; overflow-wrap:anywhere; min-height:44px; display:inline-flex; align-items:center; }
.footer-line { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; grid-column:1/-1; margin-top:24px; border-top:1px solid var(--line); padding-top:24px; font-size:12px; color:var(--muted); }
.footer-line a { display:inline-flex; align-items:center; min-height:44px; }
.about,.cases,.skills,footer { position:relative; isolation:isolate; }
.section-rule { position:absolute; inset:0 0 auto; height:2px; background:var(--accent); transform-origin:left center; pointer-events:none; }
.cases>.section-rule { background:var(--selection); }
.motion-ready .reveal-pending { opacity:0; }
@media (min-width:1001px) {
  .about-header { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  .about-header p { max-width:none; }
}
@media (hover:hover) and (pointer:fine) {
  .button:hover { transform:translateY(-2px); }
  .button:hover svg,.text-link:hover svg,.nav-contact:hover svg { transform:translateX(4px); }
}
@media (max-width:1000px) {
  .hero { grid-template-columns:1.2fr .8fr; gap:32px; }
  .hero h1 { font-size:clamp(48px,6.5vw,72px); }
  .planning-diagram { grid-template-columns:minmax(0,1fr); }
  .planning-inputs { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:1fr; gap:24px; }
  .planning-outputs { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr; gap:24px; }
  .planning-inputs li+li,.planning-outputs li+li { border-top:0; }
  .planning-connector { height:56px; padding:8px 0; }
  .planning-connector .connector-wide { display:none; }
  .planning-connector .connector-stacked { display:block; width:24px; margin-inline:auto; }
  .planning-calculation { width:100%; }
}
@media (max-width:600px) {
  .planning-inputs,.planning-outputs { grid-template-columns:minmax(0,1fr); grid-template-rows:none; gap:0; }
  .planning-inputs li+li,.planning-outputs li+li { border-top:1px solid var(--line); }
  .planning-calculation { padding:24px; }
}
@media (max-width:760px) {
  body { padding-inline:24px; }
  header { gap:16px; }
  header nav { gap:16px; }
  header nav a { font-size:12px; }
  header nav a[href="#about"] { display:none; }
  .wordmark { font-size:20px; }
  .hero { grid-template-columns:1fr; gap:40px; padding-block:40px 56px; }
  .hero h1 { font-size:clamp(44px,11.8vw,72px); max-width:14ch; }
  .intro { font-size:16px; }
  .actions { gap:16px; }
  .actions .button { gap:24px; padding-inline:20px; }
  .portrait { width:100%; max-width:320px; justify-self:center; }
  .portrait figcaption { flex-direction:row; gap:16px; }
  .about,.skills,footer { grid-template-columns:1fr; gap:32px; padding-block:64px; }
  .planning-section { padding-block:64px; }
  .planning-flow figcaption { margin-bottom:32px; }
  .about-header,.about-copy { grid-template-columns:1fr; gap:24px; }
  .about-header p { font-size:16px; }
  .portfolio-scope { grid-template-columns:1fr; gap:0; padding-block:0; }
  .portfolio-scope>div { padding-block:20px; }
  .portfolio-scope>div+div { border-left:0; border-top:1px solid var(--line); padding-left:0; }
  .skills ul { grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; }
  .skills li strong { font-size:21px; }
  .about h2 { max-width:20ch; }
  .cases { margin-inline:-24px; padding:64px 24px; }
  .section-intro { grid-template-columns:1fr; gap:24px; margin-bottom:40px; }
  .section-intro h2 { font-size:40px; }
  .case { grid-template-columns:1fr; gap:24px; padding-block:32px; }
  .contact-actions { gap:16px 24px; }
  .result { font-size:48px; }
  .case h3 { font-size:22px; }
  .footer-line { margin-top:24px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero [data-enter] { animation:none; }
  .button,.button svg,.text-link svg,.nav-contact svg { transition:background-color 100ms ease; }
  .button:hover,.button:active,.text-link:hover svg,.button:hover svg,.nav-contact:hover svg { transform:none; }
}
.keyboard-navigation { scroll-behavior:auto; }
.keyboard-navigation .hero [data-enter] { animation:none; }
.keyboard-navigation .button:active { transform:none; }
@media (max-width:760px) {
  header nav { gap:12px; }
  header nav .nav-contact svg { display:none; }
}
@media (max-width:600px) {
  header { flex-direction:column; align-items:flex-start; gap:8px; padding-block:16px; }
  header nav { width:100%; justify-content:space-between; }
  .wordmark { font-size:24px; }
}