:root{
  --bg:#000;
  --fg:#f5f5f5;
  --radius:5px;
  --space:"Space Grotesk",sans-serif;
  --jura:"Jura",sans-serif;
  --accent:#ff5215;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block}

/* Desktop is positioned directly from each 1792px-wide Figma frame. */
#desktop-holder{position:relative;width:100%;background:var(--bg);overflow:hidden}
#desktop-artboard{position:absolute;left:50%;top:0;width:1792px;background:var(--bg);transform:translateX(-50%);transform-origin:top center;overflow:hidden}
.desktop-copy,.desktop-visual{position:absolute;margin:0}
.desktop-copy{color:var(--fg);white-space:pre-line;font-weight:400;line-height:1.29;overflow:visible}
.desktop-copy.is-bold{font-weight:700}
.desktop-copy.header-name{font-family:var(--space)!important;font-size:24px!important;font-weight:700;line-height:.96}
.desktop-copy.header-name a,.mobile-name{color:inherit;text-decoration:none}
.desktop-copy.contact{font-family:var(--space)!important;font-size:16px!important;line-height:1.2;white-space:nowrap}
.desktop-copy.contact a,.mobile-contact{color:inherit;text-decoration:none}
.desktop-copy.contact::after{content:"";display:block;width:69.3px;height:1px;margin-top:12px;background:var(--accent)}
.desktop-copy.hero-title,.desktop-copy.hero-subtitle{font-size:46px!important;line-height:1.08}
.desktop-copy.section-heading{font-family:var(--space)!important;font-size:28px!important;font-weight:700;line-height:1.2}
.desktop-copy.body-copy{font-family:var(--space)!important;font-size:24px!important;line-height:1.29}
.desktop-copy.meta-block{font-family:var(--jura)!important;font-size:24px!important;line-height:1.28}
.desktop-copy.meta-block strong{display:block;font-family:var(--space);font-size:28px;line-height:1.2;font-weight:700;margin-bottom:28px}
.desktop-copy.meta-block span{display:block}
.desktop-copy.result-copy,.desktop-copy.final-link{font-family:var(--space)!important;font-size:34px!important;line-height:1.24}
.desktop-copy.final-link{display:flex;align-items:center;gap:26px;white-space:nowrap}
.desktop-copy.final-link a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:7px;text-decoration-thickness:1px}
.final-link-arrow{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:square;stroke-linejoin:miter}
.desktop-visual{overflow:hidden;border-radius:var(--radius)}
.desktop-visual>img{width:100%;height:100%;object-fit:fill}

/* Reflowed responsive version; every image is already cropped to its Figma frame. */
#mobile-site{display:none;max-width:800px;margin:0 auto;padding:28px 22px 84px}
.mobile-header{padding-top:2px}
.mobile-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:64px}
.mobile-name{display:block;font-family:var(--space);font-size:24px;line-height:1;font-weight:700;white-space:pre-line}
.mobile-contact{font-family:var(--space);font-size:15px;line-height:1.2;padding-top:5px;white-space:nowrap}
.mobile-contact::after{content:"";display:block;width:64px;height:1px;margin-top:10px;background:var(--accent)}
.mobile-header h1{font-family:var(--space);font-size:40px;line-height:1.04;margin:0;font-weight:700}
.mobile-deck{font-family:var(--space);font-size:25px;line-height:1.12;margin:0 0 24px}
.mobile-hero{width:100%;height:auto;border-radius:var(--radius)}
.mobile-intro,.mobile-section,.mobile-result{margin-top:70px}
.mobile-intro h2,.mobile-section h2{font-family:var(--space);font-size:25px;line-height:1.2;margin:0 0 16px;font-weight:700}
.mobile-intro p,.mobile-section p{font-family:var(--space);font-size:18px;line-height:1.45;margin:0;max-width:690px}
.mobile-intro p{font-family:var(--jura)}
.mobile-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px;align-items:start}
.mobile-gallery img{width:100%;height:auto;border-radius:var(--radius);overflow:hidden}
.mobile-gallery.wide{grid-template-columns:1fr}
.mobile-gallery.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mobile-gallery.logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:center}
.mobile-gallery.masonry{display:block;columns:2;column-gap:10px}
.mobile-gallery.masonry img{margin:0 0 10px;break-inside:avoid}
.mobile-gallery.mixed img.is-wide,.mobile-gallery.staggered img.is-wide{grid-column:span 2}
.mobile-gallery.summary-grid img:first-child{grid-column:span 2}
.mobile-result{padding-bottom:18px}
.mobile-result p{font-family:var(--space);font-size:27px;line-height:1.3;margin:0;max-width:700px}
.mobile-final-link{font-family:var(--space);font-size:22px;line-height:1.3;margin:30px 0 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.mobile-final-link a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:5px;text-decoration-thickness:1px}

/* Restrained portfolio motion, with an actual reverse while scrolling upward. */
.motion-ready .hero-enter{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--motion-delay,0ms)}
.motion-ready .hero-enter.hero-visible{opacity:1;transform:translateY(0)}
.motion-ready .reveal{opacity:0;transform:translateY(calc(-1 * var(--reveal-distance,30px))) scale(var(--reveal-scale,1));transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1);transition-delay:var(--motion-delay,0ms);will-change:opacity,transform}
.motion-ready .reveal.is-visible{opacity:1;transform:translateY(0) scale(1);will-change:auto}

@media (hover:hover) and (pointer:fine){
  .desktop-visual>img,.mobile-gallery img,.mobile-hero{transition:transform .5s cubic-bezier(.22,1,.36,1),filter .5s ease;transform-origin:center}
  .desktop-visual:hover>img,.mobile-gallery img:hover,.mobile-hero:hover{transform:scale(1.018);filter:brightness(1.025)}
}
@media (max-width:1199px){#desktop-holder{display:none}#mobile-site{display:block}}
@media (max-width:620px){
  #mobile-site{padding-left:18px;padding-right:18px}
  .mobile-topline{margin-bottom:48px}
  .mobile-name{font-size:24px}
  .mobile-contact{font-size:14px}
  .mobile-header h1{font-size:36px}
  .mobile-deck{font-size:22px}
  .mobile-intro,.mobile-section,.mobile-result{margin-top:58px}
  .mobile-intro h2,.mobile-section h2{font-size:23px}
  .mobile-intro p,.mobile-section p{font-size:17px}
  .mobile-gallery{gap:8px}
  .mobile-gallery.grid-3,.mobile-gallery.logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobile-gallery.masonry{column-gap:8px}
  .mobile-gallery.masonry img{margin-bottom:8px}
  .mobile-result p{font-size:24px}
  .motion-ready .reveal{--reveal-distance:15px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-ready .hero-enter,.motion-ready .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .desktop-visual>img,.mobile-gallery img,.mobile-hero{transition:none!important}
}