/******** GLOBAL DEFAULTS ********/

/* 1. Import fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root {
  /* --text-max-width: 65ch; */
  --font-primary: "Quicksand", sans-serif;

  --font-heading: 'Merriweather', serif;
  --font-blockquote: 'Georgia', serif;

  --color-text: #000000;
  --color-muted: #666;
  --color-accent: #FF6B6B;
  --color-caption: #8D929B;
  --color-blue: #4A90E2;
  --color-gold: #E4BD7C;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 16px;
  font-family: var(--font-primary);
}

body {
  box-sizing: border-box;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

hr {
  border: 1px solid #E1E4E8;
  width: 100%;
  margin: 2rem 0;
}

/* Base list styles */
ul, ol {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
  line-height: 1.8;
}

/* Unordered list (bullets) & Ordered list (numbers) */
ul li, ol li {
  margin-bottom: 1rem;
  padding-left: 0.25rem;
  position: relative;
  display: list-item;
  list-style-position: outside;
}

/* Make the markers colored */
ul li::marker, ol li::marker {
  /* color: var(--color-gold); */
  font-weight: 700;
}



/* END OF DEFAULTS */

/******** TYOPGRAPHY ********/

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text);
  max-width: var(--text-max-width);
}

h1 {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: .75rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

h4 {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

p, figcaption, blockquote {
  font-family: var(--font-primary);
}

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

p + p {
  margin-top: .75rem;
}

figcaption {
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-caption);
  margin: 0.5rem auto 2rem auto;
}

figure>img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  margin-bottom: 10px;
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.1));
}

blockquote {
  font-family: var(--font-blockquote);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 150%;
  border-left: 4px solid var(--color-accent);
  padding-left: 1rem;
  color: var(--color-caption);
  max-width: 700px;
  margin-bottom: 2rem;
}

blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 1.125rem;
  color: var(--color-muted);
  font-style: normal;
}

.blue-text {
  color: var(--color-blue);
}

/* Constrain text width */
h1, h2, h3, h4, h5, p {
  max-width: 1000px;
}

/* Typography responsiveness */
@media (max-width: 768px) {
  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.375rem;
  }

  h4 {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1.875rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1rem;
  }

  figcaption {
    font-size: 0.875rem;
  }

  blockquote {
    font-size: 1.125rem;
  }
}

/* END OF TYOPGRAPHY */

/******** CONTAINERS ********/
main, footer {
  padding: 0 0rem;
}

main > section {
  padding: 2rem 10rem;
  width: 100%;
}

main {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding-bottom: 50px;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #F7F9FC;
  color: #8D929B;
  height: 10rem;
  padding: 0 10rem;
}

footer>p {
  font-size: 0.75rem;
  margin-bottom: 0;
}

iframe {
  width: 100%;
  height: 100vh;
}

/* Shrink every top-level section's side padding together on mobile */
@media (max-width: 768px) {
  main > section {
    padding: 2rem;
  }

  footer {
    height: auto;
    min-height: 10rem;
    padding: 2rem;
  }
}

/* END OF CONTAINERS */

/******** NAVIGATION *********/
.nav {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 10rem;
}

.nav__logo {
  margin: 10px;
  text-decoration: none;
  font-weight: 700;
  width: 50px;
}

.nav__logo>img {
  width: 100%;
}

/* Navigation links */
.nav__links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  gap: 1rem;
}

.nav__links li {
  margin: 10px;
}

.nav__links li a {
  display: block;
  text-decoration: none;
}

/* Base link style — looks like normal text */
.nav__links a {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding-bottom: 10px;
  transition: color 0.2s ease;
  font-size: 1rem;
}

/* Coral underline effect */
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background-color: #FF6B6B;
  transition: width 0.3s ease;
}

.nav__links a:hover::after,
.nav__links a:focus::after {
  width: 100%;
}

/* Optional: keep underline on active link */
.nav__links a.active::after {
  width: 100%;
}


/* Hide menu toggle by default (desktop) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

/* Hamburger styling */
.menu-toggle__bar1,
.menu-toggle__bar2,
.menu-toggle__bar3 {
  width: 21px;
  height: 3px;
  background-color: #000;
  margin: 4px 0;
  transition: 0.3s;
}

/* Animation for toggle */
.menu-toggle--open .menu-toggle__bar1 {
  transform: translate(0, 7px) rotate(-45deg);
}

.menu-toggle--open .menu-toggle__bar2 {
  opacity: 0;
}

.menu-toggle--open .menu-toggle__bar3 {
  transform: translate(0, -7px) rotate(45deg);
}

/* Responsive styles */
@media screen and (max-width: 750px) {
  .nav {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0 2rem;
  }

  .menu-toggle {
    display: block;
  }

  .nav__links {
    display: none;
    width: 100%;
    flex-direction: column;
  }

  .nav__links--open {
    display: flex;
  }

  .nav__links li {
    width: 100%;
    margin: 0;
  }

  .nav__links li a {
    padding: 1rem;
    text-align: left;
  }
}

/* END OF NAVIGATION */

/* IFRAME */
@media (max-width: 600px) {
  iframe {
    height: 400px;
  }
}

/******** BUTTON **********/

/* Explore button on home page */

.main-button {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 700;
  color: #FF6B6B;
  background-color: #FFFFFF;
  border: 3px solid #FF6B6B;
  padding: 10px 25px;
  margin-top: 30px;
  border-radius: 10px;
  cursor: pointer;
}

.main-button:hover {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

/* Back to Top Button */
.back-to-top {
  display: flex;
  justify-content: center;
  padding: 1rem 10rem;
}

@media (max-width: 768px) {
  .back-to-top {
    padding: 1rem 2rem;
  }
}

#backToTop {
  background: none;
  border: none;
  color: var(--color-blue);
  padding: 10px 15px;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1rem;
  transition: opacity 0.3s ease, filter 0.2s ease;
}

#backToTop:hover {
  filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.7));
}

/* END OF BUTTON */

/******************************** INDEX PAGE *****************************/

.section-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 2rem 160px;
}

/* Guide lines marking the trim the hero image & text touch */
.section-hero:not(.about-hero)::before,
.section-hero:not(.about-hero)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #E1E4E8;
}

.section-hero:not(.about-hero)::before {
  left: 160px;
}

.section-hero:not(.about-hero)::after {
  right: 160px;
}

/* More guide lines, touching the inner edges of the image & text */
.section-hero:not(.about-hero) .hero-image::after,
.section-hero:not(.about-hero) .hero-text::before {
  content: '';
  position: absolute;
  top: -1000px;
  bottom: -1000px;
  width: 1px;
  background: #E1E4E8;
}

.section-hero:not(.about-hero) .hero-image::after {
  right: 0;
}

.section-hero:not(.about-hero) .hero-text::before {
  left: 0;
}

/* Horizontal guide lines above & below the picture and each line of text */
.section-hero:not(.about-hero) .hero-image,
.section-hero:not(.about-hero) .hero-text h1,
.section-hero:not(.about-hero) .hero-text h2 {
  position: relative;
}

.section-hero:not(.about-hero) .hero-image::before,
.section-hero:not(.about-hero) .hero-text h1::before,
.section-hero:not(.about-hero) .hero-text h2::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1000px;
  right: -1000px;
  background-image:
    linear-gradient(#E1E4E8, #E1E4E8),
    linear-gradient(#E1E4E8, #E1E4E8);
  background-size: 100% 1px, 100% 1px;
  background-position: top, bottom;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}

.section-hero.about-hero {
  background-image: none;
  background-color: #F7F9FC;
}

.hero-text {
  position: relative;
}

.hero-text h2 {
  font-family: var(--font-primary);
  font-weight: 400;
}

.hero-text .main-button {
  margin-top: 0;
}

.role-cycle {
  display: inline-block;
  color: var(--color-blue);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.2s ease;
}

.role-cycle--fade {
  opacity: 0;
  transform: translateY(-6px);
}

.role-cycle:hover {
  filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.7));
}

.hero-image {
  position: relative;
  width: 70%;
  max-width: 560px;
}

.hero-image>img,
.hero-image>canvas {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.hero-image:hover>img,
.hero-image:hover>canvas {
  filter: drop-shadow(0 0 14px rgba(255, 107, 107, 0.7));
}

.hero-image>canvas {
  position: absolute;
  top: 0;
  left: 0;
}

/* Static photo, not the interactive hero GIF */
.hero-image--static>img {
  cursor: default;
  border-radius: 1.5rem;
}

.hero-image--static:hover>img {
  filter: none;
}

@media (max-width: 768px) {
  .section-hero {
    flex-direction: column;
    padding: 2rem;
  }

  .section-hero:not(.about-hero)::before {
    left: 2rem;
  }

  .section-hero:not(.about-hero)::after {
    right: 2rem;
  }

  .hero-image {
    width: 100%;
    max-height: 40vh;
  }

  .hero-image>img,
  .hero-image>canvas {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 40vh;
    margin: 0 auto;
    object-fit: contain;
  }

  .hero-image--static>img {
    margin: 0;
  }
}

.section-projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  row-gap: 2rem;
}

.section-projects > h2 {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .section-projects {
    grid-template-columns: 1fr;
  }
}

.project-card {
  display: block;
  width: 100%;
  background: #ffffff;
  border: 1px solid #E1E4E8;
  border-radius: 1.25rem;
  padding: 2rem;
  color: inherit;
  text-decoration: none;
}

.project-card>img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
}

.project-card .card-content h4 {
  margin-bottom: 0.5rem;
}

.project-card .card-content h3 {
  line-height: 1.25;
  margin-bottom: 1rem;
}

.project-card .card-content p {
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.project-card .main-button {
  margin-top: 0;
}

@media (max-width: 768px) {
  .project-card {
    padding: 1.5rem;
  }
}



/******************************** END OF PAGE *****************************/

/******************************** ABOUT PAGE *****************************/

/* Scrolling strip of company logos */
.logo-marquee {
  padding: 2.5rem 0;
  background: #F7F9FC;
  overflow: hidden;
  cursor: pointer;
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 5rem;
  animation: logo-scroll 25s linear infinite;
}

.logo-marquee__logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.logo-marquee__logo:hover {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.7));
}

@keyframes logo-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .logo-marquee__track {
    gap: 3rem;
  }

  .logo-marquee__logo {
    height: 28px;
  }
}

.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.widget {
  background: #ffffff;
  border: 1px solid #E1E4E8;
  border-radius: 1.25rem;
  padding: 2rem;
}

.widget-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-blue);
  margin-bottom: 0.75rem;
}

.widget h3 {
  margin-bottom: 0.75rem;
}

.widget p {
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.widget p:last-child {
  margin-bottom: 0;
}

/****************************** PROJECT PAGES ****************************/

/* Keep the dividers aligned with the padded sections around them */
main > hr {
  width: auto;
  margin: 2rem 10rem;
}

/* Full-bleed split-composition case study hero */
.case-study-hero {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  min-height: 640px;
  padding: 0;
  overflow: hidden;
  background-color: #F7F9FC;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

.case-study-hero__text {
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3rem 4rem 10rem;
}

.case-study-hero__text h1 {
  color: var(--color-blue);
  margin-bottom: 0.5rem;
}

.case-study-hero__text h2 {
  font-family: var(--font-primary);
  font-weight: 400;
  margin-bottom: 0;
}

.case-study-hero__showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 10rem 3rem 3rem;
}

/* Unwrapped image, no device frame */
.case-study-hero__showcase > img {
  max-width: 100%;
  max-height: 100%;
}

.device-frame img {
  display: block;
  width: 100%;
}

/* Plain: for non-software case studies (print, events) */
.device-frame--plain {
  width: min(100%, 460px);
}

.device-frame--plain img {
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

/* Desktop: browser window chrome */
.device-frame--desktop {
  position: relative;
  width: min(100%, 640px);
  background: #2b2b2b;
  border-radius: 14px;
  padding: 34px 10px 10px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

.device-frame--desktop::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6b6b6b;
  box-shadow: 18px 0 0 #6b6b6b, 36px 0 0 #6b6b6b;
}

.device-frame--desktop img {
  border-radius: 6px;
}

/* Phone: rounded bezel */
.device-frame--phone {
  width: min(70%, 260px);
  background: #2b2b2b;
  border-radius: 36px;
  padding: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

.device-frame--phone img {
  border-radius: 22px;
}

@media (max-width: 900px) {
  .case-study-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .case-study-hero__text {
    padding: 3rem 2rem;
  }

  .case-study-hero__showcase {
    padding: 2.5rem;
  }
}

@media (max-width: 480px) {
  .case-study-hero__text {
    padding: 2.5rem 1.5rem;
  }

  .case-study-hero__showcase {
    padding: 2rem;
  }
}

.project-content>section {
  margin: 3rem 0;
}

/* Placeholder for a not-yet-available image or asset */
.placeholder-box {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: 1.5rem auto;
  padding: 1.5rem;
  background: #F7F9FC;
  border: 2px dashed #C7CCD4;
  border-radius: 0.75rem;
  text-align: center;
}

.placeholder-box p {
  color: var(--color-caption);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.placeholder-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.placeholder-row .placeholder-box {
  flex: 1 1 240px;
  margin: 0;
}

/* Layout the 4 boxes in a grid, as a card floating above the hero */
.project-overview {
  width: auto;
  margin: -3rem 10rem 3rem;
  position: relative;
  z-index: 2;
  background: #ffffff;
  border: 1px solid #E1E4E8;
  border-radius: 1.25rem;
  padding: 1.25rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1.5rem;
  row-gap: 1rem;
}

.project-details>p {
  margin-bottom: 0;
}

.project-details__label {
  font-weight: 700;
  margin-bottom: 0.25rem;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--color-accent);
  width: 100%;
}


/* Layout container for content + sticky nav */
.project-body {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 4rem;
  padding: 0 10rem;
}


/* Main content spans 3/4 */
.project-content {
  max-width: 1200px;
}

.project-content > .overview {
  margin: 0;
}

/* Spacing the sections a little better */
.project-content>h3 {
  margin-top: 35px;
}

/* Sticky secondary nav */
.project-nav {
  position: sticky;
  top: 2rem;
  align-self: start;
  background: #F7F9FC;
  padding: 1rem;
  border-left: 2px solid #eee;
  border-radius: 0.5rem;
  color: black;
}

.project-nav a.active {
  color: #E76F51;
  border-left-color: #E76F51;
}

/* Vertical nav styling */
.project-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-nav li {
  margin-bottom: 1rem;
}

.project-nav a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  border-left: 3px solid transparent;
  padding-left: 0.5rem;
  transition: border-color 0.2s, color 0.2s;
}

.project-nav a:hover,
.project-nav a:focus {
  color: #E76F51;
  /* coral-like highlight */
  border-left-color: #E76F51;
}

.three-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.three-blocks > div {
  width: 100%;
  background-color: #eee;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  padding: 1rem;
}

.three-blocks > div > p {
  margin: 0;
}

/* Responsive grid for the project details */
@media (min-width: 600px) {
  .project-overview {
    grid-template-columns: 1fr 1fr;
    /* 2 columns for midsize screens */
  }
  .three-blocks {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .project-overview {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* 4 columns for large screens */
  }
}

@media (max-width: 900px) {
  .project-body {
    grid-template-columns: 1fr;
    /* 1 column */
  }

  .project-nav {
    display: none;
  }
}

@media (max-width: 768px) {
  .project-body {
    padding: 0 2rem;
  }

  main > hr {
    margin: 2rem;
  }

  .project-overview {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}


/***** END OF PROJECT PAGES *******/

/*********** HAND WAVE ANIMATION ***********/
.hand-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.hand-wave:hover {
  filter: drop-shadow(0 0 10px rgba(255, 107, 107, 0.7));
}

.hand-wave.waving {
  animation: wave-animation 3s ease-in-out;
  transform-origin: 70% 70%;
}

/* Define the waving keyframes */
@keyframes wave-animation {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(14deg);
  }

  20% {
    transform: rotate(-8deg);
  }

  30% {
    transform: rotate(14deg);
  }

  40% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/*********** END OF HAND WAVE ANIMATION ***********/

/*********** GRADIENT TEXT ***********/
.gradient-text {
  background: linear-gradient(94deg,
      #0090F7 20%,
      #BA62FC 30%,
      #F2416B 70%,
      #F55600 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* text-fill-color: transparent; */
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}

@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

/*********** END OF GRADIENT TEXT ***********/