/* ── Page transitions ── Built by Concreate */
body { transition: opacity .4s ease; }
html.nd-leaving body { opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .3s ease; }

/* base bg behind the fade — brown on themed pages, light elsewhere */
html { background-color: #FFFDF7; }
html:has(.page-about) { background-color: #32281F; }

/* ── Text selection: soft brand-brown wash (site-wide) ── Built by Concreate (conc.in) */
::selection { background-color: rgba(50, 40, 31, 0.24); }
::-moz-selection { background-color: rgba(50, 40, 31, 0.24); }

/* ── Home "intent" image: disable the Webflow scroll parallax so the crop never shifts
   (static centered cover, matching the Contact image). The !important overrides the
   inline transform the IX2 interaction writes on scroll. ── Built by Concreate (conc.in) */
.intent-img { transform: none !important; }
/* Contact reverted to native cream per client — page-contact removed from brown base. Built by Concreate */

@media (min-width: 1025px) {
  .swiper-slide {
    width: calc(33.333% - 16px) !important; /* 16px = spaceBetween * 2/3 */
    min-width: unset;
    display: flex;
    /* 
  justify-content: space-between; */
    gap: 2rem;
  }
}
/* .#track {
    width: 100%;
    padding-right: 10rem;
    flex-flow: column;
    align-items: stretch;
    gap: 1rem;
    pointer-events: none;
    cursor: none;
  } */

[data-slide] {
  display: none;
}
[data-slide].active {
  display: block;
}

#trackWrapper {
  transition: transform 0.25s ease;
  transform: scale(1);
}

#track {
  will-change: transform;
}

/* .horizontal-scroll_track-list {
  position: relative !important;
  display: flex !important;
  height: 100% !important;
  margin-right: -100vw !important;
  flex-flow: row !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
}

@media screen and (max-width: 767px) {
  .horizontal-scroll_track-list {
    width: 100% !important;
    margin-right: 0vw !important;
    flex-direction: column !important;
  }
} */
/* .collection-list {
  overflow: hidden;
  height: 100%;
} */
/* .card-ratio-1 {
  width: 20vw;
  height: 15vw;
  aspect-ratio: 4 / 3;
}
.card-ratio-2 {
  width: 20vw;
  height: 20vw;
  aspect-ratio: 1 / 1;
}
.card-ratio-3 {
  width: 20vw;
  height: 11.25vw;
  aspect-ratio: 16 / 9;
} */
/* .card-wrapper {
  opacity: 0;
} */
.hamburger-lottie svg path {
  fill: #32281f !important;
}

/* ── Corner bracket hover effect ── */

/* Override display:none and set up animation base state */
.right-corner,
.left-corner,
.left-bottom,
.right-bottom {
  display: block !important;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Top-right: inset 8px from top-right corner */
.right-corner {
  inset: 8px 8px auto auto !important;
  transform: translate(3px, -3px);
  border-color: currentColor !important;
}

/* Top-left: inset 8px from top-left corner */
.left-corner {
  inset: 8px auto auto 8px !important;
  transform: translate(-3px, -3px);
  border-color: currentColor !important;
}

/* Bottom-left: inset 8px from bottom-left corner */
.left-bottom {
  inset: auto auto 8px 8px !important;
  transform: translate(-3px, 3px);
  border-color: currentColor !important;
}

/* Bottom-right: inset 8px from bottom-right corner */
.right-bottom {
  inset: auto 8px 8px auto !important;
  transform: translate(3px, 3px);
  border-color: currentColor !important;
}

/* On hover: animate corners in */
.link-wrapper:hover .right-corner,
.link-wrapper:hover .left-corner,
.link-wrapper:hover .left-bottom,
.link-wrapper:hover .right-bottom {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Filter icon hover & active animation ── */

/* Reduce icon size: 32→26px */
.filter-svg,
.filter-wrapper {
  width: 26px !important;
  height: 26px !important;
}

/* Base: set transform context for SVG paths
   transform-box: fill-box required for translateX to work on SVG paths */
.filter-svg svg path {
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Closed state + hover: lines slide right (staggered) ─── */
.filter-wrapper.is-hovered:not(.is-open) .filter-svg svg path:nth-child(2) {
  transform: translateX(8px); /* 8 SVG units right */
  transition-delay: 0.04s;
}
.filter-wrapper.is-hovered:not(.is-open) .filter-svg svg path:nth-child(3) {
  transform: translateX(14px); /* 14 SVG units right */
  transition-delay: 0.08s;
}

/* ─── Open state: lines stay right-aligned ─── */
.filter-wrapper.is-open .filter-svg svg path:nth-child(2) {
  transform: translateX(8px);
  transition-delay: 0s;
}
.filter-wrapper.is-open .filter-svg svg path:nth-child(3) {
  transform: translateX(14px);
  transition-delay: 0s;
}

/* ─── Open + hovered: lines slide back to left (reverse stagger) ─── */
.filter-wrapper.is-open.is-hovered .filter-svg svg path:nth-child(2) {
  transform: translateX(0px);
  transition-delay: 0.04s;
}
.filter-wrapper.is-open.is-hovered .filter-svg svg path:nth-child(3) {
  transform: translateX(0px);
  transition-delay: 0s;
}

/* ── Mobile: category tabs horizontal scroll ── */
@media screen and (max-width: 767px) {
  /* Make fn-tab-menu a scroll container with fade masks */
  .fn-tab-menu {
    flex: 1 0 auto;
    overflow: hidden;
    position: relative;
    /* Fade edges to hint scrollability */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 0%,
      black 100%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 0%,
      black 100%,
      transparent 100%
    );
  }

  /* Single-line horizontal scroll strip */
  .tab-menu-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Hide scrollbar */
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
  }

  /* Hide scrollbar in WebKit */
  .tab-menu-wrapper::-webkit-scrollbar {
    display: none;
  }
}

/* ── Mobile/Tablet nav open state colors ── */
@media screen and (max-width: 991px) {
  /* Nav menu panel: dark brown background */
  .nav-menu {
    background-color: var(--primary-brand-colors--primary-100) !important;
  }

  /* When nav is open: navbar bar (behind logo + hamburger) turns dark brown */
  .navbar:has(.hamburger-menu.w--open) {
    background-color: var(--primary-brand-colors--primary-100) !important;
  }

  /* When nav is open: logo turns cream */
  .navbar:has(.hamburger-menu.w--open) .brand,
  .navbar:has(.hamburger-menu.w--open) .brand.w--current {
    color: var(--primary-brand-colors--primary-400);
  }

  /* When nav is open: nav links turn cream */
  .navbar:has(.hamburger-menu.w--open) .nav-links {
    color: var(--primary-brand-colors--primary-400);
  }

  /* Lottie (hamburger/close icon) — cream stroke when open */
  .navbar:has(.hamburger-menu.w--open) .hamburger-lottie svg path {
    stroke: var(--primary-brand-colors--primary-400) !important;
  }

  /* Lottie (close icon, second lottie div) — cream stroke when open */
  .navbar:has(.hamburger-menu.w--open) .hamburger-lottie.none svg path {
    stroke: var(--primary-brand-colors--primary-400) !important;
  }
}

/* Active nav link: dot + bold ── Built by Concreate */
.nav-links.w--current {
  font-weight: 600;
}
.nav-links.w--current::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* About page, desktop only: nav links left, hide logo ── Built by Concreate */
@media screen and (min-width: 992px) {
  .page-about .nav-container { justify-content: center; }
  .page-about .brand { display: none; }
}

/* hide the active-page dot on mobile */
@media (max-width: 767px) {
  .nav-links.w--current::before { display: none; }
}



/* ═══════════════════════════════════════════════
   Contact page — brown theme (switchable)
   Switch: add / remove the "page-contact" class on
   the Contact page Body. Remove it to revert to light.
   Built by Concreate
   ═══════════════════════════════════════════════ */

/* Contact brown theme DISABLED per client — reverting to native cream.
   Kept for reference. To re-enable: delete the "@supports not (display: block)"
   guard line below and its matching closing brace at the end of this block.
   A never-true @supports guard is used because CSS block comments cannot nest.
   Built by Concreate */
@supports not (display: block) {

/* Contact mobile: hamburger Lottie → cream */
@media (max-width: 767px) {
  .page-contact .hamburger-lottie svg path { stroke: #EFE8D8 !important; fill: #EFE8D8 !important; }
}

/* page + navbar */
body.page-contact { background-color: #32281F; }
.page-contact .navbar { background-color: #32281F !important; }
.page-contact .nav-links,
.page-contact .nav-links.w--current { color: #EFE8D8 !important; }
.page-contact .brand svg path { fill: #EFE8D8 !important; }      /* logo invert */

/* sections */
.page-contact .contact-page { background-color: #32281F; }
.page-contact [class*="section-contact"] { background-color: #32281F !important; }

/* text → cream */
.page-contact .contact-page :is(h1,h2,h3,h4,h5,h6,p,a,label,span,li) { color: #EFE8D8 !important; }
.page-contact .contact-title,
.page-contact .contact-title-txt { color: #EFE8D8 !important; }   /* heading + [ CALL ] [ EMAIL ] [ SOCIALS ] */

/* form fields — transparent, underline only */
.page-contact input,
.page-contact textarea,
.page-contact select {
  background-color: transparent !important;
  color: #EFE8D8 !important;
  border-color: rgba(239,232,216,.3) !important;
}
.page-contact ::placeholder { color: rgba(239,232,216,.5) !important; }

/* Submit — About-page accent + hover */
.page-contact input.submit-cta,
.page-contact .submit-cta {
  background-color: #B8C188 !important;
  color: #0C0C0C !important;
  border-color: #B8C188 !important;
  transition: background-color .3s ease, color .3s ease, transform .3s ease !important;
}
.page-contact input.submit-cta:hover,
.page-contact .submit-cta:hover {
  background-color: #CED3AA !important;
  border-color: #CED3AA !important;
}

/* map soft falloff gradient → brown */
.page-contact .snazzy-map_gradient {
  background-image: linear-gradient(#32281F 20%, rgba(50,40,31,0)) !important;
}

/* "Get Directions" pill — pops on the brown map */
.page-contact .wf-map-cta { background: #EFE8D8 !important; color: #32281F !important; }
.page-contact .wf-map-cta:hover { background: #32281F !important; color: #EFE8D8 !important; }

} /* end @supports guard — Contact brown theme disabled, reverted to cream. Built by Concreate */

/* ── Lightbox controls: small custom arrows, hover nudge, close spin ── Built by Concreate (conc.in) */
.w-lightbox-backdrop .w-lightbox-control{
  transition: background-position .25s ease, transform .3s ease, opacity .2s ease;
  outline: none;
}
/* kill the focus ring that lands on the X when arrow-keying */
.w-lightbox-backdrop .w-lightbox-control:focus,
.w-lightbox-backdrop .w-lightbox-control:focus-visible{ outline: none; box-shadow: none; }

/* small, thin chevrons */
.w-lightbox-backdrop .w-lightbox-left,
.w-lightbox-backdrop .w-lightbox-right{ width: 84px; background-size: 15px; }
.w-lightbox-backdrop .w-lightbox-left{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 5 8 12 15 19'/%3E%3C/svg%3E");
}
.w-lightbox-backdrop .w-lightbox-right{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E");
}
/* hover nudge */
.w-lightbox-backdrop .w-lightbox-left:hover{ background-position: calc(50% - 4px) 50%; }
.w-lightbox-backdrop .w-lightbox-right:hover{ background-position: calc(50% + 4px) 50%; }

/* close (X): small, spins on hover */
.w-lightbox-backdrop .w-lightbox-close{
  background-size: 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
}
.w-lightbox-backdrop .w-lightbox-close:hover{ transform: rotate(90deg); }

/* ── Gallery thumbs: hover scale + dark dim to signal clickable ── Built by Concreate (conc.in) */
.section-gallery .gallery-ratio-wrapper { overflow: hidden; cursor: pointer; }

.section-gallery .lightbox:hover img { transform: scale(1.05); filter: brightness(0.7); }

/* ── Process/Explorations: top-anchored content + soft sharp arrows ── Built by Concreate (conc.in) */

/* pin content to the top (under "Process") + anchor the height tween from the top */
.explorations-wrapper { justify-content: flex-start; gap: 32px; }
.explorations-content-wrapper { justify-content: flex-start; }

/* arrows: soft filled SQUARES (no circle, no border) */
.previous-link, .next-link {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background-color: #F5F1EA;
  border: none;
  border-radius: 0;
  transition: background-color .25s ease;
}
.previous-link .code-embed-2, .next-link .code-embed-2 {
  width: 9px; height: 16px; display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease;
}
.previous-link svg, .next-link svg { width: 9px; height: 16px; }
.previous-link svg path, .next-link svg path { stroke: #141413; transition: stroke .25s ease; }
.previous-link:hover, .next-link:hover { background-color: #141413; }
.previous-link:hover svg path, .next-link:hover svg path { stroke: #fff; }
.previous-link:hover .code-embed-2 { transform: translateX(-3px); }
.next-link:hover  .code-embed-2 { transform: translateX(3px); }

/* ── Contact submit: 4 corner brackets on hover/focus ── Built by Concreate (conc.in) */
.submit-cta {
  position: relative;
  --cc: #0C0C0C;  /* bracket color */
  --arm: 6px;    /* arm length */
  --thk: 2px;     /* thickness */
  --in: 7px;      /* inset from edges */
  background-image:
    linear-gradient(var(--cc),var(--cc)), linear-gradient(var(--cc),var(--cc)),
    linear-gradient(var(--cc),var(--cc)), linear-gradient(var(--cc),var(--cc)),
    linear-gradient(var(--cc),var(--cc)), linear-gradient(var(--cc),var(--cc)),
    linear-gradient(var(--cc),var(--cc)), linear-gradient(var(--cc),var(--cc));
  background-repeat: no-repeat;
  background-position:
    left var(--in) top var(--in),    left var(--in) top var(--in),
    right var(--in) top var(--in),   right var(--in) top var(--in),
    left var(--in) bottom var(--in), left var(--in) bottom var(--in),
    right var(--in) bottom var(--in),right var(--in) bottom var(--in);
  background-size: 0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0;
  transition: background-size .25s ease;
}
.submit-cta:hover,
.submit-cta:focus-visible {
  background-size:
    var(--arm) var(--thk), var(--thk) var(--arm),
    var(--arm) var(--thk), var(--thk) var(--arm),
    var(--arm) var(--thk), var(--thk) var(--arm),
    var(--arm) var(--thk), var(--thk) var(--arm);
  outline: none;
}

/* ── Featured banner: truncate long publication names (desktop) ── Built by Concreate (conc.in) */
.featured-txt-wrapper .featured-txt:last-child{ max-width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* ── Featured banner: mobile = hide Explore, whole card is the link ── */
@media (max-width:767px){
  .wd-banner-container .link-wrapper{ display:none; }
  .wd-banner-container{ cursor:pointer; }
  .wd-banner-details{ width:100%; min-width:0; }
  .featured-details,.featured-txt-wrapper{ min-width:0; }
  .featured-txt-wrapper .featured-txt:last-child{ max-width:calc(100vw - 190px); }
}

/* ── Work about: mobile read-more (inline + smooth grid expand) ── Built by Concreate (conc.in) */
.wd-readmore,.wd-readless{ display:none; cursor:pointer; color:#32281F; font-weight:500; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.wd-more-wrap{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1); }
.wd-more-inner{ overflow:hidden; min-height:0; }
@media (max-width:767px){ .wd-more-wrap.is-collapsed{ grid-template-rows:0fr; } }

/* ── Gallery: force visible on touch devices (Lenis swallows the scroll-into-view reveal) ── Built by Concreate (conc.in) */
@media (max-width:991px){
  .section-gallery, .gallery-grid{ opacity:1 !important; transform:none !important; }
}

/* ── Gallery: fix Safari grid-cell collapse (aspect-ratio-on-grid-item bug) ── Built by Concreate (conc.in) */
.section-gallery .gallery-ratio-wrapper { aspect-ratio: auto !important; }
.section-gallery .gallery-ratio-wrapper > .lightbox { display: block; width: 100%; }
.section-gallery .gallery-ratio-wrapper .lightbox-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* ── [View Project]: cursor-reactive letter tracking handled in global.js ── Built by Concreate (conc.in) */
.view-project-link, .view-article-txt { cursor: pointer; }
.view-project-link .cl-ch, .view-article-txt .cl-ch { display: inline-block; transition: transform .18s cubic-bezier(.22,.61,.36,1); will-change: transform; }

/* ── Publication banner: nudge the article title down a few px to match the design ── Built by Concreate (conc.in) */
.featured-txt { font-size: 16px; }
@media (max-width: 991px) { .featured-txt { font-size: 14px; } }

/* ── Publication banner: let the text block claim the empty gap (less truncation) + trim the button ── Built by Concreate (conc.in) */
.wd-banner-container .wd-banner-details { flex-grow: 1; min-width: 0; }
.wd-banner-container .featured-details { flex-grow: 1; min-width: 0; }
.wd-banner-container .featured-txt-wrapper { flex-grow: 1; min-width: 0; width: 100%; }
.wd-banner-container .featured-txt-wrapper .featured-txt:last-child { flex: 1 1 auto; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-banner-container .link-wrapper { padding-left: 18px; padding-right: 18px; padding-top: 10px; padding-bottom: 10px; }
.wd-banner-container .featured-txt-wrapper { column-gap: 4px; }
.wd-banner-container .link-txt { font-size: 14px; }
/* match the space above the first card to the 24px gap between cards */
.publication-wrapper { margin-top: -24px; }

/* ── Gallery grid: fill the full content width so thumbnails aren't shrunk (CMS display:contents wrappers made it shrink to content) ── Built by Concreate (conc.in) */
.section-gallery .gallery-grid { width: 100%; }

/* ── Process slider arrows: hover should be brand brown, not black ── Built by Concreate (conc.in) */
.previous-link:hover, .next-link:hover { background-color: #32281f !important; }

/* ── Back-to-top: fixed vertical "Top ↑", inverts against whatever's behind it ── Built by Concreate (conc.in) */
#conc-top {
  position: fixed; right: 30px; bottom: 18px; top: auto; transform: translateX(50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: none; border: 0; padding: 8px 6px; cursor: pointer; z-index: 900;
  color: #141413;
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease, color .3s ease;
}
#conc-top.conc-top-show { opacity: .42; visibility: visible; }
#conc-top:hover { opacity: .75; }
#conc-top .conc-top-arrow { display: block; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
#conc-top .conc-top-arrow svg { display: block; stroke: currentColor; }
#conc-top .conc-top-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; letter-spacing: .03em; line-height: 1; color: currentColor; }
#conc-top:hover .conc-top-arrow { transform: translateY(-4px); }
@media (max-width: 767px) { #conc-top { display: none !important; } }   /* back-to-top hidden on mobile */
/* instant (no-fade) hide over the CTA/footer so fast scrolling never shows it overlapping */
#conc-top.conc-top-instant { transition: none !important; }

/* ── Footer credit link: clickable + subtle dim on hover ── Built by Concreate (conc.in) */
.conc-credit-link { cursor: pointer; transition: opacity .25s ease; }
.conc-credit-link:hover { opacity: 0.6; }

/* ── Footer text selection: keep it light on the dark footer instead of turning black ── Built by Concreate (conc.in) */
.section-footer ::selection, .about-page ::selection { color: #FFFDF7; background: rgba(255,253,247,0.22); }
.section-footer ::-moz-selection, .about-page ::-moz-selection { color: #FFFDF7; background: rgba(255,253,247,0.22); }

/* ── Footer WhatsApp: box turns brand brown on hover (icon flips light) ── Built by Concreate (conc.in) */
.whatsapp-wrapper { transition: background-color .3s ease; }
.whatsapp-wrapper:hover { background-color: #32281f; color: #efe8d8; }
.whatsapp-wrapper:hover svg [stroke]:not([stroke="none"]) { stroke: #efe8d8; }
.whatsapp-wrapper:hover svg [fill]:not([fill="none"]) { fill: #efe8d8; }

/* ── Heading word-by-word reveal (paired with global.js) ── Built by Concreate (conc.in) */
.wa-word { display: inline-block; }

/* ── Mobile Featured Narratives categories: icon-left, collapse to selected, tap to expand (scroll + soft falloff) ── Built by Concreate (conc.in) */
@media (max-width: 767px) {
  .fn-tab-menu { display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start !important; gap: 14px; }
  .fn-tab-menu .filter-wrapper { order: -1; display: flex; flex: 0 0 auto; cursor: pointer; }
  .fn-tab-menu .tab-menu-wrapper { display: flex; flex-flow: row nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; min-width: 0; }
  .fn-tab-menu .tab-menu-wrapper::-webkit-scrollbar { display: none; }
  .fn-tab-menu.fn-collapsed .tab-btn:not(.active) { display: none; }       /* collapsed → only the selected category */
  .fn-tab-menu.fn-expanded.fn-overflow .tab-menu-wrapper { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }  /* soft right falloff — only when the row actually overflows the screen width */
}

/* ── Mobile home: navbar docks past the hero with a cream band (reveal-on-scroll-up) ── Built by Concreate (conc.in) */
@media (max-width: 767px) {
  /* background + shadow are scrubbed inline by global.js (tied to scroll); only the reveal/hide slide is transitioned */
  .section-hero .navbar { transition: transform .4s ease; }
}

/* ── Mobile home: COMPOSITOR-driven logo dock (scroll-timeline) — runs on the GPU/compositor, perfectly synced to scroll → zero jitter. JS falls back to a rAF scrub where this isn't supported. ── Built by Concreate (conc.in) */
@keyframes ndDock {
  0%     { transform: translate(var(--nd-cx, 0px), var(--nd-y0, 0px)) scale(1); }
  44.87% { transform: translate(var(--nd-cx, 0px), var(--nd-ys, 0px)) scale(1); }   /* 0.35/0.78 → the logo has just reached the bar, still full size */
  100%   { transform: translate(var(--nd-nx, 16px), var(--nd-nt, 14px)) scale(var(--nd-ns, 0.3)); }
}
@media (max-width: 767px) {
  #nd-sh-logo.nd-css-dock {
    animation: ndDock linear both;
    animation-timeline: scroll(root);
    animation-range: 0 var(--nd-rend, 100vh);
    will-change: transform;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
  }
}

/* ── Mobile hero hamburger whitening is handled in global.js (inline, cache-proof) ── Built by Concreate (conc.in) */
/* ── Mobile hero: centre the place/time under the wordmark ── Built by Concreate (conc.in) */
@media (max-width: 767px) {
  #nd-hero-clock { left: 0 !important; right: 0 !important; justify-content: center !important; text-align: center !important; }
}
/* ── Mobile: trim the photography strip's black band ── Built by Concreate (conc.in) */
@media (max-width: 767px) {
  #heros-strip, #nd-strip { padding-top: 22px !important; padding-bottom: 22px !important; }
}

/* ── Page-transition Lottie loader ── Built by Concreate (conc.in) */
#nd-loader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
#nd-loader.on { opacity: 1; visibility: visible; }
#nd-loader .nd-loader-anim { width: 58px; height: 58px; }
#nd-loader svg path { fill: var(--nd-mk, #32281f) !important; }

/* ── Navbar: last item (Contact) flush to the content grid edge — optical alignment ── Built by Concreate (conc.in) */
.nav-menu .nav-links:last-child { padding-right: 0; }

/* ── Home "Formerly → Now" band: brown field, cream text + divider (padding-global is a shared utility class, so scope it here) ── Built by Concreate (conc.in) */
.section-home-about .about-image-ratio > .padding-global.padding-global { background-color: #32281f !important; }   /* out-specific Webflow's cream rule */
.section-home-about .tadam-title-txt,
.section-home-about .tadam-title-txt * { color: #FFFDF7 !important; }
.section-home-about .text-divider { background-color: #FFFDF7 !important; }
@media (max-width: 767px) { .section-home-about .tadam-wrapper { padding-top: 14px !important; padding-bottom: 14px !important; } }   /* thinner banner on mobile */
/* ── Works detail: shorter Visuals slides on mobile so more than one is visible ── Built by Concreate (conc.in) */
@media (max-width: 767px) { .visual-slide { height: 52vh !important; } .visual-slider, .visual-slider_landscape { height: 22rem !important; } }
/* ── Contact form: kill iOS native field styling so the underline is flat (was curling at the ends on Safari) ── Built by Concreate (conc.in) */
.input-field, .w-input, .w-select, textarea { -webkit-appearance: none !important; appearance: none !important; border-radius: 0 !important; }
/* ── iPad/tablet: the home hero wordmark is sized by height (22vh) which overflows the narrower viewport → size by width instead, matching the desktop proportion ── Built by Concreate (conc.in) */
@media (min-width: 768px) and (max-width: 991px) { #nd-sh-logo svg, #nd-sh-logo img { height: auto !important; width: 30vw !important; } }

/* ── Image gentle fade-in (paired with global.js perf module) ── Built by Concreate (conc.in) */
img.conc-fade { opacity: 0; }
/* fade via animation (not transition) so it never overrides an image's own hover transform transition */
img.conc-fade.conc-in { animation: concFadeIn .45s ease forwards; }
@keyframes concFadeIn { from { opacity: 0; } to { opacity: 1; } }