@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#17201e;--paper:#f6f7f5;--line:#d5dbd6;--accent:#f5df4d;--muted:#59635c}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 'DM Sans',sans-serif}h1,h2,h3{font-family:Manrope,sans-serif;line-height:1.13;letter-spacing:-.045em;margin:0;font-weight:500}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #895d15;outline-offset:6px}p{margin:0 0 1rem}.wrap{max-width:1320px;margin:auto;padding:0 6%}header{border-bottom:1px solid var(--line);background:var(--paper)}nav{height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-size:25px;font-weight:700;letter-spacing:-1px}.brand span{color:#895d15}.navlinks{display:flex;gap:32px;align-items:center;font-size:14px}.navlinks a:hover{text-decoration:underline;text-underline-offset:6px}.contact-link{border:1px solid var(--ink);border-radius:100px;padding:10px 20px}.eyebrow{font-size:13px;letter-spacing:.11em;text-transform:uppercase;font-weight:600}.hero{padding:74px 0 56px;display:grid;grid-template-columns:1.5fr 1fr;gap:65px;align-items:center}.hero h1{font-size:clamp(42px,5.2vw,76px);margin:25px 0;max-width:760px}.hero h1 em{font-style:normal;background:var(--accent);padding:0 6px}.hero p{max-width:560px;color:var(--muted);font-size:18px}.actions{display:flex;gap:25px;align-items:center;margin-top:30px}.button{background:var(--ink);color:white;padding:14px 23px;border-radius:100px;display:inline-flex;align-items:center;gap:25px;font-size:14px}.textlink{font-size:14px;border-bottom:1px solid var(--ink);padding-bottom:4px}.portrait{position:relative;background:#e5e9e2;border-radius:2px;overflow:hidden;aspect-ratio:4/4.6;max-height:440px}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 24%}.portrait-caption{position:absolute;bottom:18px;left:18px;right:18px;background:var(--paper);padding:14px 18px;display:flex;justify-content:space-between;font-size:13px}.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding:26px 0;gap:25px}.facts strong{display:block;font-family:Manrope;font-size:22px;letter-spacing:-.04em}.facts span{font-size:13px;color:var(--muted)}section{padding:78px 0}.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.sectionhead h2{font-size:42px}.sectionhead p{max-width:360px;color:var(--muted);font-size:15px;margin:0}.workgrid{display:grid;grid-template-columns:1fr 1fr;gap:36px}.card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;background:#e5e9e2}.card .image{overflow:hidden;aspect-ratio:1.65;background:#dee4da}.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.card:hover img{transform:scale(1.025)}.card:first-child .image{aspect-ratio:1.5}.cardbody{padding:23px 0}.card:first-child .cardbody{padding:42px;align-self:center}.card h3{font-size:29px;margin:14px 0}.card p{color:var(--muted);font-size:16px;max-width:470px}.card .read{font-size:14px;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;margin-top:24px}.tag{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#74531b}.practice{background:var(--ink);color:#f8faf7}.practice .sectionhead p{color:#bac3bb}.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.skill{border-top:1px solid #566158;padding-top:25px}.skill .number{color:var(--accent);font-size:14px}.skill h3{font-size:26px;margin:20px 0}.skill p{color:#c3ccc5}.skill small{font-size:13px;color:var(--accent)}.about{display:grid;grid-template-columns:1fr 1.3fr;gap:80px}.about h2{font-size:46px}.about .lead{font-size:25px;line-height:1.4;letter-spacing:-.03em}.about p{color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:35px;border-top:1px solid var(--line);padding-top:25px}.steps strong{display:block}.steps span{font-size:14px;color:var(--muted)}.footer{background:var(--accent);padding:65px 0 25px}.footer h2{font-size:clamp(36px,5vw,65px);max-width:720px;margin:20px 0 35px}.footer .end{margin-top:65px;display:flex;justify-content:space-between;border-top:1px solid #ac7e22;padding-top:20px;font-size:13px}.casehero{padding:55px 0}.casehero h1{font-size:clamp(40px,5.5vw,70px);max-width:950px;margin:26px 0}.casehero .intro{font-size:21px;max-width:750px;color:var(--muted)}.meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:24px;margin-top:32px;gap:25px}.meta span{display:block;font-size:13px;color:var(--muted)}.caseimage{width:100%;max-height:590px;object-fit:cover;display:block}.article{display:grid;grid-template-columns:220px 1fr;gap:65px;padding:65px 0}.article aside{font-size:14px;color:var(--muted)}.article aside a{display:block;margin-bottom:13px}.article article{max-width:760px}.article article section{padding:0 0 45px}.article h2{font-size:33px;margin-bottom:22px}.article li{margin-bottom:13px}.note{border-left:3px solid #ac7e22;padding-left:20px;color:var(--muted)}.back{font-size:14px}.skip{position:absolute;top:-60px;left:10px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}@media(max-width:800px){nav{height:78px}.navlinks{gap:17px}.hero{gap:30px;padding-top:45px;grid-template-columns:1fr 0.7fr}.hero h1{font-size:45px}.hero p{font-size:16px}.portrait-caption{display:none}.facts{grid-template-columns:1fr 1fr}.card:first-child{display:block}.card:first-child .cardbody{padding:25px}.skills{gap:22px}.about{gap:30px}.about h2{font-size:36px}.article{grid-template-columns:1fr;gap:20px}.article aside{display:flex;flex-wrap:wrap;gap:20px}.steps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.wrap{padding:0 6%}.navlinks{gap:18px}.navlinks .contact-link{display:none}.navlinks a{font-size:13px}.brand{font-size:22px}.hero{grid-template-columns:1fr;gap:35px;padding-bottom:35px}.hero h1{font-size:44px}.portrait{max-height:340px;aspect-ratio:1.2}.portrait-caption{display:flex}.facts strong{font-size:20px}section{padding:55px 0}.sectionhead{display:block}.sectionhead h2{font-size:35px;margin-bottom:16px}.workgrid,.skills,.about{grid-template-columns:1fr}.card h3{font-size:27px}.card:first-child .cardbody{padding:24px}.about{gap:25px}.meta{grid-template-columns:1fr}.footer .end{gap:25px}.actions{gap:20px}.casehero .intro{font-size:18px}.article{padding:40px 0}.caseimage{min-height:230px}.about .lead{font-size:23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card img{transition:none}}
.portrait-block{width:100%;max-width:440px;justify-self:center}.portrait-block .portrait{border-radius:50%;aspect-ratio:1;max-height:none;width:100%}@media(max-width:560px){.portrait-block{max-width:320px}.portrait-block .portrait{max-height:none;aspect-ratio:1}}

/* Design process */
.navlinks a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.process-hero{border-bottom:1px solid var(--line)}
.process-article aside a{margin-bottom:20px}.process-article aside span{font-size:12px;color:#895d15;margin-right:5px}
.process-stage .eyebrow{color:#74531b;margin-bottom:16px}.process-stage .process-lead{font-size:23px;line-height:1.4;letter-spacing:-.02em;color:var(--muted);margin-bottom:24px}
.article article .process-stage{padding-bottom:50px;margin-bottom:48px;border-bottom:1px solid var(--line)}.article article .process-stage:last-child{margin-bottom:0;border-bottom:0}
.process-details{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid var(--line);padding-top:22px;margin:26px 0}
.process-details dt{font-weight:600;margin-bottom:8px}.process-details dd{margin:0;color:var(--muted);font-size:14px}
.process-ai{color:var(--muted);font-size:15px}.process-example{margin-top:24px}
.process-steps{grid-template-columns:repeat(5,1fr)}.process-steps a:hover strong{text-decoration:underline;text-underline-offset:4px}.process-overview-link{margin-top:28px}
@media(max-width:1000px){.process-steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.process-article aside{border-bottom:1px solid var(--line);padding-bottom:8px}.process-article aside a{margin-bottom:12px}.navlinks{gap:20px}}
@media(max-width:560px){header nav{height:auto;min-height:78px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;gap:14px}.navlinks{width:100%;justify-content:space-between;gap:12px}.navlinks a{font-size:14px}.process-steps{grid-template-columns:1fr 1fr}.process-details{grid-template-columns:1fr}.process-stage .process-lead{font-size:21px}.process-hero h1{font-size:40px}}

.footer .actions{flex-wrap:wrap}.footer .actions a{white-space:nowrap}

/* Mobile navigation: equal-width pill links beneath the wordmark. */
@media (max-width: 560px) {
  header nav { gap: 16px; padding-top: 18px; padding-bottom: 18px; }
  header nav.wrap { padding-bottom: 20px; }
  header .navlinks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #e9ede8;
  }
  header .navlinks a,
  header .navlinks .contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 6px;
    border: 0;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
  }
  header .navlinks .contact-link { background: var(--ink); color: var(--paper); }
  header .navlinks a:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
  header .navlinks a:focus-visible { outline-offset: 2px; }
}