*::before,
   *::after { box-sizing: border-box; }
   
   html, body {
     margin: 0 20px;
     padding: 0;
     font-family: 'Gordita-Regular', serif;
     font-size: 0.90rem;
     line-height: 20px;
     background-color: #EEEEEE;
     color: #000000;
     scroll-behavior: smooth;
     -ms-overflow-style: none;
     scrollbar-width: none;
   }

   body::-webkit-scrollbar { display: none; }
   
   /* =====================================================
      NAVIGATION (Shared Across All Pages)
      ===================================================== */
   header {
     background: #EEEEEE;
     padding: 25px 0;
     position: sticky;
     top: 0;
     z-index: 10;
   }
   
   .nav {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
   }
   
   .logo {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    font-family: 'Signifier-Regular', serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -1px;
    color: #000;
    text-decoration: none;
    overflow: hidden;
  }
  
  /* hide “We Are” by default */
  .logo .weare {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    opacity: 0;
    transition:
      width 0.6s cubic-bezier(.22,.61,.36,1),
      opacity 0.4s ease;
  }
   
   .menu { display: flex; gap: 2rem; }
   .menu a {
     text-decoration: none;
     color: #000;
     font-weight: 500;
     transition: opacity 0.2s ease;
   }
   .menu a:hover { opacity: 0.6; }
   
   /* =====================================================
      HOMEPAGE
      ===================================================== */
   h1 {
     font-family: 'Gordita-Regular', serif;
     font-size: 1.40rem;
     font-weight: 400;
     line-height: 2.15rem;
     text-align: left;
     margin-top: 110px;
     margin-bottom: 125px;
   }

   .br {
    margin-top: 10px;
   }
   
   main.homepage {
     display: grid;
     grid-template-columns: 1fr;
     margin: 0;
     scroll-snap-type: y mandatory;
     overscroll-behavior-y: none;
   }
   
   /* Project card: image + caption (caption not linked) */
   .project {
     position: relative;
     display: flex;
     flex-direction: column;
     width: 100%;
     height: auto;
     margin-bottom: 20px;
     scroll-snap-align: start;
     scroll-snap-stop: always;
   }
   
   .project a {
     display: block;
     overflow: hidden;
     position: relative;
     isolation: isolate;           /* prevents hover scale from affecting layout */
   }
   
   .project img {
     width: 100%;
     object-fit: cover;
     display: block;
     background-color: #ccc;
     transition: transform 0.5s ease;
     transform-origin: center center; /* no “jump” on hover */
     will-change: transform;
   }
   .project a:hover img { transform: scale(1.03); }
   
   /* Caption below image */
   .caption {
     margin-top: 10px;
     font-family: 'Gordita-Regular', serif;
     font-size: 1rem;
     font-weight: 400;
     color: rgba(0,0,0,.9);
     letter-spacing: 0.25px;
     text-align: left;
     pointer-events: none;
     opacity: 0.75;
   }
   .caption span { display: inline-block; }
   
   /* =====================================================
      PROJECT PAGE
      ===================================================== */
   main.project-page { margin: 0; }
   
   .project-hero {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     align-items: start;
     gap: 2rem;
     padding: 50px 0 25px 0;
   }
   
   .intro h1 {
     margin: 0 0 10px 0;
     font-family: 'Gordita-Medium', serif;
     font-size: 1rem;
     line-height: 1.1;
   }
   
   .description { margin: 0; max-width: 50ch; }

   .second-description { max-width: 50ch; }
   
   .meta dl {
     margin: 0;
     display: flex;
     flex-direction: column;
     row-gap: 2px;
     padding-top: 26.5px;
   }
   
   /* Gallery (desktop one column) */
   .project-gallery {
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;
     padding: 16px 0 40px 0;
   }
   
   .gallery-item {
     position: relative;
     width: 100%;
     overflow: hidden;
     margin: 0;
   }
   
   .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     background-color: #ccc;
     transition: transform 0.5s ease;
     transform-origin: center center;
     will-change: transform;
   }
   .gallery-item:hover img { transform: scale(1.02); }

      /* ===== Sticky footer clocks ===== */
.site-footer {
  position: sticky;
  bottom: 0px;
  background: #EEEEEE;
  border-top: 1px solid #000;
  padding: 20px 0;
  z-index: 9;
}

.clocks {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.clock {
  font-family: 'Gordita-Regular', serif;
  font-size: .90rem;
  line-height: 1;
  color: #000;
}

.clock.left   { text-align: left; }
.clock.center { text-align: center; }
.clock.right  { text-align: right; }

.clock .city { margin-right: 0px; }
.clock .time { font-variant-numeric: tabular-nums; }
   
   /* =====================================================
      ABOUT PAGE
      ===================================================== */
   main.about-page { margin: 0; }
   
   .about-section { padding: 110px 0 0; }
   .about-section + .about-section { padding-top: 50px; padding-bottom: 110px; }
   
   .about-title,
   .about-subtitle {
     margin: 0 0 14px 0;
     font-family: 'Gordita-Medium', serif;
     font-size: 1rem;
     line-height: 1.1;
   }
   .about-description { margin: 0; max-width: 635px; font-size: 1.40rem; line-height: 2.15rem; }
   
   /* Partners */
   .partners-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 2rem;
     align-items: start;
     padding-top: 8px;
   }
   .partner-card {
     display: grid;
     grid-template-rows: auto auto 1fr;
     gap: 0.75rem;
   }
   .partner-media {
     aspect-ratio: 5 / 5;
     overflow: hidden;
     background: #d9d9d9;
     margin: 0;
   }
   .partner-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   .partner-header { line-height: 1.35; padding: 15px 0; position: relative; }
   .partner-name {
     margin: 0 0 2px 0;
     font-family: 'Gordita-Medium', serif;
     font-size: 1rem;
   }
   .partner-title, .partner-location { margin: 0; font-size: 0.9rem; opacity: 0.85; }
   .partner-bio { margin: 0; max-width: 70ch; }
   
   /* Clients */
   .clients { padding-bottom: 48px; }
   .client-list {
     list-style: none;
     padding: 0;
     margin: 8px 0 0 0;
     display: flex;
     flex-direction: column;
     gap: 0.5rem 2rem;
   }
   .client-list li { break-inside: avoid; line-height: 1.5; }

   .contact { margin-top: 50px; }

   .link a {
    text-decoration: none;
    color: #000;
   }
   
   /* =====================================================
      RESPONSIVE DESIGN
      ===================================================== */
   
   /* ---------- Tablet (≤1080px)
      - Keep text one column
      - Make images two columns (homepage projects + project gallery)
      ----------------------------------------------------- */
   /* ---------- Tablet (≤1080px)
   - Keep text one column
   - Make images two columns (homepage projects + project gallery)
   ----------------------------------------------------- */
@media (max-width: 1080px) {
  html, body { margin: 0 20px; }
  header { padding: 25px 0; }
  .logo { font-size: 2rem; letter-spacing: -1px; }
  .menu { gap: 1.5rem; }

  /* HOMEPAGE: two-column images only */
  #content {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 40px;
  }
  #content > h1 {
    grid-column: 1 / -1;
    margin-bottom: 75px;
  }
  .project { margin: 0; height: auto; }
  .caption { font-size: 1rem; margin-top: 8px; }

  /* PROJECT PAGE: gallery becomes two columns, text stacks */
  .project-hero { grid-template-columns: 1fr; gap: 1rem; padding-top: 18px; }
  .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .gallery-item { height: auto; }
  .gallery-item img { object-fit: cover; }

  /* ABOUT: two columns for partners & clients lists */
  .partners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .client-list { gap: 0.5rem 1.5rem; }
  .about-description, .partner-bio { padding-bottom: 30px; }
}

/* ---------- Mobile (≤455px)
   - Back to one column everywhere
   ----------------------------------------------------- */
@media (max-width: 455px) {
  html, body { margin: 0 10px; }
  header { padding: 30px 0; }
  .logo { font-size: 2rem; letter-spacing: -1px; }
  .menu { gap: 1rem; }
  .menu a { font-size: 0.9rem; }

  /* HOMEPAGE: single column */
  #content { display: block; }
  h1 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    width: 315px;
    margin-top: 75px;
    margin-bottom: 150px;
  }
  .project { height: auto; margin-bottom: 10px; }
  .project img { height: 30vh; }
  .caption { padding-top: 0; font-size: .85rem; }
  .clock { font-size: 0.75rem; }

  /* PROJECT PAGE: stack hero, single-column gallery */
  .project-hero { display: block; padding-top: 75px; }
  .project-gallery { grid-template-columns: 1fr; gap: 14px; }
  .meta dl { padding-top: 20px; }

  /* ABOUT: single column */
  .about-section { padding-top: 75px; }
  .partners-grid { grid-template-columns: 1fr; gap: 1rem; }
  .client-list { grid-template-columns: 1fr; gap: 0.4rem 1rem; }
  .partner-name { font-size: 0.95rem; }
  .partner-title, .partner-location { font-size: 0.85rem; }
  .about-description { padding-bottom: 30px; font-size: 1.25rem; line-height: 1.75rem; max-width: 90%; }
  .partner-bio { padding-bottom: 30px; }
}

@media (hover: hover) and (min-width: 1081px) {
  .logo:hover .weare {
    width: 5.3ch;
    opacity: 1;
  }
}