/* ==========================================================================
   ARCHITECTS' NOOK — REFINED TEKT ARCHITECTURAL HEADER & DESIGN SYSTEM
   Palette: #FFFFFF (White), #F5F5F5 (Light Grey), #EFEFEF (Surface), #111111 (Black), #666666 (Muted), #D9D9D9 (Borders)
   Typography: Helvetica Exclusively
   Border-Radius: 0px EVERYWHERE
   ========================================================================== */
@font-face {
  font-family: "Helvetica";
  src: url("assets/helvetica-255/Helvetica.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica";
  src: url("assets/helvetica-255/Helvetica-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica";
  src: url("assets/helvetica-255/Helvetica-Oblique.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica";
  src: url("assets/helvetica-255/Helvetica-BoldOblique.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Helvetica";
  src: url("assets/helvetica-255/helvetica-light-587ebe5a59211.ttf")
    format("truetype");
  font-weight: 300;
  font-style: normal;
}

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-surface: #efefef;
  --text-primary: #111111;
  --text-secondary: #666666;
  --border-color: #d9d9d9;
  --hover-accent: #000000;

  --font-family: "Helvetica" !important;
  --border-radius: 0px;

  --max-width: 1440px;
  --content-width: 1280px;

  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-split: 0.9s cubic-bezier(0.85, 0, 0.15, 1);

  /* Hero Design Tokens */
  --charcoal: #2f2f2f;
  --medium-grey: #8a8a8a;
  --light-grey: #d9d9d9;
  --white: #ffffff;
  --accent-black: #121212;
  --bg-light: #f7f7f7;
  --text-muted: #666666;
  --font-serif: "Helvetica";
  --font-sans: "Helvetica";
}

/* RESET & BASE STYLES */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0px !important;
  font-family: "Helvetica" !important;
  /* Strictly 0px rounded corners across all elements */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6, p, span, a, button, label {
  overflow-wrap: break-word;
}

html {
  font-family: "Helvetica" !important;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  scroll-behavior: smooth;
  font-size: 16px;
  line-height: 1.5;
}

body {
  font-family: "Helvetica" !important;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  position: relative;
  cursor: none;
  /* Controlled by custom magnetic cursor */
}

/* TYPOGRAPHY SYSTEM (HELVETICA ONLY) */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Helvetica" !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.05;
}

.display-title {
  font-family: "Helvetica" !important;
  font-size: clamp(3.2rem, 5.2vw, 4.8rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
  /* text-transform: uppercase; */
}

.section-title {
  font-size: clamp(2.75rem, 10vw, 3.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-48);
  font-family: "Helvetica" !important;
}

.sub-title {
  font-size: 1.2rem;
  /* font-weight: 400; */
  color: var(--text-secondary);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-align: justify;
  text-align-last: left;
  width: 100%;
}

.body-large {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-primary);
  text-align: justify;
  text-align-last: left;
  width: 100%;
}

.body-regular {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
}

.label-caps {
  font-size: 0.75rem;
  /* font-weight: 700; */
  letter-spacing: 0.15em;
  /* text-transform: uppercase; */
  color: var(--text-primary);
}

.mono-meta {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: none;
}

button,
input,
textarea,
select {
  font-family: "Helvetica" !important;
  font-size: 1rem;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
  cursor: none;
}

/* ==========================================================================
   CUSTOM DUAL-LAYER MONOCHROME CURSOR (INNER DOT + OUTER RING)
   ========================================================================== */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border: 1px solid #111111;
  background: transparent;
  pointer-events: none;
  z-index: 999999;
  border-radius: 50% !important;
  transform: translate(-50%, -50%);
  transition:
    width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.25s ease,
    border-color 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: #111111;
  border-radius: 50% !important;
  pointer-events: none;
  z-index: 1000000;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
}

#custom-cursor.is-hover {
  width: 44px;
  height: 44px;
  background: rgba(17, 17, 17, 0.06);
  border-color: #111111;
}

@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
  #custom-cursor,
  #custom-cursor-dot {
    display: none !important;
  }

  body,
  a,
  button,
  input,
  textarea,
  select {
    cursor: auto !important;
  }
}

/* SPLASH SCREEN LOAD ANIMATION */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  z-index: 10000;
  pointer-events: all;
}

.splash-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-split);
  z-index: 2;
}

.splash-top {
  top: 0;
  border-bottom: 1px solid var(--border-color);
  align-items: flex-end;
  padding-bottom: var(--space-32);
}

.splash-bottom {
  bottom: 0;
  align-items: flex-start;
  padding-top: var(--space-32);
}

.splash-content {
  text-align: center;
  padding: 0 16px;
  width: 100%;
  max-width: 420px;
}

.splash-logo {
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: clamp(0.15em, 1.5vw, 0.3em);
  text-transform: uppercase;
  margin-bottom: var(--space-16);
  opacity: 0;
  transform: translateY(10px);
  animation: splashFadeIn 0.6s forwards 0.2s;
}

.splash-progress-container {
  width: clamp(120px, 35vw, 160px);
  height: 2px;
  background: var(--bg-surface);
  margin: 0 auto var(--space-16);
  position: relative;
  overflow: hidden;
}

.splash-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--text-primary);
  transition: width 0.1s linear;
}

.splash-counter {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

#splash-screen.completed .splash-top {
  transform: translateY(-100%);
}

#splash-screen.completed .splash-bottom {
  transform: translateY(100%);
}

#splash-screen.hidden-all {
  display: none;
}

@keyframes splashFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* CONTAINER & GRID LAYOUT */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 64px);
  width: 100%;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-24);
}

/* ==========================================================================
   REFINED TEKT ARCHITECTURAL HEADER SYSTEM
   ========================================================================== */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 68px;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid transparent;
  z-index: 1000;
  transition:
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 300ms ease,
    -webkit-backdrop-filter 300ms ease,
    border-color 300ms ease;
  box-shadow: none;
}

#site-header.nav-hidden {
  transform: translateY(-100%);
}

#site-header.header-scrolled,
#site-header.header-blur {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.header-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  height: 100%;
  width: 100%;
}

.desktop-nav {
  height: 100%;
  display: flex;
  padding-left: 36px;
}

.nav-panel-list {
  display: flex;
  height: 100%;
  list-style: none;
  width: 100%;
  max-width: 1080px;
  margin: 0;
  padding: 0;
}

.nav-panel-cell {
  height: 100%;
  flex: 1 1 0px;
  min-width: 90px;
  display: flex;
  align-items: center;
  border-right: none;
  padding: 0 16px;
  overflow: hidden;
  transition:
    flex 350ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-panel-cell:hover {
  flex: 1.35 1 0px;
  padding: 0 22px;
}

.nav-panel-link {
  font-family: "Helvetica" !important;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #111111;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  text-transform: uppercase;
}

.nav-panel-link::after {
  content: "";
  position: absolute;
  bottom: 18px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #111111;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-panel-link:hover::after {
  transform: scaleX(1);
}

@media (max-width: 1200px) {
  .desktop-nav {
    padding-left: 20px;
  }

  .nav-panel-cell {
    padding: 0 10px;
    min-width: 78px;
  }

  .nav-panel-cell:hover {
    padding: 0 14px;
  }

  .nav-panel-link {
    font-size: 13.5px;
  }
}

.logo-panel-right {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 24px;
  padding-right: 36px;
  border-left: none;
}

.header-logo-link {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-logo-img {
  height: 54px;
  max-height: 54px;
  width: auto;
  object-fit: contain;
  display: block;
}

#mobile-toggle-btn {
  display: none;
  background: transparent;
  border: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 24px;
  height: 100%;
  cursor: pointer;
  border-left: none;
}

.bar {
  width: 24px;
  height: 2px;
  background-color: #111111;
  transition:
    transform 300ms ease,
    opacity 300ms ease;
}
/* =========================================================
   MOBILE NAVIGATION DRAWER
   ARCHITECTURAL / EDITORIAL STYLE
   ========================================================= */

#mobile-drawer {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100vh;
  height: 100dvh;

  background: #ffffff;
  z-index: 2000;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Space for close button */
  padding: max(58px, calc(env(safe-area-inset-top, 0px) + 50px)) 24px
    max(32px, calc(env(safe-area-inset-bottom, 0px) + 24px));

  box-sizing: border-box;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}

/* =========================================================
   DRAWER OPEN STATE
   ========================================================= */

body.mobile-drawer-open {
  overflow: hidden;
}

body.mobile-drawer-open #mobile-drawer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =========================================================
   MAIN NAVIGATION LIST
   ========================================================= */

.mobile-drawer-list {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;

  margin: 0 0 0 0; /* reduced gap below X */

  padding: 0;
  width: 100%;
  max-width: 360px;
}

/* =========================================================
   EACH NAVIGATION ITEM
   ========================================================= */

.mobile-drawer-list > li {
  width: 100%;

  border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}

/* First line at top */

.mobile-drawer-list > li:first-child {
  border-top: 1px solid rgba(17, 17, 17, 0.14);
}

/* =========================================================
   MAIN NAVIGATION LINKS
   ========================================================= */

.mobile-drawer-link {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 19px 0;

  font-family: "Helvetica" !important;
  font-size: clamp(1.35rem, 6vw, 1.7rem);
  font-weight: 500;
  line-height: 1;

  letter-spacing: -0.025em;

  color: #111111;

  text-decoration: none;
  text-transform: uppercase;

  box-sizing: border-box;

  transition:
    opacity 200ms ease,
    padding-left 250ms ease;
}

/* Desktop hover is harmless;
   touch devices simply ignore it */

.mobile-drawer-link:hover {
  color: #111111;
  opacity: 0.55;
  padding-left: 5px;
}

/* =========================================================
   PROJECTS ROW / ARROW
   ========================================================= */

/*
   Works if the arrow is inside the Projects link.
   Example:
   <span>PROJECTS</span>
   <span class="mobile-project-arrow">↓</span>
*/

.mobile-project-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1rem;
  font-weight: 400;

  margin-left: auto;

  transition: transform 300ms ease;
}

/* Rotate arrow when Projects is open */

.mobile-projects-open .mobile-project-arrow {
  transform: rotate(180deg);
}

/* =========================================================
   PROJECTS SUBMENU
   ========================================================= */

.mobile-projects-submenu {
  list-style: none;

  width: 100%;

  margin: 0;
  padding: 0;

  max-height: 0;
  overflow: hidden;

  opacity: 0;

  transition:
    max-height 400ms ease,
    opacity 300ms ease,
    padding 300ms ease;
}

/* OPEN STATE */

.mobile-projects-open .mobile-projects-submenu {
  max-height: 400px;
  opacity: 1;

  padding: 0 0 16px 0;
}

/* PROJECT CATEGORY LINKS */

.mobile-projects-submenu a {
  display: block;

  width: 100%;

  padding: 8px 0 8px 18px;

  font-family: "Helvetica" !important;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.3;

  letter-spacing: 0.04em;

  color: #555555;

  text-decoration: none;
  text-transform: uppercase;

  box-sizing: border-box;

  transition:
    color 200ms ease,
    padding-left 200ms ease;
}

.mobile-projects-submenu a:hover {
  color: #111111;
  padding-left: 23px;
}

/* =========================================================
   CLOSE BUTTON
   ========================================================= */

#mobile-drawer-close {
  position: absolute;

  top: max(18px, env(safe-area-inset-top, 18px));
  right: max(20px, env(safe-area-inset-right, 20px));

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  font-family: "Helvetica" !important;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;

  color: #111111;

  background: transparent;
  border: 0;

  cursor: pointer;

  z-index: 2001;

  transition:
    opacity 200ms ease,
    transform 250ms ease;
}

#mobile-drawer-close:hover {
  opacity: 0.55;
  transform: rotate(90deg);
}

/* =========================================================
   MOBILE DRAWER — FINAL ARCHITECTURAL NAV
   CSS ONLY — NO HTML CHANGES
   ========================================================= */

@media (max-width: 768px) {
  /* Main navigation list */
  #mobile-drawer .mobile-drawer-list {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 48px 14px 0;

    display: flex;
    flex-direction: column;
    gap: 0;

    text-align: left;

    box-sizing: border-box;
  }

  /* Every main navigation row */
  #mobile-drawer .mobile-drawer-list > li {
    width: 100%;
    margin: 0;
    padding: 0;

    text-align: left;

    border-bottom: 1px solid #eeeeee;

    box-sizing: border-box;
  }

  /* First top line */
  #mobile-drawer .mobile-drawer-list > li:first-child {
    border-top: 1px solid #eeeeee;
  }

  /* Normal links:
     HOME / ABOUT / SERVICES / CLIENTS / CONTACT
  */
  #mobile-drawer .mobile-drawer-list > li > .mobile-drawer-link {
    display: block;

    width: 100%;

    margin: 0;
    padding: 18px 0;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1;

    letter-spacing: -0.015em;

    text-align: left !important;

    box-sizing: border-box;
  }

  /* =====================================================
     PROJECTS ROW
     Existing HTML:
     li.mobile-nav-has-dropdown
       div.mobile-dropdown-header
         a.mobile-drawer-link
         span.mobile-dropdown-arrow
     ===================================================== */

  #mobile-drawer .mobile-nav-has-dropdown {
    width: 100%;
  }

  #mobile-drawer .mobile-dropdown-header {
    width: 100%;

    display: flex !important;
    align-items: center;
    justify-content: space-between;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
  }

  /* PROJECTS text */
  #mobile-drawer .mobile-dropdown-header .mobile-drawer-link {
    display: block;

    flex: 1;

    width: auto;

    margin: 0;
    padding: 18px 0;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1;

    letter-spacing: -0.015em;

    text-align: left !important;

    box-sizing: border-box;
  }

  /* Existing ↓ span */
  #mobile-drawer .mobile-dropdown-arrow {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;

    margin: 0;
    padding: 0;

    font-size: 0.9rem;
    line-height: 1;

    color: #111111;

    text-align: right;

    box-sizing: border-box;
  }

  /* =====================================================
     PROJECT CATEGORY DROPDOWN
     Keep your existing functionality
     ===================================================== */

  #mobile-drawer .mobile-dropdown-menu {
    width: 100%;

    margin: 0;
    padding-left: 18px;

    box-sizing: border-box;

    text-align: left;
  }

  #mobile-drawer .mobile-drawer-sublink {
    display: block;

    width: 100%;

    padding: 9px 0;

    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.25;

    letter-spacing: 0.04em;

    text-align: left;

    box-sizing: border-box;
  }

  /* =====================================================
     CLOSE BUTTON
     ===================================================== */

  #mobile-drawer-close {
    top: 14px;
    right: 14px;

    width: 32px;
    height: 32px;

    font-size: 1.45rem;
    font-weight: 300;
    line-height: 1;
  }
}

/* =========================================================
   MOBILE DRAWER — FINAL VISUAL POLISH
   NO HTML CHANGES
   ========================================================= */

@media (max-width: 768px) {
  /* -----------------------------------------
     CLOSE BUTTON — TOP LEFT
     ----------------------------------------- */

  #mobile-drawer-close {
    position: fixed !important;

    top: 18px !important;
    left: 18px !important;
    right: auto !important;

    width: 34px !important;
    height: 34px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 !important;
    margin: 0 !important;

    font-size: 1.55rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    color: #111111;
    background: transparent;
    border: 0;

    z-index: 2001;
  }

  /* -----------------------------------------
     MAIN NAVIGATION
     ----------------------------------------- */

  #mobile-drawer .mobile-drawer-list {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    /* more breathing room below close button */
    padding: 82px 14px 28px !important;

    display: flex;
    flex-direction: column;
    gap: 0 !important;

    text-align: left;
    box-sizing: border-box;
  }

  #mobile-drawer .mobile-drawer-list > li {
    width: 100%;
    margin: 0;
    padding: 0;

    border-bottom: 1px solid #e8e8e8;

    box-sizing: border-box;
  }

  #mobile-drawer .mobile-drawer-list > li:first-child {
    border-top: 1px solid #e8e8e8;
  }

  /* HOME / ABOUT / SERVICES / CLIENTS / CONTACT */

  #mobile-drawer .mobile-drawer-list > li > .mobile-drawer-link {
    display: block;

    width: 100%;

    margin: 0 !important;
    padding: 19px 0 !important;

    font-family: "Helvetica" !important;

    font-size: 1.15rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    letter-spacing: -0.025em !important;

    color: #111111;
    text-align: left !important;
    text-decoration: none;
    text-transform: uppercase;

    box-sizing: border-box;
  }

  /* =========================================
     PROJECTS MAIN ROW
     ========================================= */

  #mobile-drawer .mobile-dropdown-header {
    width: 100%;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
  }

  #mobile-drawer .mobile-dropdown-header .mobile-drawer-link {
    flex: 1 1 auto;

    width: auto !important;

    margin: 0 !important;
    padding: 19px 0 !important;

    font-family: "Helvetica" !important;

    font-size: 1.15rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    letter-spacing: -0.025em !important;

    color: #111111;

    text-align: left !important;
    text-transform: uppercase;

    box-sizing: border-box;
  }

  /* Project arrow */

  #mobile-drawer .mobile-dropdown-arrow {
    flex: 0 0 34px;

    width: 34px !important;
    height: 34px;

    display: flex !important;
    align-items: center;
    justify-content: flex-end;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 1rem !important;
    font-weight: 500;

    color: #111111;

    cursor: pointer;
  }

  /* =========================================
     PROJECTS DROPDOWN
     ========================================= */

  #mobile-drawer .mobile-dropdown-menu {
    width: 100% !important;

    margin: 0 !important;

    /* creates deliberate hierarchy */
    padding: 4px 0 14px 16px !important;

    list-style: none;

    box-sizing: border-box;
  }

  #mobile-drawer .mobile-dropdown-menu li {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
  }

  #mobile-drawer .mobile-drawer-sublink {
    display: block;

    width: 100%;

    margin: 0 !important;
    padding: 8px 0 !important;

    font-family: "Helvetica" !important;

    font-size: 0.88rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    letter-spacing: 0.01em !important;

    color: #555555;

    text-align: left !important;
    text-decoration: none;
    text-transform: uppercase;

    box-sizing: border-box;
  }

  /* Slight emphasis on hover/touch-capable desktop testing */

  #mobile-drawer .mobile-drawer-sublink:hover {
    color: #111111;
  }
}

/* =========================================================
   PROJECTS DROPDOWN BUTTON — VISIBLE + TOUCH FRIENDLY
   ========================================================= */

@media (max-width: 768px) {
  #mobile-drawer .mobile-dropdown-arrow {
    /* Proper touch target */
    width: 50px !important;
    height: 32px !important;
    flex: 0 0 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Space around the icon */
    margin: 0 2px 0 10px !important;
    padding: 8px 15px !important;

    /* Visible button */
    background: #f4f4f2 !important;
    border: 1px solid #d4d4d0 !important;
    border-radius: 2px !important;

    color: transparent !important;

    position: relative;
    cursor: pointer;

    box-sizing: border-box;
    text-align: center;

    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      transform 0.2s ease;
  }

  /* Custom chevron */
  #mobile-drawer .mobile-dropdown-arrow::before {
    content: "";

    width: 6px;
    height: 6px;

    border-right: 1.5px solid #111111;
    border-bottom: 1.5px solid #111111;

    transform: translateY(-2px) rotate(45deg);

    transition: transform 0.25s ease;
  }

  /* Hover / desktop mobile testing */
  #mobile-drawer .mobile-dropdown-arrow:hover {
    background: #e9e9e6 !important;
    border-color: #999999 !important;
  }

  /* Touch feedback */
  #mobile-drawer .mobile-dropdown-arrow:active {
    background: #ddddda !important;
    transform: scale(0.94);
  }
}

/* =========================================================
   SMALL MOBILE REFINEMENT
   ========================================================= */

@media (max-width: 480px) {
  #mobile-drawer {
    padding-left: 20px;
    padding-right: 20px;
  }

  .mobile-drawer-link {
    font-size: clamp(1.3rem, 6.2vw, 1.6rem);
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .mobile-projects-submenu a {
    font-size: 0.82rem;
  }
}
/* ==========================================================================
   HERO SECTION & 3D ARCHITECTURAL MASSING MODEL
   ========================================================================== */

/* Ambient Mouse Spotlight */
.mouse-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(217, 217, 217, 0.12),
    transparent 80%
  );
  transition: background 0.3s ease;
}

/* --------------------------------------------------
 * Hero Section Structure & Viewport-Safe Layout
 * -------------------------------------------------- */
.hero-section {
  height: 100vh;
  min-height: 600px;
  max-height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 68px clamp(24px, 5vw, 64px) 24px clamp(24px, 5vw, 64px);
  position: relative;
  overflow: hidden;
  background-color: var(--white, #ffffff);
  box-sizing: border-box;
}

.hero-container {
  width: 100%;
  max-width: var(--content-width, 1280px);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* 2-Column Hero Grid Layout */
.grid-2 {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 4vw, 64px);
  /* align-items: center; */
}

.text-spotlight {
  position: relative;
  display: inline-block;
}

.hero-text-side {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Eyebrow: SPACES SHAPED BY PURPOSE. */
.hero-eyebrow {
  margin-bottom: clamp(18px, 2.5vh, 28px);
}

.hero-eyebrow-bar {
  display: block;
  width: 26px;
  height: 1.5px;
  background-color: var(--charcoal, #2f2f2f);
  margin-bottom: 14px;
}

.hero-eyebrow-text {
  font-family: "Helvetica" !important;
  /* font-size: clamp(0.72rem, 0.88vw, 0.82rem); */
  font-weight: 500;
  letter-spacing: 0.25em;
  line-height: 1.6;
  color: var(--text-muted, #666666);
  display: flex;
  flex-direction: column;
  font-size: 15px;
}

/* Main Title: ARCHITECTS' NOOK (Swiss Architectural Sans-Serif) */
.hero-title {
  font-family: "Helvetica" !important;
  font-size: clamp(3.2rem, 5.2vw, 4.8rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary, #111111);
  text-transform: uppercase;
  margin-bottom: clamp(16px, 2.2vh, 24px);
}

/* Sub-meta: ARCHITECTURE / INTERIORS / PLANNING */
.hero-sub-meta {
  font-family: "Helvetica" !important;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--text-muted, #666666);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  margin-bottom: clamp(32px, 5vh, 52px);
  font-size: 15px;
}

.meta-sep {
  color: var(--border-color, #d9d9d9);
  font-weight: 300;
}

/* Location: VAPI, INDIA ───────── */
.hero-location {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 440px;
}

.hero-location-text {
  font-family: "Helvetica" !important;
  /* font-size: 0.72rem; */
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--text-primary, #111111);
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 15px;
}

.hero-location-line {
  flex: 1;
  height: 1px;
  background-color: var(--border-color, #d9d9d9);
}

/* Right Side: Architectural 3D Massing Scene */
.hero-visual-side {
  position: relative;
  height: clamp(340px, 50vh, 430px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Scroll Down Hint Animation */
.scroll-down-hint {
  position: absolute;
  bottom: clamp(16px, 2.5vh, 28px);
  left: clamp(24px, 5vw, 64px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--medium-grey, #8a8a8a);
  font-family: "Helvetica" !important;
  z-index: 2;
}

.mouse-icon {
  width: 18px;
  height: 28px;
  border: 1.5px solid var(--medium-grey, #8a8a8a);
  border-radius: 9px;
  position: relative;
}

.mouse-icon .wheel {
  width: 2px;
  height: 5px;
  background-color: var(--medium-grey, #8a8a8a);
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1px;
  animation: scrollMouse 1.8s infinite;
}

@keyframes scrollMouse {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 7px);
  }
}

/* --------------------------------------------------
 * CSS 3D Architectural Massing Model
 * -------------------------------------------------- */
.scene-container {
  width: 380px;
  height: 380px;
  position: relative;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  transform: scale(0.82) translateY(100px);
  transform-origin: center center;
}

/* Architectural Datum Guides / Crosshairs */
.blueprint-guides {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.guide-line-h {
  position: absolute;
  top: 32%;
  left: -15%;
  width: 130%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(217, 217, 217, 0.6) 15%,
    rgba(217, 217, 217, 0.6) 85%,
    transparent 100%
  );
}

.guide-line-v {
  position: absolute;
  left: 78%;
  top: -20%;
  height: 140%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(217, 217, 217, 0.6) 15%,
    rgba(217, 217, 217, 0.6) 85%,
    transparent 100%
  );
}

.guide-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: var(--charcoal, #2f2f2f);
  border-radius: 50%;
}

.guide-dot.dot-1 {
  top: 32%;
  left: 78%;
  transform: translate(-50%, -50%);
  border-radius: 0;
  /* Tiny architectural square crosshair */
  width: 4px;
  height: 4px;
}

.guide-dot.dot-2 {
  top: 40%;
  left: 14%;
  transform: translate(-50%, -50%);
}

.grid-floor {
  position: absolute;
  width: 300px;
  height: 300px;
  background-image:
    linear-gradient(rgba(217, 217, 217, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 217, 217, 0.4) 1px, transparent 1px);
  background-size: 20px 20px;
  transform: rotateX(75deg) translateZ(-55px);
  opacity: 0.65;
  pointer-events: none;
}

.massing-scene {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(35deg);
  transition: transform 0.1s ease-out;
  /* Smooth hover-responsive rotation */
  animation: floatScene 6s ease-in-out infinite alternate;
}

@keyframes floatScene {
  0% {
    margin-top: -6px;
  }

  100% {
    margin-top: 6px;
  }
}

/* 3D Block Builder */
.block {
  position: absolute;
  width: var(--width);
  height: var(--height);
  transform-style: preserve-3d;
  left: 50%;
  top: 50%;
  /* Combine translate coordinates with height base offset so block sits on "floor" */
  transform: translate3d(var(--x), calc(-1 * var(--y) - 50px), var(--z));
}

.face {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  border: 1px solid var(--medium-grey, #8a8a8a);
}

/* Coordinate mapping using margin offsets */
.face.front {
  width: var(--width);
  height: var(--height);
  margin-left: calc(-0.5 * var(--width));
  margin-top: calc(-0.5 * var(--height));
  transform: rotateY(0deg) translateZ(calc(0.5 * var(--depth)));
}

.face.back {
  width: var(--width);
  height: var(--height);
  margin-left: calc(-0.5 * var(--width));
  margin-top: calc(-0.5 * var(--height));
  transform: rotateY(180deg) translateZ(calc(0.5 * var(--depth)));
}

.face.left {
  width: var(--depth);
  height: var(--height);
  margin-left: calc(-0.5 * var(--depth));
  margin-top: calc(-0.5 * var(--height));
  transform: rotateY(-90deg) translateZ(calc(0.5 * var(--width)));
}

.face.right {
  width: var(--depth);
  height: var(--height);
  margin-left: calc(-0.5 * var(--depth));
  margin-top: calc(-0.5 * var(--height));
  transform: rotateY(90deg) translateZ(calc(0.5 * var(--width)));
}

.face.top {
  width: var(--width);
  height: var(--depth);
  margin-left: calc(-0.5 * var(--width));
  margin-top: calc(-0.5 * var(--depth));
  transform: rotateX(90deg) translateZ(calc(0.5 * var(--height)));
}

.face.bottom {
  width: var(--width);
  height: var(--depth);
  margin-left: calc(-0.5 * var(--width));
  margin-top: calc(-0.5 * var(--depth));
  transform: rotateX(-90deg) translateZ(calc(0.5 * var(--height)));
}

/* Coloring the blocks with architectural paper massing texture */
/* orginal colour  */
/* .block-base .face {
    background-color: rgba(245, 245, 245, 0.95);
    border-color: var(--light-grey, #D9D9D9);
}
.block-tall .face {
    background-color: rgba(235, 235, 235, 0.95);
    border-color: var(--medium-grey, #8A8A8A);
}
.block-cantilever .face {
    background-color: rgba(255, 255, 255, 0.98);
    border-color: var(--charcoal, #2F2F2F);
}
.block-cap .face {
    background-color: rgba(47, 47, 47, 0.95);
    border-color: var(--charcoal, #2F2F2F);
} */

/* ==========================================
   ARCHITECTS' NOOK — 3D MODEL BRAND COLORS
   Logo palette:
   Light  : #dcd9d4
   Grey   : #767676
   Dark   : #242426
   ========================================== */

/*  Logo colour */
.block-base .face {
  background-color: #dcd9d4;
  border-color: #000000;
}

.block-tall .face {
  background-color: #767676;
  border-color: #000000;
}

.block-cantilever .face {
  background-color: #dcd9d4;
  border-color: #000000;
}

.block-cap .face {
  background-color: #888888;
  border-color: #000000;
}

/* ==========================================
   ARCHITECTS' NOOK — 3D MODEL BRAND COLORS
   Logo palette:
   ========================================== */

/* .block-base .face {
    background-color:
        #767676;
    border-color: #000000;
}


.block-tall .face {
    background-color: #242426;
    border-color: #000000;
}


.block-cantilever .face {
    background-color: #C0C0C0;
    border-color: #000000;
}

.block-cap .face {
    background-color: #dcd9d4;
    border-color: #000000;
} */

/* ==================================================
   MOBILE HERO SECTION — DEDICATED ARCHITECTURAL COMPOSITION
   Exact match to reference layout & perfect 100dvh viewport fit
   ================================================== */
@media (max-width: 768px) {
  /* 1. Main Viewport Container — Locks precisely to 1 screen height without scrolling */
  .hero-section {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    padding-top: calc(64px + clamp(6px, 1.4vh, 16px));
    padding-bottom: max(14px, env(safe-area-inset-bottom, 12px));
    padding-left: clamp(20px, 5.5vw, 32px);
    padding-right: clamp(20px, 5.5vw, 32px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    overflow: hidden;
    background-color: var(--white, #ffffff);
    box-sizing: border-box;
  }

  /* 2. Inner Hero Container */
  .hero-container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* 3. Grid / Stack — Vertical single-column composition */
  .grid-2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    gap: 0;
  }

  .hero-text-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    transform: translateY(18px) scale(1.06);
    transform-origin: top left;
  }

  /* 5. Eyebrow: Bar + SPACES SHAPED BY PURPOSE */
  .hero-eyebrow {
    order: 1;
    margin-bottom: clamp(10px, 1.6vh, 18px);
  }

  .hero-eyebrow-bar {
    display: block;
    width: 32px;
    height: 1.5px;
    background-color: var(--charcoal, #111111);
    margin-bottom: clamp(8px, 1.2vh, 12px);
  }

  .hero-eyebrow-text {
    font-family: "Helvetica" !important;
    font-size: clamp(0.85rem, 2.9vw, 0.95rem);
    font-weight: 500;
    letter-spacing: 0.22em;
    line-height: 1.55;
    color: var(--text-primary, #111111);
  }

  /* 6. Main Title: ARCHITECTS' NOOK */
  .hero-title {
    order: 2;
    font-family: "Helvetica" !important;
    font-size: clamp(2.75rem, 10vw, 3.6rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--text-primary, #111111);
    margin-bottom: clamp(8px, 1.4vh, 14px);
  }

  /* 7. Sub-meta: ARCHITECTURE / INTERIORS / PLANNING */
  /* 7. Sub-meta: ARCHITECTURE / INTERIORS / PLANNING */
  .hero-sub-meta {
    order: 3;
    font-family: "Helvetica" !important;

    /* Responsive size for narrow + wide phones */
    font-size: clamp(0.62rem, 2.6vw, 0.95rem);

    /* Reduce spacing automatically on narrow phones */
    letter-spacing: clamp(0.04em, 0.25vw, 0.12em);

    font-weight: 400;
    color: #222222;

    display: flex;
    align-items: center;

    /* Responsive space around / */
    gap: clamp(4px, 1.4vw, 10px);

    /* Must remain one line */
    white-space: nowrap;

    /* Never exceed mobile container */
    width: 100%;
    max-width: 100%;

    margin-bottom: clamp(6px, 1.2vh, 12px);
  }

  .hero-sub-meta .meta-sep {
    flex-shrink: 0;
    color: #b0b0b0;
    font-weight: 300;
  }

  /* 8. 3D Architectural Massing Model — Center visual anchor */

  .hero-visual-side {
    order: 4;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    width: 100%;
    z-index: 2;

    /* Keep complete 3D composition visible */
    overflow: visible;
  }

  .scene-container {
    position: relative;

    width: min(320px, 88vw);
    height: min(320px, 88vw);
    max-width: 100%;
    /* Responsive model size */
    transform: scale(0.85) translateY(70px);
    transform-origin: center center;
    transform-style: preserve-3d;
    perspective: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
  }

  /* Extra protection for narrow mobile screens */
  @media (max-width: 390px) {
    .scene-container {
      width: 290px;
      height: 290px;
      transform: scale(0.52) translateY(8px);
    }
  }

  /* Very narrow phones */
  @media (max-width: 350px) {
    .scene-container {
      width: 270px;
      height: 270px;
      transform: scale(0.56) translateY(24px);
    }
  }

  /* 9. Bottom Location: VAPI, INDIA ─────── */
  .hero-location {
    order: 5;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-bottom: clamp(2px, 0.6vh, 6px);
  }

  .hero-location-text {
    font-family: "Helvetica" !important;
    font-size: clamp(0.64rem, 2.1vw, 0.72rem);
    font-weight: 600;
    letter-spacing: 0.25em;
    color: var(--text-primary, #111111);
    white-space: nowrap;
  }

  .hero-location-line {
    flex: 1;
    height: 1px;
    background-color: var(--border-color, #d9d9d9);
  }

  /* 10. Hide desktop mouse scroll hint on mobile */
  .scroll-down-hint {
    display: none !important;
  }
}

/* Extra short mobile screens (landscape or compact devices like iPhone SE) */
@media (max-width: 768px) and (max-height: 700px) {
  .hero-section {
    padding-top: calc(58px + 4px);
    padding-bottom: 0px;
  }

  .hero-eyebrow {
    margin-bottom: 6px;
  }

  .hero-eyebrow-bar {
    margin-bottom: 6px;
  }

  .hero-title {
    font-size: clamp(1.9rem, 7.5vw, 2.3rem);
    margin-bottom: 6px;
  }

  .hero-sub-meta {
    font-size: 0.55rem;
    margin-bottom: 6px;
  }

  .scene-container {
    transform: scale(0.56) translateY(65px);
  }

  .hero-location {
    padding-bottom: 2px;
  }
}

/* ==========================================================================
   5. ABOUT US SECTION — SWISS ARCHITECTURAL EDITORIAL COMPOSITION
   ========================================================================== */
#about,
#about.about-editorial-section {
  padding: clamp(5.5rem, 8.5vw, 9rem) 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  width: 100%;
  position: relative;
}

#about,
#about * {
  font-family: "Helvetica" !important;
  border-radius: 0 !important;
}

.about-editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-24);
  row-gap: clamp(2.5rem, 4vw, 4rem);
  align-items: start;
  width: 100%;
}

/* Primary Architectural Headline (Columns 1–9) */
.about-editorial-heading {
  grid-column: 1 / span 9;
  font-family: "Helvetica" !important;
  font-size: clamp(2.75rem, 10vw, 3.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  text-align: left;
  max-width: 980px;
  text-transform: none;
}

/* Editorial Body & Supporting Architecture Scope (Columns 5–12) */
.about-editorial-content {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* max-width: 20px; */
}

/* Primary / Lead About Paragraph */
.about-lead-paragraph {
  font-family: "Helvetica" !important;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: clamp(1.5rem, 2.2vw, 2rem);
  text-align: justify;
  text-align-last: left;
}

/* Supporting Team & Practice Growth */
.about-supporting-paragraph {
  font-family: "Helvetica" !important;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  margin-bottom: clamp(1.5rem, 2.2vw, 2rem);
  text-align: justify;
  text-align-last: left;
}

/* Comprehensive Scope & Sustainability Paragraph */
.about-scope-paragraph {
  font-family: "Helvetica" !important;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  margin-bottom: 0;
  text-align: justify;
  text-align-last: left;
}

#about strong {
  font-family: "Helvetica" !important;
  font-weight: 700;
  color: var(--text-primary);
}

/* Subtle Typographic Metadata Footnote */
.about-editorial-footnote {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: clamp(2.25rem, 3.5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  width: 100%;
}

.about-foot-item {
  font-family: "Helvetica" !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.about-foot-divider {
  font-size: 0.75rem;
  color: var(--border-color);
  font-weight: 300;
}

/* Preserved classes for standalone About.html page */

.about-image-wrapper {
  grid-column: span 5;
  height: 620px;
  position: relative;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.about-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transition: transform var(--transition-smooth);
}

.about-image-wrapper:hover .about-image {
  filter: none;
  transform: scale(1.03);
}

.about-text-wrapper {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--space-48);
}

.about-statement {
  margin-bottom: var(--space-48);
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
  padding-top: var(--space-48);
  border-top: 1px solid var(--border-color);
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-8);
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   5.5 SERVICES SECTION — SWISS ARCHITECTURAL EDITORIAL ACCORDION
   ========================================================================== */
#services,
#services.services-editorial-section {
  padding: clamp(5.5rem, 8.5vw, 9rem) 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  width: 100%;
  position: relative;
  scroll-margin-top: 80px;
}

#services,
#services * {
  font-family: "Helvetica" !important;
  border-radius: 0 !important;
}

.services-editorial-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  width: 100%;
}

/* Left Column: Editorial Introduction (Natural Non-Sticky Flow) */
.services-editorial-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  width: 100%;
  max-width: 400px;
}
.services-editorial-heading { 
  font-family: "Helvetica" !important; 

  /* KEEP UNIVERSAL SUBHEADING SIZE */
  font-size: clamp(1.375rem, 5vw, 1.8rem); 

  font-weight: 400; 
  line-height: 1.25;
  letter-spacing: -0.035em; 
  color: var(--text-primary); 
  text-transform: none; 

  /* Control line length */
  width: 100%;
  max-width: 520px;

  margin: 0;
  text-align: left;
  text-wrap: balance;
}



/* Right Column: Numbered Service Accordion List */
.services-accordion-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.service-accordion-item {
  border-top: 1px solid var(--border-color);
  width: 100%;
  background-color: transparent;
  transition: background-color var(--transition-fast);
}

.service-accordion-item:last-child {
  border-bottom: 1px solid var(--border-color);
}

/* Trigger Button */
.service-accordion-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: clamp(1.35rem, 1.8vw, 1.85rem) 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: left;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  transition: color var(--transition-fast);
}

.service-accordion-trigger:focus-visible {
  outline: 1px dashed var(--text-primary);
  outline-offset: 4px;
}

.service-accordion-num {
  font-family: "Helvetica" !important;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  width: clamp(2rem, 2.5vw, 2.75rem);
  flex-shrink: 0;
}

.service-accordion-title {
  font-family: "Helvetica" !important;
  font-size: clamp(1.375rem, 5vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  flex-grow: 1;
  /* text-transform: uppercase; */
  line-height: 1.15;
  transition: color var(--transition-fast);
}

.service-accordion-trigger:hover .service-accordion-title {
  color: #000000;
}

.service-accordion-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.service-accordion-indicator .indicator-icon {
  font-family: "Helvetica" !important;
  font-size: 1.65rem;
  font-weight: 300;
  color: var(--text-primary);
  line-height: 1;
  display: inline-block;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.2s ease;
}

/* Accordion Collapsible Panel (CSS Grid Transition Engine) */
.service-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.service-accordion-item.is-active .service-accordion-panel {
  grid-template-rows: 1fr;
}

.service-accordion-item.is-active .service-accordion-indicator .indicator-icon {
  transform: rotate(45deg);
}

.service-accordion-body {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding-left: calc(clamp(2rem, 2.5vw, 2.75rem) + clamp(1rem, 1.5vw, 1.5rem));
  padding-bottom: clamp(1.5rem, 2.2vw, 2.25rem);
  padding-top: 0.25rem;
}

.service-accordion-item.is-active .service-accordion-body {
  opacity: 1;
  transform: translateY(0);
}

/* Numbered Service Items List */
.service-items-list {
  list-style: none;
  counter-reset: service-item-counter;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

/* Individual service detail */
.service-item-entry {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 8px;
  font-family: "Helvetica" !important;
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
}

/* Minimal dot instead of numbered list */
.service-item-entry::before {
  content: "";
  width: 4px;
  height: 4px;
  background-color: var(--text-primary);
  border-radius: 50%;
  align-self: start;
  margin-top: 0.68em;
}

/* Responsive Rules for Services Section */
@media (max-width: 1024px) {
  .services-editorial-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }

  .services-editorial-intro {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  #services,
  #services.services-editorial-section {
    padding: clamp(3.5rem, 6vw, 5rem) 0;
  }

  .services-editorial-heading {
    font-size: clamp(1.9rem, 6.5vw, 2.6rem);
    font-weight: 400;
    font-family: Helvetica !important;
    text-align: left;
  }

  .service-accordion-trigger {
    gap: 0.75rem;
    padding: 1.25rem 0;
  }

  .service-accordion-num {
    width: 1.75rem;
    font-size: 1rem;
  }

  .service-accordion-title {
    font-size: 1.4rem;
  }

  .service-accordion-body {
    padding-left: 0;
    padding-top: 0.25rem;
    padding-bottom: 1.25rem;
  }

  .service-item-entry {
    font-size: 1.1rem;
    grid-template-columns: 20px 1fr;
    gap: 6px;
    font-weight: 500;
  }
}

/* INTERACTIVE PROCESS STEPPER */
#process {
  padding: var(--space-64) 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
}

.process-layout {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: var(--space-48);
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  height: 70vh;
  max-height: 750px;
  min-height: 500px;
}

.process-nav {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  border-right: 1px solid var(--border-color);
  height: 100%;
}

.process-step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--space-32);
  border-bottom: 1px solid var(--border-color);
  transition: background-color var(--transition-fast);
  position: relative;
}

.process-step-item:last-child {
  border-bottom: none;
}

.process-step-item.active,
.process-step-item:hover {
  background-color: var(--bg-secondary);
}

.process-step-num {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.process-step-title {
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 0;
  /* text-transform: uppercase; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.process-step-desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  display: none;
}

.process-step-item.active .process-step-desc {
  display: block;
}

.process-media-display {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transition:
    opacity 0.4s ease,
    transform 0.6s ease;
}

.process-media-info-box {
  position: absolute;
  bottom: var(--space-32);
  left: var(--space-32);
  right: var(--space-32);
  padding: var(--space-24);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(4px);
}

/* FIXTURES & FINISHES GRID */
#finishes {
  padding: var(--space-128) 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
}

.finishes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
}

.finish-card {
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  transition: border-color var(--transition-fast);
}

.finish-card:hover {
  border-color: var(--hover-accent);
}

.finish-img-box {
  width: 100%;
  height: 260px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.finish-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transition: transform var(--transition-smooth);
}

.finish-card:hover .finish-img {
  filter: none;
  transform: scale(1.04);
}

.finish-info {
  padding: var(--space-24);
}

.finish-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-8);
  letter-spacing: -0.01em;
}

.finish-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.sectors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
}

.sector-card {
  padding: var(--space-48) var(--space-32);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  transition: background-color var(--transition-fast);
}

.sector-card:hover {
  background-color: var(--bg-secondary);
}

.sector-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-bottom: var(--space-16);
}

.sector-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-12);
  letter-spacing: -0.02em;
}

.sector-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* TEKT HIGH-IMPACT CTA BANNER */
.tekt-cta-section {
  padding: var(--space-128) 0;
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.tekt-cta-box {
  padding: var(--space-96) var(--space-64);
  background-color: #dcd9d4;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--text-primary);
}

.tekt-cta-title {
  font-size: clamp(2.75rem, 10vw, 3.6rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--text-primary);
  font-family: Helvetica !important;
  letter-spacing: -0.03em;
  max-width: 700px;
}

.tekt-cta-btn {
  padding: var(--space-24) var(--space-48);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  /* text-transform: uppercase; */
  border: 1px solid var(--bg-primary);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.tekt-cta-btn:hover {
  background: var(--text-muted);
  color: var(--bg-secondary);
}

/* FEATURED PROJECTS SECTION */
#projects {
  padding: var(--space-128) 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-primary);
}

.projects-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-64);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-48);
  margin-bottom: var(--space-64);
}

.project-card {
  display: block;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  transition: border-color var(--transition-fast);
}

.project-card:hover {
  border-color: var(--hover-accent);
}

.project-image-container {
  width: 100%;
  height: 420px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-surface);
}

.project-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transition: transform var(--transition-smooth);
}

.project-card:hover .project-image {
  filter: none;
  transform: scale(1.04);
}

.project-info {
  padding: var(--space-32);
}

.project-meta-row {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-8);
}

.project-category {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.project-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: var(--space-8);
  letter-spacing: -0.02em;
}

.project-location {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  font-weight: 300;
  text-transform: none !important;
}

.btn-editorial {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-48);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  /* text-transform: uppercase; */
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn-editorial:hover {
  background: var(--text-muted);
  color: var(--bg-primary);
  border-color: var(--text-muted);
}

.btn-editorial-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) var(--space-48);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  /* text-transform: uppercase; */
  transition: all var(--transition-fast);
}

.btn-editorial-outline:hover {
  background: var(--text-muted);
  color: var(--bg-primary);
  border-color: var(--text-muted);
}

.center-btn-wrapper {
  text-align: center;
}

/* CLIENTS SECTION & DIRECTORY */
#clients {
  padding: var(--space-128) 0;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-primary);
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #dcd9d4;
  border-left: 1px solid #dcd9d4;
  margin-bottom: var(--space-64);
  background-color: #ffffff;
}

.client-cell {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 24px;
  min-height: 176px;
  border-right: 1px solid #dcd9d4;
  border-bottom: 1px solid #dcd9d4;
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-sizing: border-box;
}

.client-cell:hover {
  background-color: #fafafa;
}

.client-logo-wrapper {
  width: 100%;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  position: relative;
}

.client-logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 72%;
  max-height: 52px;
  object-fit: contain;
  margin: 0 auto;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 0.88;
  --logo-scale: 1;
  transform: scale(var(--logo-scale));
  transform-origin: center center;
  transition:
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Optical balance adjustments for logos with internal whitespace or thin wordmarks */
.client-logo-img[src*="blue" i],
.client-logo-img[src*="Blue" i] {
  --logo-scale: 2.35;
  max-width: 90%;
}

.client-logo-img[src*="hamilton" i],
.client-logo-img[src*="Hamilton" i] {
  --logo-scale: 2.5;
  max-width: 90%;
}

.client-logo-img[src*="western" i],
.client-logo-img[src*="Western" i] {
  --logo-scale: 2.4;
  max-width: 85%;
}

.client-logo-img[src*="mwv" i],
.client-logo-img[src*="MWV" i] {
  --logo-scale: 2.1;
  max-width: 82%;
}

.client-logo-img[src*="indcon" i],
.client-logo-img[src*="Indcon" i] {
  --logo-scale: 2.1;
  max-width: 85%;
}

.client-logo-img[src*="monsanto" i],
.client-logo-img[src*="Monsanto" i] {
  --logo-scale: 1.85;
  max-width: 85%;
}

.client-logo-img[src*="yokohama" i],
.client-logo-img[src*="Yokohama" i] {
  --logo-scale: 1.8;
  max-width: 82%;
}

.client-logo-img[src*="swati" i],
.client-logo-img[src*="Swati" i] {
  --logo-scale: 1.6;
  max-height: 54px;
}

/* Target-calibrated clients: G R Engineering, Kryfs Power Components, Balaji Wires */
.client-logo--gr,
.client-logo-img[src*="grengineering" i],
.client-logo-img[src*="grengineering.png"] {
  --logo-scale: 1.45;
  max-width: 86%;
  max-height: 48px;
}

.client-logo--kryfs,
.client-logo-img[src*="kryfs" i],
.client-logo-img[src*="kryfs.jpg"] {
  --logo-scale: 1.75;
  max-width: 78%;
  max-height: 56px;
}

.client-logo--balaji,
.client-logo-img[src*="balaji" i],
.client-logo-img[src*="balaji.png"] {
  --logo-scale: 1;
  max-width: 62%;
  max-height: 36px;
}

.client-logo-img[src*="doms" i],
.client-logo-img[src*="DOMS" i] {
  max-width: 60%;
  max-height: 40px;
}

.client-logo-img[src*="linc" i],
.client-logo-img[src*="Linc" i] {
  max-width: 60%;
  max-height: 38px;
}

.client-logo-img[src*="hindustan" i],
.client-logo-img[src*="Hindustan" i] {
  max-height: 48px;
  max-width: 68%;
}

.client-logo-img[src*="waaree" i],
.client-logo-img[src*="Waaree" i] {
  max-height: 40px;
  max-width: 70%;
}

.client-logo-img[src*="mehali" i],
.client-logo-img[src*="Mehali" i] {
  max-height: 40px;
  max-width: 70%;
}

.client-logo-img[src*="creative" i],
.client-logo-img[src*="Creative" i] {
  max-width: 72%;
  max-height: 44px;
}

.client-logo-img[src*="supreme" i],
.client-logo-img[src*="Supreme" i] {
  max-height: 44px;
  max-width: 72%;
}

.client-logo-img[src*="ponds" i],
.client-logo-img[src*="Ponds" i] {
  max-height: 38px;
  max-width: 70%;
}

.client-cell:hover .client-logo-img {
  opacity: 1;
  transform: scale(calc(var(--logo-scale) * 1.04));
}

.client-logo-name {
  font-family: "Helvetica" !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  /* text-transform: uppercase; */
  color: #767676;
  opacity: 0.85;
  transition:
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  line-height: 1.35;
  display: block;
}

.client-cell:hover .client-logo-name {
  opacity: 1;
  color: #242426;
}

/* For clients without logo files - clean Swiss typographic presentation */
.client-cell-text {
  padding: 32px 20px;
}

.client-text-name {
  font-family: "Helvetica" !important;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #242426;
  text-align: center;
  line-height: 1.35;
  transition: color 0.35s ease;
}

.client-cell-text:hover .client-text-name {
  color: #111111;
}



/* Responsive grid overrides for both directory and homepage */
@media (max-width: 1024px) {
  .clients-grid,
  #clients .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  /* =========================================
   CLIENTS PAGE — MOBILE
   SAFE LOGO FIT — NO CROPPING
   ========================================= */

  .clients-grid,
  #clients .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-cell {
    min-height: 152px;
    padding: 22px 12px 18px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .client-logo-wrapper {
    width: 100%;
    height: 64px;
    margin-bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
}

.client-logo-img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 130px !important;
    max-height: 54px !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 auto !important;
    transform: none !important;
}
  /* Logo name */
  .client-logo-name {
    width: 100%;
    font-size: 0.625rem;
    text-align: center;
  }

  /* Text-only clients */
  .client-text-name {
    font-size: 0.8125rem;
    text-align: center;
  }
  /* ==================================================
   CLIENTS PAGE — WORK CULTURE / MISSION SECTION
   MOBILE ONLY
   HTML UNTOUCHED / DESKTOP UNTOUCHED
   ================================================== */

  /* Grey mission statement box */
  .clients-grid + .reveal-item {
    margin-top: 48px !important;
    padding: 32px 22px !important;
  }

  /* WORK CULTURE & INTEGRITY */
  .clients-grid + .reveal-item .label-caps {
    font-size: 0.72rem !important;
    line-height: 1.4;
    letter-spacing: 0.16em;
    margin-bottom: 18px !important;
  }

  /* Main mission quote */
  .clients-grid + .reveal-item .sub-title {
        font-size: 1rem !important;
    line-height: 1.35 !important;
    /* font-weight: 100; */
    /* letter-spacing: -0.025em; */
    margin-bottom: 24px !important;
  }

  /* ARCHITECTS' NOOK MISSION STATEMENT */
  .clients-grid + .reveal-item .mono-meta {
    font-size: 0.72rem !important;
    line-height: 1.5;
    letter-spacing: 0.08em;
  }

  /* Return homepage area */
  .center-btn-wrapper {
    margin-top: 40px !important;
    width: 100%;
  }

  /* Return homepage button */
  .center-btn-wrapper .btn-editorial {
    width: 100%;
    max-width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 0.78rem;
    letter-spacing: 0.12em;
    padding: 16px 20px;
    box-sizing: border-box;
  }

  /* =========================================
   CONTACT PAGE — MOBILE
   ORDER: HERO → FORM → DETAILS → MAP
   ========================================= */

  /* =========================
   HERO
   ========================= */

  .contact-hero {
    padding-top: 90px !important;
    padding-bottom: 28px !important;
    margin: 0 !important;

    min-height: 0 !important;
    height: auto !important;
  }

  .contact-hero-title {
    font-family: "Helvetica" !important;
    font-size: clamp(2.75rem, 10vw, 3.6rem);
    font-weight: 300;
    line-height: 0.92;
    letter-spacing: -0.05em;
    font-weight: 700;

    margin: 0 !important;
    padding: 0;
  }

  /* =========================
   DIVIDER
   ========================= */

  /*
   The divider is inside its own .container.
   Remove desktop spacing from that wrapper
   on mobile.
*/

  .contact-hero + .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    min-height: 0 !important;
    height: auto !important;
  }

  .contact-divider {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* =========================
   CONTACT SECTION
   ========================= */

  .contact-page-section {
    padding-top: 28px !important;
    padding-bottom: 40px !important;
    margin: 0 !important;

    min-height: 0 !important;
    height: auto !important;
  }

  /* Remove unwanted desktop spacing */

  .contact-page-section > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* =========================
   MOBILE GRID
   ========================= */

  .contact-page-section .grid-12 {
    display: flex !important;
    flex-direction: column !important;

    width: 100%;
    max-width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;
  }

  /* =========================
   FORM — FIRST
   ========================= */

  .contact-right {
    order: 1 !important;

    width: 100%;
    max-width: 100%;

    margin: 0 !important;
    padding: 24px 16px;

    box-sizing: border-box;
  }

  #contact-enquiry-form {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Form Groups */

  .form-group {
    width: 100%;
    max-width: 100%;

    margin: 0 0 24px 0;
  }

  .form-group:last-of-type {
    margin-bottom: 24px;
  }

  /* Labels */

  .form-label {
    display: block;

    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.12em;

    margin: 0 0 9px 0;
  }

  /* Inputs */

  .form-input {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 52px;

    padding: 14px;

    font-size: 1rem;
    line-height: 1.4;

    box-sizing: border-box;
  }

  /* Textarea */

  textarea.form-input {
    width: 100%;
    min-height: 150px;

    resize: vertical;
  }

  /* Send Enquiry Button */

  .form-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;
    min-height: 58px;

    margin: 0;
    padding: 16px 18px;

    font-size: 0.8rem;
    letter-spacing: 0.16em;

    box-sizing: border-box;
  }

  /* =========================
   CONTACT LEFT WRAPPER
   ========================= */

  /*
   display: contents lets the contact-details
   wrapper and map participate directly in the
   parent flex ordering.
*/

  .contact-left {
    display: contents;
  }

  /* =========================
   CONTACT DETAILS — SECOND
   ========================= */

  /*
   Every direct child inside .contact-left
   except the map becomes the details section.
*/

  .contact-left > div:not(.map-container) {
    order: 2 !important;

    width: 100%;
    max-width: 100%;

    margin-top: 48px;
    padding: 0;

    box-sizing: border-box;
  }

  /* Contact Information Blocks */

  .contact-info-block {
    margin: 0 0 34px 0;
  }

  .contact-info-block:last-child {
    margin-bottom: 0;
  }

  /* Labels */

  .contact-label {
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.14em;

    margin: 0 0 12px 0;
  }

  /* Values */

  .contact-value {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;

    margin: 0;
  }

  /* Company Name */

  .contact-left .contact-info-block:first-child .contact-value {
    font-size: 1.15rem !important;
    line-height: 1.35 !important;
    font-weight: 600;
  }

  /* =========================
   GOOGLE MAP — THIRD
   ========================= */

  .contact-left > .map-container {
    order: 3 !important;

    display: block;

    width: 100%;
    max-width: 100%;
    height: 300px;

    margin: 48px 0 0 0 !important;
    padding: 0 !important;

    overflow: hidden;
    box-sizing: border-box;
  }

  .contact-left > .map-container iframe {
    display: block;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
  }

  /* =========================
   PREVENT MOBILE OVERFLOW
   ========================= */

  .contact-page-section,
  .contact-page-section .container,
  .contact-page-section .grid-12,
  .contact-right,
  .contact-left,
  .contact-left > div,
  .contact-right > div,
  .map-container,
  .form-group,
  .form-input,
  .form-submit-btn {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Prevent inputs / textarea from
   creating horizontal overflow */

  #contact-enquiry-form input,
  #contact-enquiry-form textarea,
  #contact-enquiry-form button {
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  .clients-grid,
  #clients .clients-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* CONTACT SECTION */
.contact-page-section {
  padding: var(--space-64) 0 var(--space-128);
  background-color: var(--bg-primary);
}

.contact-hero {
  padding: var(--space-128) 0 var(--space-64);
  background-color: var(--bg-primary);
}

.contact-hero-title {
  font-size: clamp(3.2rem, 5.2vw, 4.8rem);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: var(--space-32);
  font-family: Helvetica !important;
  text-align: justify;
  text-align-last: left;
}

.contact-hero-desc {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 700px;
}

.contact-divider {
  height: 1px;
  background-color: var(--border-color);
  width: 100%;
  margin-bottom: var(--space-64);
}

/* Inline Form Validation & Notice Styles */
.form-error-msg {
  display: none;
  color: #e03131;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: var(--space-8);
}

.input-error {
  border-color: #e03131 !important;
}

.form-submit-error {
  color: #e03131;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: var(--space-24);
}

.config-pending-notice {
  border: 1px solid var(--border-color);
  padding: var(--space-16);
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: var(--space-24);
}

.config-pending-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

/* Map responsive styling */
.map-container {
  margin-top: var(--space-64);
  border: 1px solid var(--border-color);
  width: 100%;
  height: 380px;
  position: relative;
  background-color: var(--bg-secondary);
}

.map-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.map-placeholder span {
  font-family: "Helvetica" !important;
}

.map-placeholder-sub {
  font-size: 0.65rem;
  margin-top: 8px;
  opacity: 0.7;
}

/* Success Card Editorial Confirmation */
.success-card {
  border: 1px solid var(--border-color);
  padding: var(--space-64);
  background-color: var(--bg-primary);
}

.contact-left {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-info-block {
  margin-bottom: var(--space-48);
}

.contact-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.contact-value {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-primary);
}

.contact-right {
  grid-column: span 7;
  background-color: var(--bg-primary);
  padding: var(--space-64);
  border: 1px solid var(--border-color);
}

.form-group {
  margin-bottom: var(--space-32);
}

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-12);
}

.form-input {
  width: 100%;
  padding: var(--space-16);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 1rem;
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  border-color: var(--hover-accent);
}

textarea.form-input {
  min-height: 140px;
  resize: vertical;
}

.form-submit-btn {
  width: 100%;
  padding: var(--space-24);
  background: #dcd9d4;
  color: var(--text-primary);
  font-size: 0.975rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  /* text-transform: uppercase; */
  border: 1px solid var(--text-primary);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.form-submit-btn:hover {
  background: var(--text-muted);
  color: var(--white);
}

/* FOOTER */
#footer {
  padding: var(--space-96) 0 var(--space-48);
  background-color: var(--bg-primary);
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-48);
  padding-bottom: var(--space-64);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-48);
}

.footer-col-1 {
  grid-column: span 5;
}

.footer-brand {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: var(--space-24);
}

.footer-intro {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: 400px;
  line-height: 1.6;
  font-family: "Helvetica" !important;
}

.footer-col-2 {
  grid-column: span 3;
}

.footer-col-3 {
  grid-column: span 4;
}

.footer-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-24);
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.footer-nav a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  /* text-transform: uppercase; */
  color: var(--text-secondary);
}

/* SCROLL REVEAL ANIMATIONS */
.reveal-item {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-item.in-view {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==================================================
   RESPONSIVE — TABLET (1024px and below)
   ================================================== */
@media (max-width: 1024px) {
  .container {
    padding: 0 var(--space-32);
  }

  .desktop-nav {
    display: none;
  }

  .header-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  #mobile-toggle-btn {
    display: flex;
    order: 1;
    padding-left: 20px;
    padding-right: 16px;
  }

  .logo-panel-right {
    order: 2;
    padding-left: 16px;
    padding-right: 20px;
    justify-content: flex-end;
  }

  .header-logo-img {
    height: 48px;
    max-height: 48px;
  }

  .design-series-grid,
  .finishes-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: auto;
    max-height: none;
    gap: 0;
  }

  .process-nav {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    height: auto;
  }

  .process-step-item {
    padding: 16px 24px;
    min-height: 52px;
  }

  .process-media-display {
    height: 380px;
    width: 100%;
  }

  .sectors-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-image-wrapper {
    grid-column: span 12;
    height: 450px;
    margin-bottom: var(--space-32);
  }

  .about-text-wrapper {
    grid-column: span 12;
    padding-left: 0;
  }

  .about-editorial-heading {
    grid-column: 1 / span 12;
    font-size: clamp(2.25rem, 3.8vw, 3.25rem);
    max-width: 100%;
  }

  .about-editorial-content {
    grid-column: 1 / span 12;
    max-width: 100%;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tekt-cta-box {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-32);
    padding: var(--space-48) var(--space-32);
  }

  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
  }

  .contact-left {
    grid-column: span 12;
    margin-bottom: var(--space-48);
  }

  .contact-right {
    grid-column: span 12;
    padding: var(--space-32);
  }

  .footer-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .footer-col-1,
  .footer-col-2,
  .footer-col-3 {
    grid-column: auto;
    width: 100%;
    max-width: 100%;
  }

  .practice-map-layout {
    grid-template-columns: 1fr;
    gap: var(--space-40);
    min-height: auto;
    padding: 32px 0;
  }

  .practice-india-map {
    width: min(100%, 650px);
    max-width: 100%;
    max-height: none;
    height: auto;
  }
}

/* ==================================================
   RESPONSIVE — MOBILE (768px and below)
   ================================================== */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-20);
  }

  .section-title {
   font-size: clamp(1.9rem, 6.5vw, 2.6rem);
    font-weight: 400;
    font-family: Helvetica !important;
    margin-bottom: var(--space-32);
  }

  #about,
  #about.about-editorial-section {
    padding: 2rem 0 3rem;
  }
  .about-editorial-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 4.5vw, 2.5rem);
  }

  .about-editorial-heading {
    width: 100%;
    font-size: clamp(1.9rem, 6.5vw, 2.6rem);
    font-weight: 400;
    font-family: Helvetica !important;
    line-height: 1.15;
    margin-bottom: 0.5rem;
  }
  .about-editorial-content {
    width: 100%;
  }

  .about-lead-paragraph {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
  }

  .about-supporting-paragraph,
  .about-scope-paragraph {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
  }

  .about-scope-paragraph {
    margin-bottom: 0;
  }

  .about-editorial-footnote {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
  }

  .about-foot-divider {
    display: none;
  }

  /* Process Stepper Section */
  #process {
    padding: var(--space-48) 0;
  }

  .process-media-display {
    height: 280px;
  }

  .process-step-item {
    padding: 14px 18px;
  }

  .process-step-title {
    font-size: 1.05rem;
  }

  /* Projects Section */
  #projects {
    padding: var(--space-64) 0;
  }

  .projects-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--space-32);
  }

  .project-image-container {
    height: clamp(240px, 50vw, 340px);
  }

  .project-info {
    padding: var(--space-24);
  }

  .project-title {
    font-size: 1.35rem;
  }

  /* Clients Section */
  #clients {
    padding: var(--space-64) 0;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: var(--space-48);
  }

  /* ==========================================================
   TEKT CTA / OUR WORK — MOBILE ONLY
   ========================================================== */

  .tekt-cta-section {
    padding: var(--space-64) 0;
  }

  .tekt-cta-box {
    padding: 32px 24px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* OUR WORK. */
  .tekt-cta-title {
    font-size: clamp(1.9rem, 6.5vw, 2.6rem);
    font-weight: 400;
    font-family: Helvetica !important;
  }

  /* A CLOSER LOOK AT */
  .tekt-cta-label {
    font-size: 0.85rem;
    line-height: 1.3;
    letter-spacing: 0.18em;
  }

  /* Description paragraph */
  .tekt-cta-text {
    font-size: 1.05rem;
    line-height: 1.55;
  }
  /* Portfolio Button */
  .tekt-cta-btn {
    width: 100%;
    min-height: 60px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 32px;
    padding: 18px 20px;

    font-size: 0.9rem;
    text-align: center;
  }
  /* ==========================================================
   FOOTER — MOBILE ONLY
   ========================================================== */

  #footer {
    padding: 56px 0 32px;
  }

  /* Main footer content */
  .footer-top {
    padding-bottom: 48px;
    margin-bottom: 28px;
  }

  /* ARCHITECTS' NOOK */
  .footer-brand {
    font-size: 1.5rem;
    letter-spacing: 0.18em;
    line-height: 1.2;
    margin-bottom: 20px;
  }

  /* Bottom copyright + DemuRup */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    font-size: 0.875rem;
    line-height: 1.5;
  }
  /* Footer normal text — slightly stronger on mobile */
  #footer p,
  #footer a,
  #footer li,
  #footer address {
    font-weight: 600;
    font-family: "Helvetica" !important;
  }
}

/* ==========================================================
   FLAGSHIP PROJECTS — MOBILE TYPOGRAPHY ONLY
   Only increases text size. No layout changes.
   ========================================================== */

@media (max-width: 768px) {
  /* "ILLUSTRIOUS ARCHIVES 1969 — 2026" */
  #projects .mono-meta {
    font-size: 1rem; /* 16px */
    line-height: 1.3;
    font-family: "Helvetica" !important;
  }

  /* COMMERCIAL / RESIDENTIAL / etc. */
  #projects .project-category {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.3;
    font-family: "Helvetica" !important;
  }

  /* MAIN PROJECT NAME */
  #projects .project-title {
    font-size: 1.375rem; /* 22px */
    line-height: 1.18;
    font-family: "Helvetica" !important;
  }

  /* DAMAN, INDIA / VAPI, GUJARAT, INDIA */
  #projects .project-location {
    font-size: 1.0625rem; /* 17px */
    line-height: 1.35;
    font-family: "Helvetica" !important;
  }
}

/* ==================================================
   RESPONSIVE — SMALL MOBILE (480px and below)
   ================================================== */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-16);
  }

  .projects-page-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #mobile-toggle-btn {
    padding-left: 14px;
    padding-right: 10px;
  }

  .logo-panel-right {
    padding-left: 10px;
    padding-right: 14px;
  }

  .header-logo-img {
    height: 40px;
    max-height: 40px;
  }

  .display-title {
    font-size: clamp(2rem, 8.5vw, 2.75rem);
    font-weight: 400;
  }

  .section-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .process-media-display {
    height: 220px;
  }

  .process-step-item {
    padding: 12px 14px;
  }

  .process-step-title {
    font-size: 0.95rem;
  }

  .project-image-container {
    height: 220px;
  }

  .project-info {
    padding: 16px;
  }

  .project-title {
    font-size: 1.2rem;
  }

  .sectors-grid {
    grid-template-columns: 1fr;
  }

  .clients-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .client-cell {
    min-height: 140px;
    padding: 18px 10px 14px;
  }

  .client-logo-wrapper {
    height: 52px;
    margin-bottom: 8px;
  }

  .client-logo-img {
    max-height: 36px;
  }

  .client-logo-name {
    font-size: 0.58rem;
  }

  .contact-right {
    padding: 20px 16px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-submit-btn {
    padding: 16px 20px;
    min-height: 48px;
  }

  .btn-editorial,
  .btn-editorial-outline {
    padding: 16px 24px;
    font-size: 0.8125rem;
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
  }
}

/* ==================================================
   RESPONSIVE — VERY SMALL MOBILE (360px and below)
   ================================================== */
@media (max-width: 360px) {
  .container {
    padding: 0 12px;
  }

  .projects-page-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .header-logo-img {
    height: 36px;
    max-height: 36px;
  }

  .about-editorial-heading {
    font-size: 1.45rem;
  }

  .project-title {
    font-size: 1.1rem;
  }

  .tekt-cta-title {
    font-size: clamp(1.9rem, 6.5vw, 2.6rem);
    font-weight: 400;
    font-family: Helvetica !important;
  }

  .tekt-cta-box {
    padding: 24px 14px;
  }

  .tekt-cta-btn {
    padding: 14px 12px;
    font-size: 0.78rem;
    min-height: 50px;
  }

  .btn-editorial,
  .btn-editorial-outline {
    padding: 14px 14px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }

  .client-cell {
    min-height: 130px;
    padding: 14px 4px 12px;
  }

  .story-bg-grey .origin-stats-strip > div {
    padding: 16px 4px 18px !important;
  }

  .story-bg-grey .origin-stat-num {
    font-size: 1.5rem;
  }

  .story-bg-grey .origin-stat-lbl {
    font-size: 0.48rem;
  }
}

/* ==========================================================================
   SWISS EDITORIAL PROJECTS NAVIGATION DROPDOWN (PROPORTIONATE REFINEMENT)
   ========================================================================== */

.nav-panel-cell.has-dropdown {
  position: relative;
  overflow: visible;
}

.projects-editorial-panel {
  position: absolute;
  top: 100%;
  left: -1px;
  width: 340px;
  background-color: #ffffff;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  border-top: none;
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(0.985);
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 260ms;
  pointer-events: none;
  z-index: 1001;
  border-radius: 0px !important;
  box-shadow: none;
}

.nav-panel-cell.has-dropdown:hover .projects-editorial-panel,
.nav-panel-cell.has-dropdown:focus-within .projects-editorial-panel,
.projects-editorial-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.editorial-panel-item {
  height: 60px;
  border-top: 1px solid #e6e6e6;
  display: flex;
  align-items: center;
  position: relative;
  background: #ffffff;
  margin: 0;
  padding: 0;
}

.editorial-panel-link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 24px;
  padding-right: 24px;
  font-family: "Helvetica" !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111111;
  text-decoration: none;
  position: relative;
  background: transparent;
  transition:
    padding-left 250ms cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 250ms cubic-bezier(0.22, 1, 0.36, 1),
    color 250ms ease;
}

.editorial-panel-link:hover,
.editorial-panel-link:focus {
  padding-left: 36px;
  letter-spacing: 0.06em;
  color: #000000;
  outline: none;
}

.editorial-active-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0%;
  background-color: #111111;
  transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.editorial-panel-link.active .editorial-active-bar {
  height: 100%;
}

.editorial-panel-link.active {
  font-weight: 700;
  color: #111111;
}

@media (min-width: 1600px) {
  .projects-editorial-panel {
    width: 360px;
  }
}

@media (max-width: 1024px) {
  .projects-editorial-panel {
    width: 320px;
  }

  .editorial-panel-item {
    height: 56px;
  }

  .editorial-panel-link {
    font-size: 16px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .editorial-panel-link:hover,
  .editorial-panel-link:focus {
    padding-left: 30px;
  }
}

@media (max-width: 1024px) {
  .projects-editorial-panel {
    display: none !important;
  }
}

/* MOBILE DROPDOWN ACCORDION */
.mobile-nav-has-dropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.mobile-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
}

.mobile-dropdown-arrow {
  font-size: 16px;
  transition: transform 250ms ease;
  display: inline-block;
}

.mobile-nav-has-dropdown.open .mobile-dropdown-arrow {
  transform: rotate(180deg);
}

.mobile-dropdown-menu {
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 0 6px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
}

.mobile-nav-has-dropdown.open .mobile-dropdown-menu {
  display: flex;
}

.mobile-drawer-sublink {
  font-family: "Helvetica" !important;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 14px;
  display: inline-block;
  transition: color 200ms ease;
}

.mobile-drawer-sublink:hover,
.mobile-drawer-sublink.active {
  color: var(--text-primary);
  font-weight: 700;
}

/* ==========================================================================
   PROJECTS CATEGORY FILTER TABS (SWISS MINIMAL EDITORIAL DESIGN)
   ========================================================================== */

.projects-category-nav {
  width: 100%;
  margin-bottom: 48px;
  border-bottom: 1px solid #d9d9d9;
}

.category-tabs-scroll-container {
  display: flex;
  gap: 36px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0;
}

.category-tabs-scroll-container::-webkit-scrollbar {
  display: none;
}

.category-tab {
  background: transparent;
  border: none;
  outline: none;
  font-family: "Helvetica" !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666666;
  padding: 14px 0;
  position: relative;
  cursor: pointer;
  transition: color 250ms cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  border-radius: 0px !important;
}

.category-tab::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #111111;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.category-tab:hover {
  color: #111111;
}

.category-tab.active {
  color: #111111;
}

.category-tab.active::after {
  transform: scaleX(1);
}

/* PROJECT CARD FILTER ANIMATION */
.project-card {
  transition:
    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.project-card.is-hidden {
  display: none !important;
  opacity: 0;
  transform: translateY(20px);
}

/* ==========================================================================
   PORTFOLIO SPECIFICATION MODAL & LEADERSHIP CREDENTIALS STYLES
   ========================================================================== */
.project-card-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-specs-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.spec-tag {
  font-weight: 700;
  color: var(--text-primary);
}

/* MODAL / LIGHTBOX STYLES */
#project-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}

#project-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background: #ffffff;
  border: 1px solid #111111;
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: #111111;
  color: #ffffff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}

.modal-close-btn:hover {
  background: #333333;
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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

.modal-media {
  width: 100%;
  height: 100%;
  min-height: 380px;
  background: #f5f5f5;
  position: relative;
}

.modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.modal-header-meta {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #666666;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.modal-title {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.modal-location {
  font-size: 0.9375rem;
  color: #666666;
  margin-bottom: 24px;
}

.modal-specs-table {
  width: 100%;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 24px;
  padding: 16px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.spec-item-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #888888;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.spec-item-val {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111111;
}

.modal-description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #333333;
}

/* ==========================================================================
   WHATSAPP FLOATING BUTTON (ORIGINAL AUTHENTIC LOGO + SOFT GLOW)
   ========================================================================== */
#whatsapp-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 990;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 250ms ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12))
    drop-shadow(0 0 10px rgba(37, 211, 102, 0.25));
}

#whatsapp-float:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15))
    drop-shadow(0 0 14px rgba(37, 211, 102, 0.4));
}

#whatsapp-float svg {
  width: 48px;
  height: 48px;
  display: block;
}

@media (max-width: 768px) {
  #whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }

  #whatsapp-float svg {
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   ABOUT PAGE EDITORIAL STORYTELLING SYSTEM (SWISS ARCHITECTURAL MONOGRAPH)
   ========================================================================== */

.about-story-page {
  padding-top: 68px;
  /* Offset fixed header */
  padding-bottom: 0;
  font-family: "Helvetica" !important;
}

/* Full-width Canvas Section Wrappers for Background Rhythm */
.story-section-full {
  width: 100%;
  padding: 100px 0;
  border-bottom: 1px solid var(--border-color);
  position: relative;
  font-family: "Helvetica" !important;
}

.story-bg-white {
  background-color: var(--bg-primary);
}

.story-bg-grey {
  background-color: var(--bg-secondary);
}

/* 1. Hero Monograph Section */
.story-hero-section {
  padding-top: 120px;
  padding-bottom: 120px;
  font-family: "Helvetica" !important;
}

.story-hero-wrapper {
  padding: 0;
}

.story-hero-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-family: "Helvetica" !important;
}

.story-hero-title {
  font-size: clamp(1.85rem, 6.5vw, 5.75rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 40px;
  max-width: 1200px;
  font-family: "Helvetica" !important;
}

.story-hero-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0;
  font-family: "Helvetica" !important;
}

.story-hero-lead {
  max-width: 900px;
  margin: 0 auto;

  font-family: "Helvetica" !important;
  font-size: clamp(1.375rem, 5vw, 1.8rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;

  text-align: center;
  color: var(--text-primary);
}
.story-hero-meta-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 1px solid var(--border-color);
  padding-left: 32px;
  font-family: "Helvetica" !important;
}

.story-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8125rem;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: "Helvetica" !important;
}

.story-meta-label {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: "Helvetica" !important;
  color: var(--text-secondary);
}

.story-meta-val {
  color: var(--text-primary);
  font-family: "Helvetica" !important;
  font-weight: 400;
}

/* 2. Common Chapter Headers */
.chapter-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.chapter-title {
  font-size: clamp(2.75rem, 10vw, 3.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  /* text-transform: uppercase; */
  color: var(--text-primary);
  /* margin-bottom: 20px; */
}

/* 3. Origin Story Section (Heavy Left -> Light Right) */
.origin-layout {
  display: grid;
  grid-template-columns: 6.5fr 5.5fr;
  gap: var(--space-64);
  align-items: center;
}

.origin-narrative {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.origin-lead-p {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  text-align: justify;
  text-align-last: left;
  width: 100%;
}

.origin-body-p {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  text-align: justify;
  text-align-last: left;
  width: 100%;
}

.origin-stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.origin-stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 6px;
}

.origin-stat-lbl {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  /* text-transform: uppercase; */
  color: var(--text-secondary);
}

/* Museum-Grade Showcase Image Frame */
.editorial-showcase-frame {
  position: relative;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  overflow: hidden;
}

.editorial-showcase-img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  max-height: 480px;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(105%);
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s ease;
}

.editorial-showcase-frame:hover .editorial-showcase-img {
  transform: scale(1.02);
  filter: grayscale(80%) contrast(110%);
}

.editorial-showcase-caption {
  padding: 14px 20px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  /* text-transform: uppercase; */
}

/* 4. Leadership Profiles Section */
.people-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
  margin-top: 40px;
}

.person-card {
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease;
  position: relative;
}

.person-card:hover {
  border-color: #111111;
}

.person-image-container {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #efefef;
  position: relative;
  border-bottom: 1px solid var(--border-color);
}

.person-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(105%);
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s ease;
}

.person-card:hover .person-image {
  transform: scale(1.03);
  filter: grayscale(0%) contrast(105%);
}

.person-info {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.person-role {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  /* text-transform: uppercase; */
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.person-name {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.15;
}

.person-edu {
  font-size: 0.8125rem;
  color: #888888;
  font-weight: 400;
  margin-bottom: 16px;
  line-height: 1.4;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.person-bio {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.65;
  color: var(--text-secondary);
  font-weight: 400;
  flex-grow: 1;
  text-align: justify;
  text-align-last: left;
  width: 100%;
}

.person-accent-bar {
  width: 0%;
  height: 2px;
  background-color: var(--text-primary);
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.person-card:hover .person-accent-bar {
  width: 100%;
}

/* 5. Multidisciplinary Practice Section (Heavy Left -> Light Right Showcase) */
.discipline-layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-64);
  align-items: flex-start;
  margin-top: 32px;
}

.disciplines-list {
  border-top: 1px solid var(--border-color);
}

.discipline-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  padding: 24px 0;
  border-bottom: 1px solid var(--border-color);
  gap: 16px;
  align-items: baseline;
  transition: padding-left 0.25s ease;
}

.discipline-row:hover {
  padding-left: 8px;
}

.disc-num {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.disc-name {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.disc-desc-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.disc-desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.disc-tags {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999999;
}

/* 6. How We Work (Methodology Sequence) */
.process-story-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
  margin-top: 40px;
}

.process-story-step {
  padding: 32px 24px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.process-story-step:hover {
  border-color: var(--text-primary);
  transform: translateY(-4px);
}

.step-num-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.step-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.step-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* 7. Philosophy & Trust Section (Heavy Left Monument -> Light Right Content) */
.philosophy-layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-64);
  align-items: flex-start;
}

.quote-monument {
   font-size: clamp(1.375rem, 5vw, 1.8rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 32px;
  text-align: justify;
  text-align-last: left;
  width: 100%;
}

.quote-author-meta {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.trust-split-column {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-left: 1px solid var(--border-color);
  padding-left: 40px;
}

.trust-block-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* text-transform: uppercase; */
  color: var(--text-primary);
  margin-bottom: 10px;
}

.trust-block-p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
  text-align: justify;
  text-align-last: left;
  width: 100%;
}

/* 8. Vision & Mission Split Panel */
.vision-mission-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-color);
  margin-top: 32px;
}

.vision-box,
.mission-box {
  padding: 56px 44px;
}

.vision-box {
  border-right: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.mission-box {
  background: var(--bg-secondary);
}

.vm-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.vm-title {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.15;
}

.vm-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.vm-desc:last-child {
  margin-bottom: 0;
}

/* 9. Timeline Section (Typographic & Chronology) */
.timeline-track-wrap {
  margin-top: 32px;
  border-top: 1px solid var(--border-color);
}

.timeline-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  padding: 32px 0;
  border-bottom: 1px solid var(--border-color);
  align-items: baseline;
  transition: background-color 0.2s ease;
}

.timeline-year-text {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1;
}

.timeline-content-text {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 800px;
}

/* 10. Contemporary Practice & Geography (Heavy Left -> Light Right Showcase) */
.contemporary-layout {
  display: grid;
  grid-template-columns: 6.5fr 5.5fr;
  gap: var(--space-64);
  align-items: flex-start;
  margin-top: 32px;
}

.geo-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 32px;
}

.geo-badge-card {
  padding: 20px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  transition: border-color 0.2s ease;
}

.geo-badge-card:hover {
  border-color: var(--text-primary);
}

.geo-badge-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.geo-badge-name {
  font-size: 0.9375rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.geo-badge-desc {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.culture-box {
  padding: 32px 28px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

/* =========================================================
   ABOUT PAGE — INDIA PROJECT MAP
   ========================================================= */

/* =========================================================
   ABOUT PAGE — PRACTICE / INDIA MAP SECTION
   ========================================================= */

/* =========================================================
   ABOUT — PRACTICE MAP / FIXED VIEWPORT DESKTOP
   ========================================================= */

.practice-map-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: clamp(50px, 6vw, 100px);

  width: 100%;
  min-height: calc(100vh - 110px);
  padding: 40px 0;
  box-sizing: border-box;
}

/* LEFT — CONTENT */

.practice-map-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.practice-map-content .chapter-title {
  margin: 0 0 36px 0;
  max-width: 620px;
}

.practice-map-content .body-large {
  margin: 0;
  max-width: 580px;

  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.6;
}

/* RIGHT — INDIA MAP */

.practice-map-visual {
  width: 100%;
  height: calc(100vh - 150px);

  display: flex;
  justify-content: center;
  align-items: center;
}

.practice-india-map {
  display: block;

  width: min(140%, 1150px);
  height: auto;

  max-width: none;
  max-height: calc(120vh - 120px);

  object-fit: contain;
}
/* =========================================================
   MOBILE TYPOGRAPHY — FINAL ADJUSTMENT
   ========================================================= */

/* Intro paragraph under A PRACTICE STILL EVOLVING */
.contemporary-layout .body-large {
  width: 100%;
  max-width: 100%;

  font-size: 1.18rem !important; /* ~18.9px */
  line-height: 1.55 !important;
  font-weight: 400;

  letter-spacing: -0.015em;
  color: #111111;
  font-family: "Helvetica" !important;
  margin: 0 0 38px 0 !important;
}

/* PEOPLE & THE FUTURE small label */
.culture-box .label-caps {
  font-size: 0.78rem !important;
  line-height: 1.3;

  font-weight: 300;
  letter-spacing: 0.18em;

  /* text-transform: uppercase; */
  color: #626262 !important;
  font-family: "Helvetica" !important;
  margin-bottom: 14px !important;
}

/* A rewarding environment where talent thrives. */
.culture-box h3 {
  max-width: 100%;

  font-size: 1.55rem !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;

  letter-spacing: -0.035em;
  color: #111111 !important;
  font-family: "Helvetica" !important;
  margin: 0 0 20px 0 !important;
}

/* PEOPLE & THE FUTURE paragraphs */
.culture-box .body-regular {
  width: 100%;
  max-width: 100%;

  font-size: 1.08rem !important; /* ~17.3px */
  line-height: 1.58 !important;
  font-weight: 400;

  letter-spacing: -0.01em;
  color: #5f5f5f;
  font-family: "Helvetica" !important;
  margin: 0 0 18px 0 !important;
}

.culture-box .body-regular:last-child {
  margin-bottom: 0 !important;
}
/* 11. Closing Monograph Statement */
.story-closing-wrapper {
  padding: 48px 0;
  text-align: center;
}

.story-closing-title {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.story-closing-sub {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 auto 40px;
}

.story-closing-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}


@media (max-width: 768px) {

  .story-closing-actions .btn-editorial,
  .story-closing-actions .btn-editorial-outline {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
  }

  .story-closing-sub{
    text-align: justify !important;
    text-align-last: left;
  }



}

/* Responsive Adjustments for About Page */
@media (max-width: 1024px) {
  .story-section-full {
    padding: 72px 0;
  }

  .story-hero-section {
    padding-top: 28px;
    padding-bottom: 56px;
  }

  .story-hero-grid,
  .origin-layout,
  .discipline-layout,
  .philosophy-layout,
  .contemporary-layout {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }

  .story-hero-meta-list {
    border-left: none;
    border-top: 1px solid var(--border-color);
    padding-left: 0;
    padding-top: 24px;
  }

  .trust-split-column {
    border-left: none;
    border-top: 1px solid var(--border-color);
    padding-left: 0;
    padding-top: 32px;
  }

  .people-grid {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }

  .person-card {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }

  .process-story-grid {
    grid-template-columns: 1fr 1fr;
  }

  .vision-mission-panel {
    grid-template-columns: 1fr;
  }

  .vision-box {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }
}

@media (max-width: 768px) {
  .story-section-full {
    padding: 56px 0;
  }
  /* ==========================================================
   ABOUT HERO — PREMIUM MOBILE LAYOUT
   ========================================================== */

  .story-hero-section {
    padding-top: 42px;
    padding-bottom: 72px;
  }

  .story-hero-wrapper {
    width: 100%;
  }

  /* ARCHITECTS' NOOK // STUDIO MONOGRAPH & HERITAGE */

  /* ABOUT — OPENING */
  .story-hero-section {
    min-height: 60svh;
    padding: 0;
    background: #ffffff;

    display: flex;
    align-items: center;
  }

  .story-hero-wrapper {
    width: 100%;
    min-height: 60svh;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .story-hero-grid {
    width: 100%;
    display: block;
  }

  .story-hero-grid::before {
    display: none;
  }

  .story-hero-lead {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    font-family: Helvetica !important;
    font-size: clamp(1.375rem, 5vw, 1.8rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.015em;
    text-align: justify;
    text-align-last: center;
    color: #111;
  }

  /* WHERE IT BEGAN */
  .story-bg-grey {
    padding-top: 52px;
  }

  .chapter-title {
   font-size: clamp(1.9rem, 6.5vw, 2.6rem);
    font-weight: 400;
    font-family: Helvetica !important;
    line-height: 0.9;
    letter-spacing: -0.055em;
    margin-bottom: 38px;
  }

  /* ORIGIN TEXT */
  .origin-layout {
    display: block;
  }

  .origin-narrative {
    width: 100%;
    gap: 22px;
  }

  
  .origin-body-p {
    width: 100%;
    max-width: none;
    font-family: "Helvetica" !important;
    font-size: 1rem;
    line-height: 1.58;
    letter-spacing: -0.015em;
    font-weight: 400;
    text-align: justify;
    text-align-last: left;
  }

  /* =========================================================
   ABOUT PAGE — WHERE IT BEGAN
   FINAL MOBILE ONLY VERSION

   HTML: UNTOUCHED
   DESKTOP: UNTOUCHED

   MOBILE ORDER:
   1. TEXT
   2. IMAGE + CAPTION
   3. 1969 | 55+ | 2007
   ========================================================= */

  /* =========================================================
   SECTION
   ========================================================= */

  .story-bg-grey {
    padding-top: 72px;
    padding-bottom: 0;
  }

  /* Mobile width only */

  .story-bg-grey > .container {
    width: 100%;
    max-width: none;

    padding-left: 18px;
    padding-right: 18px;
  }

  /* =========================================================
   TITLE
   ========================================================= */

  .story-bg-grey .chapter-title {
    width: 100%;
    max-width: 310px;

   font-size: clamp(1.9rem, 6.5vw, 2.6rem);
    font-weight: 400;
    font-family: Helvetica !important;
    line-height: 0.89;

    /* font-weight: 700; */
    letter-spacing: -0.055em;

    color: #111111;

    margin: 0 0 48px 0;
  }

  /* =========================================================
   MOBILE LAYOUT
   ========================================================= */

  /*
   origin-layout becomes the master mobile grid.

   Existing HTML structure remains untouched.
*/

  .story-bg-grey .origin-layout {
    display: grid !important;

    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;

    width: 100%;

    gap: 0;
  }

  /*
   IMPORTANT:
   On desktop origin-narrative remains a normal element.

   ONLY on mobile we visually remove its wrapper so its
   paragraphs + stats can participate in origin-layout grid.

   This lets us move the image BEFORE the stats without
   touching About.html.
*/

  .story-bg-grey .origin-narrative {
    display: contents !important;
  }

  /* =========================================================
   TEXT
   ========================================================= */

  /* Intro paragraph */

  .story-bg-grey  {
    grid-column: 1;

    width: 100%;
    max-width: 100%;

    font-size: 1.18rem;
    line-height: 1.55;

    font-weight: 400;
    letter-spacing: -0.018em;

    color: #111111;

    margin: 0 0 34px 0;
  }

  /* Supporting paragraphs */

  .story-bg-grey .origin-body-p {
    grid-column: 1;

    width: 100%;
    max-width: 100%;

    font-size: 1.05rem;
    line-height: 1.62;

    font-weight: 400;
    letter-spacing: -0.01em;

    color: #626262;

    margin: 0 0 30px 0;
  }

  /* Last paragraph → space before image */

  .story-bg-grey .origin-body-p:last-of-type {
    margin-bottom: 42px;
  }

  /* =========================================================
   IMAGE
   ========================================================= */

  /*
   Image naturally appears after the paragraphs.

   Because origin-narrative uses display: contents,
   the stats can now be ordered AFTER this element.
*/

  .story-bg-grey .editorial-showcase-frame {
    display: flex !important;
    flex-direction: column;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    border: 0;

    background: #ffffff;

    order: 2;
  }

  /* Existing image */

  .story-bg-grey .editorial-showcase-img {
    display: block;

    width: 100%;
    max-width: none;

    height: auto;

    aspect-ratio: 1.18 / 1;

    object-fit: cover;

    margin: 0;
    padding: 0;
  }

  /* =========================================================
   IMAGE CAPTION
   ========================================================= */

  .story-bg-grey .editorial-showcase-caption {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    gap: 12px;

    padding: 14px 10px 16px;

    background: #ffffff;

    font-size: 0.62rem;
    line-height: 1.35;

    font-weight: 500;

    letter-spacing: 0.09em;
    /* text-transform: uppercase; */

    color: #555555;
  }

  .story-bg-grey .editorial-showcase-caption span:first-child {
    display: block;

    max-width: 62%;

    text-align: left;
  }

  .story-bg-grey .editorial-showcase-caption span:last-child {
    display: block;

    max-width: 36%;

    text-align: right;

    white-space: nowrap;
  }

  /* =========================================================
   STATISTICS
   IMAGE → STATS
   ========================================================= */

  .story-bg-grey .origin-stats-strip {
    order: 3;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    grid-template-rows: auto !important;

    column-gap: 0 !important;
    row-gap: 0 !important;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border-top: 1px solid rgba(0, 0, 0, 0.14);
    border-bottom: 0;

    background: #ffffff;
  }

  /* =========================================================
   RESET OLD STAT POSITIONING
   ========================================================= */

  .story-bg-grey .origin-stats-strip > div {
    display: block !important;

    position: relative;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    padding: 18px 9px 21px !important;

    flex: none !important;

    text-align: left;
  }

  /* =========================================================
   FORCE ALL 3 STATS INTO ONE ROW
   ========================================================= */

  .story-bg-grey .origin-stats-strip > div:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .story-bg-grey .origin-stats-strip > div:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .story-bg-grey .origin-stats-strip > div:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  /* =========================================================
   VERTICAL DIVIDERS
   ========================================================= */

  .story-bg-grey .origin-stats-strip > div:nth-child(1)::after,
  .story-bg-grey .origin-stats-strip > div:nth-child(2)::after {
    content: "";

    position: absolute;

    top: 17px;
    right: 0;

    width: 1px;
    height: 48px;

    background: rgba(0, 0, 0, 0.14);
  }

  /* No divider after 2007 */

  .story-bg-grey .origin-stats-strip > div:nth-child(3)::after {
    content: none !important;
  }

  /* =========================================================
   STAT NUMBERS
   ========================================================= */

  .story-bg-grey .origin-stat-num {
    font-size: 1.75rem;
    line-height: 0.95;

    font-weight: 700;
    letter-spacing: -0.045em;

    color: #111111;

    margin: 0 0 8px 0;
  }

  /* =========================================================
   STAT LABELS
   ========================================================= */

  .story-bg-grey .origin-stat-lbl {
    width: 100%;
    max-width: none !important;

    font-size: 0.52rem;
    line-height: 1.3;

    font-weight: 500;

    letter-spacing: 0.08em;
    /* text-transform: uppercase; */

    color: #555555;

    white-space: normal;
  }
  .vision-box,
  .mission-box {
    padding: 32px 20px;
  }

  /* =========================================================
   ABOUT PAGE — A PRACTICE STILL EVOLVING
   MOBILE ONLY
   HTML UNTOUCHED / DESKTOP UNTOUCHED
   ========================================================= */

  /* ---------------------------------------------------------
   KEEP OTHER PROCESS GRID SINGLE COLUMN
   --------------------------------------------------------- */

  .process-story-grid {
    grid-template-columns: 1fr;
  }

  /* ---------------------------------------------------------
   MAIN SECTION LAYOUT
   --------------------------------------------------------- */

  .contemporary-layout {
    display: block;
    width: 100%;
  }

  /* ---------------------------------------------------------
   INTRO PARAGRAPH
   --------------------------------------------------------- */

  .contemporary-layout .body-large {
    width: 100%;
    max-width: 100%;
    font-size: 1.08rem !important;
    line-height: 1.58 !important;
    font-weight: 400;
    letter-spacing: -0.015em;
    margin-bottom: 38px !important;
  }

  /* =========================================================
   OUR FOOTPRINT — 2 × 2 GRID
   ========================================================= */

  .geo-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 0 0 30px 0;
  }

  /* ---------------------------------------------------------
   LOCATION CARDS
   --------------------------------------------------------- */

  .geo-badge-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    width: 100%;
    min-width: 0;
    min-height: 145px;

    padding: 20px 16px;

    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.16);

    box-shadow: none;
    border-radius: 0;

    margin: 0;
  }

  /* ---------------------------------------------------------
   01 / 02 / 03 / 04
   --------------------------------------------------------- */

  .geo-badge-num {
    display: block;

    font-size: 0.72rem;
    line-height: 1;
    font-weight: 500;

    letter-spacing: 0.08em;
    color: #777777;

    margin: 0 0 13px 0;
  }

  /* ---------------------------------------------------------
   LOCATION NAME
   --------------------------------------------------------- */

  .geo-badge-name {
    display: block;

    font-size: 1.05rem;
    line-height: 1.08;
    font-weight: 700;

    letter-spacing: -0.025em;
    color: #111111;

    margin: 0 0 7px 0;

    overflow-wrap: break-word;
  }

  /* ---------------------------------------------------------
   LOCATION DESCRIPTION
   --------------------------------------------------------- */

  .geo-badge-desc {
    display: block;

    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 400;

    letter-spacing: -0.01em;
    color: #666666;

    margin: 0;
  }

  /* =========================================================
   PEOPLE & THE FUTURE
   ========================================================= */

  .culture-box {
    width: 100%;

    margin: 0;
    padding: 28px 20px 30px;

    background: #f5f5f5;

    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* PEOPLE & THE FUTURE label */

  .culture-box .label-caps {
    display: block;

    font-size: 0.72rem !important;
    line-height: 1.2;
    font-weight: 500;

    letter-spacing: 0.2em;
    /* text-transform: uppercase; */

    color: #626262 !important;

    margin-bottom: 14px !important;
  }

  /* Main culture heading */

  .culture-box h3 {
    max-width: 100%;

    font-size: 1.5rem !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;

    letter-spacing: -0.035em;

    color: #111111 !important;

    margin: 0 0 20px 0 !important;
  }

  /* Culture paragraphs */

  .culture-box .body-regular {
    width: 100%;
    max-width: 100%;

    font-size: 0.98rem;
    line-height: 1.55;

    font-weight: 400;
    letter-spacing: -0.01em;

    color: #5f5f5f;

    margin: 0 0 16px 0;
  }

  .culture-box .body-regular:last-child {
    margin-bottom: 0;
  }

  /* =========================================================
   BUILDING IMAGE
   ========================================================= */

  .contemporary-layout .editorial-showcase-frame {
    display: block;

    width: 100%;

    margin: 8px 0 0 0 !important;
    padding: 0;

    border: 0;
    border-radius: 0;
  }

  /* Building image */

  .contemporary-layout .editorial-showcase-img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 1.55 / 1;

    object-fit: cover;

    margin: 0;
  }

  /* =========================================================
   IMAGE CAPTION
   ========================================================= */

  .contemporary-layout .editorial-showcase-caption {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    gap: 12px;

    padding: 14px 12px 15px;

    background: #ffffff;

    font-size: 0.61rem;
    line-height: 1.3;
    font-weight: 500;

    letter-spacing: 0.1em;
    /* text-transform: uppercase; */

    color: #626262;
  }

  /* Left caption */

  .contemporary-layout .editorial-showcase-caption span:first-child {
    max-width: 65%;
  }

  /* Right caption */

  .contemporary-layout .editorial-showcase-caption span:last-child {
    text-align: right;
    white-space: nowrap;
  }
  /* =========================================================
   ABOUT PAGE — FROM 1969 TO TODAY
   MOBILE STORY TIMELINE
   HTML UNTOUCHED / DESKTOP UNTOUCHED
   ========================================================= */

  /* ---------- TIMELINE WRAPPER ---------- */

  .timeline-track-wrap {
    position: relative;

    display: block;
    width: 100%;

    margin-top: 42px;
    padding: 8px 0 8px 0;
  }

  /* Main continuous architectural timeline */

  .timeline-track-wrap::before {
    content: "";

    position: absolute;

    top: 18px;
    bottom: 48px;
    left: 14px;

    width: 1px;

    background: rgba(0, 0, 0, 0.22);
  }

  /* =========================================================
   EACH STORY / YEAR
   ========================================================= */

  .timeline-row {
    position: relative;

    display: block !important;

    width: 100%;

    padding: 0 0 58px 52px;

    margin: 0;

    border: 0 !important;
  }

  /* Timeline milestone dot */

  .timeline-row::before {
    content: "";

    position: absolute;

    top: 8px;
    left: 9px;

    width: 11px;
    height: 11px;

    background: #f3f3f3;
    border: 1.5px solid #111111;
    border-radius: 50%;

    box-sizing: border-box;
    z-index: 2;
  }

  /* Small center point */

  .timeline-row::after {
    content: "";

    position: absolute;

    top: 12px;
    left: 13px;

    width: 3px;
    height: 3px;

    background: #111111;
    border-radius: 50%;

    z-index: 3;
  }

  /* =========================================================
   YEARS
   ========================================================= */

  .timeline-year-text {
    position: relative;

    width: 100%;

    margin: 0 0 15px 0;
    padding: 0;

    font-size: 1.8rem;
    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.045em;

    color: #111111;
  }

  /* =========================================================
   STORY TEXT
   ========================================================= */

  .timeline-content-text {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    font-size: 1.25rem;
    line-height: 1.58;

    font-weight: 400;

    letter-spacing: -0.01em;

    color: #626262;
  }

  /* =========================================================
   1969 — OPENING / ORIGIN
   Make the first milestone more important
   ========================================================= */

  .timeline-row:first-child .timeline-year-text {
    font-size: 2.25rem;
  }

  /* Larger starting milestone */

  .timeline-row:first-child::before {
    width: 15px;
    height: 15px;

    left: 7px;
    top: 7px;

    border-width: 1.5px;
  }

  .timeline-row:first-child::after {
    width: 3px;
    height: 3px;

    left: 13px;
    top: 13px;
  }

  /* =========================================================
   TODAY — DESTINATION / PRESENT
   ========================================================= */

  .timeline-row:last-child {
    padding-bottom: 10px;
  }

  /* TODAY gets stronger visual hierarchy */

  .timeline-row:last-child .timeline-year-text {
    font-size: 2.25rem;
    line-height: 0.95;

    margin-bottom: 17px;
  }

  /* Larger final milestone */

  .timeline-row:last-child::before {
    width: 15px;
    height: 15px;

    left: 7px;
    top: 6px;

    background: #111111;
    border-color: #111111;
  }

  /* White centre for final point */

  .timeline-row:last-child::after {
    width: 3px;
    height: 3px;

    left: 13px;
    top: 12px;

    background: #ffffff;
  }

  /* =========================================================
   SMALL HORIZONTAL ARRIVAL LINE FOR TODAY
   ========================================================= */

  .timeline-row:last-child .timeline-year-text::after {
    content: "";

    display: inline-block;

    vertical-align: middle;

    width: 52px;
    height: 1px;

    margin-left: 15px;

    background: rgba(0, 0, 0, 0.35);
  }

  .origin-stats-strip {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .story-closing-actions {
    flex-direction: column;
    align-items: stretch;
    
  }

  .story-closing-actions .btn-editorial,
  .story-closing-actions .btn-editorial-outline {
    width: 100%;
    text-align: center;
  }

  /* =========================================================
   ABOUT PAGE — PHILOSOPHY / CLIENT TRUST
   MOBILE ONLY

   HTML: UNTOUCHED
   DESKTOP: UNTOUCHED
   ========================================================= */

  /* =========================================================
   MAIN SECTION LAYOUT
   ========================================================= */

  .philosophy-layout {
    display: block !important;
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;
  }

  /* Remove desktop column behaviour */

  .philosophy-layout > div {
    width: 100%;
    max-width: 100%;
  }

  /* =========================================================
   MONUMENT QUOTE
   ========================================================= */

  .quote-monument { 
    width: 100%;
    max-width: 620px;

    margin: 0 auto;

    font-family: Helvetica !important;
    font-size: clamp(1.375rem, 5vw, 1.8rem);
    font-weight: 400;

    line-height: 1.35;

    text-align: justify;
    text-align-last: left;

    color: #111111;
}

  /* =========================================================
   QUOTE AUTHOR / FOUNDATIONAL CONVICTION
   ========================================================= */

  .quote-author-meta {
    position: relative;

    width: fit-content;
    max-width: calc(100% - 34px);

    margin: 30px 0 0 34px;
    padding: 0;

    font-size: 0.9rem;
    line-height: 1.55;

    font-weight: 600;

    letter-spacing: 0.17em;
    /* text-transform: uppercase; */

    color: #666666;
  }

  /* Small architectural line before attribution */

  .quote-author-meta::before {
    content: "";

    position: absolute;

    top: 0.72em;
    left: -34px;

    width: 22px;
    height: 1px;

    background: #222222;
  }

  /* =========================================================
   TRUST / PURPOSE AREA
   ========================================================= */

  .trust-split-column {
    position: relative;

    display: block !important;

    width: 100%;
    max-width: 100%;

    margin: 62px 0 0 0;
    padding: 0 0 8px 0;

    border: 0 !important;
  }

  /* Reset desktop blocks */

  .trust-split-column > div {
    position: relative;

    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    border: 0 !important;
    background: transparent !important;
  }

  /* =========================================================
   DESIGN WITH PURPOSE
   ========================================================= */

  .trust-split-column > div:first-child {
    padding-left: 54px;
    padding-bottom: 58px;
  }

  /* Top horizontal architectural line */

  .trust-split-column > div:first-child::before {
    content: "";

    position: absolute;

    top: 10px;
    left: 18px;

    width: 28px;
    height: 1px;

    background: rgba(0, 0, 0, 0.55);
  }

  /* Vertical architectural line */

  .trust-split-column > div:first-child::after {
    content: "";

    position: absolute;

    top: 10px;
    bottom: 0;
    left: 18px;

    width: 1px;

    background: rgba(0, 0, 0, 0.35);
  }

  /* =========================================================
   HEADINGS
   ========================================================= */

  .trust-block-title {
    width: 100%;
    max-width: 260px;

    margin: 0 0 20px 0;

    font-size: clamp(1.55rem, 6.5vw, 1.9rem);
    font-family: Helvetica !important;
    font-weight: 350;
line-height: 1;
    letter-spacing: -0.035em;

    color: #111111;
  }

  /* =========================================================
   BODY COPY
   ========================================================= */

  .trust-block-p {
    width: 100%;
    max-width: 100%;

    margin: 0;

    font-size: 1.2rem;
    line-height: 1.58;

    font-weight: 400;

    letter-spacing: -0.01em;

    color: #626262;
  }

  /* =========================================================
   BUILT ON TRUST
   ========================================================= */

  .trust-split-column > div:last-child {
    position: relative;

    width: calc(100% - 54px);
    max-width: none;

    margin-left: 54px;

    padding: 0 0 10px 0;
  }

  /*
   Continue the architectural line downward,
   but shift it to create the stepped geometry.
*/

  .trust-split-column > div:last-child::before {
    content: "";

    position: absolute;

    top: -58px;
    left: -36px;

    width: 36px;
    height: 1px;

    background: rgba(0, 0, 0, 0.35);
  }

  .trust-split-column > div:last-child::after {
    content: "";

    position: absolute;

    top: -58px;
    bottom: 0;
    left: 0;

    width: 1px;

    background: rgba(0, 0, 0, 0.35);
  }

  /* Give second block breathing room from its vertical line */

  .trust-split-column > div:last-child .trust-block-title,
  .trust-split-column > div:last-child .trust-block-p {
    margin-left: 28px;

    width: calc(100% - 28px);
  }

  /* BUILT ON TRUST heading spacing */

  .trust-split-column > div:last-child .trust-block-title {
    margin-top: 0;
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   SERVICES PORTFOLIO (MINIMAL, IMAGE-LED ARCHITECTURAL EDITORIAL)
   ========================================================================== */

.services-page-main {
  padding-top: 68px;
  /* Fixed navbar height */
  padding-bottom: 0;
  background-color: var(--bg-primary);
}

/* 1. Services Hero Section */
.services-hero-section {
  padding: 40px 0 64px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-primary);
}

.services-hero-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.services-hero-title {
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.services-hero-lead {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  max-width: 720px;
}

/* 2. Service Row Section Wrappers (Controlled White & Light Grey Canvas) */
.service-chapter-section {
  width: 100%;
  padding: 88px 0;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.service-bg-white {
  background-color: var(--bg-primary);
}

.service-bg-grey {
  background-color: var(--bg-secondary);
  /* #F5F5F5 */
}

/* 3. Asymmetrical Editorial Layouts */
/* Layout A: Text on Left (5fr), Image on Right (7fr) */
.service-layout-text-left {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-64);
  align-items: center;
}

/* Layout B: Image on Left (7fr), Text on Right (5fr) */
.service-layout-image-left {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-64);
  align-items: center;
}

/* 4. Text Content Column */
.service-info-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-num-meta {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.service-title-display {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 8px;
  transition: transform 0.3s ease;
}

.service-chapter-section:hover .service-title-display {
  transform: translateX(4px);
}

.service-summary-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
  font-weight: 400;
  max-width: 520px;
}

.service-meta-tags {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888888;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--border-color);
}

/* 5. Architectural Image Showcase (STRICT NATURAL COLOR) */
.service-media-frame {
  position: relative;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  overflow: hidden;
  width: 100%;
}

.service-media-img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  max-height: 480px;
  object-fit: cover;
  display: block;
  filter: none !important;
  /* STRICT NATURAL COLOR */
  -webkit-filter: none !important;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-chapter-section:hover .service-media-img {
  transform: scale(1.035);
}

.service-media-caption {
  padding: 12px 18px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 6. Responsive Rules for Services Page */
@media (max-width: 1024px) {
  .service-chapter-section {
    padding: 64px 0;
  }

  .service-layout-text-left,
  .service-layout-image-left {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  /* On tablet/mobile, ensure image sits naturally with content */
  .service-layout-image-left .service-media-frame {
    order: 2;
  }

  .service-layout-image-left .service-info-column {
    order: 1;
  }
}

@media (max-width: 768px) {
  .services-hero-section {
    padding: 28px 0 48px;
  }

  .service-chapter-section {
    padding: 48px 0;
  }

  .service-media-img {
    min-height: 260px;
    max-height: 340px;
  }

  .service-summary-text {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
}

/* ==========================================================================
/* ==========================================================================
   PROJECTS PORTFOLIO (LUXURY 3-COLUMN ARCHITECTURAL IMAGE GRID)
   ========================================================================== */

.projects-page-main {
  padding-top: 68px;
  /* Fixed navbar height */
  padding-bottom: 96px;
  background-color: #ffffff;
}

.projects-page-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  width: 100%;
}

/* 1. Minimal Luxury Projects Hero */
.projects-hero-section {
  padding: clamp(3.5rem, 5.5vw, 5rem) 0 clamp(1.5rem, 2.5vw, 2.25rem);
  width: 100%;
}

.projects-hero-kicker {
  font-family: "Helvetica" !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #767676;
  margin-bottom: 16px;
}

.projects-hero-title {
  font-family: "Helvetica" !important;
  font-size: clamp(3.2rem, 5.2vw, 4.8rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.04em;
  /* text-transform: uppercase; */
  color: #242426;
  margin: 0;
}

/* 2. Non-Sticky Category Filter Bar (Natural Document Flow) */
.projects-category-bar {
  border-top: 1px solid #dcd9d4;
  border-bottom: 1px solid #dcd9d4;
  padding: 0;
  margin-top: 24px;
  margin-bottom: 48px;
  background: #ffffff;
  position: relative;
  width: 100%;
  overflow: visible;
}

.category-tabs-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  overflow: visible;
}

.cat-filter-btn {
  font-family: "Helvetica" !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #767676;
  background: transparent;
  border: none;
  padding: 16px 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.25s ease;
  text-align: center;
  flex: 0 0 auto;
  cursor: pointer;
}

.cat-filter-btn:hover,
.cat-filter-btn.active {
  color: #242426;
}

.cat-filter-btn.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #242426;
}

/* 3. 3-Column Architectural Project Grid */
.projects-grid-stream {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
}

/* 4. Project Card with Fixed 4:3 Aspect Ratio */
.project-grid-card {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #dcd9d4;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease;
}

.project-grid-card:hover,
.project-grid-card:focus-visible {
  border-color: #767676;
}

.project-card-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #ffffff;
}

.project-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none !important;
  -webkit-filter: none !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.project-grid-card:hover .project-card-img,
.project-grid-card:focus-visible .project-card-img {
  transform: scale(1.03);
}

/* 5. #767676 75% Opacity Hover Overlay */
.project-card-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(118, 118, 118, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
}

.project-grid-card:hover .project-card-overlay,
.project-grid-card:focus-visible .project-card-overlay {
  opacity: 1;
}

/* 6. Centered Project Title & Understated VIEW ↗ Button */
.project-card-hover-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  transform: translateY(6px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 90%;
}

.project-grid-card:hover .project-card-hover-content,
.project-grid-card:focus-visible .project-card-hover-content {
  transform: translateY(0);
}

.project-card-title {
  font-family: "Helvetica" !important;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  /* text-transform: uppercase; */
  color: #ffffff;
  line-height: 1.25;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.project-card-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Helvetica" !important;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  padding-bottom: 2px;
  transition:
    gap 0.25s ease,
    border-color 0.2s ease;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.project-grid-card:hover .project-card-view-btn,
.project-grid-card:focus-visible .project-card-view-btn {
  gap: 9px;
  border-color: #ffffff;
}

.project-card-view-btn svg {
  transition: transform 0.25s ease;
}

.project-grid-card:hover .project-card-view-btn svg,
.project-grid-card:focus-visible .project-card-view-btn svg {
  transform: translate(2px, -2px);
}

/* Elements dedicated to mobile layout — hidden on desktop */
.project-card-location {
  display: none;
}

.mobile-category-selector {
  display: none;
}

.dossier-back-btn {
  display: none;
}

.dossier-brand-right {
  display: none;
}

/* 6. Same-Page Monograph Dossier Overlay */
.project-dossier-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(17, 17, 17, 0.75);
  backdrop-filter: blur(12px);
  display: flex;
  justify-content: center;
  align-items: stretch;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.4s ease;
}

.project-dossier-overlay.active {
  opacity: 1;
  visibility: visible;
}

.dossier-sheet-wrapper {
  background: var(--bg-primary);
  width: 100%;
  max-width: 1200px;
  margin: 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--text-primary);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
  transform: translateY(24px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.project-dossier-overlay.active .dossier-sheet-wrapper {
  transform: translateY(0);
}

.dossier-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
  z-index: 10;
}

.dossier-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dossier-close-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.dossier-close-btn:hover {
  background: var(--text-muted);
  color: #ffffff;
  border-color: #111111;
}

.dossier-scroll-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 48px 48px 80px;
}

.dossier-image-hero {
  width: 100%;
  margin-bottom: 48px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  position: relative;
}

.dossier-main-img {
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  display: block;
  filter: none !important;
}

.dossier-img-caption {
  padding: 12px 20px;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dossier-details-container {
  max-width: 960px;
  margin: 0 auto;
}

.dossier-title-row {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
}

.dossier-project-title {
  font-size: clamp(1.375rem, 5vw, 1.8rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  /* text-transform: uppercase; */
  color: var(--text-primary);
  line-height: 1.05;
  margin-bottom: 8px;
  font-family: "Helvetica" !important;
}

.dossier-location-text {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  color: var(--text-secondary);
  font-weight: 400;
  font-family: "Helvetica" !important;

}

.dossier-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
  padding: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.dossier-spec-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dossier-spec-lbl {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  /* text-transform: uppercase; */
  color: var(--text-secondary);
  font-family: "Helvetica" !important;
  text-align: justify; 
  text-align-last: left;

}

.dossier-spec-val {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  color: var(--text-primary);
  font-family: "Helvetica" !important;
  text-align: justify; 
  text-align-last: left;

}

.dossier-narrative-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dossier-section-label {
   font-size: clamp(1rem, 1.15vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  /* text-transform: uppercase; */
  color: var(--text-secondary);
  font-family: "Helvetica" !important;
  text-align: justify; 
  text-align-last: left;
}

.dossier-description-p {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text-primary);
  font-weight: 400;
   text-align: justify; 
  text-align-last: left;
  font-family: "Helvetica" !important;
}

/* 7. Responsive Rules for Projects Page */
@media (max-width: 1024px) {
  .projects-page-container {
    padding: 0 32px;
  }

  .projects-category-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .projects-category-bar::-webkit-scrollbar {
    display: none;
  }

  .category-tabs-container {
    width: max-content;
    min-width: 100%;
    gap: 20px;
  }

  .projects-grid-stream {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .cat-filter-btn {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    padding: 14px 0;
  }

  .dossier-sheet-wrapper {
    margin: 16px;
  }

  .dossier-scroll-content {
    padding: 32px 24px 64px;
  }

  .dossier-specs-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   PROJECTS PAGE — MOBILE
   ========================================================= */

@media (max-width: 768px) {
  /* ---------------------------------------------------------
     PAGE LAYOUT
     --------------------------------------------------------- */

  .projects-page-main {
    padding-top: 68px;
    padding-bottom: 64px;
    background-color: #ffffff;
  }

  .projects-page-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .projects-hero-section {
    padding: 24px 0 14px !important;
    width: 100% !important;
  }

  .projects-hero-title {
    font-family: "Helvetica" !important;
    font-size: clamp(2.75rem, 10vw, 3.6rem) !important;
    font-weight: 300 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    color: #111111 !important;
    /* text-transform: uppercase !important; */
    margin: 0 !important;
  }

  /* ---------------------------------------------------------
     CATEGORY FILTER BAR & DROPDOWN SELECTOR
     --------------------------------------------------------- */

  .projects-category-bar {
    border: none !important;
    margin-top: 14px !important;
    margin-bottom: 28px !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    z-index: 200 !important;
  }

  /* Remove horizontal scroll category presentation on mobile */
  .category-tabs-container {
    display: none !important;
  }

  /* Outlined compact category selector */
  .mobile-category-selector {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 200 !important;
  }

  .mobile-cat-trigger {
    width: 100% !important;
    min-height: 50px !important;
    height: 50px !important;
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    cursor: pointer !important;
    outline: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    transition: border-color 0.2s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-cat-trigger:active {
    border-color: #111111 !important;
  }

  .mobile-cat-label {
    font-family: "Helvetica" !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .mobile-cat-current-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .mobile-cat-current-val {
    font-family: "Helvetica" !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #111111 !important;
    line-height: 1 !important;
  }

  .mobile-cat-chevron {
    display: block !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .mobile-category-selector.open .mobile-cat-chevron {
    transform: rotate(180deg) !important;
  }

  /* Dropdown Options Menu */
  .mobile-cat-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    border-top: 1px solid #eeeeee !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
    z-index: 100 !important;
    display: none !important;
    margin-top: -1px !important;
    box-sizing: border-box !important;
  }

  .mobile-category-selector.open .mobile-cat-dropdown {
    display: block !important;
  }

  .mobile-cat-option {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: #ffffff !important;
    font-family: "Helvetica" !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    color: #444444 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    text-align: left !important;
    box-sizing: border-box !important;
    position: static !important;
    border-radius: 0 !important;
    outline: none !important;
    -webkit-appearance: none !important;
    transition:
      background 0.15s ease,
      color 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-cat-option:last-child {
    border-bottom: none !important;
  }

  .mobile-cat-option:active,
  .mobile-cat-option:hover {
    background: #fafafa !important;
    color: #111111 !important;
  }

  .mobile-cat-option.active {
    font-weight: 700 !important;
    color: #111111 !important;
    background: #f5f5f5 !important;
  }

  .mobile-cat-option.active::after {
    display: none !important;
    content: none !important;
  }

  .mobile-cat-option .mobile-cat-check {
    display: none !important;
    flex-shrink: 0 !important;
  }

  .mobile-cat-option.active .mobile-cat-check {
    display: block !important;
  }

  /* ---------------------------------------------------------
     PROJECT GRID — SINGLE COLUMN
     --------------------------------------------------------- */

  .projects-grid-stream {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* ---------------------------------------------------------
     PROJECT CARD — MOBILE EDITORIAL PRESENTATION
     --------------------------------------------------------- */

  .project-grid-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    cursor: pointer !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* MOBILE CATEGORY FILTER — hidden cards must override the flex !important above */
  .project-grid-card.is-hidden {
    display: none !important;
  }

  .project-card-frame {
    position: static !important;
    width: 100% !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
  }

  /* ---------------------------------------------------------
     PROJECT IMAGE (4:3 ARCHITECTURAL RATIO)
     --------------------------------------------------------- */

  .project-card-img {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
    transform: none !important;
    transition: none !important;
    border: none !important;
  }

  .project-grid-card .project-card-img {
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
  }

  /* ---------------------------------------------------------
     PERMANENT CONTENT BELOW IMAGE (NO HOVER OVERLAY)
     --------------------------------------------------------- */

  .project-card-overlay {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 0 0 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }

  .project-card-hover-content {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* ---------------------------------------------------------
     PROJECT NAME & LOCATION
     --------------------------------------------------------- */

  .project-card-title {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Helvetica" !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;

    color: #111111 !important;
    text-align: left !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .project-card-location {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding: 0 !important;
    font-family: "Helvetica" !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #777777 !important;
    text-align: left !important;
  }

  /* ---------------------------------------------------------
     HIDE VIEW BUTTON ON MOBILE
     --------------------------------------------------------- */

  .project-card-view-btn {
    display: none !important;
  }

  /* ---------------------------------------------------------
     DISABLE ALL HOVER EFFECTS ON MOBILE
     --------------------------------------------------------- */

  .project-grid-card:hover,
  .project-grid-card:focus-visible {
    transform: none !important;
    border-color: transparent !important;
  }

  .project-grid-card:hover .project-card-img,
  .project-grid-card:focus-visible .project-card-img {
    transform: none !important;
    filter: grayscale(100%) !important;
    -webkit-filter: grayscale(100%) !important;
  }

  .project-grid-card:hover .project-card-overlay,
  .project-grid-card:focus-visible .project-card-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
  }

  .project-grid-card:hover .project-card-hover-content,
  .project-grid-card:focus-visible .project-card-hover-content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* ---------------------------------------------------------
     PROJECT DOSSIER / PROJECT DETAIL — SCREEN 04 MOBILE
     --------------------------------------------------------- */

  .project-dossier-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    display: flex !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
  }

  .dossier-sheet-wrapper {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transform: none !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .dossier-top-bar {
    padding: 14px 20px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    background: #ffffff !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
  }

  .dossier-tag {
    display: none !important;
  }

  .dossier-close-btn {
    display: none !important;
  }

  .dossier-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: "Helvetica" !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #111111 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .dossier-back-btn svg {
    flex-shrink: 0 !important;
  }

  .dossier-brand-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .dossier-brand-text {
    display: block !important;
    font-family: "Helvetica" !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-transform: lowercase !important;
    color: #111111 !important;
    text-align: right !important;
    letter-spacing: -0.01em !important;
  }

  .dossier-brand-text span {
    font-size: 8px !important;
    font-weight: 400 !important;
    color: #666666 !important;
    display: block !important;
    letter-spacing: 0.02em !important;
  }

  .dossier-brand-logo {
    height: 26px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  .dossier-scroll-content {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 0 56px 0 !important;
    background: #ffffff !important;
  }

  .dossier-image-hero {
    margin: 0 0 20px 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
  }

  .dossier-main-img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 3 !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  .project-dossier-overlay img {
    filter: none !important;
    -webkit-filter: none !important;
  }

  .dossier-details-container {
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .dossier-title-row {
    margin-bottom: 22px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #e0e0e0 !important;
  }

  .dossier-project-title {
    font-family: "Helvetica" !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: #111111 !important;
    /* text-transform: uppercase !important; */
    margin: 0 0 6px 0 !important;
  }

  .dossier-location-text {
    font-family: "Helvetica" !important;
    font-size: 14px !important;
    color: #777777 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    margin: 0 !important;
  }

  .dossier-specs-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 26px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .dossier-spec-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .dossier-spec-lbl {
    font-family: "Helvetica" !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    /* text-transform: uppercase !important; */
    color: #777777 !important;
    margin: 0 !important;
  }

  .dossier-spec-val {
    font-family: "Helvetica" !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  .dossier-narrative-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 8px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e0e0e0 !important;
  }

  .dossier-section-label {
    font-family: "Helvetica" !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    /* text-transform: uppercase !important; */
    color: #777777 !important;
    margin: 0 !important;
  }

  .dossier-description-p {
    font-family: "Helvetica" !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #333333 !important;
    font-weight: 400 !important;
    margin: 0 !important;
  }
}

/* =========================================
   SIGNATURE WORKS — MOBILE CAROUSEL ONLY
   Desktop default: hidden
   ========================================= */
.signature-mobile-carousel {
  display: none;
}

/* =========================================
   SIGNATURE WORKS — MOBILE CAROUSEL STYLES
   Applies at 768px and below
   ========================================= */
@media (max-width: 768px) {
  /* Hide the existing desktop Signature Works presentation on mobile */
  #process > .container > .reveal-item:first-child {
    display: none;
  }

  #process .process-layout {
    display: none !important;
  }

  /* Show the mobile carousel */
  .signature-mobile-carousel {
    display: block;
  }

  /* --- Heading --- */
  .signature-mobile-header {
    margin-bottom: 0;
  }

  .signature-mobile-heading {
    font-size: clamp(1.9rem, 6.5vw, 2.6rem);
    font-weight: 400;
    font-family: Helvetica !important;
    /* letter-spacing: 0.12em; */
    /* text-transform: uppercase; */
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.2;
    font-family: "Helvetica" !important;
  }

  /* --- Divider --- */
  .signature-mobile-divider {
    width: 48px;
    height: 1px;
    background-color: var(--border-color);
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* --- Project Name --- */
  .signature-mobile-project {
    font-family: "Helvetica" !important;
    font-size: clamp(1rem, 4.2vw, 1.15rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    /* text-transform: uppercase; */
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.3;
    min-height: 1.3em;
    transition:
      opacity 0.4s ease,
      transform 0.4s ease;
  }

  .signature-mobile-project.transitioning {
    opacity: 0;
    transform: translateY(6px);
  }

  /* --- Image Stage --- */
  .signature-mobile-image-wrap {
    position: relative;
    width: 100%;
    height: clamp(330px, 105vw, 430px);
    overflow: hidden;
    background-color: var(--bg-surface);
  }

  .signature-mobile-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .signature-mobile-image.active {
    opacity: 1;
  }

  /* --- Pagination Dots --- */
  .signature-mobile-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 8px;
  }

  .signature-mobile-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background-color: var(--border-color);
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Extended touch target */
  .signature-mobile-dot::before {
    content: "";
    position: absolute;
    top: -16px;
    left: -16px;
    right: -16px;
    bottom: -16px;
  }

  .signature-mobile-dot.active {
    background-color: var(--text-primary);
  }

  /* --- Navigation Controls --- */
  .signature-mobile-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 0;
  }

  .signature-mobile-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    color: var(--text-primary);
    transition:
      border-color 0.25s ease,
      color 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
  }

  .signature-mobile-nav-btn:active {
    border-color: var(--text-primary);
  }

  .signature-mobile-nav-btn svg {
    display: block;
    pointer-events: none;
  }
}

/* --- Reduced Motion Accessibility --- */
@media (prefers-reduced-motion: reduce) {
  .signature-mobile-image {
    transition: none !important;
  }

  .signature-mobile-project {
    transition: none !important;
  }
}

/* =========================================================
   A PRACTICE STILL EVOLVING — MOBILE
   Compact natural-height layout
   ========================================================= */

@media (max-width: 768px) {
  /* SECTION — DO NOT FORCE FULL VIEWPORT HEIGHT */
  .practice-map-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 0;
    gap: 0;
  }

  /* TEXT BLOCK */
  .practice-map-content {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
  }

  .practice-map-content .chapter-title {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 28px;
    font-size: clamp(1.9rem, 6.5vw, 2.6rem);
    font-weight: 400;
    font-family: Helvetica !important;
  }

  .practice-map-content .body-large {
    width: 100%;
    max-width: 100%;
    margin: 0;

    text-align: justify;
    text-align-last: left;
  }

  /* MAP — DIRECTLY AFTER TEXT */
  .practice-map-visual {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    margin: 42px 0 0;
    padding: 0;
  }

  .practice-india-map {
    position: relative;
    inset: auto;

    display: block;
    width: min(80vw, 315px);
    max-width: 100%;
    height: auto;

    margin: 0 auto;
    transform: none;
  }
}

/* ==============================================================================
   SEMANTIC HEADING RESETS (Preserve exact visual appearance & layout)
   ============================================================================== */
h2.hero-sub-meta {
  margin: 0 0 clamp(32px, 5vh, 52px);
  padding: 0;
  line-height: inherit;
}

@media (max-width: 768px) {
  h2.hero-sub-meta {
    margin-bottom: 6px;
  }
}

h3.hero-location {
  margin: 0;
  padding: 0;
  line-height: inherit;
}

h3.process-step-title {
  margin: 0;
  padding: 0;
  line-height: inherit;
}