:root {
  --bg: #f3eee9;
  --paper: #f8f4f0;
  --ink: #11110f;
  --muted: #6d6862;
  --line: rgba(17,17,15,.34);
  --orange: #ef6c24;
  --red: #e52b22;
  --gold: #c9961a;
  --navy: #152247;
  --max: 1500px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, video { display:block; max-width:100%; }

.noise {
  position: fixed; inset: 0; z-index: 99; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.site-header {
  position: sticky; top:0; z-index:50;
  height: 78px; padding: 0 clamp(22px,4vw,64px);
  display:flex; align-items:center; justify-content:space-between;
  background: color-mix(in srgb, var(--bg) 89%, transparent);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.brand { font-size: 23px; font-weight:900; letter-spacing:-1.5px; }
.brand span { color:var(--orange); }
nav { display:flex; align-items:center; gap: clamp(16px,2.6vw,42px); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
nav a:not(.nav-cta) { position:relative; }
nav a:not(.nav-cta)::after { content:""; position:absolute; left:0; bottom:-7px; width:0; height:2px; background:var(--orange); transition:.25s; }
nav a:hover::after { width:100%; }
.nav-cta { padding:12px 16px; border:1px solid var(--ink); transition:.2s; }
.nav-cta:hover { background:var(--ink); color:var(--paper); }

main { overflow:hidden; }
.grid-frame { max-width:var(--max); margin:0 auto; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.hero { min-height:calc(100vh - 78px); display:grid; grid-template-columns: 1.08fr .92fr; }
.hero-copy { padding: clamp(52px,8vw,120px) clamp(28px,5vw,82px) 36px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; }
.eyebrow, .kicker { font-size:12px; letter-spacing:.13em; text-transform:uppercase; font-weight:800; }
.eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:clamp(30px,5vw,70px); }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 6px rgba(239,108,36,.12); }
.hero h1 { margin:0; font-size:clamp(58px,7.4vw,124px); line-height:.84; letter-spacing:-.07em; font-weight:900; max-width:880px; }
.hero h1 em { color:var(--orange); font-family:"Segoe Script", "Bradley Hand", cursive; font-size:.79em; font-weight:500; letter-spacing:-.055em; white-space:nowrap; }
.hero-intro { max-width:650px; margin:48px 0 30px; font-size:clamp(17px,1.4vw,22px); line-height:1.5; color:#35322f; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; gap:28px; padding:16px 20px; border:1px solid var(--ink); font-size:13px; text-transform:uppercase; font-weight:800; letter-spacing:.05em; transition:.2s; }
.button-dark { background:var(--ink); color:var(--paper); }
.button-dark:hover { background:var(--orange); border-color:var(--orange); }
.button-ghost:hover { background:var(--ink); color:var(--paper); }
.hero-meta { margin-top:auto; padding-top:56px; display:flex; flex-wrap:wrap; gap:10px 28px; font-size:12px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--muted); }

.hero-portrait { position:relative; min-height:780px; padding:clamp(22px,3vw,46px); display:flex; align-items:flex-end; background:linear-gradient(135deg, rgba(239,108,36,.05), transparent 55%); }
.portrait-frame { position:relative; width:100%; height:min(76vh,860px); overflow:hidden; border:1px solid var(--line); background:#1d1816; }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:center 43%; filter:saturate(.76) contrast(1.03); transform:scale(1.005); }
.portrait-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.48), transparent 44%); }
.portrait-label { position:absolute; z-index:2; left:24px; bottom:22px; color:white; font-weight:900; letter-spacing:-.05em; font-size:clamp(30px,4vw,68px); line-height:.82; }
.scribble { position:absolute; fill:none; stroke:var(--orange); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; z-index:3; }
.scribble-one { width:220px; left:-90px; top:120px; transform:rotate(-8deg); }
.scribble-two { width:150px; right:24px; bottom:40px; transform:rotate(15deg); filter:drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
.orbit-label { position:absolute; right:-100px; top:50%; transform:rotate(90deg); font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--muted); }
.hero-badge {
  position:absolute; z-index:4; top:clamp(22px,3vw,46px); right:clamp(22px,3vw,46px);
  min-width:190px; padding:17px 18px 16px; background:var(--ink); color:var(--paper);
  border:1px solid rgba(255,255,255,.18); box-shadow:0 12px 35px rgba(0,0,0,.16);
  display:grid; gap:5px; text-transform:uppercase; letter-spacing:.08em;
}
.hero-badge span, .hero-badge small { font-size:10px; font-weight:800; color:#cfc8c0; }
.hero-badge strong { font-size:24px; letter-spacing:-.04em; }


.software-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:240px 1fr; max-width:var(--max); margin:0 auto; }
.software-title { padding:28px 34px; font-size:13px; font-weight:900; letter-spacing:.12em; display:flex; align-items:center; border-right:1px solid var(--line); }
.software-list { display:grid; grid-template-columns:repeat(5,1fr); }
.software-list span { min-height:78px; padding:16px; display:flex; align-items:center; gap:12px; border-right:1px solid var(--line); font-size:13px; font-weight:700; }
.software-list span:last-child { border-right:0; }
.software-list b { width:38px; height:38px; display:grid; place-items:center; border-radius:8px; background:var(--ink); color:var(--paper); font-size:14px; }
.software-list span:nth-child(2) b { background:#131313; color:#b9f34c; }
.software-list span:nth-child(3) b { background:var(--orange); }

.section { max-width:var(--max); margin:0 auto; padding:clamp(80px,10vw,160px) clamp(22px,4vw,64px); border-left:1px solid var(--line); border-right:1px solid var(--line); }
.section-head { display:grid; grid-template-columns:1.35fr .65fr; gap:8vw; align-items:end; margin-bottom:clamp(54px,7vw,100px); }
.kicker { margin:0 0 24px; color:var(--orange); }
.section-head h2 { margin:0; font-size:clamp(48px,6vw,94px); line-height:.92; letter-spacing:-.065em; }
.section-head > p { margin:0; max-width:520px; font-size:clamp(17px,1.45vw,22px); line-height:1.55; color:#46413d; }

.project { border-top:1px solid var(--ink); }
.project-featured { display:grid; grid-template-columns:1.45fr .55fr; }
.project-media { position:relative; min-height:430px; overflow:hidden; background:#171614; }
.wide-media { min-height:620px; }
.project-media video { width:100%; height:100%; object-fit:cover; }
.project-media::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.38), transparent 45%); }
.media-button { position:absolute; z-index:4; left:22px; bottom:22px; border:0; background:var(--paper); color:var(--ink); padding:14px 16px; display:flex; gap:28px; align-items:center; text-transform:uppercase; letter-spacing:.07em; font-size:12px; font-weight:800; cursor:pointer; transition:.22s; }
.media-button:hover { background:var(--orange); color:white; transform:translateY(-2px); }
.project-number { position:absolute; z-index:3; top:20px; right:20px; color:white; font-size:12px; border:1px solid rgba(255,255,255,.6); width:38px; height:38px; display:grid; place-items:center; border-radius:50%; }
.project-info { padding:clamp(30px,4vw,58px); border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; gap:38px; }
.project-client { display:inline-block; font-weight:900; letter-spacing:.04em; font-size:14px; }
.logo-text { font-size:34px; letter-spacing:-.06em; }
.project-info h3 { margin:14px 0 0; font-size:clamp(34px,3.6vw,60px); letter-spacing:-.055em; line-height:.98; }
.project-info p { margin:0; line-height:1.55; color:#49443f; }
.project-info ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.project-info li { padding:12px 0; border-bottom:1px solid var(--line); font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--ink); }
.project-card:nth-child(odd) { border-right:1px solid var(--ink); }
.project-card .project-media { aspect-ratio:16/10; min-height:0; }
.square-media video { object-fit:contain; background:#0b0b0b; }
.dedinje-media > video { position:absolute; inset:0; }
.dedinje-logo-inset { position:absolute; z-index:5; top:20px; right:20px; width:min(34%,170px); aspect-ratio:1; padding:0; border:1px solid rgba(255,255,255,.78); background:#080808; color:white; overflow:hidden; cursor:pointer; box-shadow:0 16px 40px rgba(0,0,0,.32); transition:transform .24s ease, box-shadow .24s ease; }
.dedinje-logo-inset:hover { transform:translateY(-4px) rotate(1deg); box-shadow:0 22px 48px rgba(0,0,0,.42); }
.dedinje-logo-inset video { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.dedinje-logo-inset::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.72), transparent 52%); pointer-events:none; }
.dedinje-logo-inset span { position:absolute; z-index:2; left:10px; right:10px; bottom:9px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:9px; line-height:1.1; font-weight:900; letter-spacing:.09em; text-transform:uppercase; text-align:left; }
.dedinje-logo-inset b { color:var(--orange); font-size:11px; }
.project-info.compact { min-height:310px; border-left:0; padding:30px; display:block; }
.project-topline { display:flex; align-items:center; justify-content:space-between; gap:20px; text-transform:uppercase; font-size:11px; letter-spacing:.08em; color:var(--muted); }
.project-info.compact h3 { font-size:clamp(36px,4vw,58px); margin:36px 0 16px; }
.project-info.compact p { max-width:520px; }
.badge-red { background:var(--red); color:white; padding:9px 10px; }
.wordmark-gold { color:var(--gold); font-size:18px; }
.dedinje-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--red); color:white; }
.youtube-cover { display:grid; place-items:center; }
.youtube-cover::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 24%, rgba(239,108,36,.35), transparent 28%), linear-gradient(130deg,#181512,#4a2618 62%,#d06e2c); }
.identity-cover::before { background:radial-gradient(circle at 50% 40%, #9b7868 0 4%, transparent 5%), linear-gradient(115deg,#0c0c0c,#27201e 54%,#7a4e3e); }
.cover-type { position:relative; z-index:2; color:white; font-size:clamp(72px,10vw,150px); font-weight:900; line-height:.72; letter-spacing:-.09em; text-align:center; mix-blend-mode:overlay; opacity:.92; }
.cover-type.small { font-size:clamp(60px,8vw,120px); }

.clients-section { background:var(--ink); color:var(--paper); padding:clamp(80px,10vw,160px) max(22px, calc((100vw - var(--max))/2 + 64px)); }
.light-head > p { color:#c7c0b8; }
.logo-wall {
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(255,255,255,.28);
  border-left:1px solid rgba(255,255,255,.28);
}
.logo-tile {
  min-height:170px; padding:28px; display:flex; align-items:center; justify-content:center;
  border-right:1px solid rgba(255,255,255,.28); border-bottom:1px solid rgba(255,255,255,.28);
  background:transparent; overflow:hidden; transition:background .28s ease, transform .28s ease;
}
.logo-tile img {
  width:100%; height:88px; object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1); opacity:.70;
  transition:filter .28s ease, opacity .28s ease, transform .28s ease;
}
.logo-tile:hover { background:var(--paper); }
.logo-tile:hover img { filter:none; opacity:1; transform:scale(1.045); }
.logo-tile-color img { filter:none; opacity:.92; }
.logo-tile-square img { width:94px; height:94px; border-radius:18px; }
.logo-tile-mark img { width:92px; height:92px; }
.logo-tile-smartpoint img { height:104px; }
.logo-tile-tall img { height:112px; }


.about-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ink); }
.about-copy { padding:50px 5vw 50px 0; border-right:1px solid var(--line); }
.large-copy { font-size:clamp(25px,2.7vw,42px); line-height:1.15; letter-spacing:-.035em; margin:0 0 42px; }
.about-copy > p:not(.large-copy) { font-size:18px; line-height:1.65; max-width:670px; color:#4c4641; }
.text-link { display:inline-block; margin-top:32px; padding-bottom:6px; border-bottom:2px solid var(--orange); font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.08em; }
.skill-board { padding:50px 0 50px 5vw; }
.skill-row { display:grid; grid-template-columns:150px 1fr 35px; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.skill-row span { font-weight:800; }
.skill-row b { font-size:12px; }
.skill-track { height:10px; border:1px solid var(--line); padding:2px; }
.skill-track i { display:block; height:100%; width:var(--level); background:var(--orange); transform-origin:left; animation:grow 1s ease both; }
@keyframes grow { from { transform:scaleX(0); } }
.skill-notes { display:flex; flex-wrap:wrap; gap:9px; margin-top:38px; }
.skill-notes span { border:1px solid var(--line); border-radius:99px; padding:10px 13px; font-size:12px; font-weight:750; }

.contact-section { min-height:74vh; background:var(--orange); color:var(--ink); padding:clamp(70px,10vw,150px) max(24px, calc((100vw - var(--max))/2 + 64px)); display:flex; flex-direction:column; justify-content:center; position:relative; }
.contact-scribble { font-family:"Segoe Script",cursive; font-size:clamp(30px,4vw,62px); margin-bottom:25px; transform:rotate(-3deg); }
.contact-section > p { font-size:clamp(18px,2vw,28px); margin:0 0 18px; }
.contact-section > a { font-size:clamp(42px,7vw,118px); line-height:.92; font-weight:900; letter-spacing:-.075em; border-bottom:5px solid var(--ink); width:max-content; max-width:100%; overflow-wrap:anywhere; }
.contact-section > a span { font-size:.5em; vertical-align:top; }
.contact-meta { margin-top:100px; padding-top:22px; border-top:1px solid var(--ink); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:12px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; }

.media-modal { width:min(1200px,94vw); max-height:92vh; border:0; padding:0; background:#0b0b0b; color:white; box-shadow:0 24px 80px rgba(0,0,0,.5); }
.media-modal::backdrop { background:rgba(10,10,10,.84); backdrop-filter:blur(8px); }
.modal-close { position:absolute; z-index:5; right:16px; top:12px; width:42px; height:42px; border:1px solid rgba(255,255,255,.4); color:white; background:rgba(0,0,0,.45); border-radius:50%; cursor:pointer; font-size:25px; }
.modal-heading { padding:18px 70px 16px 20px; font-weight:800; font-size:15px; }
.modal-content { aspect-ratio:16/9; background:#000; }
.modal-content video, .modal-content iframe { width:100%; height:100%; border:0; object-fit:contain; }

.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .hero { grid-template-columns:1fr; }
  .hero-copy { border-right:0; border-bottom:1px solid var(--line); min-height:650px; }
  .hero-portrait { min-height:700px; }
  .portrait-frame { height:720px; }
  .scribble-one { left:auto; right:12%; top:-50px; transform:rotate(60deg); }
  .software-strip { grid-template-columns:1fr; }
  .software-title { border-right:0; border-bottom:1px solid var(--line); }
  .section-head { grid-template-columns:1fr; }
  .section-head > p { margin-top:30px; }
  .project-featured { grid-template-columns:1fr; }
  .project-featured .project-info { border-left:0; border-top:1px solid var(--line); }
  .logo-wall { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 760px) {
  .site-header { height:66px; }
  nav a:not(.nav-cta) { display:none; }
  .nav-cta { padding:9px 11px; }
  .hero { min-height:auto; }
  .hero-copy { padding:70px 22px 28px; min-height:610px; }
  .hero h1 { font-size:clamp(54px,16vw,86px); }
  .hero h1 em { white-space:normal; }
  .hero-intro { margin-top:34px; }
  .hero-meta { padding-top:42px; }
  .hero-portrait { min-height:570px; padding:18px; }
  .portrait-frame { height:560px; }
  .portrait-frame img { object-position:center 38%; }
  .orbit-label, .scribble-two { display:none; }
  .hero-badge { top:32px; right:32px; min-width:155px; padding:13px 14px; }
  .hero-badge strong { font-size:19px; }
  .software-list { grid-template-columns:1fr 1fr; }
  .software-list span { border-bottom:1px solid var(--line); }
  .software-list span:last-child { grid-column:1/-1; }
  .section { padding-left:18px; padding-right:18px; }
  .wide-media { min-height:330px; }
  .project-grid { grid-template-columns:1fr; }
  .project-card:nth-child(odd) { border-right:0; }
  .project-card .project-media { aspect-ratio:16/11; }
  .project-info.compact { min-height:auto; padding:26px 4px 52px; }
  .dedinje-logo-inset { top:14px; right:14px; width:32%; min-width:112px; }
  .dedinje-logo-inset span { font-size:8px; left:8px; right:8px; bottom:7px; }
  .logo-wall { grid-template-columns:1fr 1fr; }
  .logo-tile { min-height:122px; padding:20px; }
  .logo-tile img { height:66px; }
  .logo-tile-square img, .logo-tile-mark img { width:68px; height:68px; }
  .about-grid { grid-template-columns:1fr; }
  .about-copy { border-right:0; border-bottom:1px solid var(--line); padding-right:0; }
  .skill-board { padding-left:0; }
  .skill-row { grid-template-columns:110px 1fr 28px; gap:10px; }
  .contact-section > a { font-size:clamp(38px,12vw,70px); }
  .contact-meta { margin-top:70px; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Editorial note added to fill the upper-right hero space. */
.hero-note {
  position:absolute;
  z-index:5;
  top:clamp(22px,3vw,46px);
  left:clamp(22px,3vw,46px);
  width:min(270px,43%);
  padding:18px 18px 17px;
  border:1px solid rgba(17,17,15,.42);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(10px);
  box-shadow:0 13px 34px rgba(0,0,0,.10);
  display:grid;
  gap:12px;
}
.hero-note::before {
  content:"";
  width:42px;
  height:3px;
  background:var(--orange);
}
.hero-note span,
.hero-note small {
  font-size:9px;
  line-height:1.35;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--muted);
}
.hero-note strong {
  font-size:clamp(18px,1.55vw,25px);
  line-height:1.02;
  letter-spacing:-.045em;
}

@media (max-width:760px) {
  .hero-note {
    top:32px;
    left:32px;
    width:min(205px,48%);
    padding:13px 14px;
    gap:8px;
  }
  .hero-note strong { font-size:17px; }
  .hero-note small { display:none; }
}


/* Floating 3D hero cards — layered depth and scroll-lag motion. */
.hero-portrait {
  perspective: 1250px;
  perspective-origin: 56% 28%;
  transform-style: preserve-3d;
}

.hero-note,
.hero-badge {
  --float-x: 0px;
  --float-y: 0px;
  --float-z: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform:
    translate3d(var(--float-x), var(--float-y), var(--float-z))
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
}

.hero-note {
  width: min(330px, 47%);
  padding: 24px 25px 22px;
  gap: 15px;
  box-shadow:
    0 28px 56px rgba(17, 17, 15, .15),
    0 8px 18px rgba(17, 17, 15, .08);
  border-color: rgba(17, 17, 15, .48);
}

.hero-note::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12px -12px -12px 12px;
  border: 1px solid rgba(17, 17, 15, .16);
  background: rgba(239, 108, 36, .075);
  transform: translateZ(-28px);
  pointer-events: none;
}

.hero-note strong {
  font-size: clamp(22px, 1.85vw, 31px);
}

.hero-note span,
.hero-note small {
  font-size: 10px;
}

.hero-badge {
  min-width: 236px;
  padding: 22px 23px 20px;
  gap: 8px;
  box-shadow:
    0 34px 72px rgba(0, 0, 0, .27),
    0 9px 22px rgba(0, 0, 0, .14);
}

.hero-badge::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 11px -11px -11px 11px;
  border: 1px solid rgba(17, 17, 15, .22);
  background: rgba(239, 108, 36, .18);
  transform: translateZ(-34px);
  pointer-events: none;
}

.hero-badge span,
.hero-badge small {
  font-size: 11px;
}

.hero-badge strong {
  font-size: 31px;
  line-height: .95;
}

.hero-note:hover,
.hero-badge:hover {
  border-color: var(--orange);
}

@media (max-width: 1050px) {
  .hero-note {
    width: min(320px, 45%);
  }
  .hero-badge {
    min-width: 220px;
  }
}

@media (max-width: 760px) {
  .hero-portrait {
    perspective: 900px;
  }
  .hero-note {
    width: min(218px, 50%);
    padding: 15px 16px 14px;
    gap: 9px;
  }
  .hero-note::after,
  .hero-badge::after {
    inset: 7px -7px -7px 7px;
  }
  .hero-note strong {
    font-size: 18px;
  }
  .hero-note span {
    font-size: 8px;
  }
  .hero-badge {
    min-width: 168px;
    padding: 15px 16px 14px;
  }
  .hero-badge strong {
    font-size: 21px;
  }
  .hero-badge span,
  .hero-badge small {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-note,
  .hero-badge {
    transform: none !important;
    will-change: auto;
  }
}

/* Client logos: neutral gray by default, original brand color on hover/focus. */
.logo-tile img {
  filter: grayscale(1) brightness(0) invert(.72);
  opacity: .78;
}
.logo-tile:hover img,
.logo-tile:focus-within img {
  filter: none;
  opacity: 1;
}

/* =========================================================
   Mobile-first polish (touch, small screens and performance)
   ========================================================= */

button, a { -webkit-tap-highlight-color: transparent; }
button, .button, .nav-cta, .media-button, .dedinje-logo-inset { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.menu-toggle {
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid var(--ink);
  background:transparent;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}
.menu-toggle span {
  width:20px;
  height:2px;
  background:var(--ink);
  transition:transform .25s ease, opacity .2s ease;
}
.site-header.menu-open .menu-toggle span:first-child { transform:translateY(4px) rotate(45deg); }
.site-header.menu-open .menu-toggle span:last-child { transform:translateY(-4px) rotate(-45deg); }

@media (max-width: 760px) {
  :root { --mobile-pad: 18px; }
  html { scroll-padding-top:76px; }
  body { overflow-x:hidden; }
  body.menu-open { overflow:hidden; }
  main { overflow:clip; }

  .site-header {
    height:64px;
    padding:0 max(var(--mobile-pad), env(safe-area-inset-right)) 0 max(var(--mobile-pad), env(safe-area-inset-left));
  }
  .brand { font-size:20px; }
  .menu-toggle { display:flex; position:relative; z-index:3; }
  .site-header nav {
    position:fixed;
    z-index:2;
    left:0;
    right:0;
    top:64px;
    padding:18px max(var(--mobile-pad), env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(var(--mobile-pad), env(safe-area-inset-left));
    display:grid;
    gap:0;
    background:rgba(248,244,240,.985);
    border-bottom:1px solid var(--ink);
    box-shadow:0 22px 50px rgba(17,17,15,.16);
    transform:translateY(-120%);
    opacity:0;
    visibility:hidden;
    transition:transform .28s ease, opacity .22s ease, visibility .28s;
  }
  .site-header.menu-open nav {
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }
  .site-header nav a,
  nav a:not(.nav-cta) {
    display:flex;
    min-height:52px;
    align-items:center;
    justify-content:space-between;
    padding:0 2px;
    border-bottom:1px solid var(--line);
    font-size:14px;
  }
  .site-header nav a:not(.nav-cta)::after { display:none; }
  .site-header .nav-cta {
    justify-content:center;
    margin-top:16px;
    min-height:50px;
    padding:0 16px;
    background:var(--ink);
    color:var(--paper);
  }

  .grid-frame { border-left:0; border-right:0; }
  .hero { display:block; min-height:0; }
  .hero-copy {
    min-height:0;
    padding:52px var(--mobile-pad) 30px;
    border-right:0;
    border-bottom:1px solid var(--line);
    justify-content:flex-start;
  }
  .eyebrow {
    margin-bottom:34px;
    font-size:10px;
    line-height:1.3;
    letter-spacing:.11em;
  }
  .status-dot { flex:0 0 auto; }
  .hero h1 {
    max-width:100%;
    font-size:clamp(50px,15.4vw,76px);
    line-height:.87;
    letter-spacing:-.065em;
  }
  .hero h1 em {
    display:inline-block;
    white-space:normal;
    font-size:.76em;
    line-height:1.05;
  }
  .hero-intro {
    margin:34px 0 24px;
    max-width:40rem;
    font-size:16px;
    line-height:1.55;
  }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .button {
    min-height:50px;
    justify-content:space-between;
    gap:12px;
    padding:13px 14px;
    font-size:10px;
    line-height:1.25;
  }
  .hero-meta {
    margin-top:30px;
    padding-top:20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 16px;
    border-top:1px solid var(--line);
    font-size:9px;
    line-height:1.35;
  }
  .hero-meta span:last-child { grid-column:1/-1; }

  .hero-portrait {
    min-height:0;
    padding:14px;
    display:block;
    perspective:none;
    background:linear-gradient(140deg, rgba(239,108,36,.08), transparent 58%);
  }
  .portrait-frame {
    width:100%;
    height:auto;
    aspect-ratio:4 / 5;
  }
  .portrait-frame img {
    object-position:center 38%;
    transform:scale(1.015);
  }
  .portrait-label {
    left:16px;
    bottom:16px;
    font-size:clamp(31px,11vw,52px);
  }
  .orbit-label, .scribble-two { display:none; }
  .scribble-one {
    width:120px;
    left:auto;
    right:-4px;
    top:112px;
    transform:rotate(52deg);
    opacity:.9;
  }

  /* Keep the editorial cards readable on touch without a permanent RAF loop. */
  .hero-note,
  .hero-badge {
    transform:none !important;
    will-change:auto;
    backface-visibility:visible;
  }
  .hero-note {
    top:28px;
    left:28px;
    width:min(185px,50%);
    padding:13px 14px 12px;
    gap:8px;
    box-shadow:0 14px 32px rgba(17,17,15,.16);
    backdrop-filter:blur(7px);
  }
  .hero-note::after { inset:6px -6px -6px 6px; transform:none; }
  .hero-note::before { width:30px; height:2px; }
  .hero-note strong { font-size:16px; }
  .hero-note span { font-size:7px; }
  .hero-note small { display:none; }
  .hero-badge {
    top:auto;
    right:26px;
    bottom:34px;
    min-width:148px;
    padding:13px 14px 12px;
    gap:5px;
    box-shadow:0 18px 40px rgba(0,0,0,.28);
  }
  .hero-badge::after { inset:6px -6px -6px 6px; transform:none; }
  .hero-badge strong { font-size:19px; }
  .hero-badge span, .hero-badge small { font-size:7px; }

  .software-strip {
    display:block;
    border-left:0;
    border-right:0;
  }
  .software-title {
    padding:18px var(--mobile-pad) 13px;
    border-right:0;
    border-bottom:1px solid var(--line);
    font-size:10px;
  }
  .software-list {
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding-left:var(--mobile-pad);
  }
  .software-list::-webkit-scrollbar { display:none; }
  .software-list span,
  .software-list span:last-child {
    flex:0 0 auto;
    min-width:148px;
    min-height:70px;
    padding:14px 16px;
    border-right:1px solid var(--line);
    border-bottom:0;
    scroll-snap-align:start;
    font-size:11px;
  }
  .software-list b { width:34px; height:34px; }

  .section {
    padding:72px var(--mobile-pad);
    border-left:0;
    border-right:0;
  }
  .section-head {
    display:block;
    margin-bottom:48px;
  }
  .kicker { margin-bottom:18px; font-size:10px; }
  .section-head h2 {
    font-size:clamp(43px,13vw,66px);
    line-height:.92;
  }
  .section-head > p {
    margin-top:24px;
    max-width:34rem;
    font-size:16px;
    line-height:1.55;
  }

  .project-featured { display:block; }
  .project-media,
  .wide-media {
    min-height:0;
    aspect-ratio:16 / 10;
  }
  .project-featured .project-info {
    padding:28px 0 48px;
    border-left:0;
    border-top:1px solid var(--line);
    gap:24px;
  }
  .project-info h3 { font-size:clamp(36px,11vw,52px); }
  .project-info p { font-size:15px; }
  .project-info ul { margin-top:4px; }
  .media-button {
    left:14px;
    bottom:14px;
    min-height:46px;
    padding:12px 14px;
    gap:20px;
    font-size:10px;
  }
  .project-number { top:14px; right:14px; width:34px; height:34px; }
  .project-grid { display:block; }
  .project-card,
  .project-card:nth-child(odd) { border-right:0; }
  .project-card .project-media { aspect-ratio:16 / 10; }
  .project-info.compact {
    min-height:0;
    padding:24px 0 50px;
  }
  .project-info.compact h3 {
    margin:26px 0 12px;
    font-size:clamp(38px,12vw,56px);
  }
  .project-topline { font-size:9px; gap:12px; }
  .project-topline > span:last-child { text-align:right; }
  .dedinje-logo-inset {
    top:12px;
    right:12px;
    width:31%;
    min-width:104px;
    box-shadow:0 12px 28px rgba(0,0,0,.35);
  }
  .dedinje-logo-inset span { left:7px; right:7px; bottom:6px; font-size:7px; }
  .cover-type { font-size:clamp(68px,23vw,112px); }
  .cover-type.small { font-size:clamp(58px,20vw,96px); }

  .clients-section {
    padding:72px var(--mobile-pad);
  }
  .logo-wall { grid-template-columns:1fr 1fr; }
  .logo-tile {
    min-height:112px;
    padding:18px 14px;
  }
  .logo-tile img { height:58px; }
  .logo-tile-square img,
  .logo-tile-mark img { width:62px; height:62px; }
  .logo-tile-smartpoint img { height:68px; }
  .logo-tile-tall img { height:76px; }
  @media (hover:none) {
    .logo-tile:hover { background:transparent; }
    .logo-tile:hover img { filter:grayscale(1) brightness(0) invert(.72); opacity:.78; transform:none; }
    .logo-tile:active { background:var(--paper); }
    .logo-tile:active img { filter:none; opacity:1; transform:scale(1.025); }
  }

  .about-grid { display:block; }
  .about-copy {
    padding:36px 0 44px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .large-copy { font-size:25px; margin-bottom:30px; }
  .about-copy > p:not(.large-copy) { font-size:16px; }
  .skill-board { padding:38px 0 0; }
  .skill-row {
    grid-template-columns:105px minmax(0,1fr) 28px;
    gap:10px;
    padding:16px 0;
    font-size:13px;
  }
  .skill-track { height:9px; }
  .skill-notes { margin-top:28px; gap:7px; }
  .skill-notes span { padding:9px 11px; font-size:10px; }

  .contact-section {
    min-height:max(620px,100dvh);
    padding:78px var(--mobile-pad) calc(34px + env(safe-area-inset-bottom));
    justify-content:center;
  }
  .contact-scribble { font-size:clamp(34px,12vw,54px); }
  .contact-section > p { font-size:17px; }
  .contact-section > a {
    width:100%;
    font-size:clamp(30px,8.7vw,46px);
    line-height:1;
    letter-spacing:-.055em;
    border-bottom-width:3px;
    padding-bottom:8px;
  }
  .contact-meta {
    margin-top:70px;
    display:grid;
    gap:10px;
    font-size:9px;
  }

  .media-modal {
    width:100vw;
    max-width:none;
    height:100dvh;
    max-height:none;
    margin:0;
    border-radius:0;
  }
  .modal-heading {
    min-height:64px;
    padding:20px 66px 16px 16px;
    font-size:13px;
  }
  .modal-close {
    position:fixed;
    right:12px;
    top:10px;
    width:44px;
    height:44px;
  }
  .modal-content {
    height:calc(100dvh - 64px);
    aspect-ratio:auto;
    display:grid;
    place-items:center;
  }
  .modal-content video,
  .modal-content iframe { max-height:100%; }

  .reveal { transform:translateY(18px); transition-duration:.55s; }
}

@media (max-width: 420px) {
  :root { --mobile-pad: 15px; }
  .hero-copy { padding-top:42px; }
  .hero h1 { font-size:clamp(47px,15.5vw,66px); }
  .hero-actions { grid-template-columns:1fr; }
  .button { width:100%; }
  .hero-portrait { padding:10px; }
  .hero-note { top:20px; left:20px; width:168px; }
  .hero-badge { right:18px; bottom:24px; min-width:138px; }
  .section, .clients-section { padding-top:62px; padding-bottom:62px; }
  .logo-tile { min-height:100px; }
  .dedinje-logo-inset { min-width:94px; }
}

@media (max-width: 760px) and (orientation: landscape) {
  .hero-portrait { padding:12px 8vw; }
  .portrait-frame { aspect-ratio:16 / 9; max-height:78dvh; }
  .portrait-frame img { object-position:center 34%; }
  .hero-note { left:calc(8vw + 20px); }
  .hero-badge { right:calc(8vw + 20px); }
}

/* Mobile refinements requested July 2026:
   - show client logos in full color immediately on touch devices
   - raise the Selected Work card and keep the full hero-note phrase readable */
@media (max-width: 760px) {
  .logo-tile img,
  .logo-tile:hover img,
  .logo-tile:focus-within img,
  .logo-tile:active img {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-note {
    top: 20px;
    left: 18px;
    width: min(220px, 62%);
    max-width: calc(100% - 132px);
  }
  .hero-note strong {
    font-size: 18px;
    line-height: 1.03;
  }

  .hero-badge {
    right: 18px;
    bottom: 92px;
  }
}

@media (max-width: 420px) {
  .hero-note {
    top: 18px;
    left: 16px;
    width: min(205px, 61%);
    max-width: calc(100% - 118px);
  }
  .hero-note strong { font-size: 17px; }
  .hero-badge {
    right: 14px;
    bottom: 82px;
  }
}