#particle-canvas {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5;}
#stage {display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;margin-bottom:-15vw;width:100vw;height:100dvh;overflow-x:hidden;z-index:0;}
#logoWrapper {position:absolute;top:50%;left:50%;transform-origin:bottom center;z-index:10;opacity:0;visibility:hidden;}
#logo {display:block;/* original AR = 61:23 */width:80vw;height:30.163934424vw;/* 80vw * 0.3770491803 */}
#legendaryDesign {color:var(--text1);display:block;text-align:center;max-width:70vw;font-size:clamp(1rem, 2vw, 2rem);font-weight:100;letter-spacing:1.5px;position:absolute;will-change:opacity top position;z-index:2;}
/* end LOGO SLAM */

:root {
  color-scheme: light dark;
  --page-max-width:1440px;
  --page-gutter: 2rem;
  --site-margin: max(var(--page-gutter), calc((100% - var(--page-max-width)) / 2));
  --track-padding: var(--page-gutter);
  --page-max-width-buffer:calc(var(--page-max-width) + 100px);
  --container-padding:20px;
  --container-padding-x:var(--container-padding);
  --col-gap:var(--container-padding);
}
@media (min-width:768px) {
  :root {--container-padding:30px;}
}
@media (min-width:1000px) {
  :root {--container-padding:40px;}
}
@media(min-width:1440px) {
:root {
  --track-padding: calc((100% - var(--page-max-width)) / 2 + var(--page-gutter));
}}

:root { /* typography */
  --font-family-1: Manrope, Arial, sans-serif;
  --font-family-2: "DM Mono", monospace;
  --font-family-accent: "Playfair Display", serif;
  --font-awesome: 'Font Awesome 7 Pro';

  --font-size-heading: clamp(48px,7.25vw,108px);
  --font-size-subheading: 1.6rem;
  --font-size-body: 20px;
  --font-size-buttons: calc(var(--font-size-body) * 1.1);

  --brand:#F9CA3D;
  --header-background:#F9CA3D;
  /*--highlight: #d4ff00;*/
}
@media(min-width:900px) {
  :root { --font-size-body:20px; }
}

:root {
  --bg1: white;
  --bg1a5: #fff8;
  --bg1a0: #fff0;
  --bg2: #f4f3ed;
  --bg3: #e1e0dc;
  --paper-color: #F4F2F0;
  --border: rgba(24,35,29,.17);

  --text1: #18231d;
  --text2: #35576C;
  --text-strong: black;
  --text-muted: oklch(from var(--text1) l c h / .5);
  --field-placeholder: #ccc;
  --highlight: #FF5015;
  --you-are-here: #2ABA70;
  --interactive: #F9CA3D;

  --navFilter: blur(8px) brightness(1.4) contrast(1.4) saturate(1.3);
  --navShadow: 0 5px 8px -2px var(--border), 0 17px 22px -17px var(--border), 0 1px 6px -1px inset oklch(from var(--border) l c h / 0.1), 1px 3px 6px inset rgba(255, 255, 255, 0.6), -1px -1px 10px -4px inset rgba(0, 0, 0, 0.6);
  --navShadowHover: 0 5px 8px -2px var(--border), 0 17px 22px -17px var(--border);
  --modal-backdrop-filter: blur(30px) brightness(2) contrast(0.3);

  --study-card-1: oklch(0.96 0.02 282.7);
  --study-card-2: oklch(0.96 0.02 169.64);
  --study-card-3: oklch(0.96 0.02 92.5);
  --study-card-4: oklch(0.96 0.02 37.29);
  --study-card-5: oklch(0.96 0.02 169.26);
}
@media(prefers-color-scheme:dark) {
:root {
  --bg1: #1c1c1c;
  --bg1a5: #2228;
  --bg1a0: #2220;
  --bg2: #000;
  --bg3: #313131;
  --paper-color:#2D2D2D;
  --border: rgba(255,255,255,.17);

  --text1: #dfdfe4;
  --text2: #b6c5cf;
  --text-strong: white;
  /* inherited --text-muted: oklch(from var(--text1) l c h / .7); */
  --field-placeholder:#666;
  --highlight:#FF5015;
  --you-are-here:#F9CA3D;
  --interactive: #F9CA3D;

  --navFilter: blur(5px) brightness(1) contrast(1) saturate(1.3);
  --navShadow: 0 5px 8px -14px var(--text1), 0 3px 23px -18px var(--text1), 0 1px 6px -1px inset oklch(from var(--border) l c h / 0.1), 1px -3px 6px -2px inset rgba(255, 255, 255, 0.4), -1px -1px 10px -4px inset rgba(0, 0, 0, 0.6);
  --modal-backdrop-filter: blur(30px) brightness(0) contrast(0.8);

  --study-card-1: oklch(0.38 0.03 281.71);
  --study-card-2: oklch(0.34 0.03 168.43);
  --study-card-3: oklch(0.32 0.02 92.86);
  --study-card-4: oklch(0.3 0.03 37.7);
  --study-card-5: oklch(0.3 0.02 168.54);
}}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body, html {
  background-color:var(--bg1);
  color:var(--text1);
  display:flow-root;
  font-family:var(--font-family-1);
  font-size:var(--font-size-body);
  margin:0;
  width:100vw;
  min-height:100dvh;
  height:max-content;
}
button { background:none; border:none; color:inherit; cursor:pointer; font-size:var(--font-size-buttons); }

#pageContent { position:relative; }

/* NAV */
#mobileNav {
  display:flex; position:fixed; margin:0 auto; right:8px; bottom:8px; z-index:10;
  border-radius:28px; corner-shape:superellipse(0.95); padding:8px;
  border:1px solid var(--border);

  background-color:oklch(from var(--bg1) l c h / 0.55);
  backdrop-filter:var(--navFilter);
  box-shadow:var(--navShadow);

  flex-direction:column-reverse; align-items:stretch; gap:0px;
  transition:all 200ms ease,
             max-height 350ms cubic-bezier(0.16, 1, 0.3, 1),
             width 350ms cubic-bezier(0.16, 1, 0.3, 1);
  width:fit-content; max-height:56px;
  will-change:width, max-height, background-color, border-radius, box-shadow;
}
#mobileNav.open { border-radius:16px; }
/* Floating Trigger Button */
#mobileNav #trigger {
  background:transparent; border:none; color:var(--text1); cursor:pointer; font-size:var(--font-size-buttons);
  display:flex; align-items:center; justify-content:center; align-self:flex-end;
  transition:transform 300ms ease, color 200ms ease;
  padding:8px 12px; gap:8px;
}
#mobileNav .link-grid {
  opacity:0; pointer-events:none;
  display:flex; flex-flow:column; gap:8px;
  width:0; height:0; padding:0;
  transition:width 300ms cubic-bezier(0.16, 1, 0.3, 1),
              height 300ms cubic-bezier(0.16, 1, 0.3, 1),
              padding 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media(min-width:400px) {
  #mobileNav .link-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:repeat(2, 1fr);
  }
}
#mobileNav.open { max-height:max-content; gap:6px; background-color:var(--bg1); box-shadow:var(--navShadowHover); }
#mobileNav.open .link-grid {
  padding-top:12px;
  width:fit-content;
  height:max-content;
  opacity:1;
  pointer-events:auto;
  position:relative;
}
#mobileNav .lang {
  display:none;
  background-color:var(--bg1);
  backdrop-filter:var(--navFilter);
  border:1px solid var(--border);
  border-radius:16px;
  corner-shape:superellipse(0.95);
  flex-flow:column;

  align-items:center;
  justify-content:stretch;

  position:absolute;
  padding:8px;
  bottom:calc(100% + .5em);
  left:0;
  right:0;
  z-index:10;
}
#mobileNav.open .lang { display:flex; }
#mobileNav .lang > * { flex:0 0 50%; width:100%; }
#mobileNav a, #mobileNav .lang span {
  border-radius:10px;
  color:var(--text1);
  font-family:var(--font-family-2);
  letter-spacing:1.5px;
  text-decoration:none;
  text-align:center;
  white-space:nowrap;
  padding:10px 16px;
  flex-grow:1;
}
#mobileNav .lang span, #mobileNav .lang a:hover { background:var(--bg3); }
#mobileNav .lang:has(a:hover) span { background:transparent; }
@media(min-width:400px) {
  #mobileNav .lang { flex-flow:row; }
  #mobileNav .lang > * { width:auto; }
}
#mobileNav a:hover,
#mobileNav a.active {
  color:var(--highlight);
  background-color:oklch(from var(--bg1) l c h / 0.5);
}
#navBar { display:none; }
#navBar .lang { position:absolute; bottom:4rem; display:flex; align-items:center; }
#navBar .lang > * { padding:4px 16px; }
#navBar .lang > a { color:var(--text-muted); }
#navBar .lang > a:hover { color:var(--highlight); }
#navBar .lang .divider { display:block; border-right: 1px solid var(--border); align-self:stretch; padding:0; }
@media (min-width:768px) {
  #mobileNav { display:none; }
  #navBar {
    background-color:oklch(from var(--bg1) l c h / 0.4); backdrop-filter:var(--navFilter); box-shadow:var(--navShadow);
    border-radius:40px; corner-shape:superellipse(0.95); padding:6px 8px; margin:0 auto;
    display:flex; gap:0; align-items:center; justify-content:center; width:fit-content;
    position:sticky; top:8px; left:0; right:0; z-index:10;
    transition:background-color 800ms ease, backdrop-filter 800ms ease, box-shadow 800ms ease;
    will-change:opacity, background-color, backdrop-filter, box-shadow;
  }
  #navBar::before  { background-color:oklch(from var(--bg1) l c h / 0.6); filter:blur(10px); content:''; display:block; position:absolute; inset:10px; z-index:-1; }
  #navBar .lang::before, #navBar .lang::after { background-color:oklch(from var(--bg1) l c h / 0.5); filter:blur(10px); content:''; display:block; position:absolute; inset:0; z-index:-1; }
  #navBar.inline { background-color:oklch(from var(--bg1) l c h / 0.0); backdrop-filter:blur(0) brightness(1) contrast(1) saturate(1); box-shadow:0 0px 2px -2px transparent, 0 0px 17px -17px transparent;position:relative; }
  #navBar a { color:var(--text1); border-radius:4px; letter-spacing:1.5px; padding:10px 20px; text-decoration:none; transition:all 120ms ease-in; }
  #navBar a:hover, #navBar:not(:hover) a.active { color:var(--highlight); }
}

.eyebrow { font:500 11px var(--font-family-2); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); display:flex; flex-flow: column-reverse; gap:10px; }
.eyebrow::before { content:""; display:block; width:25px; height:1px; background:var(--highlight); }
#intro { color:var(--text2); padding:5vh var(--page-gutter) 65px; margin-inline:auto; max-width:var(--page-max-width); }
#intro h1 { color:var(--text1); font-size:var(--font-size-heading); letter-spacing:-.055em; line-height:.93; max-width:850px; margin:25px 0 30px; font-weight:800; }
#intro div.we-can-help { color:var(--text1); margin-top:1em; }
#intro ul { padding-left:1em; }
.intro-bottom { display:flex; justify-content:space-between; align-items:end; gap:32px; max-width:980px; }
#intro * { max-width:90ch; margin:0; line-height:1.45; }
.counter { font-family:var(--font-family-2); color:var(--text-muted); flex-shrink:0; }
@media (min-width:650px) {
  .eyebrow { flex-flow:row; align-items:center; }
}

#work { overflow:hidden; }
#work .header { padding:0 var(--track-padding) 17px; display:flex; justify-content:space-between; align-items:flex-end; }
#work .header h2 { text-transform:uppercase; letter-spacing:.08em; margin:0; }
.track { display:flex; gap:18px; padding:22px var(--track-padding); overflow-x:auto; width:100%;
  scroll-padding-left:var(--track-padding); scroll-snap-type:x mandatory; scrollbar-width:none; will-change:scroll-position; }
.track::-webkit-scrollbar { display:none; }
.study { cursor:pointer; display:flex; flex:0 0 80vw; flex-direction:column; justify-items:stretch; position:relative; overflow:hidden; scroll-snap-align:start; transition:transform 200ms ease-out; }
.photo { background:var(--bg1); border:1px solid var(--border); border-radius:20px; overflow:hidden; }
.photo img { height:100%; width:100%; object-fit:cover; display:block; }
.photo:nth-child(n+2), .photo img[loading="lazy"], .photo span { display:none; }

.study-copy { flex-grow:1; padding:1em 1em 0 0; }
.study h3 { font-size:var(--font-size-subheading); letter-spacing:-.03em; line-height:1.1; margin:0 0 0.15em; }
.study p { max-width:475px; margin:0; line-height:1.3; }
.open-study { color:var(--interactive); display:flex; gap:6px; align-items:baseline; margin-top:.5em; }
.open-study b { font-weight:normal; }
.study:hover .open-study b { color:var(--highlight); text-decoration:underline; }
.open-study .image-count { background-color:var(--bg3); border-radius:20px; color:var(--text1); display:inline-block; font-size:0.9em; padding:4px 8px; }
@media (min-width:650px) {
  .study { flex-basis:min(83vw, 660px); }
}

.controls { display:flex; justify-content:space-between; align-items:center; padding:0 var(--track-padding); }
.progress { height:2px; background:#dedfd8; width:min(52vw,580px); position:relative; }
.progress #bar { border-radius:8px; background:var(--highlight); transition:left .2s ease-out; height:2px; width:20%; position:absolute; top:0; left:0; }
.arrows { display:flex; gap:8px; }
.arrows button { height:43px; width:43px; }

/* BEGIN PORTFOLIO MODAL */
dialog { border:0; padding:0; background:none; width:100vw; height:100vh; max-width:none; max-height:none; align-items:center; }
dialog::backdrop { background:transparent; backdrop-filter:var(--modal-backdrop-filter); }
dialog[open] { display:flex; }
dialog:focus, .modal:focus, .modal-main-content:focus { outline:unset; }
.modal { background-color:var(--bg1); color:var(--text1); display:flex; flex-direction:column; align-items:start; margin:0; width:100%; height:100dvh; overflow-y:auto; position:relative; }
.close { background-color:oklch(from var(--highlight) l c h / 0.2); display:flex; padding:1.5rem 1rem; justify-content:space-between; position:sticky; bottom:0; order:5; width:100vw; z-index:10; backdrop-filter:brightness(0.5) brightness(1.2) blur(5px); }
.close::before {content:'Close'; display:block; }
.close:hover, .close:focus { background-color:var(--highlight); color:black; outline:unset; box-shadow:0 0 0 5px var(--highlight), 0 0 15px #0008, 0 0 10px 2px #0009; }
.close.mobile { margin-bottom:-3rem; }
.close.desktop { display:none; }

.modal-main-content { display:contents; }

/* 1. Modal header */
.modal-header { order:1; display:flex; gap:8px; align-items:center; padding:1em; }
.modal-header h2 { font-size:1.2rem; font-family:var(--font-family-2); letter-spacing:1px; text-transform:uppercase; margin:0; }

.case-link-btn { position:relative; text-decoration:none; }
.case-link-btn::after { content:'\f054'; font-family:var(--font-awesome); font-size:1em; position:relative; right:-5px; transition:right 200ms; line-height:1.35; }
.case-link-btn:hover::after { right:-10px; }

/* 2. Featured Image & Info */
.hero-img-container { order:2; flex-shrink:0; width:100%; aspect-ratio:16/10; overflow:hidden; border:1px solid #8884; box-shadow:0 2px 10px -2px #0001, 0 24px 28px -20px #0001, 0 44px 30px -50px #0002; position:relative; }
.hero-img-container img { width:100%; height:100%; object-fit:contain; display:block; }
.hero-img-container button {
  color:var(--text1);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 2vw;
  font-size:calc(1.3 * var(--font-size-buttons));
  opacity:1;
  transition:opacity 150ms ease-out;
  width:fit-content;
  min-width:45px;

  position:absolute;
  inset:0;
  z-index:-1;
}
.hero-img-container button.hidden { opacity:0!important; pointer-events:none; }
.hero-img-container button::after { content:''; background-color:var(--bg1a5); border-radius:50px; backdrop-filter:blur(4px) contrast(1.4); box-shadow:var(--navShadowHover); width:50px; height:50px; position:absolute; inset:calc(50% - 25px) auto; z-index:-1; }
.hero-img-container button:focus { outline:none; color:var(--highlight); }
#modal-prev { right:auto; } #modal-next { left:auto; }
.hero-img-container:hover button, .hero-img-container:focus-within button { opacity:1; z-index:5; }

.hero-info { order:4; margin:1em; height:-webkit-fill-available; }
.hero-info .title-row { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-start; margin-bottom:.2rem; margin-right:60px; gap:8px; position:relative; }
#index-count { position:absolute; color:var(--text-muted); display:block; text-align:right; top:-0.25rem; left:100%; min-width:60px; pointer-events:none; }
.hero-info h3 { margin:0; font-size:1.2rem; letter-spacing:-.03em; max-width:calc(100% - 60px)}
.hero-info p { margin:0; max-width:90ch; }
#modal-img-toggle { background:var(--bg2); border:1px solid var(--border); border-radius:8px; display:inline-flex; padding:4px; }
#modal-img-toggle:empty { display:none; }
.img-toggle-btn { padding:2px 8px; border-radius:4px; }
.img-toggle-btn.active { background-color:var(--interactive); color:black; }

/* 3. Carousel */
.carousel-container { order:3; background:oklch(from var(--bg3) l c h /.5); width:100%; margin-top:1em; backdrop-filter:blur(8px) brightness(0.5) brightness(1.5); }
.carousel-track { display:flex; gap:15px; padding:1em 16px 1.2em; scroll-padding-left:16px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.2) transparent; /*scroll-snap-type:x mandatory;*/ }
.carousel-track::before { content:'\f03e' ' ' attr(data-length); font-family:"Font Awesome 7 Pro"; font-weight:bold; display:flex; gap:4px; min-width:max-content; align-self:center; }
.carousel-track:focus { outline:none; }
.carousel-item { flex:0 0 120px; aspect-ratio:16/10; cursor:pointer; border-radius:4px; overflow:hidden; scroll-snap-align:start; opacity:0.8; transition:0.2s; border:2px solid transparent; }
.carousel-item:hover { opacity:1; }
.carousel-item.active { opacity:1; box-shadow:0 0 0 5px var(--you-are-here), 0 0 15px rgba(0,0,0,0.3); }
.modal:has(.close:focus) .carousel-item.active { box-shadow:0 0 0 5px oklch(from var(--you-are-here) l c h / 15%), 0 0 15px rgba(0,0,0,0.3); }
.carousel-item img { width:100%; height:100%; object-fit:cover; pointer-events:none; }

@media(min-width:500px) {
  .close { order:-1; padding:0.7em 0.6em; width:auto; margin-left:auto; position:sticky; top:10px; right:10px; bottom:unset; z-index:10; border-radius:100px; }
  .close::before { content:unset; }

  .modal { border-radius:30px; margin:20px auto; max-width:min(100vw - 40px, 1100px); height:auto; max-height:calc(100vh - 40px); overflow:hidden; box-shadow:0 0px 20px -10px #0004, 0 30px 30px -30px #0003, 0 50px 60px -60px #0002}
  .modal-main-content { display:flex; flex-flow:column; width:-webkit-fill-available; max-height:-webkit-fill-available; overflow:auto; padding:6px 12px 120px; }
  .modal-header { padding:1em 0; }
  .hero-img-container { border-radius:1em; }
  .carousel-container { background:oklch(from var(--bg3) l c h / .5); backdrop-filter:blur(6px) brightness(0.5) brightness(4); margin-top:0; position:absolute; bottom:0; left:0; right:0; z-index:2; }
  .hero-info { margin:1em 0 1.2em; }
  .hero-info p { min-height:5.6em; }
}

@media(min-width:900px) {
  .close.mobile { display:none; }
  .close.desktop { display:block; }
  .modal { flex-flow:row; }
  .modal-main-content { padding:0 16px; }

  .carousel-container { align-self:stretch; flex-shrink:0; margin-top:0; position:relative; width:180px; height:-webkit-fill-available; }
  .carousel-track { flex-flow:column; overflow-x:hidden; overflow-y:auto; padding:68px 12px 80px; position:absolute; inset:0; scroll-padding-left:0; scroll-padding-top:68px; scroll-snap-type:y mandatory; }
  .carousel-track::before { align-self:start; }
  .carousel-item { border-radius:12px; flex:0 0 fit-content; }
}
/* END PORTFOLIO MODAL */

/* BEGIN GOOD GREAT (CTA) */
#good-great { margin:10rem var(--container-padding) 7rem; width:auto; }
#good-great > div { background-color:var(--paper-color); padding:0 var(--container-padding) 40px; border-radius:0 0 30px 30px; width:-webkit-fit-content; max-width:100%; align-items:start; justify-content:center; position:relative; margin-inline:auto; }
#good-great > div::before,
#good-great > div::after { content:''; background-size:100% 100%; background-repeat:no-repeat; position:absolute; display:block; aspect-ratio:7.03797468529; z-index:-1; }
#good-great > div::before { background-image:url(../img/global/paper-blank-light-top.svg); bottom:calc(100% - 2px); right:0; left:0; }
@media(prefers-color-scheme:dark) {
  #good-great > div::before { background-image:url(../img/global/paper-blank-dark-top.svg); }
}

#good-great h4 { font-size:1.4em; margin:.4em 0 0.6em; line-height:1.2em; }
#good-great a { color:var(--highlight); text-decoration:underline; }
#good-great strong { color:var(--highlight); }
#good-great p { margin:0; line-height:140%; }
#good-great .slogan ~ p { margin-top:20px; max-width:600px; }
#good-great .slogan ~ p::after { content:''; width:min(20vw, 120px); height:min(20vw, 120px); background-image:url(../img/emoji/peace.webp); background-size:contain; position:absolute; z-index:0; bottom:-80px; right:30px; }
#good-great a { font-weight:600; }
#good-great #peace { display:none; }

@media(min-width:768px) {
  #good-great .slogan ~ p::after { right:0; }
}
@media(min-width:800px) {
  #good-great { margin:calc(var(--container-padding) * 2) auto calc(var(--container-padding) * 3); width:fit-content; max-width:calc(100vw - var(--container-padding-x)*2 - var(--page-gutter)*3); display:flex; justify-content:center; align-items:flex-end; }
  #good-great > div { border-radius:0; padding:calc(var(--container-padding) * 2) var(--container-padding); width:fit-content; max-width:70%; }
  #good-great > div::before,
  #good-great > div::after { background-size:100% 100%; aspect-ratio:0.1420863309; inset:unset; top:0; bottom:0; }
  #good-great > div::before { background-image:url(../img/global/paper-blank-light-left.svg); right:calc(100% - 2px); }
  #good-great > div::after { background-image:url(../img/global/paper-blank-light-right.svg); left:calc(100% - 2px); }
  #good-great .slogan ~ p { max-width:600px; }
  #good-great .slogan ~ p::after { display:none; }
  #good-great #peace { display:block; width:auto; height:100%; max-height:200px; margin-right:-70px; margin-left:20px; }
}
@media(prefers-color-scheme:dark) and (min-width:800px) {
  #good-great > div::before { background-image:url(../img/global/paper-blank-dark-left.svg); }
  #good-great > div::after { background-image:url(../img/global/paper-blank-dark-right.svg); }
}
/* END GOOD GREAT */

#footer #footer-email#footer-email { top:.15rem; right:.85rem; }