/* ==========================================================================
   EKA ARCHITECTURE STUDIO - DESIGN SYSTEM & STYLESHEET
   Typography: Kulim Park only (Reference: sorra.jp)
   Aesthetic: Ultra-Minimalist Architectural Luxury, Deep Graphite & Warm Stone
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Kulim+Park:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');

:root {
  --font-main: 'Kulim Park', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: var(--font-main);
  
  /* Color Palette — warm off-white pages (ref: magnumopusprojects.in) */
  --bg-primary: #f4f2ee;
  --bg-secondary: #ebe8e2;
  --bg-card: #faf9f6;
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(14, 15, 18, 0.28);

  --text-primary: #1b1c1e;
  --text-secondary: #55534d;
  --text-muted: #85827a;
  --text-inverse: #f5f4f0;

  --accent-gold: #9a8660;
  --accent-stone: #8c887e;
  --accent-sand: #e6dfd3;
  --accent-emph: #8a7650;
  --border-subtle: rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.2);
  --border-active: rgba(154, 134, 96, 0.5);

  /* Geometry & Spacing */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  
  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 0.25s var(--ease-out-expo);
  --transition-med: 0.5s var(--ease-out-expo);
  --transition-slow: 0.9s var(--ease-out-expo);
  
  /* Header Height */
  --header-height: 92px;
}

/* Dark surfaces — navbar, hero video, overlays on imagery, drawer, footer, modal.
   Re-declaring the tokens here keeps their text white on every page and scroll state. */
.site-header,
.mobile-drawer,
.hero-section {
  --bg-primary: #0a0b0c;
  --bg-secondary: #121316;
  --bg-card: #151619;
  --bg-card-hover: #1b1d22;
  --text-primary: #f5f4f0;
  --text-secondary: #a3a199;
  --text-muted: #6e6c65;
  --text-inverse: #0a0b0c;
  --accent-gold: #c8b99c;
  --accent-emph: #e6dfd3;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-active: rgba(200, 185, 156, 0.4);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  letter-spacing: 0.02em;
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-size: 0.9375rem;
  line-height: 1.7;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}

ul, ol {
  list-style: none;
}

/* Page scrollbar hidden (the page still scrolls); inner panels keep the slim one */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: #cfcbc2;
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold);
}

/* Page transition — a quick fade-up as each page opens; on an internal link
   the content fades out before the next page loads. Opacity + transform only
   (no blur) so it stays smooth. Fill-mode backwards lets the leave fade apply. */
main {
  animation: page-in 0.35s ease-out backwards;
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
html.page-leaving main {
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container-wide {
  width: 100%;
  max-width: 1720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* Subtle Architectural Grid Lines / Background Glow */
.bg-ambient-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   HEADER / NAVBAR
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 1000;
  display: flex;
  align-items: center;
  transition: background-color 0.4s ease, border-color 0.4s ease, height 0.4s ease, backdrop-filter 0.4s ease;
  color: var(--text-primary);
  background-color: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-header.scrolled {
  height: 76px;
}
/* Keeps the white logo and links legible over light sections behind the glass */
.site-header .nav-link,
.site-header .brand-subtext {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.site-header .brand-logo {
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.4));
}
/* Home: transparent over the hero video until the page scrolls */
.page-index .site-header:not(.scrolled) {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Off-white bar (same as the page sections) once scrolled, and on inner pages
   where there is no hero video behind it — contents switch to dark ink */
.site-header.scrolled,
body:not(.page-index) .site-header {
  --text-primary: #1b1c1e;
  --text-secondary: #55534d;
  --text-inverse: #f5f4f0;
  --accent-gold: #9a8660;
  --border-subtle: rgba(0, 0, 0, 0.12);
  background-color: rgba(244, 242, 238, 0.97);
  /* near-opaque already, so skip the costly blur of the content behind it */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.site-header.scrolled .nav-link,
.site-header.scrolled .brand-subtext,
body:not(.page-index) .site-header .nav-link,
body:not(.page-index) .site-header .brand-subtext {
  color: var(--text-primary);
  text-shadow: none;
}
.site-header.scrolled .brand-logo,
body:not(.page-index) .site-header .brand-logo {
  filter: brightness(0);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo above "ARCHITECTURAL STUDIO" — the subtext (the only in-flow child)
   sets the width, and the logo is stretched to exactly that width, so its
   left edge sits over the "A" and its right edge over the last "O".
   The image is pre-trimmed (logo-white-trim.png) so its edges are the mark's. */
.brand-logo-wrap {
  position: relative;
  display: block;
  /* room for the stretched logo, plus a small gap under it */
  padding-top: 2.95rem;
  z-index: 1002;
}

.brand-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform-origin: left bottom;
  transition: transform var(--transition-fast);
}
.brand-logo:hover {
  transform: scale(1.03);
}
/* Phones: the subtext itself is set smaller, so the whole brand shrinks with
   it — the logo stays its full width and both ends keep lining up */
@media (max-width: 767px) {
  /* a touch more room than the logo needs, so it never sits on the text */
  .brand-logo-wrap {
    padding-top: 2.5rem;
  }
  .brand-subtext {
    font-size: 0.375rem;
  }
}

.brand-subtext {
  display: block;
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  /* letter-spacing hangs after the last letter — pull it back so the width
     ends at the "O", which is where the logo should end too */
  margin-right: -0.28em;
  white-space: nowrap;
}

/* Nav Menu */
.nav-links {
  display: none;
  align-items: center;
  gap: 2.75rem;
}
@media (min-width: 992px) {
  .nav-links {
    display: flex;
    position: relative;
    left: 2.5rem;
  }
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  padding: 0.35rem 0;
  transition: color var(--transition-fast);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--accent-gold);
  transition: width 0.3s var(--ease-out-expo);
}
.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
}
.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

/* Dropdown (Projects) — off-white panel under the link; a second level
   (Abroad Projects → Africa / UAE) flies out to the side */
.nav-item {
  position: relative;
}
.nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-caret {
  transition: transform var(--transition-fast);
}
.nav-item:hover > .nav-link .nav-caret,
.nav-item:focus-within > .nav-link .nav-caret {
  transform: rotate(180deg);
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -1.25rem;
  min-width: 220px;
  margin-top: 1rem;
  padding: 0.5rem 0;
  list-style: none;
  background: #f4f2ee;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.35s var(--ease-out-expo), visibility 0s 0.35s;
  z-index: 1003;
}
/* Invisible bridge so the pointer can cross the gap without closing the menu */
.nav-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1rem;
}
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown,
.has-flyout:hover > .nav-flyout,
.has-flyout:focus-within > .nav-flyout {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.35s var(--ease-out-expo), visibility 0s;
}
.has-flyout {
  position: relative;
}
.nav-flyout {
  top: -0.5rem;
  left: 100%;
  margin-top: 0;
  margin-left: 2px;
  transform: translateX(-8px);
}
.nav-flyout::before {
  top: 0;
  bottom: 0;
  left: auto;
  right: 100%;
  width: 4px;
  height: auto;
}
span.nav-link,
span.nav-dropdown-link {
  cursor: default;
}
.nav-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1b1c1e;
  text-shadow: none;
  white-space: nowrap;
  transition: color var(--transition-fast), background-color var(--transition-fast), padding-left var(--transition-fast);
}
.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible,
.has-flyout:hover > .nav-dropdown-link {
  color: #9a8660;
  background-color: rgba(0, 0, 0, 0.03);
  padding-left: 1.5rem;
  outline: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Mobile Toggle Hamburger */
.mobile-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 44px;
  height: 44px;
  cursor: pointer;
  z-index: 1002;
  padding: 8px;
}
@media (min-width: 992px) {
  .mobile-toggle {
    display: none;
  }
}
.toggle-line {
  height: 1.5px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: all 0.35s var(--ease-out-expo);
}
.toggle-line:nth-child(1) { width: 26px; }
.toggle-line:nth-child(2) { width: 18px; }

.mobile-toggle.active .toggle-line:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg);
  width: 24px;
}
.mobile-toggle.active .toggle-line:nth-child(2) {
  transform: translateY(-3.75px) rotate(-45deg);
  width: 24px;
}

/* Mobile Drawer (iPhone & Android Optimized) */
/* Opens as a circle growing out of the hamburger button (top-right) */
.mobile-drawer {
  --drawer-origin: calc(100% - var(--container-pad) - 22px) calc(var(--header-height) / 2);
  position: fixed;
  inset: 0;
  background-color: #0b0c0d;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--header-height) + 0.5rem) var(--container-pad) 2.5rem;
  overflow-y: auto;
  clip-path: circle(0% at var(--drawer-origin));
  visibility: hidden;
  pointer-events: none;
  transition: clip-path 0.6s var(--ease-out-expo), visibility 0s 0.6s;
}
.mobile-drawer.open {
  clip-path: circle(150% at var(--drawer-origin));
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 0.8s var(--ease-out-expo), visibility 0s;
}
/* Sits exactly where the hamburger is (the header is stacked under the drawer) */
.mobile-drawer-close {
  position: absolute;
  top: calc(var(--header-height) / 2 - 22px);
  right: var(--container-pad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-primary);
  transform: rotate(-90deg) scale(0.6);
  opacity: 0;
  transition: transform 0.5s var(--ease-out-expo), opacity 0.3s, color 0.25s, border-color 0.25s;
}
.mobile-drawer.open .mobile-drawer-close {
  transform: rotate(0) scale(1);
  opacity: 1;
  transition-delay: 0.25s, 0.25s, 0s, 0s;
}
.mobile-drawer-close:hover,
.mobile-drawer-close:focus-visible {
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}
.mobile-nav-list {
  display: flex;
  flex-direction: column;
}
/* Each row: hairline underneath that draws in left → right, link rises from below it */
.mobile-nav-item {
  position: relative;
  overflow: hidden;
}
.mobile-nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--border-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out-expo);
}
.mobile-drawer.open .mobile-nav-item::after {
  transform: scaleX(1);
  transition-delay: calc(0.15s + var(--i) * 0.07s);
}
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(0.9rem, 2.6vh, 1.35rem) 0;
  color: var(--text-primary);
  transform: translateY(105%);
  transition: transform 0.6s var(--ease-out-expo), color 0.25s;
}
.mobile-drawer.open .mobile-nav-link {
  transform: translateY(0);
  transition-delay: calc(0.2s + var(--i) * 0.07s), 0s;
}
/* Same type as the page headings (.section-title): Kulim Park, light, sentence case */
.mobile-nav-label {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
}
.mobile-nav-arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.25s, transform 0.4s var(--ease-out-expo);
}

/* Current page + touch/hover: gold, chevron nudges right */
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible,
.mobile-nav-link.active,
.mobile-nav-link:hover .mobile-nav-arrow,
.mobile-nav-link:focus-visible .mobile-nav-arrow,
.mobile-nav-link.active .mobile-nav-arrow {
  color: var(--accent-gold);
}
.mobile-nav-link:hover .mobile-nav-arrow,
.mobile-nav-link:focus-visible .mobile-nav-arrow {
  transform: translateX(4px);
}

/* Projects row — a button that opens its category list */
.mobile-sub-toggle {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mobile-sub-toggle:hover .mobile-nav-arrow,
.mobile-sub-toggle:focus-visible .mobile-nav-arrow {
  transform: none;
}
.mobile-nav-item.is-open .mobile-sub-toggle .mobile-nav-arrow {
  transform: rotate(180deg);
  color: var(--accent-gold);
}
.mobile-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out-expo);
}
.mobile-nav-item.is-open .mobile-sub {
  grid-template-rows: 1fr;
}
.mobile-sub-list {
  min-height: 0;
  overflow: hidden;
  list-style: none;
  padding-left: 1rem;
}
.mobile-nav-item.is-open .mobile-sub > .mobile-sub-list {
  padding-bottom: 1rem;
}
.mobile-sub-list--nested {
  padding-left: 1.25rem;
  overflow: visible;
}
.mobile-sub-link {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.25s;
}
.mobile-sub-list--nested .mobile-sub-link {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.mobile-sub-link:hover,
.mobile-sub-link:focus-visible {
  color: var(--accent-gold);
}
/* A dropdown heading with no page of its own (e.g. Abroad Projects) */
.mobile-sub-head {
  color: var(--text-muted);
  cursor: default;
}
.mobile-sub-head:hover {
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer,
  .mobile-drawer.open {
    clip-path: none;
    transition: none;
  }
  .mobile-drawer:not(.open) {
    opacity: 0;
  }
  .mobile-nav-link,
  .mobile-nav-item::after {
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   HERO SECTION - LANDSCAPE 3D VIDEO PRESENTATION
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--header-height);
  padding-bottom: clamp(2rem, 5vh, 4rem);
  overflow: hidden;
  background-color: #070809;
}

/* Landscape Video Container */
.hero-media-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* no CSS filter here — it would be re-applied to every video frame;
     the overlays above already darken it */
  transform: scale(1.02);
}

/* Cinematic Landscape Framing Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10, 11, 12, 0) 0%, rgba(10, 11, 12, 0.35) 75%, rgba(10, 11, 12, 0.6) 100%);
  pointer-events: none;
}
.hero-gradient-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, rgba(10, 11, 12, 0.85) 0%, rgba(10, 11, 12, 0.45) 40%, transparent 100%);
  pointer-events: none;
}
.hero-gradient-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to bottom, rgba(10, 11, 12, 0.45) 0%, transparent 100%);
  pointer-events: none;
}

/* Landscape Viewport Letterbox Framing (Ultra Design) */
.hero-framing-border {
  position: absolute;
  inset: clamp(12px, 2.5vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  pointer-events: none;
  z-index: 2;
  border-radius: var(--radius-sm);
}

/* Hero Content Block */
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero-tagline-pre {
  font-size: clamp(0.6875rem, 0.9vw, 0.75rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero-tagline-pre::before {
  content: '';
  width: 24px;
  height: 1px;
  background-color: #ffffff;
}

.hero-title {
  font-size: clamp(1.875rem, 4.2vw, 3.5rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  max-width: 820px;
  margin-bottom: 1.25rem;
}
.hero-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent-emph);
}

.hero-lead {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(245, 244, 240, 0.85);
  max-width: 520px;
  margin-bottom: 2.25rem;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.75rem;
  background-color: var(--text-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all var(--transition-fast);
}
.btn-primary:hover {
  background-color: var(--accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

/* Hero gem button — faceted hexagon in sand → gold with a glossy upper facet
   and a light sweep on hover */
.hero-cta-group {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}
.btn-gem {
  --gem-cut: 14px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.6rem;
  clip-path: polygon(var(--gem-cut) 0, calc(100% - var(--gem-cut)) 0, 100% 50%, calc(100% - var(--gem-cut)) 100%, var(--gem-cut) 100%, 0 50%);
  background: linear-gradient(135deg, #efe8da 0%, #c8b99c 42%, #9a8660 78%, #7d6c4c 100%);
  color: #1b1c1e;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}
/* Upper facet — the lighter plane of the gem */
.btn-gem::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(var(--gem-cut) 0, calc(100% - var(--gem-cut)) 0, 100% 50%, 0 50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 100%);
}
/* Diagonal light sweep */
.btn-gem::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.7s var(--ease-out-expo);
}
.btn-gem:hover {
  transform: translateY(-2px);
  filter: brightness(1.06) saturate(1.1);
}
.btn-gem:hover::after {
  left: 120%;
}
.btn-gem svg {
  transition: transform var(--transition-fast);
}
.btn-gem:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   SECTIONS & PROJECT FILTERS
   ========================================================================== */
.section {
  position: relative;
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  z-index: 2;
}

.section-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 1rem;
  display: block;
}

.section-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}
.section-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}


.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Projects page gallery — square-cornered photo tiles, filtered per project */
.works-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  transition: opacity 0.3s ease;
}
@media (min-width: 640px) {
  .works-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .works-gallery { grid-template-columns: repeat(3, 1fr); }
}
.works-gallery.is-swapping {
  opacity: 0;
}
.work-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  overflow: hidden;
  background-color: var(--bg-secondary);
  outline: none;
}
/* Projects hero — "our projects" + All Works, or the open project's heading.
   Whichever is shown rises in with the same fade-up as the gallery tiles. */
.projects-intro:not([hidden]),
.project-head:not([hidden]) {
  animation: work-tile-in 0.7s var(--ease-out-expo) both;
}
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}
.project-back svg {
  transition: transform var(--transition-fast);
}
.project-back:hover,
.project-back:focus-visible {
  color: var(--accent-emph);
}
.project-back:hover svg,
.project-back:focus-visible svg {
  transform: translateX(-4px);
}
.about-hero .project-head-title {
  margin-bottom: 0;
  text-transform: none;
}

/* "All Works": a photo opens its project's full set; in a project's view it opens full-size */
.work-tile {
  cursor: pointer;
}

/* Full-size photo viewer (projects page) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 6vw, 4.5rem) clamp(0.75rem, 6vw, 5.5rem);
  background: rgba(10, 11, 12, 0.94);
  color: #f5f4f0;
  animation: lightbox-in 0.35s ease-out both;
}
.lightbox[hidden] {
  display: none;
}
@keyframes lightbox-in {
  from { opacity: 0; }
}
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  height: 100%;
}
.lightbox-img {
  max-width: 100%;
  max-height: calc(100% - 2.5rem);
  object-fit: contain;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.4s ease, transform 0.6s var(--ease-out-expo);
}
.lightbox-img.is-loaded {
  opacity: 1;
  transform: none;
}
.lightbox-caption {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lightbox-count {
  color: #c8b99c;
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #f5f4f0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.lightbox-close:hover,
.lightbox-nav:hover,
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  background: #c8b99c;
  color: #1b1c1e;
}
.lightbox-close {
  top: 1rem;
  right: 1rem;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-prev { left: clamp(0.5rem, 1.5vw, 1.5rem); }
.lightbox-next { right: clamp(0.5rem, 1.5vw, 1.5rem); }
.lightbox-nav[hidden] {
  display: none;
}
/* Phones: arrows drop to the bottom corners so they don't cover the photo (swipe works too) */
@media (max-width: 639px) {
  .lightbox-nav {
    top: auto;
    bottom: 0.75rem;
    transform: none;
  }
}
.work-tile[hidden] {
  display: none;
}
.work-tile.is-entering {
  animation: work-tile-in 0.7s var(--ease-out-expo) both;
}
@keyframes work-tile-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.work-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.94);
  transition: transform 1.2s var(--ease-out-expo), filter 0.6s ease;
}
/* Display-only photos: hover (mouse) or tap (focus) shows the label */
.work-tile:hover img,
.work-tile:focus img {
  transform: scale(1.05);
  filter: brightness(0.72);
}
.work-tile-name {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.1rem;
  /* same type as the page headings: Kulim Park light, sentence case */
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  text-align: left;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out-expo);
}
.work-tile-place {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.75);
}
.works-gallery.is-all .work-tile-name--space,
.works-gallery:not(.is-all) .work-tile-name--project {
  display: none;
}
.work-tile-type {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.7);
}
.work-tile:hover .work-tile-name,
.work-tile:focus .work-tile-name {
  opacity: 1;
  transform: none;
}
/* Phones / touch screens (no hover): "All Works" always shows each card's
   project name + place, over a soft dark fade at the bottom so it stays readable */
@media (max-width: 767px), (hover: none) {
  .works-gallery.is-all .work-tile::after {
    content: '';
    position: absolute;
    inset: 45% 0 0 0;
    background: linear-gradient(to top, rgba(10, 11, 12, 0.7), rgba(10, 11, 12, 0));
    pointer-events: none;
  }
  .works-gallery.is-all .work-tile-name--project {
    z-index: 1;
    opacity: 1;
    transform: none;
  }
}
.works-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.works-more[hidden] {
  display: none;
}
.works-more-btn svg {
  transition: transform var(--transition-med);
}
.works-more-btn[aria-expanded="true"] svg,
.works-more-btn[aria-expanded="true"]:hover svg {
  transform: rotate(180deg);
}
.works-more-btn:hover svg {
  transform: translateY(2px);
}

/* Arch card — image sits in a curved (arched) frame over a sand panel;
   on hover the curve deepens and project details rise inside it. */
.arch-card {
  background: var(--accent-sand);
  border-radius: 2px;
  overflow: hidden;
}
.arch-card::after {
  content: '';
  display: block;
  height: 10px;
  background: var(--accent-stone);
  transition: background-color var(--transition-med);
}
.arch-card:hover::after {
  background: var(--accent-gold);
}

.arch-media {
  position: relative;
  aspect-ratio: 4 / 4.2;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--bg-secondary);
  border-radius: 0 0 50% 50% / 0 0 26% 26%;
  transition: border-radius 0.9s var(--ease-out-expo);
}
.arch-card:hover .arch-media {
  border-radius: 0 0 50% 50% / 0 0 38% 38%;
}
/* Projects page — shorter cards, plain square image (no arch curve) */
.page-projects .arch-media,
.page-projects .arch-card:hover .arch-media {
  aspect-ratio: 4 / 3.3;
  border-radius: 0;
}
/* Projects page — image only: no title/location panel or bottom strip */
.page-projects .arch-card-body,
.page-projects .arch-card::after {
  display: none;
}
.arch-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) saturate(0.92);
  transition: transform 1.4s var(--ease-out-expo), filter 0.6s ease;
}
.arch-card:hover .arch-media img {
  transform: scale(1.07);
  filter: brightness(0.75) saturate(1);
}

.arch-card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 1.25rem clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}
.arch-card-title {
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #1b1c1e;
}
/* One long word (e.g. MUHAMMEDKUTTY) — scale to the card width so it never overflows */
.arch-card {
  container-type: inline-size;
}
.arch-card-title--long {
  font-size: min(1.75rem, 7cqi);
  letter-spacing: 0.16em;
}
.arch-card-type {
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(10, 11, 12, 0.55);
}

/* ==========================================================================
   RECOGNITION / IGEN 2023 BADGE
   ========================================================================== */
.recognition-banner {
  position: relative;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  text-align: center;
  overflow: hidden;
}
.recognition-frame {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
  isolation: isolate;
}
/* Architectural crop marks at each corner */
.recognition-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 0 solid #000;
}
.recognition-corner.tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.recognition-corner.tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.recognition-corner.bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.recognition-corner.br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
/* Oversized outlined "50" watermark */
.recognition-numeral {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  font-size: clamp(10rem, 28vw, 22rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  user-select: none;
}
.recognition-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 1.25rem;
  border: 1px solid var(--border-active);
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 1.25rem;
  background: var(--bg-card);
}
.recognition-banner .recognition-badge {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  gap: 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  color: #000;
  margin-bottom: 1.75rem;
}
.recognition-banner .recognition-badge::before,
.recognition-banner .recognition-badge::after {
  content: '';
  width: clamp(24px, 5vw, 56px);
  height: 1px;
  background: #000;
}
.recognition-title {
  font-size: clamp(1.625rem, 3.2vw, 2.75rem);
  font-weight: 300;
  color: #000;
  max-width: 820px;
  margin: 0 auto 2rem;
  line-height: 1.25;
}
.recognition-title em {
  font-weight: 400;
  color: #000;
  background: linear-gradient(transparent 72%, rgba(154, 134, 96, 0.28) 72%, rgba(154, 134, 96, 0.28) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.1em;
}
.recognition-sub {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 600;
  color: #000;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0;
}
.recognition-dot {
  width: 7px;
  height: 7px;
  background: var(--accent-gold);
  transform: rotate(45deg);
}

/* ==========================================================================
   START A CONVERSATION / CTA
   ========================================================================== */
.cta-title {
  font-size: clamp(1.625rem, 3.2vw, 2.625rem);
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}
.cta-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent-emph);
}

/* ==========================================================================
   ABOUT PAGE STYLING
   ========================================================================== */
.about-hero {
  padding-top: calc(var(--header-height) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--border-subtle);
}
.about-hero .page-title,
.about-hero .page-title em,
.page-about .section-title {
  color: #000;
}
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: 3.5rem;
}
.story-lead {
  max-width: 1000px;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-primary);
  margin-bottom: 2rem;
}

/* Portrait founder cards — compact 320px cards, 3:4 photo, centred as a pair */
.founders-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px);
  justify-content: center;
  gap: 2rem;
  margin-top: 3.5rem;
}
@media (min-width: 768px) {
  .founders-grid {
    grid-template-columns: repeat(2, 320px);
    gap: 3.5rem;
  }
}
/* Phones: cards run edge to edge — cancel the container's side padding,
   drop the rounded corners and side borders that would sit on the screen edge */
@media (max-width: 767px) {
  .founders-grid {
    grid-template-columns: minmax(0, 240px);
    margin-inline: 0;
  }
  .founder-card {
    border-radius: 0;
    border-inline: 0;
  }
  .founder-info {
    padding-inline: var(--container-pad);
    text-align: center;
  }
  /* letter-spacing leaves a gap after the last letter — balance it on the left
     so "FOUNDER" sits truly centred */
  .founder-role {
    padding-left: 0.18em;
  }
}
/* Founder card — fixed dark panel framing a black-and-white photo, gold crop
   marks on its corners, light name with a gold rule and sand role (no hover) */
.founder-card {
  position: relative;
  padding: 10px;
  background: #1b1c1e;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.founder-img-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
  border-radius: calc(var(--radius-md) - 4px);
  background-color: var(--bg-secondary);
}
.founder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
}
/* Gold crop marks — top-left and bottom-right corners */
.founder-img-wrap::before,
.founder-img-wrap::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 0 solid var(--accent-sand);
  pointer-events: none;
}
.founder-img-wrap::before {
  top: 14px;
  left: 14px;
  border-top-width: 1px;
  border-left-width: 1px;
}
.founder-img-wrap::after {
  right: 14px;
  bottom: 14px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
.founder-info {
  padding: 1.5rem 1rem 1.1rem;
}
.founder-name {
  position: relative;
  display: inline-block;
  font-size: 1.3125rem;
  font-weight: 600;
  color: #f5f4f0;
  padding-bottom: 0.45rem;
  margin-bottom: 0.45rem;
}
/* Gold rule under the name */
.founder-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent-gold);
}
.founder-role {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
/* Phones keep the edge-to-edge photo (no frame padding) */
@media (max-width: 767px) {
  .founder-card {
    padding: 0;
  }
  .founder-img-wrap {
    border-radius: 0;
  }
}

/* Other partners — same card, scaled down: four across on desktop, two on phones */
.founders-grid--partners {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 940px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .founders-grid--partners {
    grid-template-columns: repeat(4, minmax(0, 215px));
    gap: 1.75rem;
  }
}
.founder-card--partner {
  padding: 7px;
}
.founder-card--partner .founder-img-wrap::before,
.founder-card--partner .founder-img-wrap::after {
  width: 30px;
  height: 30px;
}
.founder-card--partner .founder-img-wrap::before {
  top: 10px;
  left: 10px;
}
.founder-card--partner .founder-img-wrap::after {
  right: 10px;
  bottom: 10px;
}
.founder-card--partner .founder-info {
  padding: 1.1rem 0.75rem 0.85rem;
  text-align: center;
}
.founder-card--partner .founder-name {
  font-size: 1rem;
  padding-bottom: 0.35rem;
  margin-bottom: 0.35rem;
}
.founder-card--partner .founder-role {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
}
@media (max-width: 767px) {
  .founder-card--partner {
    padding: 0;
  }
  .founder-card--partner .founder-img-wrap {
    border-radius: 0;
  }
  .founder-card--partner .founder-info {
    padding-inline: 0.5rem;
  }
}

/* Timeline: From Vision to Space */
.timeline-wrap {
  position: relative;
  margin-top: 3rem;
  padding-left: 2rem;
  border-left: 1px solid var(--border-subtle);
}
@media (min-width: 768px) {
  .timeline-wrap {
    padding-left: 3rem;
  }
}
.timeline-item {
  position: relative;
  margin-bottom: 3.5rem;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-dot {
  position: absolute;
  left: -2.4rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid #000;
}
@media (min-width: 768px) {
  .timeline-dot {
    left: -3.4rem;
  }
}
.timeline-year {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.timeline-heading {
  font-size: 1.125rem;
  font-weight: 400;
  color: #000;
  margin-bottom: 0.5rem;
}
.timeline-text {
  font-size: 0.875rem;
  font-weight: 300;
  color: #4a4a4a;
  max-width: 650px;
  line-height: 1.6;
}

/* Desktop: horizontal timeline — black line draws across, big outlined years */
@media (min-width: 900px) {
  .timeline-wrap {
      display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(3rem, 5vw, 4.5rem);
    padding: 0;
    border-left: none;
  }
  /* Base rail + gold progress line */
  .timeline-wrap::before,
  .timeline-wrap::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-subtle);
  }
  .timeline-wrap::after {
    height: 2px;
    top: 5.5px;
    background: #000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 2.2s var(--ease-out-expo);
  }
  .timeline-wrap:has(.timeline-item.in-view)::after {
    transform: scaleX(1);
  }

  .timeline-item {
    margin-bottom: 0;
    padding-top: 2.75rem;
  }

  .timeline-dot {
    left: 0;
    top: 0;
    z-index: 2;
    width: 13px;
    height: 13px;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  }
  .timeline-item:last-child .timeline-dot {
    background: #000;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.1);
  }

  .timeline-year {
    font-size: clamp(2.5rem, 4.2vw, 3.75rem);
    font-weight: 200;
    letter-spacing: -0.02em;
    text-transform: none;
    line-height: 1;
    margin-bottom: 1.25rem;
    color: transparent;
    -webkit-text-stroke: 1px #000;
    transition: color var(--transition-med);
  }
  .timeline-heading {
    font-size: 1.1875rem;
    margin-bottom: 0.75rem;
  }
  .timeline-text {
    font-size: 0.875rem;
  }

  .timeline-wrap .timeline-item.in-view:hover {
    transform: translateY(-6px);
  }
  .timeline-item:hover .timeline-dot {
    background: #000;
    transform: scale(1.3);
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.1);
  }
  .timeline-item:hover .timeline-year {
    color: #000;
  }
}

/* Vision & Mission Cards */
.vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 3rem;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.25);
}
@media (min-width: 992px) {
  .vision-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.vision-card {
  padding: clamp(2.5rem, 5vw, 4rem);
  background: #fff;
  display: flex;
  flex-direction: column;
  color: #000;
}
.vision-card + .vision-card {
  border-top: 1px solid var(--border-subtle);
}
@media (min-width: 992px) {
  .vision-card + .vision-card {
    border-top: 0;
    border-left: 1px solid var(--border-subtle);
  }
}
.vision-mark {
  width: 22px;
  height: 22px;
  background: var(--accent-gold);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  margin-bottom: 1.75rem;
}
.vision-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  color: #000;
  margin: 0 0 1.25rem;
}
.vision-quote {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.45;
  color: #000;
  margin: 0 0 1.25rem;
}
.vision-text {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #000;
  margin: 0;
}

/* Minimal contact page (ref: magnumopusprojects.in/contact) */
.contact-min-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow:
    0 1px 2px rgba(27, 28, 30, 0.04),
    0 8px 24px rgba(27, 28, 30, 0.06),
    0 24px 60px rgba(27, 28, 30, 0.08);
}
@media (min-width: 992px) {
  .contact-min-grid { grid-template-columns: 1fr 1fr; }
}
.contact-min-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-primary);
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  margin-bottom: 2.5rem;
}
.contact-min-item { margin-bottom: 1.75rem; }
.contact-min-label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.contact-min-item p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.contact-min-item a:hover { color: var(--accent-gold); }

.contact-min-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.contact-min-form input,
.contact-min-form textarea {
  width: 100%;
  padding: 0.75rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color var(--transition-fast);
}
.contact-min-form textarea { resize: vertical; min-height: 110px; }
.contact-min-form input::placeholder,
.contact-min-form textarea::placeholder { color: var(--text-muted); }
.contact-min-form input:focus,
.contact-min-form textarea:focus {
  outline: none;
  border-bottom-color: var(--text-primary);
}
.contact-min-form button {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.9rem 2rem;
  background: var(--text-primary);
  color: var(--text-inverse);
  border: 0;
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.contact-min-form button:hover { opacity: 0.8; }
.contact-min-note {
  margin-bottom: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-gold);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.contact-min-note a { display: block; margin-top: 0.4rem; color: var(--accent-gold); }
.contact-min-note.is-error { border-left-color: #c0463c; color: #c0463c; }
.contact-min-map {
  position: relative;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  height: 360px;
  border: 1px solid var(--border-subtle);
}
.contact-map-open {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.55rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1b1c1e;
  background: #fff;
  box-shadow: 0 4px 16px rgba(27, 28, 30, 0.18);
  transition: color var(--transition-fast);
}
.contact-map-open:hover {
  color: var(--accent-gold);
}
.contact-min-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   FOOTER — minimal centred (ref: turtlearts.in)
   ========================================================================== */
.site-footer {
  /* off-white bar, black contents — half the height it used to be */
  --text-primary: #000;
  --text-secondary: #000;
  --text-muted: #000;
  --border-strong: rgba(0, 0, 0, 0.2);
  background-color: var(--bg-primary);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-block: clamp(0.75rem, 1.5vw, 1.125rem) 0.5rem;
  position: relative;
  z-index: 2;
  color: #000;
}

/* Three columns — Address · Quick Links · Follow Us; stacked on phones */
.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem 2rem;
  padding-bottom: clamp(0.625rem, 1.25vw, 0.875rem);
}
/* Phones: logo on top, then Address (left) beside Quick Links (right),
   Follow Us below */
@media (max-width: 639px) {
  .footer-cols {
    grid-template-columns: 1fr auto;
    gap: 0.9rem 1.25rem;
  }
  .footer-brand,
  .footer-cols > .footer-col:last-child {
    grid-column: 1 / -1;
  }
  .footer-col--address {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
  .footer-col--links {
    grid-column: 2;
    grid-row: 2;
  }
  /* Logo and Follow Us centred */
  .footer-brand,
  .footer-cols > .footer-col:last-child {
    text-align: center;
  }
  .footer-brand a {
    display: inline-block;
  }
  .footer-cols > .footer-col:last-child .footer-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .footer-cols > .footer-col:last-child .footer-social {
    justify-content: center;
  }
}
/* Tablets: logo + address on the first row, links + social on the second */
@media (min-width: 640px) {
  .footer-cols {
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
    gap: 1rem 2rem;
  }
}
/* Desktop: all four columns in one row — Logo · Address · Quick Links ·
   Follow Us — spread evenly across the width with equal gaps */
@media (min-width: 900px) {
  .footer-cols {
    grid-template-columns: repeat(4, auto);
  }
}

/* Footer logo — the dark mark, same size as the header's */
.footer-logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-fast);
}
.footer-brand a:hover .footer-logo {
  transform: scale(1.03);
}

/* Column heading with a short gold rule under it */
.footer-heading {
  position: relative;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #000;
  padding-bottom: 0.3rem;
  margin-bottom: 0.45rem;
}
.footer-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 1px;
  background: #000;
}

/* Address, phones + email: one icon-led list; icons sit on the first line */
.footer-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: #000;
}
.footer-contact a {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.7rem;
  transition: color var(--transition-fast);
}
.footer-contact svg {
  width: 16px;
  height: 16px;
  margin-top: 0.15em;
  flex-shrink: 0;
  color: #000;
  stroke-width: 2;
  transition: color var(--transition-fast);
}
/* Second phone: icon kept for alignment but hidden — one call icon only */
.footer-contact svg.footer-icon-blank {
  visibility: hidden;
}
.footer-contact span {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.footer-contact a:hover,
.footer-contact a:hover svg {
  color: var(--accent-gold);
}

/* Quick Links — chevron-led links that nudge right on hover */
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #000;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.footer-links a::before {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.footer-links a:hover {
  color: var(--accent-gold);
  transform: translateX(4px);
}

.footer-cta {
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(245, 244, 240, 0.4);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.footer-cta:hover {
  color: var(--accent-gold);
  text-decoration-color: var(--accent-gold);
}

.footer-social {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer-social a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: #000;
  isolation: isolate;
  transition: color var(--transition-fast), border-radius var(--transition-med), transform var(--transition-fast), box-shadow var(--transition-fast);
}
/* Brand-colour layer, faded in on hover */
.footer-social a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.6);
  z-index: -1;
  transition: opacity var(--transition-fast), transform var(--transition-med);
}
.footer-social a:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px);
}
.footer-social a:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* Instagram — gradient rounded square */
.footer-social a[aria-label="Instagram"]::before {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.footer-social a[aria-label="Instagram"]:hover {
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(214, 36, 159, 0.35);
}

/* Facebook — blue circle, white "f" */
.footer-social a[aria-label="Facebook"]::before {
  background: #1877f2;
}
.footer-social a[aria-label="Facebook"]:hover {
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.35);
}

.footer-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #000;
}
@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
  /* "Developed by" credit nudged past the container edge, towards the page edge */
  .footer-bottom p:last-child {
    margin-right: -2rem;
  }
}
/* Phones: copyright + "Developed by" credit centred */
@media (max-width: 767px) {
  .footer-bottom {
    align-items: center;
    text-align: center;
  }
}
/* No underline at rest; a line draws in from the left on hover */
.footer-credit {
  position: relative;
  color: #000;
  transition: color var(--transition-fast);
}
.footer-credit::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}
.footer-credit:hover {
  color: var(--accent-gold);
}
.footer-credit:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   HOME — MINIMAL ARCHITECTURAL LAYOUT (ref: turtlearts.in)
   Label column + content column on a hairline grid, image-led works.
   ========================================================================== */
.works-section,
.contact-strip {
  position: relative;
  z-index: 2;
  padding-block: clamp(4.5rem, 9vw, 8rem);
  border-top: 1px solid var(--border-subtle);
}
.works-section,
.contact-strip {
  background-color: var(--bg-secondary);
}
/* Shared page background colour */
.page-backdrop,
.contact-min {
  position: relative;
  overflow: clip;
  background-color: var(--bg-secondary);
}
/* Sits above the home hero's parallax image, like .works-section did */
.page-backdrop {
  z-index: 2;
}
.page-backdrop > section {
  position: relative;
  z-index: 1;
  background: transparent;
}
.works-section > .container,
.about-story > .container,
.contact-min > .container {
  position: relative;
  z-index: 1;
}

.arch-body {
  min-width: 0;
}

.arch-label {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.arch-label .section-tag {
  margin-bottom: 0;
}

.arch-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-strong);
  transition: gap var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.text-link:hover {
  gap: 0.9rem;
  color: var(--accent-gold);
  border-color: var(--accent-gold);
}

/* Home · Selected Projects header — larger, black */
.works-section .arch-head .section-tag {
  font-size: 0.95rem;
  color: #000;
}
/* Home "Browse Projects" pills — same type as the "Selected Projects" tag */
.works-section .btn-pill-outline {
  padding: 0.75rem 1.75rem;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Phones: "Browse Projects" moves from the header to a pill under the 5 cards */
.home-works-more {
  display: none;
}
@media (max-width: 767px) {
  .works-section .arch-head .btn-pill-outline {
    display: none;
  }
  .home-works-more {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
  }
}
.btn-pill-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.25rem;
  border: 1px solid #000;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #000;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.btn-pill-outline:hover,
.btn-pill-outline:focus-visible {
  background-color: #000;
  color: #fff;
}

/* 02 · Selected Works — aligned grid of arch cards (same card as projects.php) */
.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 2.5vw, 2rem);
  align-items: stretch;
}
@media (min-width: 640px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Desktop — 3 per row (1 2 3 / 4 5) */
@media (min-width: 960px) {
  .works-grid,
  .works-section .arch-head,
  .contact-strip .arch-body {
    /* the CTA below shares the cards' left edge */
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
  .works-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .works-grid .arch-card:nth-child(3n + 2) { transition-delay: 0.08s; }
  .works-grid .arch-card:nth-child(3n) { transition-delay: 0.16s; }
}

/* Home cards — image only; on hover the image lifts into the arch
   and the title + location rise into the space below it */
.works-grid .arch-card {
  position: relative;
  height: 340px;
}
.works-grid .arch-media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  transition: height 0.9s var(--ease-out-expo), border-radius 0.9s var(--ease-out-expo);
}
.works-grid .arch-card:hover .arch-media {
  height: 70%;
  border-radius: 0 0 50% 50% / 0 0 26% 26%;
}
.works-grid .arch-card:hover .arch-media img {
  transform: none;
  filter: brightness(0.9) saturate(0.92);
}
.works-grid .arch-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 30%;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.8s var(--ease-out-expo);
}
.works-grid .arch-card-type {
  color: rgba(10, 11, 12, 0.85);
}
/* The text strip is only 30% of the card — keep titles on one line so they
   never climb back over the image */
.works-grid .arch-card-body {
  gap: 0.3rem;
  padding: 0.5rem 1rem;
}
.works-grid .arch-card-title {
  font-size: clamp(0.95rem, 1.35vw, 1.15rem);
  letter-spacing: 0.2em;
  line-height: 1.3;
}
.works-grid .arch-card:hover .arch-card-body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.works-grid .arch-card::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleX(0);
  transition: transform 0.8s var(--ease-out-expo);
}
.works-grid .arch-card:hover::after {
  background: var(--accent-stone);
  transform: scaleX(1);
}

/* Touch screens have no hover — show the finished state */
@media (hover: none) {
  .works-grid .arch-media {
    height: 70%;
    border-radius: 0 0 50% 50% / 0 0 26% 26%;
  }
  .works-grid .arch-card-body {
    opacity: 1;
    transform: none;
  }
  .works-grid .arch-card::after {
    transform: none;
  }
}

/* 03 · Practice list */
.cta-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent-emph);
}

/* 03 · Design Details — principles list + self-drawing section drawing
   (markup: includes/design-details.php, behaviour: initDesignDetails) */
.design-section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
  border-top: 1px solid var(--border-subtle);
  --dd-ink: rgba(27, 28, 30, 0.72);
  --dd-timber: #8b6a4a;
  --dd-roof: #a5664b;
  --dd-gold: var(--accent-gold);
  --dd-cycle: 5s;
}
.dd-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 960px) {
  .dd-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    max-width: 1080px;
    margin-inline: auto;
  }
}
.design-section .section-tag {
  font-size: 0.95rem;
  color: #000;
}
.dd-title {
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 460px;
}
.dd-title em {
  color: inherit;
}

/* Principles — the active one carries a gold progress line on top */
.dd-list {
  list-style: none;
}
.dd-item {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.25rem 1rem;
  padding: 1.35rem 0 1.4rem;
  border-top: 1px solid var(--border-strong);
  outline: none;
}
.dd-item:last-child {
  border-bottom: 1px solid var(--border-strong);
}
.dd-item:nth-child(2) { transition-delay: 0.08s; }
.dd-item:nth-child(3) { transition-delay: 0.16s; }
.dd-item-bar {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--dd-gold);
  transform: scaleX(0);
  transform-origin: left;
}
.dd-item.is-active .dd-item-bar {
  animation: dd-progress var(--dd-cycle) linear forwards;
}
.design-section.is-paused .dd-item.is-active .dd-item-bar,
.design-section:not(.is-cycling) .dd-item.is-active .dd-item-bar {
  animation: none;
  transform: scaleX(1);
}
@keyframes dd-progress {
  to { transform: scaleX(1); }
}
.dd-item-num {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  padding-top: 0.3rem;
  transition: color var(--transition-fast);
}
.dd-item-title {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}
.dd-item-text {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 420px;
  margin-top: 0.4rem;
  opacity: 0.7;
  transition: opacity var(--transition-med);
}
.dd-item.is-active .dd-item-num,
.dd-item:focus-visible .dd-item-num {
  color: var(--dd-gold);
}
.dd-item.is-active .dd-item-title {
  color: var(--text-primary);
}
.dd-item.is-active .dd-item-text {
  opacity: 1;
}
.dd-item:focus-visible {
  outline: 1px dashed var(--border-active);
  outline-offset: 4px;
}

.dd-swatches {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.dd-swatches li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.dd-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform var(--transition-med);
}
.dd-swatch--laterite {
  background: radial-gradient(circle at 30% 30%, #93583e 0 1.5px, transparent 2px), radial-gradient(circle at 70% 65%, #93583e 0 1.2px, transparent 1.7px), #c9926f;
}
.dd-swatch--timber {
  background: repeating-linear-gradient(100deg, #8b6a4a 0 2px, #a3815e 2px 4px);
}
.dd-swatch--concrete {
  background: linear-gradient(135deg, #d4cfc5, #f1eee8 50%, #cfcabf);
}
.dd-item.is-active .dd-swatch {
  transform: scale(1.2);
}

/* Drawing */
.dd-figure {
  position: relative;
  margin: 0;
}
.dd-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-main);
}
.dd-gridsheet {
  color: rgba(27, 28, 30, 0.07);
}
.dd-ink,
.dd-ink-thin,
.dd-hatch,
.dd-timber,
.dd-timber-thin,
.dd-roof,
.dd-ray,
.dd-air path,
.dd-lead {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dd-ink { stroke: var(--dd-ink); stroke-width: 1.4; }
.dd-ink-thin { stroke: var(--dd-ink); stroke-width: 0.9; }
.dd-hatch { stroke: rgba(27, 28, 30, 0.3); stroke-width: 0.8; }
.dd-timber { stroke: var(--dd-timber); stroke-width: 5; stroke-linecap: butt; }
.dd-timber-thin { stroke: var(--dd-timber); stroke-width: 1.6; stroke-linecap: butt; }
.dd-roof { stroke: var(--dd-roof); stroke-width: 7; }
.dd-ray { stroke: var(--dd-gold); stroke-width: 1; stroke-dasharray: 2 6; opacity: 0.7; }
.dd-lightwell { fill: url(#dd-light); }
.dd-shade { fill: rgba(27, 28, 30, 0.07); }
.dd-concrete { fill: url(#dd-concrete); }
.dd-laterite { fill: url(#dd-laterite); }
.dd-leaf { fill: rgba(112, 128, 92, 0.32); }
.dd-person circle { fill: var(--dd-ink); }
.dd-person path { fill: none; stroke: var(--dd-ink); stroke-width: 2.2; stroke-linecap: round; }
.dd-note {
  font-size: 10px;
  letter-spacing: 0.2em;
  fill: var(--text-muted);
}
.dd-sheet-title {
  font-size: 12px;
  letter-spacing: 0.28em;
  fill: var(--text-primary);
}

.dd-sun-core { fill: none; stroke: var(--dd-gold); stroke-width: 1.4; }
.dd-sun-rays path {
  fill: none;
  stroke: var(--dd-gold);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.dd-sun-rays {
  transform-origin: 360px 70px;
  animation: dd-spin 40s linear infinite;
}
@keyframes dd-spin {
  to { transform: rotate(360deg); }
}

/* Air moves continuously once the drawing is in */
.dd-air path {
  stroke: var(--dd-gold);
  stroke-width: 1.3;
  stroke-dasharray: 3 9;
  animation: dd-flow 2.4s linear infinite;
}
.dd-air .dd-air-2 { opacity: 0.6; animation-duration: 3s; }
.dd-air .dd-air-3 { animation-duration: 2s; }
@keyframes dd-flow {
  to { stroke-dashoffset: -24; }
}
.dd-lightwell {
  animation: dd-breathe 6s ease-in-out infinite;
}
@keyframes dd-breathe {
  50% { fill-opacity: 0.55; }
}

/* Scroll reveal: structure draws in, then fills, air and callouts follow */
.dd-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-in-out) calc(var(--d, 0) * 1s);
}
.dd-fill {
  opacity: 0;
  transition: opacity 1.1s ease calc(var(--d, 0) * 1s + 0.4s);
}
.dd-sun,
.dd-ray,
.dd-air,
.dd-note,
.dd-sheet-title {
  opacity: 0;
  transition: opacity 1s ease 1.4s;
}
.dd-figure.in-view .dd-draw { stroke-dashoffset: 0; }
.dd-figure.in-view .dd-fill,
.dd-figure.in-view .dd-sun,
.dd-figure.in-view .dd-air,
.dd-figure.in-view .dd-note,
.dd-figure.in-view .dd-sheet-title { opacity: 1; }
.dd-figure.in-view .dd-ray { opacity: 0.7; }
/* The figure fades as a whole too — skip the slide so the lines draw in place */
.dd-figure.fade-up-element { transform: none; }

/* Callouts — leader lines draw in; the active one is gold, the rest recede */
.dd-callout text {
  font-size: 14px;
  letter-spacing: 0.16em;
  fill: var(--text-primary);
  opacity: 0;
  transition: opacity 0.6s ease 2s, fill var(--transition-fast);
}
.dd-callout-num { fill: var(--dd-gold); }
.dd-lead {
  stroke: var(--dd-ink);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s var(--ease-in-out) 1.7s, stroke var(--transition-fast);
}
.dd-figure.in-view .dd-callout text { opacity: 1; }
.dd-figure.in-view .dd-lead { stroke-dashoffset: 0; }
.dd-callout {
  transition: opacity var(--transition-med);
}
.dd-figure[data-active="1"] .dd-callout:not([data-dd="1"]),
.dd-figure[data-active="2"] .dd-callout:not([data-dd="2"]),
.dd-figure[data-active="3"] .dd-callout:not([data-dd="3"]) {
  opacity: 0.5;
}
.dd-figure[data-active="1"] .dd-callout[data-dd="1"] .dd-lead,
.dd-figure[data-active="2"] .dd-callout[data-dd="2"] .dd-lead,
.dd-figure[data-active="3"] .dd-callout[data-dd="3"] .dd-lead,
.dd-figure[data-active="all"] .dd-lead {
  stroke: var(--dd-gold);
}

/* Hotspots pop in last and pulse; the active one fills gold */
.dd-hot {
  cursor: default;
}
.dd-hot-ring,
.dd-hot-pulse,
.dd-hot-num {
  transform-box: fill-box;
  transform-origin: center;
}
.dd-hot-ring {
  fill: var(--bg-secondary);
  stroke: var(--dd-gold);
  stroke-width: 1.3;
  transform: scale(0);
  transition: transform 0.6s var(--ease-out-expo) 2.1s, fill var(--transition-fast);
}
.dd-hot-num {
  font-size: 11px;
  text-anchor: middle;
  fill: var(--dd-gold);
  opacity: 0;
  transition: opacity 0.4s ease 2.3s, fill var(--transition-fast);
}
.dd-hot-pulse {
  fill: var(--dd-gold);
  opacity: 0;
}
.dd-hot[data-dd="2"] .dd-hot-ring { transition-delay: 2.2s, 0s; }
.dd-hot[data-dd="3"] .dd-hot-ring { transition-delay: 2.3s, 0s; }
.dd-figure.in-view .dd-hot-ring { transform: scale(1); }
.dd-figure.in-view .dd-hot-num { opacity: 1; }
.dd-figure.in-view .dd-hot-pulse { animation: dd-pulse 2.4s ease-out 2.6s infinite; }
@keyframes dd-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(2.6); opacity: 0; }
}
.dd-figure[data-active="1"] .dd-hot[data-dd="1"] .dd-hot-ring,
.dd-figure[data-active="2"] .dd-hot[data-dd="2"] .dd-hot-ring,
.dd-figure[data-active="3"] .dd-hot[data-dd="3"] .dd-hot-ring,
.dd-figure[data-active="all"] .dd-hot-ring {
  fill: var(--dd-gold);
}
.dd-figure[data-active="1"] .dd-hot[data-dd="1"] .dd-hot-num,
.dd-figure[data-active="2"] .dd-hot[data-dd="2"] .dd-hot-num,
.dd-figure[data-active="3"] .dd-hot[data-dd="3"] .dd-hot-num,
.dd-figure[data-active="all"] .dd-hot-num {
  fill: #fff;
}

/* Phones: the drawing shrinks to about half size, so every label is kept (same
   as desktop) but drawn larger in drawing units to stay readable */
@media (max-width: 639px) {
  .dd-callout text {
    font-size: 22px;
    letter-spacing: 0.08em;
  }
  .dd-note { font-size: 16px; letter-spacing: 0.12em; }
  .dd-hot-ring,
  .dd-hot-pulse { r: 16px; }
  .dd-hot-num { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-draw,
  .dd-lead { stroke-dashoffset: 0; transition: none; }
  .dd-fill,
  .dd-sun,
  .dd-air,
  .dd-note,
  .dd-sheet-title,
  .dd-callout text,
  .dd-hot-num { opacity: 1; transition: none; }
  .dd-ray { opacity: 0.7; transition: none; }
  .dd-hot-ring { transform: none; transition: none; }
  .dd-sun-rays,
  .dd-air path,
  .dd-lightwell,
  .dd-hot-pulse { animation: none !important; }
}

/* ==========================================================================
   HOME — minimal layout (ref: turtlearts.in), our theme
   Hero photo → intro line → Projects grid → image band (banner slider)
   → Events → Get in touch. Markup: index.php
   ========================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 01 · Hero — one full-bleed photo, no text */
.home-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #0a0b0c;
}
.home-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
/* Soft shade at the top only, so the white logo and links stay legible */
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 28%;
  background: linear-gradient(to bottom, rgba(10, 11, 12, 0.45), transparent);
  pointer-events: none;
}
@media (max-width: 767px) {
  .home-hero { height: 78svh; min-height: 460px; }
  /* The phone banner is portrait (1080 x 1350) — keep it centred, not dropped low */
  .home-hero-img { object-position: center center; }
}

/* Responsive, full-width studio film feature */
.home-video-section {
  width: 100%;
  margin-block: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  background: #0a0b0c;
}
.home-feature-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 767px) {
  .home-video-section {
    margin-block: 1.5rem;
  }
}

/* Shared content width — narrower than the header, like the reference */
.home-wrap {
  max-width: 1200px;
}

/* 02 · Intro line */
.home-intro {
  padding-block: clamp(4rem, 8vw, 6.5rem) clamp(1rem, 2vw, 1.5rem);
}
.home-intro-text {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(0.95rem, 1.25vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-secondary);
}
.home-intro-text strong {
  font-weight: 600;
  color: var(--text-primary);
}

/* 03 / 05 · Blocks — title left, pill right, grid below */
.home-block {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.home-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.home-block-title {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
/* Projects and Magazines carry the larger block heading */
section[aria-labelledby="home-projects-title"] .home-block-title,
section[aria-labelledby="home-magazine-title"] .home-block-title {
  font-size: clamp(2.25rem, 3.4vw, 2.875rem);
}
.home-block-btn {
  padding: 0.85rem 2rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Projects — three-column square tiles; name + place rise on hover */
.home-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
@media (min-width: 768px) {
  .home-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .home-gallery {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }
  .home-gallery .home-tile {
    width: 100%;
    justify-self: stretch;
  }
}
.home-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-card);
}
.home-gallery .home-tile {
  aspect-ratio: 4 / 5;
}
.home-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out-expo), filter 0.5s ease;
}
.home-tile:hover img,
.home-tile:focus-visible img {
  transform: scale(1.05);
  filter: brightness(0.7);
}
.home-tile-caption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.6s var(--ease-out-expo);
}
.home-tile:hover .home-tile-caption,
.home-tile:focus-visible .home-tile-caption {
  opacity: 1;
  transform: none;
}
/* same type as the page headings: Kulim Park light, sentence case */
.home-tile-name {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}
.home-tile-place {
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.8);
}
.home-tile:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}
/* Staggered reveal across each row */
.home-gallery .home-tile:nth-child(3n + 2) { transition-delay: 0.06s; }
.home-gallery .home-tile:nth-child(3n + 3) { transition-delay: 0.12s; }

/* Events — 3 landscape tiles */
.home-events {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.5rem, 1.2vw, 1rem);
}
@media (min-width: 640px) {
  .home-events { grid-template-columns: repeat(3, 1fr); }
}
.home-tile--event {
  aspect-ratio: 4 / 3;
}

/* Magazines — 3 covers side by side on desktop, stacked on phones.
   A4 page ratio, shown whole (never cropped) so the cover stays readable. */
.home-magazines {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
@media (min-width: 640px) {
  .home-magazines { grid-template-columns: repeat(3, 1fr); }
}
.home-tile--magazine {
  aspect-ratio: 595 / 842;
  background: var(--bg-primary);
}
.home-tile--magazine img {
  object-fit: contain;
}


/* Fewer than three tiles (covers still to come): keep them left, at a sane width */
.home-magazines--few {
  grid-template-columns: repeat(auto-fit, minmax(0, 300px));
  justify-content: start;
}

/* Phones: the covers stack down the page, one under the other */
@media (max-width: 639px) {
  .home-magazines,
  .home-magazines--few {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    justify-content: stretch;
    row-gap: 1.5rem;
  }
}

/* Phones: the pill stays beside the heading, so give it room to fit there */
@media (max-width: 639px) {
  .home-block-head {
    gap: 0.75rem;
  }
  .home-block-btn {
    padding: 0.55rem 1rem;
    font-size: 0.6875rem;
    white-space: normal;
  }
}

/* 06 · Get in touch */
.home-contact {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}
.home-contact .cta-title {
  max-width: 720px;
  margin: 0 auto 1.75rem;
}
.home-contact .contact-strip-actions {
  justify-content: center;
}

/* Touch screens have no hover — keep project names visible, but softer: they sit
   over the photo the whole time here, not just while hovering */
@media (hover: none) {
  .home-tile-caption {
    opacity: 1;
    transform: none;
    background: linear-gradient(to top, rgba(10, 11, 12, 0.6), transparent);
  }
  .home-tile-name {
    color: rgba(255, 255, 255, 0.78);
  }
  .home-tile-place {
    color: rgba(255, 255, 255, 0.58);
  }
}

/* 03b · Design Banner — image slider, the home page image band.
   Images enter with a circle reveal (data-fx; wipe and split also available)
   (markup: includes/design-banner.php, behaviour: initDesignBanner) */
.design-banner {
  --db-enter: 1.4s;
  --db-gutter: clamp(0.75rem, 1.6vw, 1.5rem);
  position: relative;
  height: clamp(500px, 92vh, 920px);
  overflow: hidden;
  background: var(--bg-primary);
  isolation: isolate;
}

/* Small off-white margin either side of the images */
.db-slides {
  position: absolute;
  inset: 0 var(--db-gutter);
  overflow: hidden;
}
.db-slide,
.db-slide-media {
  position: absolute;
  inset: 0;
}
.db-slide {
  margin: 0;
  z-index: 0;
  visibility: hidden;
}
.db-slide.is-active { z-index: 2; visibility: visible; }
.db-slide.is-leaving { z-index: 1; visibility: visible; }

.db-slide-media { overflow: hidden; }
.db-slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Incoming image reveals in its own way */
.design-banner.is-inview .db-slide.is-active .db-slide-media {
  animation: var(--db-in) var(--db-enter) cubic-bezier(0.77, 0, 0.18, 1) both;
}
.db-slide[data-fx="wipe"]   { --db-in: db-in-wipe; }
.db-slide[data-fx="circle"] { --db-in: db-in-circle; }
.db-slide[data-fx="split"]  { --db-in: db-in-split; }

@keyframes db-in-wipe {
  from { clip-path: inset(0 0 0 100%); transform: translateX(-8%); }
  to   { clip-path: inset(0 0 0 0);    transform: none; }
}
@keyframes db-in-circle {
  from { clip-path: circle(0% at 68% 50%);   transform: scale(1.25); }
  to   { clip-path: circle(120% at 68% 50%); transform: none; }
}
@keyframes db-in-split {
  from { clip-path: inset(0 50% 0 50%); transform: scale(1.3); filter: brightness(1.6); }
  to   { clip-path: inset(0 0 0 0);     transform: none;       filter: none; }
}

/* The outgoing image holds still underneath until the new one covers it */

/* < > controls — bare chevrons at the edges */
.db-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 56px;
  height: 72px;
  margin-top: -36px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
  opacity: 0.85;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.db-arrow--prev { left: calc(var(--db-gutter) + clamp(0.25rem, 1vw, 1rem)); }
.db-arrow--next { right: calc(var(--db-gutter) + clamp(0.25rem, 1vw, 1rem)); }
.db-arrow:hover,
.db-arrow:focus-visible { opacity: 1; outline: none; }
.db-arrow:focus-visible svg { outline: 1px solid rgba(255, 255, 255, 0.7); outline-offset: 6px; }
.db-arrow--prev:hover { transform: translateX(-4px); }
.db-arrow--next:hover { transform: translateX(4px); }

@media (max-width: 767px) {
  /* Images keep the same 4:5 shape as the mobile crops, so they show uncropped */
  .design-banner { height: min(calc((100vw - 2 * var(--db-gutter)) * 1.25), 88svh); }
  .db-arrow { width: 44px; height: 56px; margin-top: -28px; }
  .db-arrow svg { width: 40px; height: 40px; }
  .db-arrow--prev { left: var(--db-gutter); }
  .db-arrow--next { right: var(--db-gutter); }
}

@media (prefers-reduced-motion: reduce) {
  .design-banner .db-slide-media,
  .design-banner .db-slide-media img { animation: none !important; }
  .db-slide.is-leaving { visibility: hidden; }
}

/* 04 · Contact strip */
/* CTA strip — tighter than the other home sections */
.contact-strip {
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.contact-strip .cta-title {
  max-width: 760px;
  margin-bottom: 1.75rem;
}
.contact-strip .cta-title em {
  color: inherit;
}
.contact-strip-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}
/* Phones: "Start a Conversation" sits centred under the heading */
@media (max-width: 767px) {
  .contact-strip-actions {
    justify-content: center;
  }
}

/* ==========================================================================
   EVENTS PAGE — grid of event photos (open full-size in the lightbox)
   ========================================================================== */
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 640px) {
  .events-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .events-grid { grid-template-columns: repeat(3, 1fr); }
}
.event-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  cursor: zoom-in;
}
.event-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out-expo);
}
.event-photo:hover img,
.event-photo:focus-visible img {
  transform: scale(1.05);
}
.event-photo:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}
/* Publications page — the title is set like the projects ones ("Residential"):
   Kulim Park light, upright; "Magazines" / "Events" take the same light type */
.page-publications .page-title,
.page-publications .page-title em {
  font-style: normal;
  font-weight: 300;
}
.page-publications .home-block-title {
  font-size: clamp(1.75rem, 2.8vw, 2.375rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Magazines page — same 1 / 2 / 3 columns as events, but A4 pages shown whole */
.magazines-grid {
  column-gap: clamp(1rem, 2vw, 1.5rem);
  row-gap: clamp(1.5rem, 3vw, 2.1875rem);
}
.magazine-photo {
  aspect-ratio: 595 / 842;
  background: var(--bg-primary);
}
/* A feature that opens the published article, not the image */
.magazine-link {
  display: block;
  cursor: pointer;
}
.magazine-photo img {
  object-fit: contain;
}

.events-empty {
  font-size: 1.0625rem;
  font-weight: 300;
  color: var(--text-secondary);
}

/* Inner page titles (About / Projects / Events / Contact) */
.page-title {
  font-size: clamp(1.875rem, 3.8vw, 3rem);
  line-height: 1.2;
  max-width: 900px;
}

/* Projects page — a single project's heading sits smaller than the category
   title (Residential, Hospitality …), which keeps the full page-title size */
.page-projects .project-head-title {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
}

/* ==========================================================================
   ANIMATION & UTILITY CLASSES
   ========================================================================== */
.fade-up-element {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.fade-up-element.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Hero slides are moved by the scroll parallax, so no slow transform easing */
.hero-video {
  will-change: transform;
}
.hero-video {
  display: block;
  transition: none;
}
.hero-content {
  will-change: transform, opacity;
}

/* Home cards — the image wipes up out of the ground line and settles */
.works-grid .arch-card.fade-up-element {
  transform: none;
  opacity: 1;
}
.works-grid .arch-card.fade-up-element .arch-media {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.3s var(--ease-out-expo), height 0.9s var(--ease-out-expo), border-radius 0.9s var(--ease-out-expo);
  transition-delay: inherit;
}
.works-grid .arch-card.fade-up-element .arch-media img {
  transform: scale(1.25);
  transition: transform 1.8s var(--ease-out-expo), filter 0.6s ease;
  transition-delay: inherit;
}
.works-grid .arch-card.fade-up-element.in-view .arch-media {
  clip-path: inset(0 0 0 0);
}
.works-grid .arch-card.fade-up-element.in-view .arch-media img {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .works-grid .arch-card.fade-up-element .arch-media {
    clip-path: none;
  }
  .works-grid .arch-card.fade-up-element .arch-media img {
    transform: none;
  }
}


/* ==========================================================================
   FLOATING ACTION BUTTONS — Instagram + call, fixed to the right edge,
   vertically centred. Studio graphite + gold, matching the site palette.
   Sits below the header / mobile drawer (z-index 1000+) so the drawer covers it.
   ========================================================================== */
.fab-stack {
  position: fixed;
  right: clamp(0.75rem, 1.5vw, 1.25rem);
  top: 62%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  line-height: 0;
  border-radius: 50%;
  background: #1b1c1e;
  border: 1px solid rgba(200, 185, 156, 0.35);
  color: #f5f4f0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.fab svg {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.fab:hover,
.fab:focus-visible {
  background: #c8b99c;
  border-color: #c8b99c;
  color: #1b1c1e;
  transform: scale(1.06);
}
.fab:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .fab-stack {
    top: 72%;
  }
  .fab {
    width: 48px;
    height: 48px;
  }
  .fab svg {
    width: 22px;
    height: 22px;
  }
}

/* ==========================================================================
   "THERE'S MORE INSIDE" CUES — projects tiles + home cards
   All Works: tiles look like a stack of photos, with an arrow; inside a project a zoom icon says the photo opens full-size.
   Always shown on phones / touch; on desktop the arrow appears on hover.
   ========================================================================== */
.work-tile-go,
.arch-card-go {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f5f4f0;
  background: rgba(14, 15, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.work-tile-go,
.arch-card-go {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out-expo), background var(--transition-fast), color var(--transition-fast);
}
.work-tile-go {
  right: 0.75rem;
  bottom: 0.75rem;
}
.arch-card-go {
  top: 0.75rem;
  right: 0.75rem;
}

/* All Works — arrow; direct galleries and project views — zoom only */
.works-gallery.is-all:not(.is-direct) .work-tile-go-zoom,
.works-gallery.is-direct .work-tile-go-arrow,
.works-gallery:not(.is-all) .work-tile-go-arrow {
  display: none;
}
/* Stacked-photos edge behind each All Works tile */
.works-gallery.is-all .work-tile {
  overflow: visible;
  box-shadow: 5px -5px 0 -1px var(--bg-card), 5px -5px 0 0 rgba(0, 0, 0, 0.08),
              10px -10px 0 -2px #dcd7cd;
}
/* keep the zoomed image clipped now the tile itself isn't */
.works-gallery.is-all .work-tile img {
  clip-path: inset(0);
}

/* Hover / focus (desktop): arrow turns gold */
.work-tile:hover .work-tile-go,
.work-tile:focus .work-tile-go,
.arch-card:hover .arch-card-go {
  background: #c8b99c;
  border-color: #c8b99c;
  color: #1b1c1e;
}
.work-tile:hover .work-tile-go-arrow,
.arch-card:hover .arch-card-go svg {
  transform: translateX(2px);
}
.work-tile-go svg,
.arch-card-go svg {
  transition: transform var(--transition-fast);
}

/* Desktop with a mouse: arrow / zoom only on hover */
@media (hover: hover) and (min-width: 768px) {
  .work-tile-go,
  .arch-card-go {
    opacity: 0;
    transform: scale(0.7);
  }
  .work-tile:hover .work-tile-go,
  .work-tile:focus .work-tile-go,
  .arch-card:hover .arch-card-go {
    opacity: 1;
    transform: none;
  }
}

/* Phones / touch: always visible; the arrow gives a soft pulse now and then */
@media (max-width: 767px), (hover: none) {
  .works-gallery.is-all .work-tile-go,
  .arch-card-go {
    animation: cue-pulse 2.8s ease-out 1.5s infinite;
  }
  /* sits above the title strip on the bottom fade */
  .works-gallery.is-all .work-tile-name--project {
    right: 4rem;
  }
}
@keyframes cue-pulse {
  0% { box-shadow: 0 0 0 0 rgba(200, 185, 156, 0.6); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(200, 185, 156, 0); }
}

/* Home cards: the badge waits for the photo's wipe-in */
.works-grid .arch-card.fade-up-element .arch-card-go {
  opacity: 0;
}
.works-grid .arch-card.fade-up-element.in-view .arch-card-go {
  opacity: 1;
  transition-delay: 0.8s;
}
@media (hover: hover) and (min-width: 768px) {
  .works-grid .arch-card.fade-up-element.in-view .arch-card-go {
    opacity: 0;
    transition-delay: 0s;
  }
  .works-grid .arch-card.fade-up-element.in-view:hover .arch-card-go {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .works-gallery.is-all .work-tile-go,
  .arch-card-go {
    animation: none;
  }
}