/* Local fonts: Nova Klasse for bold text; Poppins is its backup. */
@font-face {
  font-family: 'Nova Klasse';
  src: url('assets/fonts/NovaKlasse-Semibold.otf') format('opentype');
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/CabinetGrotesk-Regular.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/CabinetGrotesk-Medium.otf') format('opentype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/CabinetGrotesk-Bold.otf') format('opentype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face {
  font-family: 'Poppins';
  src: url('assets/fonts/Poppins-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
}
/* Duke.Design — shared styles for the landing page and six case studies. */
:root {
  --bg:#080808;
  --surface:#111;
  --text:#f4f4f0;
  --muted:#999a94;
  --line:#262723;
  --lime:#97C618;
  --teal:#62c9bc;
  --width:1200px;
  --gutter:clamp(22px,5vw,76px);
  --font-body: "Cabinet Grotesk", Arial, sans-serif;
  --font-bold: "Nova Klasse", "Poppins", Arial, sans-serif;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:112px
}
body {
  margin:0;
  -webkit-font-smoothing:antialiased
}
body.dialog-open {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
img {
  display:block;
  max-width:100%
}
svg {
  width:24px;
  height:24px;
  flex-shrink:0
}
p,h1,h2,h3 {
  margin:0
}
a:focus-visible,button:focus-visible {
  outline:2px solid #ffffff;
  outline-offset:7px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link {
  position:fixed;
  left:20px;
  top:15px;
  background:#ffffff;
  color:#080808;
  padding:14px 20px;
  z-index:1000;
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:translateY(0)
}
.teal {
  color:var(--teal)
}
.muted {
  color:var(--muted)
}
.eyebrow {
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.6
}
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(8,8,8,.94);
  backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s
}
.is-scrolled .site-header {
  border-bottom-color:var(--line)
}
.header-inner {
  max-width:calc(var(--width) + var(--gutter)*2);
  margin:auto;
  padding:25px var(--gutter);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
.wordmark {
  position:relative;
  font-weight:800;
  letter-spacing:-.065em;
  font-size:23px;
  line-height:.85;
  display:inline-block;
  min-width:81px
}
.wordmark>span:not(.logo-dot) {
  margin-left:15px
}
.logo-dot {
  position:absolute;
  right:0;
  top:2px;
  width:5px;
  height:5px;
  background:#ffffff;
  border-radius:50%
}
.header-inner nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:13px
}
.nav-motion {
  display:flex;
  align-items:center;
  gap:7px
}
.nav-motion svg {
  width:14px;
  height:14px
}
.nav-work {
  display:flex;
  gap:8px;
  align-items:center
}
.nav-count {
  color:var(--muted);
  font-size:10px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:17px;
  background:#ffffff;
  color:#090909;
  border-radius:100px;
  padding:15px 23px;
  font-weight:700;
  font-size:13px;
  transition:background .2s,transform .2s
}
.button svg {
  width:17px;
  height:17px
}
.button:hover {
  background:#c6e754;
  transform:translateY(-2px)
}
.home-hero,.work-section,.practice-section,.site-footer,.case-main {
  max-width:calc(var(--width) + var(--gutter)*2);
  margin:auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter)
}
.home-hero {
  padding-top:72px;
  padding-bottom:86px
}
.hero-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:43px
}
.designer-id {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  line-height:1.7
}
.designer-id img {
  width:43px;
  height:43px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #50504a
}
.hero-edition {
  display:flex;
  gap:14px;
  align-items:center;
  color:var(--muted)
}
.tiny-star {
  font-size:25px;
  color:#ffffff
}
.hero-title {
  font-family:var(--font-bold);
  font-size:clamp(54px,7.7vw,112px);
  line-height:.94;
  letter-spacing:-.072em;
  font-weight:900;
  max-width:1200px
}
.mobile-break {
  display:none
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:43px;
  gap:30px
}
.hero-bottom>p {
  font-size:16px;
  line-height:1.75;
  max-width:440px;
  color:#c7c8c1
}
.work-scroll {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:12px
}
.circle-arrow {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid #3a3b35;
  border-radius:50%;
  transition:background .25s,color .25s,transform .25s
}
.work-scroll:hover .circle-arrow {
  background:#ffffff;
  color:#080808;
  transform:translateY(4px)
}
.work-section {
  padding-top:35px;
  padding-bottom:100px
}
.section-heading {
  border-top:1px solid var(--line);
  padding-top:34px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  margin-bottom:42px
}
.section-heading h2 {
  font-size:clamp(30px,3.5vw,47px);
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1.1
}
.section-heading>.eyebrow {
  color:var(--muted)
}
.project-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:64px 30px
}
.project-card {
  display:block;
  min-width:0
}
.project-art {
  position:relative;
  aspect-ratio:1.37;
  background:var(--project-color);
  overflow:hidden;
  border-radius:4px
}
.project-art>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s
}
.project-card:hover .project-art>img {
  transform:scale(1.045)
}
.project-open {
  position:absolute;
  bottom:22px;
  right:22px;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#080808;
  color:#fff;
  transition:background .25s,color .25s,transform .25s
}
.project-card:hover .project-open {
  background:#ffffff;
  color:#080808;
  transform:rotate(5deg)
}
.project-number {
  position:absolute;
  left:22px;
  top:22px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #ffffff55;
  background:#08080844;
  backdrop-filter:blur(6px);
  border-radius:50%;
  font-size:10px;
  color:#fff
}
.project-caption {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-top:21px;
  gap:12px
}
.project-caption h3 {
  font-size:23px;
  letter-spacing:-.04em;
  font-weight:500
}
.project-caption p {
  font-size:12px;
  color:var(--muted);
  margin-top:8px
}
.project-kind {
  font-size:10px;
  border:1px solid #363731;
  color:#bbbcb4;
  border-radius:30px;
  padding:6px 9px;
  white-space:nowrap;
  margin-top:4px
}
.practice-section {
  padding-top:54px;
  padding-bottom:140px
}
.practice-section .eyebrow {
  color:var(--muted)
}
.practice-section h2 {
  font-weight:500;
  letter-spacing:-.055em;
  font-size:clamp(34px,4.8vw,64px);
  line-height:1.09;
  margin-top:26px
}
.practice-section p {
  max-width:530px;
  color:#b9bab3;
  font-size:15px;
  line-height:1.8;
  margin-top:27px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:13px;
  padding-bottom:8px;
  border-bottom:1px solid #66675f;
  margin-top:30px
}
.text-link svg {
  width:16px;
  height:16px
}
.text-link:hover {
  color:#ffffff;
  border-color:#ffffff
}
.site-footer {
  padding-top:51px;
  padding-bottom:30px;
  position:relative
}
.site-footer:before {
  content:'';
  position:absolute;
  top:0;
  left:var(--gutter);
  right:var(--gutter);
  height:1px;
  background:var(--line)
}
.footer-intro {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  color:var(--muted)
}
.footer-intro p {
  font-size:13px
}
.contact-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-weight:900;
  letter-spacing:-.065em;
  font-size:clamp(34px,6.9vw,92px);
  line-height:1.08;
  margin:36px 0 55px
}
.contact-arrow {
  display:grid;
  place-items:center;
  border-radius:50%;
  width:clamp(48px,7vw,92px);
  height:clamp(48px,7vw,92px);
  background:#ffffff;
  color:#080808;
  flex-shrink:0;
  transition:transform .3s
}
.contact-arrow svg {
  width:45%;
  height:45%
}
.contact-title:hover .contact-arrow {
  transform:rotate(45deg)
}
.footer-bottom {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:22px;
  font-size:11px;
  color:#b5b6ad
}
.footer-bottom>a {
  padding-bottom:4px;
  border-bottom:1px solid #55564e
}
.social-links {
  display:flex;
  gap:23px
}
.social-links a {
  display:flex;
  gap:6px;
  align-items:center
}
.social-links svg {
  width:12px;
  height:12px
}
.footer-credit {
  color:#777970
}
.footer-bottom a:hover {
  color:#ffffff
}
/* Case study pages */
.case-main {
  padding-top:50px
}
.back-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  color:#bebfb5;
  line-height:2
}
.back-link:hover {
  color:#ffffff
}
.case-eyebrow {
  display:flex;
  justify-content:space-between;
  margin-top:54px;
  color:var(--muted)
}
.case-hero h1 {
  font-size:clamp(49px,8.5vw,112px);
  letter-spacing:-.065em;
  line-height:1.02;
  font-weight:800;
  margin-top:19px;
  overflow-wrap:break-word
}
.case-intro {
  max-width:730px;
  font-size:clamp(17px,2vw,23px);
  color:#c5c6bf;
  line-height:1.5;
  letter-spacing:-.02em;
  margin-top:25px
}
.case-tags {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin:28px 0 45px
}
.case-tags span {
  color:var(--muted);
  font-size:11px;
  border:1px solid #373831;
  padding:8px 13px;
  border-radius:30px
}
.case-cover {
  border-radius:4px;
  width:100%;
  height:auto
}
.case-overview {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:55px;
  padding:65px 0 75px;
  border-bottom:1px solid var(--line)
}
.case-overview>.eyebrow {
  color:var(--muted);
  padding-top:6px
}
.case-overview>p {
  font-size:19px;
  letter-spacing:-.015em;
  line-height:1.75;
  color:#cdcec6;
  max-width:770px
}
.case-section {
  padding-top:70px
}
.case-section-heading {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:55px;
  align-items:start;
  margin-bottom:34px
}
.case-section-heading>.eyebrow {
  color:var(--muted);
  padding-top:7px
}
.case-section-heading h2 {
  font-size:clamp(27px,3vw,38px);
  letter-spacing:-.045em;
  font-weight:500;
  line-height:1.2
}
.case-section-heading p {
  color:#a8aaa0;
  line-height:1.8;
  font-size:14px;
  margin-top:14px;
  max-width:580px
}
.case-figure {
  margin:0
}
.image-button {
  position:relative;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  width:100%;
  border-radius:4px;
  overflow:hidden;
  cursor:zoom-in
}
.image-button>img {
  width:100%;
  height:auto
}
.enlarge-label {
  position:absolute;
  right:18px;
  bottom:18px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:11px 15px;
  font-size:11px;
  background:#080808de;
  backdrop-filter:blur(8px);
  border:1px solid #ffffff33;
  border-radius:40px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s,transform .2s
}
.enlarge-label svg {
  width:14px;
  height:14px
}
.image-button:hover .enlarge-label,.image-button:focus-visible .enlarge-label {
  opacity:1;
  transform:translateY(0)
}
.case-figure figcaption {
  font-size:11px;
  line-height:1.6;
  color:#82857a;
  padding:14px 0;
  max-width:850px
}
.next-project {
  border-top:1px solid var(--line);
  padding:44px 0 70px;
  margin-top:83px
}
.next-project>.eyebrow {
  color:var(--muted)
}
.next-project>a:not(.back-link) {
  display:grid;
  grid-template-columns:1fr 70px 29%;
  gap:30px;
  align-items:center;
  margin:24px 0 30px
}
.next-project h2 {
  font-size:clamp(31px,4.6vw,60px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.2;
  margin:10px 0
}
.next-project a p {
  color:var(--muted);
  font-size:12px
}
.next-project a .muted {
  font-size:11px
}
.next-project img {
  aspect-ratio:1.6;
  object-fit:cover;
  border-radius:4px;
  width:100%
}
.next-arrow {
  border:1px solid #45473d;
  border-radius:50%;
  width:65px;
  height:65px;
  display:grid;
  place-items:center;
  transition:background .2s,color .2s
}
.next-project>a:hover .next-arrow {
  background:#ffffff;
  color:#080808
}
.next-arrow svg {
  width:28px;
  height:28px
}
/* Image viewer */
.image-dialog {
  position:fixed;
  inset:0;
  border:1px solid #33352b;
  padding:0;
  border-radius:7px;
  width:calc(100vw - 36px);
  max-width:1500px;
  height:calc(100dvh - 36px);
  max-height:calc(100dvh - 36px);
  color:var(--text);
  background:#111;
  overflow:hidden
}
.image-dialog::backdrop {
  background:#000d;
  backdrop-filter:blur(8px)
}
.dialog-toolbar {
  height:65px;
  padding:0 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-bottom:1px solid #333;
  font-size:12px
}
.dialog-toolbar>div {
  display:flex;
  gap:9px
}
.dialog-toolbar button {
  border:1px solid #44483b;
  border-radius:30px;
  padding:9px 14px;
  background:#22251b;
  color:#fff;
  font-size:11px;
  cursor:pointer
}
.dialog-toolbar .close-dialog {
  background:#ffffff;
  border-color:#ffffff;
  color:#080808
}
.close-dialog span {
  font-size:15px;
  margin-left:9px
}
.dialog-image-wrap {
  height:calc(100% - 65px);
  overflow:auto;
  overscroll-behavior:contain;
  background:#151515
}
.dialog-image {
  width:100%;
  max-width:none;
  height:auto;
  margin:auto
}
.is-zoomed .dialog-image {
  width:1800px;
  min-width:100%
}
.zoom-button[aria-pressed=true] {
  border-color:#ffffff;
  color:#ffffff
}
/* Reveals only activate when JavaScript can observe the page. */
.js-motion .reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)
}
.js-motion .reveal.is-visible {
  opacity:1;
  transform:none
}
.project-card:nth-child(even) {
  transition-delay:.07s
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
  .js-motion .reveal {
    opacity:1;
    transform:none
  }
}
@media(min-width:1500px) {
  .hero-title {
    font-size:112px
  }
}
@media(max-width:1000px) {
  .header-inner nav {
    gap:24px
  }
  .home-hero {
    padding-top:48px
  }
  .hero-title {
    font-size:clamp(52px,8.1vw,85px)
  }
  .project-grid {
    gap:48px 24px
  }
  .project-kind {
    display:none
  }
  .footer-credit {
    flex-basis:100%
  }
  .case-overview,.case-section-heading {
    grid-template-columns:1fr 2.5fr;
    gap:30px
  }
  .next-project>a:not(.back-link) {
    grid-template-columns:1fr 50px 25%;
    gap:20px
  }
  .next-arrow {
    width:48px;
    height:48px
  }
}
@media(max-width:640px) {
  :root {
    --gutter:22px
  }
  .header-inner {
    padding-top:19px;
    padding-bottom:19px;
    gap:16px
  }
  .wordmark {
    font-size:20px;
    min-width:71px
  }
  .header-inner nav {
    gap:20px;
    font-size:11px
  }
  .nav-motion {
    display:none
  }
  .button-small {
    padding:11px 15px;
    font-size:11px;
    gap:9px
  }
  .button-small svg {
    width:14px;
    height:14px
  }
  .home-hero {
    padding-top:42px;
    padding-bottom:56px
  }
  .hero-top {
    margin-bottom:35px
  }
  .hero-edition {
    display:none
  }
  .designer-id {
    font-size:11px;
    gap:11px
  }
  .designer-id img {
    width:38px;
    height:38px
  }
  .hero-title {
    font-size:clamp(43px,9.3vw,59px);
    line-height:1.01;
    letter-spacing:-.065em
  }
  .mobile-break {
    display:block
  }
  .hero-bottom {
    margin-top:28px;
    align-items:flex-start;
    gap:20px;
    flex-direction:column
  }
  .hero-bottom>p {
    font-size:14px;
    max-width:340px;
    line-height:1.75
  }
  .work-scroll {
    margin-top:8px;
    gap:14px
  }
  .circle-arrow {
    width:38px;
    height:38px
  }
  .circle-arrow svg {
    width:19px;
    height:19px
  }
  .section-heading {
    padding-top:27px;
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    margin-bottom:26px
  }
  .section-heading>.eyebrow {
    font-size:9px
  }
  .work-section {
    padding-top:10px;
    padding-bottom:30px
  }
  .project-grid {
    grid-template-columns:1fr;
    gap:37px
  }
  .project-art {
    aspect-ratio:1.32
  }
  .project-caption {
    padding-top:17px
  }
  .project-caption h3 {
    font-size:21px
  }
  .project-caption p {
    font-size:11px;
    margin-top:7px
  }
  .project-kind {
    display:block;
    font-size:9px
  }
  .project-number {
    left:16px;
    top:16px
  }
  .project-open {
    width:40px;
    height:40px;
    right:16px;
    bottom:16px
  }
  .project-open svg {
    width:20px;
    height:20px
  }
  .practice-section {
    padding-top:55px;
    padding-bottom:74px
  }
  .practice-section h2 {
    font-size:35px;
    margin-top:20px
  }
  .practice-section p {
    font-size:14px;
    margin-top:22px
  }
  .site-footer {
    padding-top:33px;
    padding-bottom:24px
  }
  .footer-intro {
    align-items:flex-start;
    flex-direction:column;
    gap:6px
  }
  .contact-title {
    font-size:clamp(29px,7.4vw,47px);
    gap:12px;
    margin:28px 0 33px
  }
  .contact-arrow {
    width:42px;
    height:42px
  }
  .footer-bottom {
    gap:24px
  }
  .footer-credit {
    font-size:10px
  }
  .case-main {
    padding-top:25px
  }
  .case-eyebrow {
    margin-top:36px;
    gap:18px
  }
  .case-eyebrow>.eyebrow {
    font-size:9px
  }
  .case-hero h1 {
    font-size:clamp(43px,11vw,66px);
    margin-top:17px
  }
  .case-intro {
    font-size:17px;
    margin-top:20px;
    line-height:1.6
  }
  .case-tags {
    gap:7px;
    margin:23px 0 30px
  }
  .case-tags span {
    font-size:10px;
    padding:6px 10px
  }
  .case-overview {
    grid-template-columns:1fr;
    gap:20px;
    padding:35px 0 40px
  }
  .case-overview>p {
    font-size:16px;
    line-height:1.8
  }
  .case-section {
    padding-top:42px
  }
  .case-section-heading {
    grid-template-columns:1fr;
    gap:13px;
    margin-bottom:24px
  }
  .case-section-heading>.eyebrow {
    font-size:9px
  }
  .case-section-heading h2 {
    font-size:27px
  }
  .case-section-heading p {
    font-size:13px;
    margin-top:12px
  }
  .case-figure figcaption {
    font-size:10px
  }
  .enlarge-label {
    opacity:1;
    transform:none;
    right:10px;
    bottom:10px;
    padding:8px 11px;
    font-size:9px
  }
  .enlarge-label svg {
    width:11px;
    height:11px
  }
  .next-project {
    margin-top:40px;
    padding:30px 0 45px
  }
  .next-project>a:not(.back-link) {
    grid-template-columns:1fr 44px;
    gap:12px;
    margin-top:25px
  }
  .next-project img {
    grid-column:1/-1;
    aspect-ratio:1.8;
    max-height:250px
  }
  .next-project h2 {
    font-size:33px
  }
  .next-arrow {
    width:42px;
    height:42px
  }
  .dialog-toolbar {
    padding:0 10px;
    height:59px;
    gap:10px
  }
  .dialog-toolbar>p .muted {
    display:none
  }
  .dialog-toolbar button {
    padding:8px 10px;
    font-size:10px
  }
  .dialog-image-wrap {
    height:calc(100% - 59px)
  }
  .image-dialog {
    width:calc(100vw - 16px);
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px)
  }
  .is-zoomed .dialog-image {
    width:1200px
  }
}
@media(max-width:360px) {
  .nav-work {
    display:none
  }
  .project-kind {
    display:none
  }
  .contact-title {
    font-size:27px
  }
  .hero-title {
    font-size:39px
  }
  .case-hero h1 {
    font-size:40px
  }
}

/* Every bold element uses the same display family and fallback order. */
strong, b, .wordmark, .button, .hero-title, .contact-title, .case-hero h1 {
  font-family: var(--font-bold);
}
/* Nova Klasse has broad letterforms; keep its spacing and mobile scale comfortable. */
.wordmark { letter-spacing: -.025em; min-width: 112px; line-height: .88; }
.hero-title, .contact-title, .case-hero h1 { letter-spacing: -.025em; }
@media (max-width: 640px) {
  .wordmark { font-size: 19px; min-width: 97px; }
  .hero-title { font-size: clamp(29px, 8.3vw, 53px); line-height: 1.06; }
  .case-hero h1 { font-size: clamp(31px, 9vw, 58px); }
  .contact-title { font-size: clamp(20px, 5.8vw, 37px); }
}
@media (max-width: 360px) {
  .hero-title { font-size: 29px; }
  .case-hero h1 { font-size: 31px; }
}
/* Preserve clear word boundaries in the compact display type. */
.hero-title, .contact-title, .case-hero h1 { word-spacing: .13em; }
h2, h3 { word-spacing: .06em; }

/* The landing hero uses pure white throughout. */
.hero-title, .hero-title .teal { color: #ffffff; }
/* Call-to-action labels use Clash Display, including the contact headline. */
.button, .contact-title, .work-scroll, .text-link, .back-link,
.enlarge-label, .dialog-toolbar button {
  font-family: var(--font-body);
}

/* Compact white wordmark, with the offset two-line lockup from the design reference. */
.wordmark {
  font-family: var(--font-bold);
  font-size: 18px;
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.025em;
  min-width: 0;
  color: #ffffff;
}
.wordmark > span { margin-left: 12px; }
@media (max-width: 640px) {
  .wordmark { font-size: 17px; min-width: 0; }
}

#work-heading, #work-heading span { color: #ffffff; }

.wordmark img { display: block; width: 74px; height: 32px; object-fit: contain; }

.hero-title .hero-line { display: block; white-space: nowrap; }
@media (max-width: 640px) { .hero-title { font-size: clamp(24px, 6.9vw, 44px); } }

/* Project continuation card */
.next-project { padding: 36px 0 64px; }
.next-project-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.next-project-header .eyebrow { color: var(--muted); }
.next-project-header .back-link { margin: 0; }
.next-project > a.next-project-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 24px 0 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #11120f; }
.next-project-image { overflow: hidden; height: 300px; }
.next-project .next-project-image img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; transition: transform .35s ease; }
.next-project-copy { padding: 36px 40px; }
.next-project-copy > .eyebrow { color: #ffffff; }
.next-project .next-project-copy h2 { font-size: clamp(28px, 3.5vw, 46px); font-family: var(--font-bold); color: #fff; margin: 18px 0 10px; }
.next-project .next-project-copy p { font-size: 14px; }
.next-project-cta { display: inline-flex; align-items: center; gap: 28px; margin-top: 32px; font-family: var(--font-body); font-size: 14px; color: #fff; }
.next-project-cta > span { display: grid; place-items: center; width: 36px; height: 36px; background: #ffffff; color: #080808; border-radius: 50%; font-size: 20px; }
.next-project-card:hover .next-project-image img { transform: scale(1.035); }
.next-project-card:focus-visible { outline: 2px solid #ffffff; outline-offset: 5px; }
@media (max-width: 640px) {
 .next-project > a.next-project-card { grid-template-columns: 1fr; }
 .next-project-image { height: 220px; }
 .next-project-copy { padding: 26px; }
 .next-project-cta { margin-top: 24px; }
}

/* A restrained accent, with a neutral project hover. */
.header-inner .button { background: var(--lime); font-family: var(--font-body); }
.next-project-copy > .eyebrow { color: var(--muted); }
.next-project-image { position: relative; }
.next-project-view { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; color: #080808; font-family: var(--font-body); font-size: 17px; opacity: 0; transform: translate(-50%, -50%) scale(.9); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.next-project-card:hover .next-project-view, .next-project-card:focus-visible .next-project-view { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .next-project-view { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Nova Klasse is reserved for the landing-page hero. */
body, h1, h2, h3, h4, h5, h6, strong, b, .wordmark, .button,
.contact-title, .case-hero h1, .next-project .next-project-copy h2 {
  font-family: var(--font-body);
}
.hero-title { font-family: var(--font-bold); }

.case-hero h1 { font-weight: 500; }

.contact-title { font-family: var(--font-bold); }

/* Centered hero layout matching the motion portfolio. */
.home-hero { text-align: center; padding-top: 76px; padding-bottom: 90px; }
.hero-top { justify-content: center; margin-bottom: 30px; }
.hero-title { margin-left: auto; margin-right: auto; font-size: clamp(44px, 6.6vw, 100px); }
.hero-bottom { flex-direction: column; justify-content: center; align-items: center; gap: 28px; margin-top: 36px; }
.hero-bottom p { max-width: 560px; text-align: center; }
.work-scroll { justify-content: center; }
@media (max-width: 640px) {
 .home-hero { padding-top: 58px; padding-bottom: 64px; }
 .hero-title { font-size: clamp(24px, 6.9vw, 44px); }
 .hero-bottom { align-items: center; gap: 24px; }
}

/* Hero typography measured from the motion portfolio. */
.hero-title { font-size: 80px; line-height: 72px; letter-spacing: -2px; }
.hero-bottom p { font-size: 16px; line-height: 24px; }
@media (max-width: 809px) {
 .hero-title { font-size: 48px; line-height: 40px; }
 .hero-bottom p { font-size: 14px; line-height: 22px; }
}
@media (max-width: 640px) {
 .hero-title { font-size: clamp(24px, 6.9vw, 44px); line-height: .94; letter-spacing: -.025em; }
}

/* Motion portfolio navigation alignment. */
.header-inner { position: relative; min-height: 64px; }
.header-inner .wordmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.header-inner nav { display: flex; width: 100%; align-items: center; }
.header-inner nav .button { margin-left: auto; }
@media (max-width: 640px) {
 .header-inner nav { gap: 14px; }
 .header-inner .wordmark img { width: 64px; height: auto; }
 .header-inner nav .button { padding: 12px 16px; }
}

/* Selected-work bento grid. */
.project-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.project-card { grid-column: span 5; display: flex; flex-direction: column; border: 1px solid #252620; border-radius: 20px; overflow: hidden; background: #11120f; transition: border-color .25s, transform .25s; }
.project-card:nth-child(1), .project-card:nth-child(5) { grid-column: span 7; }
.project-card:nth-child(3) { grid-column: span 4; }
.project-card:nth-child(4) { grid-column: span 8; }
.project-card .project-art { width: 100%; height: 340px; aspect-ratio: auto; border-radius: 0; }
.project-card:nth-child(3) .project-art, .project-card:nth-child(4) .project-art { height: 280px; }
.project-card .project-art > img { object-fit: cover; }
.project-card .project-caption { padding: 24px; align-items: center; flex: 1; }
.project-card .project-caption h3 { font-size: 24px; font-weight: 500; }
.project-card .project-caption p { font-size: 13px; margin-top: 6px; }
.project-card .project-kind { font-size: 11px; border: 1px solid #34352e; border-radius: 100px; padding: 8px 12px; color: #b6b7ad; }
.project-card:hover { border-color: #65665b; transform: translateY(-3px); }
.project-card .project-open { opacity: 0; background: #fff; color: #080808; }
.project-card:hover .project-open, .project-card:focus-visible .project-open { opacity: 1; }
@media (max-width: 900px) {
 .project-grid { gap: 16px; }
 .project-card .project-art { height: 270px; }
 .project-card .project-caption { padding: 20px; }
 .project-card .project-kind { display: none; }
}
@media (max-width: 640px) {
 .project-grid { grid-template-columns: 1fr; }
 .project-grid .project-card { grid-column: auto; }
 .project-grid .project-card .project-art { height: auto; aspect-ratio: 1.2; }
 .project-card .project-caption h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .project-card:hover { transform: none; } }

@media (max-width: 640px) {
 .header-inner { min-height: 96px; }
 .header-inner .wordmark { top: 24px; }
 .header-inner nav { padding-top: 52px; justify-content: center; gap: 22px; }
 .header-inner nav .button { position: absolute; right: 0; top: 4px; margin-left: 0; }
}

/* Floating homepage showreel. */
.floating-showreel { position: fixed; right: 24px; bottom: 24px; width: 280px; z-index: 40; border: 1px solid #383932; border-radius: 14px; overflow: hidden; background: #11120f; box-shadow: 0 12px 40px #0008; }
.showreel-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-family: var(--font-body); font-size: 13px; }
.showreel-toggle { border: 0; background: transparent; color: #fff; font-family: var(--font-body); font-size: 22px; cursor: pointer; width: 28px; height: 28px; }
.showreel-player { aspect-ratio: 16 / 9; }
.showreel-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.floating-showreel.is-minimized { width: 150px; }
.floating-showreel.is-minimized .showreel-player { display: none; }
@media (max-width: 640px) { .floating-showreel { width: 200px; right: 12px; bottom: 12px; } }

.showreel-player { position: relative; }
.showreel-controls { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; gap: 8px; }
.showreel-controls button { background: #080808cc; color: #fff; border: 1px solid #ffffff40; border-radius: 100px; padding: 7px 11px; font-family: var(--font-body); font-size: 11px; cursor: pointer; }
.showreel-controls button:hover { background: #fff; color: #080808; }
.floating-showreel:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; background: #000; display: grid; place-items: center; }
.floating-showreel:fullscreen .showreel-player { width: 100%; height: 100%; aspect-ratio: auto; }
.floating-showreel:fullscreen .showreel-controls { bottom: 24px; left: 24px; right: 24px; }

.floating-showreel { border: 2px solid #ffffff80; }
.floating-showreel:fullscreen { border: 0; }

.floating-showreel {
  box-shadow: 0 12px 40px #0008;
}
.floating-showreel:fullscreen { box-shadow: none; }

.project-grid .project-card { border-radius: 10px; }