.case-study {
  --case-bg:#0d0f10;
  --case-panel:#151819;
  --case-line:#ffffff20;
  --case-accent:#d5ad70;
  background:var(--case-bg);
  color:#f6f4ef;
  font:16px/1.65 Inter,Arial,sans-serif
}
.case-study * {
  box-sizing:border-box
}
.case-nav {
  max-width:1320px;
  margin:auto;
  padding:22px 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--case-line)
}
.case-nav a {
  text-decoration:none
}
.case-brand {
  font-size:13px;
  letter-spacing:.22em;
  font-weight:800
}
.case-navlinks {
  display:flex;
  gap:22px;
  align-items:center;
  font-size:12px
}
.case-wrap {
  max-width:1320px;
  margin:auto;
  padding:78px 5vw
}
.case-hero {
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:5vw;
  align-items:center;
  min-height:590px
}
.case-hero h1 {
  font-size:clamp(46px,7vw,86px);
  line-height:.98;
  letter-spacing:-.055em;
  margin:18px 0
}
.case-hero p {
  color:#c4c4bf;
  max-width:550px
}
.case-kicker {
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--case-accent);
  font-weight:700
}
.case-hero-media {
  height:540px;
  position:relative
}
.case-hero-media img {
  width:100%;
  height:100%;
  object-fit:cover
}
.case-hero-media:after {
  content:'';
  position:absolute;
  inset:35% 0 0;
  background:linear-gradient(transparent,#0008)
}
.case-hero-caption {
  position:absolute;
  z-index:1;
  bottom:22px;
  left:25px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px
}
.case-tags {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:24px
}
.case-tags span {
  border:1px solid var(--case-line);
  padding:7px 10px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#c6c4bd
}
.case-intro {
  border-block:1px solid var(--case-line);
  background:var(--case-panel)
}
.case-intro-grid {
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:6vw;
  align-items:start
}
.case-intro h2,.case-section h2 {
  font-size:clamp(30px,4vw,52px);
  line-height:1.06;
  margin:8px 0 20px;
  letter-spacing:-.035em
}
.case-intro p,.case-section p {
  color:#c2c2bd
}
.case-facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--case-line);
  margin-top:32px
}
.case-fact {
  padding:20px;
  border-right:1px solid var(--case-line)
}
.case-fact:last-child {
  border:0
}
.case-fact b {
  font-size:25px;
  color:var(--case-accent);
  display:block
}
.case-fact span {
  font-size:11px;
  color:#c2c2bd
}
.case-process {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--case-line);
  border:1px solid var(--case-line);
  margin-top:34px
}
.case-step {
  background:var(--case-bg);
  padding:24px;
  min-height:190px
}
.case-step b {
  font-size:26px;
  color:var(--case-accent)
}
.case-step h3 {
  font-size:17px;
  margin:12px 0 5px
}
.case-step p {
  font-size:13px;
  margin:0
}
.case-gallery-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin-bottom:30px
}
.case-gallery-head p {
  max-width:420px;
  margin:0
}
.case-gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.case-shot {
  margin:0;
  background:var(--case-panel);
  border:1px solid var(--case-line);
  overflow:hidden
}
.case-shot img {
  width:100%;
  aspect-ratio:1.38;
  object-fit:cover;
  transition:transform .5s
}
.case-shot:hover img {
  transform:scale(1.035)
}
.case-shot figcaption {
  padding:14px 16px;
  color:#d0cec8;
  font-size:12px;
  letter-spacing:.04em
}
.case-outro {
  background:linear-gradient(120deg,#202321,#111415);
  border:1px solid var(--case-line);
  padding:clamp(28px,5vw,62px);
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center
}
.case-outro h2 {
  font-size:clamp(32px,5vw,58px);
  line-height:1;
  margin:8px 0
}
.case-outro p {
  max-width:650px;
  color:#c1c0ba
}
.case-button {
  display:inline-block;
  padding:14px 20px;
  background:var(--case-accent);
  color:#111;
  text-decoration:none;
  font-weight:700;
  font-size:12px
}
.case-foot {
  padding:28px 5vw;
  border-top:1px solid var(--case-line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#a9a9a3;
  font-size:12px
}
.case-study.interiors {
  --case-bg:#e9e4dc;
  --case-panel:#f4f1eb;
  --case-line:#3b3a3522;
  --case-accent:#967354;
  color:#252824
}
.case-study.interiors .case-hero p,.case-study.interiors .case-intro p,.case-study.interiors .case-section p,.case-study.interiors .case-fact span {
  color:#5f605a
}
.case-study.interiors .case-tags span,.case-study.interiors .case-shot figcaption {
  color:#4b4d47
}
.case-study.interiors .case-step {
  background:var(--case-bg)
}
.case-study.interiors .case-outro {
  background:#dcd5ca
}
.case-study.restaurant {
  --case-bg:#241b17;
  --case-panel:#30231d;
  --case-accent:#dfa75f
}
.case-study.personal-brand {
  --case-bg:#111419;
  --case-panel:#191d22;
  --case-accent:#9dd3bf
}
.case-study.personal-brand .case-hero h1,.case-study.personal-brand .case-intro h2,.case-study.personal-brand .case-section h2 {
  font-family:Georgia,serif;
  font-weight:400;
  letter-spacing:-.04em
}
.case-study.automotive {
  --case-bg:#090b0d;
  --case-panel:#131719;
  --case-accent:#d2ad71
}
.case-study .case-nav .case-lang {
  color:var(--case-accent)
}
@media(max-width:760px) {
  .case-nav {
    align-items:flex-start
  }
  .case-navlinks {
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end
  }
  .case-hero,.case-intro-grid {
    grid-template-columns:1fr
  }
  .case-wrap {
    padding:55px 6vw
  }
  .case-hero {
    gap:28px
  }
  .case-hero-media {
    height:360px;
    grid-row:1
  }
  .case-process {
    grid-template-columns:1fr 1fr
  }
  .case-gallery {
    grid-template-columns:1fr 1fr
  }
  .case-gallery-head {
    display:block
  }
  .case-facts {
    grid-template-columns:1fr
  }
  .case-fact {
    border-right:0;
    border-bottom:1px solid var(--case-line)
  }
  .case-outro {
    grid-template-columns:1fr
  }
  .case-foot {
    flex-direction:column
  }
}
.case-full-site-link {
  margin-top:20px
}
.case-preview-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.case-preview-frame {
  margin:0;
  min-width:0
}
.case-preview-window {
  height:280px;
  overflow:hidden;
  border:1px solid var(--case-line);
  background:var(--case-panel);
  box-shadow:0 16px 44px #0002
}
.case-preview-window iframe {
  display:block;
  width:1280px;
  height:940px;
  border:0;
  transform:scale(.29);
  transform-origin:top left;
  background:var(--case-bg)
}
.case-preview-frame figcaption {
  padding:12px 2px;
  color:var(--case-accent);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase
}
.case-preview-window:focus-within {
  outline:2px solid var(--case-accent);
  outline-offset:3px
}
@media(max-width:1050px) {
  .case-preview-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .case-preview-window iframe {
    transform:scale(.34);
    transform-origin:top left
  }
  .case-preview-window {
    height:320px
  }
}
@media(max-width:760px) {
  .case-preview-grid {
    grid-template-columns:1fr
  }
  .case-preview-window iframe {
    width:100%;
    height:650px;
    transform:none
  }
  .case-preview-window {
    height:430px
  }
}
.direction-picker {
  max-width:1320px;
  margin:0 auto;
  padding:78px 5vw 92px;
  border-bottom:1px solid var(--case-line)
}
.direction-heading {
  max-width:670px;
  margin-bottom:32px
}
.direction-heading h2 {
  font-size:clamp(32px,4vw,54px);
  line-height:1.03;
  letter-spacing:-.045em;
  margin:8px 0 14px
}
.direction-heading>p:last-child {
  color:#a6a9ae;
  max-width:600px
}
.direction-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.direction-card {
  position:relative;
  min-height:330px;
  overflow:hidden;
  border:1px solid var(--case-line);
  background:#131617;
  color:#f5f2ec;
  text-decoration:none;
  display:flex;
  align-items:flex-end
}
.direction-card:after {
  content:"";
  position:absolute;
  inset:30% 0 0;
  background:linear-gradient(transparent,rgba(0,0,0,.92));
  pointer-events:none
}
.direction-card>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s ease;
  filter:saturate(.82)
}
.direction-card:hover>img {
  transform:scale(1.045)
}
.direction-number {
  position:absolute;
  z-index:1;
  top:16px;
  left:16px;
  padding:7px 10px;
  background:#101214d9;
  border:1px solid #ffffff35;
  font-size:11px;
  letter-spacing:.13em
}
.direction-card-copy {
  position:relative;
  z-index:1;
  padding:24px;
  width:100%;
  display:grid;
  gap:9px
}
.direction-card-copy strong {
  font-size:23px;
  line-height:1.1
}
.direction-card-copy small {
  font-size:14px;
  color:#d2d0ca;
  max-width:34ch
}
.direction-card-copy b {
  margin-top:6px;
  color:var(--case-accent);
  font-size:12px;
  letter-spacing:.04em
}
.direction-card:hover {
  border-color:var(--case-accent)
}
@media(max-width:760px) {
  .direction-picker {
    padding:56px 5vw
  }
  .direction-grid {
    grid-template-columns:1fr
  }
  .direction-card {
    min-height:280px
  }
}
/* Readability for concept case studies */
.case-study {
  font-size:17px;
  line-height:1.7
}
.case-study p,.case-study li {
  font-size:15px!important;
  line-height:1.72!important
}
.case-navlinks,.case-foot,.case-shot figcaption {
  font-size:14px
}
.case-kicker,.case-tags span,.case-fact span {
  font-size:12px
}
.case-button {
  font-size:14px
}