:root{
    --cream:#f2ede2; --black:#0e0e0e; --red:#e2371d; --grey:#d9d3c5; --white:#fffdf8;
    --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,monospace;
    --b:2px solid var(--black);
  }
  *{box-sizing:border-box;margin:0}
  body{background:var(--cream);color:var(--black);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.4}
  a{color:inherit}
  .mono{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
  .wrap{max-width:1440px;margin:0 auto;padding:0 20px}

  /* top strip */
  .top{border-bottom:var(--b);background:var(--cream);position:sticky;top:0;z-index:10}
  .top .wrap{display:flex;justify-content:space-between;align-items:center;height:52px}
  .top nav{display:flex;gap:6px}
  .top nav a{text-decoration:none;padding:6px 12px;border:var(--b);border-radius:99px;background:var(--cream);transition:.15s}
  .top nav a:hover{background:var(--black);color:var(--cream)}
  .logo{font-weight:800;letter-spacing:-.04em;font-size:20px;text-decoration:none}
  .logo i{color:var(--red);font-style:normal}

  /* hero */
  .hero{display:grid;grid-template-columns:repeat(12,1fr);gap:0;border-bottom:var(--b)}
  .hero h1{grid-column:1/9;padding:44px 24px 30px 0;font-weight:800;font-size:clamp(48px,9.4vw,150px);line-height:.88;letter-spacing:-.065em}
  .hero h1 u{text-decoration:none;color:var(--red)}
  .hero .side{grid-column:9/13;border-left:var(--b);display:flex;flex-direction:column}
  .status{background:var(--red);color:var(--white);padding:22px;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:30px}
  .status .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--white);margin-right:8px;animation:p 1.6s infinite}
  @keyframes p{50%{opacity:.25}}
  .status p{font-size:24px;line-height:1.08;letter-spacing:-.03em;font-weight:600}
  .hero .img{border-top:var(--b);height:230px;background:#000 url(img/d6.jpg) center/cover}

  /* ticker */
  .ticker{border-bottom:var(--b);overflow:hidden;background:var(--black);color:var(--cream);white-space:nowrap}
  .ticker div{display:inline-block;padding:14px 0;animation:tick 32s linear infinite;font-weight:700;font-size:22px;letter-spacing:-.02em}
  .ticker span{margin:0 22px;color:var(--red)}
  @keyframes tick{to{transform:translateX(-50%)}}

  /* section head */
  .sh{display:flex;justify-content:space-between;align-items:end;padding:44px 0 18px}
  .sh h2{font-weight:800;font-size:clamp(34px,5vw,72px);letter-spacing:-.055em;line-height:.9}

  /* case cards */
  .case{display:grid;grid-template-columns:1.05fr 1fr;border:var(--b);background:var(--white);margin-bottom:22px;transition:transform .18s,box-shadow .18s}
  .case:hover{transform:translate(-5px,-5px);box-shadow:8px 8px 0 var(--black)}
  .case:nth-child(even){grid-template-columns:1fr 1.05fr}
  .case:nth-child(even) .pic{order:2;border-left:var(--b);border-right:0}
  .pic{background:#000;border-right:var(--b);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;min-height:460px;overflow:hidden}
  .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;min-height:0}
  .pic.grid{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
  .pic.grid img:first-child{grid-column:span 2}
  .pic.quad img:first-child{grid-column:auto}
  .pic.quad img:not(:first-child){object-fit:contain;background:#fff}
  .case:hover .pic img{transform:scale(1.04)}
  .pic.ph{background:repeating-linear-gradient(135deg,var(--grey) 0 10px,var(--cream) 10px 20px);place-items:center;text-align:center;color:#6b665b;padding:24px;display:grid}
  .body{padding:26px;display:flex;flex-direction:column;gap:20px}
  .body .meta{display:flex;justify-content:space-between}
  .tag{border:var(--b);border-radius:99px;padding:3px 10px}
  .tag.r{background:var(--red);color:var(--white);border-color:var(--red)}
  .body h3{font-weight:800;font-size:clamp(30px,3.6vw,54px);letter-spacing:-.055em;line-height:.92}
  .pmr{display:grid;gap:0;margin-top:auto}
  .pmr div{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px 0;border-top:1.5px solid var(--black)}
  .pmr div b{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
  .pmr div span{font-size:16px}

  /* process */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);border:var(--b);background:var(--white)}
  .steps div{padding:24px;border-right:var(--b);min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
  .steps div:last-child{border-right:0}
  .steps h4{font-size:30px;font-weight:800;letter-spacing:-.05em}
  .steps .n{font-size:64px;font-weight:800;letter-spacing:-.07em;line-height:.8;color:var(--red)}
  .steps div:nth-child(2){background:var(--grey)}
  .steps div:nth-child(4){background:var(--black);color:var(--cream)}

  /* numbers */
  .nums{display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px;border:var(--b);background:var(--red);color:var(--white)}
  .nums div{padding:22px;border-right:var(--b)}
  .nums div:last-child{border-right:0}
  .nums b{display:block;font-size:clamp(48px,7vw,104px);font-weight:800;letter-spacing:-.07em;line-height:.9}

  /* experience */
  .exp a,.exp .r{display:grid;grid-template-columns:150px 1.2fr 2fr;gap:20px;padding:18px 0;border-top:var(--b);text-decoration:none;align-items:baseline}
  .exp .r:last-child{border-bottom:var(--b)}
  .exp .r strong{font-size:26px;letter-spacing:-.04em;font-weight:800}
  .exp .r:hover{background:var(--grey)}
  footer .row a{text-decoration:none}
  footer .row a:hover{color:var(--red)}

  /* footer */
  footer{background:var(--black);color:var(--cream);margin-top:70px}
  footer .wrap{padding-top:54px;padding-bottom:26px}
  footer a.big{display:block;font-weight:800;font-size:clamp(40px,10.2vw,170px);letter-spacing:-.07em;line-height:.9;text-decoration:none;transition:color .2s}
  footer a.big:hover{color:var(--red)}
  footer .row{display:flex;justify-content:space-between;gap:20px;margin-top:40px;color:#9c978b;flex-wrap:wrap}

  @media (max-width:900px){
    .hero h1,.hero .side{grid-column:1/-1}.hero .side{border-left:0;border-top:var(--b)}
    .case,.case:nth-child(even){grid-template-columns:1fr}
    .case:nth-child(even) .pic{order:0;border-left:0}
    .pic{border-right:0;border-bottom:var(--b);min-height:340px}
    .steps,.nums{grid-template-columns:1fr 1fr}
    .steps div:nth-child(2){border-right:0}
    .steps div:nth-child(-n+2){border-bottom:var(--b)}
    .nums div:nth-child(2){border-right:0}
    .nums div:nth-child(-n+2){border-bottom:var(--b)}
    .exp .r{grid-template-columns:1fr;gap:4px}
    .top nav a:not(:last-child){display:none}
  }

/* ---- case study pages ---- */
.pg-hero{display:grid;grid-template-columns:1.1fr 1fr;border-bottom:var(--b)}
.pg-hero .l{padding:40px 28px 32px 0;display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.pg-hero .crumb{display:flex;gap:10px;align-items:center}
.pg-hero h1{font-weight:800;font-size:clamp(44px,7.4vw,118px);line-height:.88;letter-spacing:-.065em}
.pg-hero .lede{font-size:20px;max-width:34ch;letter-spacing:-.02em}
.pg-hero .im-r{border-left:var(--b);background:#000;min-height:440px;overflow:hidden}
.pg-hero .im-r img{width:100%;height:100%;object-fit:cover;display:block}
.pg-hero .im-r.white{background:#fff}
.pg-hero .im-r.white img{object-fit:contain}
.meta4{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:var(--b)}
.meta4>div{padding:16px 18px;border-right:var(--b)}
.meta4>div:first-child{padding-left:0}
.meta4>div:last-child{border-right:0}
.meta4 .mono{display:block;color:#6b665b;margin-bottom:6px}
.meta4 b{font-weight:700;font-size:17px;letter-spacing:-.02em}
.ov{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:56px 0 40px}
.ov .big{font-size:clamp(22px,2.4vw,34px);line-height:1.15;letter-spacing:-.035em;font-weight:600}
.ov .pmr div:first-child{border-top:0}
.h2s{display:flex;justify-content:space-between;align-items:end;padding:36px 0 16px}
.h2s h2{font-weight:800;font-size:clamp(28px,4vw,54px);letter-spacing:-.055em;line-height:.92}
.blocks{display:grid;grid-template-columns:1fr 1fr;border:var(--b);background:var(--white);margin-bottom:8px}
.blocks>div{padding:24px;border-right:var(--b);border-bottom:var(--b)}
.blocks>div:nth-child(2n){border-right:0}
.blocks>div:nth-last-child(-n+2){border-bottom:0}
.blocks h4{font-size:26px;font-weight:800;letter-spacing:-.045em;margin:8px 0 10px}
.blocks p{font-size:16px;line-height:1.5}
.gal{display:grid;gap:14px;margin-bottom:14px}
.gal.c1{grid-template-columns:1fr}
.gal.c2{grid-template-columns:1fr 1fr}
.gal.c3{grid-template-columns:repeat(3,1fr)}
.gal.c4{grid-template-columns:repeat(4,1fr)}
.gal figure{margin:0;border:var(--b);background:#000;display:flex;flex-direction:column;background:var(--white)}
.gal figure .im{background:#000;display:block;overflow:hidden}
.gal figure.w .im{background:#fff}
.gal figure img{display:block;width:100%;height:auto}
.gal figure.fill .im{flex:1}
.gal figure.fill img{height:100%;object-fit:cover}
.gal figcaption{padding:9px 12px;border-top:var(--b);font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--cream)}
.next{display:grid;grid-template-columns:1fr 1fr;border:var(--b);margin-top:56px}
.next a{padding:28px 24px;text-decoration:none;display:flex;flex-direction:column;gap:14px;transition:background .15s,color .15s}
.next a+a{border-left:var(--b)}
.next a:hover{background:var(--black);color:var(--cream)}
.next b{font-weight:800;font-size:clamp(26px,3.6vw,52px);letter-spacing:-.055em;line-height:.95}
.next a.r{text-align:right}
.go{display:inline-block;margin-top:6px;border:var(--b);border-radius:99px;padding:6px 12px;width:max-content;background:var(--cream);text-decoration:none}
.go::after{content:"";position:absolute;inset:0}
.case{position:relative}
.case:hover .go{background:var(--black);color:var(--cream)}
@media (max-width:900px){
  .pg-hero,.ov,.blocks,.next{grid-template-columns:1fr}
  .pg-hero .l{padding-right:0}
  .pg-hero .im-r{border-left:0;border-top:var(--b);min-height:320px}
  .meta4{grid-template-columns:1fr 1fr}
  .meta4>div:nth-child(2){border-right:0}
  .meta4>div:nth-child(-n+2){border-bottom:var(--b)}
  .meta4>div:nth-child(3){padding-left:0}
  .blocks>div{border-right:0!important;border-bottom:var(--b)!important}
  .blocks>div:last-child{border-bottom:0!important}
  .gal.c3,.gal.c4{grid-template-columns:1fr 1fr}
  .gal.c2{grid-template-columns:1fr}
  .next a+a{border-left:0;border-top:var(--b)}
  .next a.r{text-align:left}
}