:root { --ink:#202122; --soft:#5b5d5d; --line:#d6d8d5; --paper:#f6f5f1; --blue:#0064a3; --green:#95c11f; --pink:#e6007e; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:#fff; color:var(--ink); font-family:"Jost",Arial,Helvetica,sans-serif; }
    a { color:inherit; text-decoration:none; }
    a:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
    .wrap { width:min(1320px,calc(100% - 88px)); margin:auto; }
    .top { height:112px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
    .logo { display:flex; align-items:center; flex:none; }
    .logo img { display:block; width:144px; height:auto; }
    nav { display:flex; gap:36px; align-items:center; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
    nav a:hover, .text-link:hover { color:var(--blue); }
    .nav-contact { border:1px solid var(--ink); padding:14px 18px; }
    .hero { padding:100px 0 110px; display:grid; grid-template-columns: minmax(0,1.65fr) minmax(250px,.7fr); gap:60px; align-items:end; }
    .eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
    h1 { margin:26px 0 0; max-width:950px; font-size:clamp(58px,7.3vw,113px); line-height:1.02; letter-spacing:-.07em; font-weight:600; }
    h1 span { color:var(--blue); }
    .hero-side { padding:0 0 10px; }
    .hero-side p { font-size:20px; line-height:1.48; letter-spacing:-.02em; margin:0 0 29px; }
    .arrow-link { display:inline-flex; gap:32px; align-items:center; border-bottom:1px solid var(--ink); padding-bottom:11px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
    .arrow-link span { font-size:24px; line-height:.7; font-weight:400; }
    .work { background:var(--paper); padding:80px 0 108px; }
    .section-top { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:42px; }
    h2 { font-size:clamp(38px,4.2vw,66px); line-height:1.07; letter-spacing:-.065em; font-weight:600; margin:16px 0 0; }
    .section-note { max-width:420px; color:var(--soft); font-size:16px; line-height:1.55; }
    .projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px 28px; }
    .project .image { background:#deded9; aspect-ratio:1.34; overflow:hidden; }
    .project img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease; }
    .project:hover img { transform:scale(1.035); }
    .project-meta { display:flex; justify-content:space-between; gap:24px; padding-top:18px; border-top:1px solid var(--line); margin-top:16px; }
    .project h3 { font-size:clamp(22px,2.2vw,32px); letter-spacing:-.045em; line-height:1.15; font-weight:600; margin:0; }
    .project .type { color:var(--soft); font-size:12px; text-align:right; text-transform:uppercase; letter-spacing:.08em; line-height:1.5; white-space:nowrap; }
    .all-work { text-align:center; margin-top:74px; }
    .about { padding:110px 0; display:grid; grid-template-columns:1fr 1fr; gap:12%; }
    .about h2 { max-width:590px; }
    .about-copy { padding-top:8px; }
    .about-copy p { font-size:19px; line-height:1.57; letter-spacing:-.018em; margin:0 0 22px; }
    .about-copy p.muted { color:var(--soft); font-size:16px; }
    .services { border-top:1px solid var(--line); padding:70px 0 95px; }
    .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:48px; }
    .service { padding:22px 0 0; border-top:3px solid var(--blue); }
    .service:nth-child(2) { border-color:var(--green); }
    .service:nth-child(3) { border-color:var(--pink); }
    .service h3 { font-size:24px; letter-spacing:-.025em; font-weight:600; margin:0 0 14px; }
    .service p { font-size:16px; color:var(--soft); line-height:1.55; max-width:360px; margin:0; }
    .contact { background:var(--ink); color:#fff; padding:90px 0 110px; }
    .contact .wrap { display:flex; align-items:end; justify-content:space-between; gap:30px; }
    .contact h2 { max-width:790px; }
    .contact h2 span { color:#b4d543; }
    .contact .arrow-link { border-color:#fff; margin-bottom:9px; }
    footer { background:var(--ink); border-top:1px solid #505252; color:#b8babb; padding:27px 0 36px; font-size:12px; }
    footer .wrap { display:flex; gap:25px; justify-content:space-between; }
    @media(max-width:900px) { .wrap{width:min(100% - 44px,700px)} .top{height:93px} .logo img{width:120px} nav{gap:16px}  .hero{grid-template-columns:1fr; gap:40px; padding:76px 0 85px} h1{font-size:clamp(55px,11vw,85px)} .hero-side{max-width:520px} .about{gap:45px} }
    @media(max-width:640px) { .logo img{width:102px} .nav-contact{padding:11px 12px;font-size:11px} .hero{padding:67px 0 72px} h1{font-size:clamp(52px,13.7vw,76px)} .hero-side p{font-size:18px} .work{padding:64px 0 76px} .section-top{display:block} .section-note{margin-top:18px} .projects{grid-template-columns:1fr;gap:42px} .project-meta{gap:12px} .project h3{font-size:23px} .project .type{font-size:10px} .all-work{margin-top:55px} .about{padding:78px 0;grid-template-columns:1fr} .about-copy p{font-size:18px} .services{padding:64px 0 80px} .services-grid{grid-template-columns:1fr;gap:36px} .contact{padding:75px 0 85px} .contact .wrap{display:block} .contact .arrow-link{margin-top:38px} footer .wrap{display:block} footer span{display:block;margin:8px 0} }
  
    .top nav a[aria-current="page"] { color:var(--blue); }
    .page-intro { padding:82px 0 74px; border-bottom:1px solid var(--line); }
    .page-intro h1 { max-width:1030px; margin-top:22px; font-size:clamp(58px,7.2vw,106px); }
    .page-intro .lead { max-width:710px; font-size:clamp(19px,2vw,25px); line-height:1.45; margin:34px 0 0; color:#434646; }
    .minor { color:var(--soft); font-size:14px; letter-spacing:.025em; line-height:1.6; }
    .portfolio-page { padding:68px 0 110px; }
    .filterbar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 45px; }
    .filterbar button { font:600 13px/1 "Jost",Arial,sans-serif; padding:12px 15px; border:1px solid var(--line); color:var(--ink); background:transparent; cursor:pointer; }
    .filterbar button:hover, .filterbar button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
    .project[hidden] { display:none; }
    .project .image { aspect-ratio:1.38; }
    .project .type { min-width:112px; }
    .outro { padding:90px 0 105px; border-top:1px solid var(--line); }
    .outro .wrap { display:flex; justify-content:space-between; align-items:end; gap:45px; }
    .outro h2 { max-width:790px; }
    .outro .arrow-link { flex:none; }
    .story { display:grid; grid-template-columns:minmax(240px,.65fr) minmax(0,1fr); gap:12%; padding:95px 0 105px; }
    .story aside { border-top:3px solid var(--blue); padding-top:22px; }
    .story aside strong { display:block; font-size:17px; margin-bottom:10px; }
    .story aside .minor { max-width:280px; }
    .story .prose p { font-size:clamp(19px,2vw,24px); line-height:1.51; margin:0 0 27px; letter-spacing:-.015em; }
    .story .prose p.small { color:var(--soft); font-size:17px; }
    .statement { background:var(--paper); padding:95px 0 105px; }
    .statement h2 { max-width:920px; margin:25px 0 0; }
    .statement .accent { color:var(--blue); }
    .facts { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; padding:68px 0 105px; }
    .fact { border-top:1px solid var(--line); padding-top:19px; }
    .fact strong { display:block; font-size:35px; font-weight:500; letter-spacing:-.05em; }
    .fact p { max-width:320px; font-size:16px; line-height:1.5; color:var(--soft); }
    .service-list { padding:60px 0 110px; }
    .service-row { display:grid; grid-template-columns:100px minmax(200px,.85fr) minmax(250px,1fr); gap:32px; border-top:1px solid var(--line); padding:42px 0 55px; }
    .service-row .number { color:var(--blue); font-size:18px; font-weight:600; }
    .service-row:nth-child(2) .number { color:#709800; }
    .service-row:nth-child(3) .number { color:var(--pink); }
    .service-row h2 { margin:0; font-size:clamp(34px,3.6vw,55px); }
    .service-row p { font-size:19px; line-height:1.53; margin:2px 0 16px; }
    .service-row .minor { margin-top:15px; }
    .process { padding:87px 0 100px; background:var(--paper); }
    .process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:52px; }
    .process-grid article { border-top:3px solid var(--ink); padding-top:18px; }
    .process-grid span { color:var(--blue); font-weight:700; }
    .process-grid h3 { font-size:27px; letter-spacing:-.04em; margin:19px 0 11px; }
    .process-grid p { color:var(--soft); line-height:1.55; }
    .pricing { padding:87px 0 100px; display:grid; grid-template-columns:1fr 1fr; gap:12%; }
    .pricing p { font-size:18px; line-height:1.6; margin:0 0 20px; }
    .contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:12%; padding:80px 0 120px; }
    .contact-layout h2 { max-width:550px; margin-top:0; }
    .contact-method { border-top:1px solid var(--line); padding:22px 0 30px; }
    .contact-method strong { display:block; color:var(--soft); font-size:12px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:9px; }
    .contact-method a, .contact-method span { font-size:clamp(19px,2.2vw,29px); line-height:1.25; letter-spacing:-.03em; }
    .contact-method a:hover { color:var(--blue); }
    .contact-note { background:var(--paper); padding:33px; margin-top:10px; }
    .contact-note p { margin:0; font-size:17px; line-height:1.55; }
    .detail-hero { padding:73px 0 65px; }
    .detail-hero h1 { max-width:1120px; font-size:clamp(58px,7.3vw,108px); }
    .detail-meta { display:flex; flex-wrap:wrap; gap:22px 60px; border-top:1px solid var(--line); padding-top:22px; margin-top:55px; }
    .detail-meta div { min-width:190px; }
    .detail-meta strong { display:block; color:var(--soft); text-transform:uppercase; font-size:11px; letter-spacing:.12em; margin-bottom:9px; }
    .detail-meta span { font-size:17px; }
    .detail-gallery { padding:0 0 102px; }
    .detail-gallery img { display:block; width:100%; height:auto; background:var(--paper); }
    .detail-gallery figure { margin:0 0 32px; }
    .detail-gallery .pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; align-items:start; }
    .detail-text { max-width:780px; margin:69px auto 80px; font-size:clamp(19px,2vw,23px); line-height:1.55; }
    .detail-text p { margin:0 0 22px; }
    .detail-return { border-top:1px solid var(--line); padding:60px 0 90px; }
    @media(max-width:900px) { .service-row{grid-template-columns:60px 1fr;gap:20px} .service-row>div:last-child{grid-column:2} .story{gap:7%} }
    @media(max-width:640px) {
      .top{height:auto; min-height:84px; display:grid; grid-template-columns:1fr auto; padding-top:12px; padding-bottom:11px; gap:6px 15px}
      .logo img{width:104px} nav{grid-column:1/-1; display:flex; width:100%; overflow:auto; gap:18px; padding:8px 0 4px; white-space:nowrap}
      nav a:not(.nav-contact){display:inline} .nav-contact{border:0;padding:0}
      .page-intro{padding:64px 0 60px} .page-intro h1{font-size:clamp(51px,13vw,75px)} .page-intro .lead{font-size:19px}
      .portfolio-page{padding:46px 0 75px} .filterbar{margin-bottom:30px}
      .story{grid-template-columns:1fr;padding:70px 0 80px;gap:45px} .story .prose p{font-size:19px}
      .statement{padding:70px 0 78px} .facts{grid-template-columns:1fr;padding:62px 0 75px;gap:28px}
      .service-list{padding:45px 0 70px} .service-row{grid-template-columns:1fr;gap:10px;padding:33px 0 44px} .service-row>div:last-child{grid-column:auto} .service-row p{font-size:18px}
      .process{padding:70px 0 80px} .process-grid{grid-template-columns:1fr;gap:20px;margin-top:40px}
      .pricing,.contact-layout{grid-template-columns:1fr;gap:45px;padding:70px 0 80px}
      .outro{padding:68px 0 78px} .outro .wrap{display:block} .outro .arrow-link{margin-top:35px}
      .detail-hero{padding:55px 0 50px} .detail-hero h1{font-size:clamp(51px,13vw,76px)} .detail-meta{gap:20px;margin-top:38px}
      .detail-gallery{padding-bottom:70px} .detail-gallery .pair{grid-template-columns:1fr;gap:18px;margin-top:18px} .detail-text{margin:52px auto 60px;font-size:19px}
    }