/* ============================================================
   SYNERGO — Design Tokens
   Black #060606 / Charcoal #121317 / Off-white #F3F1EA / Red #C81E1E
   Display: Jost (thin, geometric) · Body: Manrope (light)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500&family=Manrope:wght@200;300;400;500;600&display=swap');

:root{
  --black: #050505;
  --charcoal: #101114;
  --charcoal-2: #17181c;
  --off-white: #f3f0e8;
  --off-white-dim: rgba(243,240,232,0.62);
  --off-white-faint: rgba(243,240,232,0.32);
  --red: #c81e1e;
  --red-glow: rgba(200,30,30,0.55);
  --gold: #cfa668;
  --gold-soft: rgba(207,166,104,0.5);
  --line: rgba(243,240,232,0.10);
  --line-strong: rgba(243,240,232,0.18);

  --display: 'Jost', sans-serif;
  --body: 'Manrope', sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background: var(--black); scroll-behavior: auto; }
html, body{ height:100%; }

body{
  background: var(--black);
  color: var(--off-white);
  font-family: var(--body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
button{ font-family: inherit; background:none; border:none; color:inherit; cursor:none; }
ul{ list-style:none; }

::selection{ background: var(--red); color: var(--off-white); }

/* ---------- Grain / atmosphere ---------- */
.grain{
  position: fixed; inset: -10%;
  width: 120%; height: 120%;
  background-image: url('../images/grain.png');
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.5;
  mix-blend-mode: overlay;
  animation: grainShift 8s steps(8) infinite;
}
@keyframes grainShift{
  0%{ transform: translate(0,0); } 12.5%{ transform: translate(-2%,2%); }
  25%{ transform: translate(2%,-1%); } 37.5%{ transform: translate(-1%,-2%); }
  50%{ transform: translate(2%,2%); } 62.5%{ transform: translate(-2%,1%); }
  75%{ transform: translate(1%,-2%); } 87.5%{ transform: translate(-2%,-1%); }
  100%{ transform: translate(0,0); }
}
.vignette{
  position: fixed; inset:0; pointer-events:none; z-index: 9997;
  box-shadow: inset 0 0 22vw rgba(0,0,0,0.55);
}

/* ---------- Page transition overlay ---------- */
.page-transition{
  position: fixed; inset:0; z-index: 10500;
  background: var(--black);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.page-transition.is-active{
  transform: scaleY(1);
  transition: transform 620ms cubic-bezier(0.76,0,0.24,1);
}

/* ---------- Typography ---------- */
.eyebrow{
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--off-white-dim);
}
.eyebrow::before{
  content:'';
  display:inline-block;
  width: 22px; height:1px;
  background: var(--red);
  margin-right: 14px;
  vertical-align: middle;
  transform: translateY(-2px);
}

h1, h2, h3, .display{
  font-family: var(--display);
  font-weight: 200;
  color: var(--off-white);
  letter-spacing: -0.01em;
}

.h1{
  font-size: clamp(2.6rem, 6.4vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 200;
}
.h2{
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 200;
}
.h3{
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 300;
  letter-spacing: 0;
}

p.lede{
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 300;
  color: var(--off-white-dim);
  line-height: 1.8;
  max-width: 42ch;
}

.mono-num{
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--off-white-faint);
}

/* ---------- Layout ---------- */
.wrap{
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 6vw;
}
section{ position: relative; }
.section-pad{ padding: clamp(90px, 12vw, 160px) 0; }
.hr{
  height:1px;
  background: var(--line);
  border:none;
}

/* ---------- Custom cursor (soft luxury glow) ---------- */
.cursor-dot{
  position: fixed; top:0; left:0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--off-white);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: background 300ms var(--ease), opacity 300ms var(--ease);
  will-change: transform;
}
.cursor-dot.is-click{ background: var(--red); }
.cursor{
  position: fixed;
  top:0; left:0;
  width: 100px; height: 100px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(243,240,232,0.40) 0%, rgba(243,240,232,0.18) 35%, rgba(243,240,232,0.06) 60%, rgba(243,240,232,0) 78%);
  filter: blur(10px);
  mix-blend-mode: screen;
  transition: background 520ms var(--ease-soft), width 520ms var(--ease-soft), height 520ms var(--ease-soft), filter 520ms var(--ease-soft);
  will-change: transform, width, height;
}
.cursor.is-click{
  width: 130px; height: 130px;
  background: radial-gradient(circle, rgba(200,30,30,0.58) 0%, rgba(200,30,30,0.26) 38%, rgba(200,30,30,0.08) 62%, rgba(200,30,30,0) 80%);
  filter: blur(13px);
}
.cursor.is-hover{
  width: 170px; height: 170px;
  background: radial-gradient(circle, rgba(207,166,104,0.26) 0%, rgba(243,240,232,0.14) 38%, rgba(243,240,232,0.04) 62%, rgba(243,240,232,0) 80%);
  filter: blur(16px);
}
@media (max-width: 900px), (pointer: coarse){
  .cursor, .cursor-dot{ display:none; }
  body{ cursor: auto; }
  a, button{ cursor: pointer; }
}

/* ---------- Loader ---------- */
.loader{
  position: fixed; inset:0;
  background: var(--black);
  z-index: 10000;
  display:flex; align-items:center; justify-content:center;
  transition: opacity 900ms var(--ease-soft), visibility 900ms;
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner{ position:relative; display:flex; align-items:center; justify-content:center; }
.loader-glow{
  position:absolute; width: 340px; height: 340px; border-radius:50%;
  background: radial-gradient(circle, rgba(207,166,104,0.16) 0%, rgba(200,30,30,0.08) 45%, transparent 72%);
  opacity:0; animation: loaderGlow 2200ms var(--ease-soft) forwards;
}
@keyframes loaderGlow{ 0%{ opacity:0; transform: scale(0.7);} 100%{ opacity:1; transform: scale(1);} }
.loader-mark{ position:relative; width: 200px; opacity:0; transform: translateY(6px); }
.loader-mark.is-in{ animation: loaderIn 1400ms var(--ease-soft) forwards; }
@keyframes loaderIn{
  0%{ opacity:0; transform: translateY(6px); }
  55%{ opacity:1; transform: translateY(0); }
  100%{ opacity:1; transform: translateY(0); }
}
.loader-rule{
  position:absolute; left:50%; bottom:-18px; transform: translateX(-50%);
  width:0; height:1px; background: var(--gold-soft);
}
.loader-mark.is-in .loader-rule{ animation: loaderRule 900ms var(--ease-soft) 900ms forwards; }
@keyframes loaderRule{ 0%{ width:0; } 100%{ width:120px; } }

/* ---------- Nav ---------- */
.nav{
  position: fixed; top:0; left:0; right:0;
  z-index: 500;
  padding: 26px 6vw;
  display:flex; align-items:center; justify-content:space-between;
  mix-blend-mode: normal;
  transition: padding 400ms var(--ease), background 400ms var(--ease), border-color 400ms var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  padding: 16px 6vw;
  background: rgba(6,6,6,0.78);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav-logo img{ height: 26px; width:auto; }
.nav-links{ display:flex; align-items:center; gap: 46px; }
.nav-links a{
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--off-white-dim);
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background: var(--red);
  transition: width 380ms var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-active::after{ width:100%; }
.nav-links a.is-active{ color: var(--off-white); }
.nav-cta{
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  padding: 11px 22px;
  border-radius: 999px;
  display: inline-block;
  transition: border-color 300ms var(--ease), background 300ms var(--ease), transform 500ms var(--ease-soft);
}
.nav-cta:hover{ border-color: var(--red); background: rgba(200,30,30,0.08); }
.nav-burger{ display:none; }

@media (max-width: 900px){
  .nav-links{
    position: fixed; inset:0; top:0;
    background: var(--black);
    flex-direction: column; justify-content:center; gap: 34px;
    transform: translateX(100%);
    transition: transform 500ms var(--ease-soft);
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ font-size: 20px; letter-spacing: 0.12em; }
  .nav-cta{ display:none; }
  .nav-burger{
    display:flex; flex-direction:column; gap:6px; z-index:600; width:26px;
  }
  .nav-burger span{ height:1px; width:100%; background: var(--off-white); transition: transform 300ms var(--ease), opacity 300ms var(--ease); }
  .nav-burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2){ opacity:0; }
  .nav-burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content: flex-end;
  position: relative;
  padding: 200px 0 90px;
  overflow: hidden;
}
.hero-blueprint{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
}
.hero-blueprint svg{ width:100%; height:100%; }
.hero-glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(ellipse 60% 50% at 68% 42%, rgba(200,30,30,0.14) 0%, rgba(207,166,104,0.06) 40%, transparent 70%);
  animation: heroPulse 9s ease-in-out infinite;
}
@keyframes heroPulse{
  0%, 100%{ opacity: 0.7; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.06); }
}
.hero-blueprint .bp-line{
  fill:none;
  stroke: var(--off-white-faint);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
}
.hero-blueprint .bp-line.accent{ stroke: var(--red); opacity: 0.7; }
.hero-scrim{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 30%, rgba(6,6,6,0) 0%, rgba(6,6,6,0.55) 62%, rgba(6,6,6,0.94) 100%);
  z-index:1;
}
.hero-content{ position:relative; z-index:2; }
.hero .eyebrow{ margin-bottom: 26px; }
.hero h1{ max-width: 15ch; }
.hero-sub{
  margin-top: 30px;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-scroll{
  display:flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--off-white-faint);
}
.hero-scroll .line{ width:1px; height:34px; background: var(--off-white-faint); position:relative; overflow:hidden; }
.hero-scroll .line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--red);
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--off-white);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 320ms var(--ease), gap 320ms var(--ease);
}
.btn:hover{ border-color: var(--red); gap: 20px; }
.btn .arrow{ width:16px; height:1px; background: var(--off-white); position:relative; }
.btn .arrow::after{
  content:''; position:absolute; right:0; top:-3px;
  width:6px; height:6px; border-top:1px solid var(--off-white); border-right:1px solid var(--off-white);
  transform: rotate(45deg);
}

.btn-solid{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  padding: 17px 36px; border-radius: 999px;
  border:1px solid var(--off-white);
  position: relative;
  overflow: hidden;
  transition: background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease), transform 500ms var(--ease-soft), box-shadow 500ms var(--ease-soft);
}
.btn-solid:hover{
  background: var(--red); border-color: var(--red); color: var(--off-white);
  box-shadow: 0 0 40px -6px var(--red-glow);
}

/* ---------- Reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(44px);
  filter: blur(6px);
  transition: opacity 1300ms var(--ease-soft), transform 1300ms var(--ease-soft), filter 1300ms var(--ease-soft);
}
.reveal.is-visible{ opacity:1; transform: translateY(0); filter: blur(0); }
.reveal-delay-1{ transition-delay: 110ms; }
.reveal-delay-2{ transition-delay: 220ms; }
.reveal-delay-3{ transition-delay: 330ms; }

/* ---------- Gold shimmer sweep (headline accent) ---------- */
.shimmer{
  background: linear-gradient(100deg, var(--off-white) 40%, var(--gold) 50%, var(--off-white) 60%);
  background-size: 260% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.shimmer.is-visible{ animation: shimmerSweep 2.6s var(--ease-soft) 400ms 1; }
@keyframes shimmerSweep{
  0%{ background-position: 130% 0; }
  100%{ background-position: -30% 0; }
}

/* ---------- Magnetic hover target ---------- */
[data-magnetic]{ display:inline-block; will-change: transform; transition: transform 500ms var(--ease-soft); }

/* ---------- Section heading pattern ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap: 40px;
  margin-bottom: clamp(48px, 6vw, 90px);
  flex-wrap: wrap;
}

/* ---------- Services ---------- */
.services{ border-top: 1px solid var(--line); }
.service-row{
  display:grid; grid-template-columns: 90px 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  transition: background 400ms var(--ease);
}
.service-row:hover{ background: rgba(243,240,232,0.02); }
.service-row .mono-num{ font-family: var(--display); font-size: 14px; color: var(--off-white-faint); }
.service-row h3{ font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 200; }
.service-row .service-desc{ color: var(--off-white-dim); font-size: 14px; max-width: 42ch; }
@media (max-width: 760px){
  .service-row{ grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
  .service-row .mono-num{ order:-1; }
}

/* ---------- 3D construct panel ---------- */
.construct{
  position: relative;
  height: 130vh;
  background: linear-gradient(180deg, var(--black) 0%, var(--charcoal) 100%);
}
.construct-sticky{
  position: sticky; top:0;
  height: 100vh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.construct-canvas{ position:absolute; inset:0; z-index:1; opacity:0.9; }
.construct-text{ position:relative; z-index:2; pointer-events:none; }
.construct-text .eyebrow{ margin-bottom: 22px; }
.construct-text h2{ max-width: 16ch; }

/* ---------- Projects teaser grid ---------- */
.grid-projects{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.proj-card{
  position:relative;
  aspect-ratio: 4/5;
  background: var(--charcoal);
  overflow:hidden;
  display:flex; align-items:flex-end;
  padding: 30px;
  isolation: isolate;
}
.proj-card .proj-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: grayscale(1) contrast(1.25) brightness(0.42);
  transform: scale(1.1);
  transition: transform 1400ms var(--ease-soft), filter 500ms var(--ease);
}
.proj-card:hover .proj-photo{ transform: scale(1.18); filter: grayscale(1) contrast(1.3) brightness(0.5); }
/* Luxury gradient-mesh art field, unique tint per category — sits over the photo */
.proj-card .art-mesh{
  position:absolute; inset:-10%;
  transition: transform 1100ms var(--ease-soft), opacity 700ms var(--ease);
  opacity: 0.75;
  mix-blend-mode: color;
}
.proj-card:hover .art-mesh{ transform: scale(1.08) rotate(1deg); opacity: 0.9; }
.art-mesh.mesh-a{ background:
  radial-gradient(circle at 20% 20%, rgba(200,30,30,0.55), transparent 45%),
  radial-gradient(circle at 80% 75%, rgba(207,166,104,0.4), transparent 50%),
  linear-gradient(160deg, #14151a 0%, #0a0a0c 70%); }
.art-mesh.mesh-b{ background:
  radial-gradient(circle at 75% 25%, rgba(207,166,104,0.45), transparent 45%),
  radial-gradient(circle at 25% 80%, rgba(200,30,30,0.4), transparent 50%),
  linear-gradient(200deg, #131318 0%, #0a0a0c 70%); }
.art-mesh.mesh-c{ background:
  radial-gradient(circle at 50% 15%, rgba(200,30,30,0.5), transparent 42%),
  radial-gradient(circle at 15% 70%, rgba(207,166,104,0.35), transparent 55%),
  linear-gradient(210deg, #121216 0%, #09090b 70%); }

.proj-card .proj-bp{ position:absolute; inset:0; opacity:0.7; mix-blend-mode: screen; transition: opacity 500ms var(--ease); }
.proj-card:hover .proj-bp{ opacity: 1; }
.proj-card .bp-line{ stroke: var(--gold-soft); }
.proj-card .bp-line.accent{ stroke: var(--red); opacity: 0.85; }

.proj-card::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(5,5,5,0) 35%, rgba(5,5,5,0.92) 100%);
}
.proj-card-inner{ position:relative; z-index:2; }
.proj-card .proj-cat{ font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color: var(--gold); margin-bottom:10px; display:block; }
.proj-card h3{ font-size: 1.1rem; font-weight:300; line-height:1.35; }
.proj-card .art-corner{
  position:absolute; z-index:2; top:24px; right:26px;
  width:26px; height:26px; opacity:0.5;
  border-top:1px solid var(--gold-soft); border-right:1px solid var(--gold-soft);
  transition: opacity 400ms var(--ease), width 400ms var(--ease), height 400ms var(--ease);
}
.proj-card:hover .art-corner{ opacity:0.9; width:34px; height:34px; }
@media (max-width: 900px){ .grid-projects{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .grid-projects{ grid-template-columns: 1fr; } }

/* ---------- Clients marquee ---------- */
.clients{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 64px 0; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap: 100px;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee-track img{ height: 30px; width:auto; filter: grayscale(1) brightness(0) invert(1); opacity:0.38; transition: opacity 500ms var(--ease), filter 500ms var(--ease); }
.marquee-track img:hover{ opacity:1; filter: grayscale(1) brightness(0) invert(1) drop-shadow(0 0 10px var(--gold-soft)); }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------- Footer ---------- */
.footer{ padding: 90px 0 40px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 70px; }
.footer-brand img{ height: 30px; margin-bottom: 22px; }
.footer-brand p{ color: var(--off-white-dim); font-size:14px; max-width: 34ch; }
.footer-col h4{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--off-white-faint); margin-bottom: 20px; }
.footer-col a, .footer-col p{ display:block; font-size: 14px; color: var(--off-white-dim); margin-bottom: 12px; transition: color 300ms var(--ease); }
.footer-col a:hover{ color: var(--red); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: 30px; border-top:1px solid var(--line); font-size:12px; color: var(--off-white-faint); flex-wrap:wrap; gap:16px; }
@media (max-width: 800px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .footer-top{ grid-template-columns: 1fr; } }

/* ---------- Page header (inner pages) ---------- */
.page-head{ padding: 190px 0 80px; border-bottom: 1px solid var(--line); }
.page-head .eyebrow{ margin-bottom: 24px; }

/* ---------- About page ---------- */
.founder-row{
  display:grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 70px; align-items:center;
  padding: 90px 0;
  border-bottom: 1px solid var(--line);
}
.founder-row:nth-child(even){ direction: rtl; }
.founder-row:nth-child(even) > *{ direction: ltr; }
.founder-photo{
  position:relative; overflow:hidden;
  aspect-ratio: 4/5;
  background: var(--charcoal);
}
.founder-photo img{ width:100%; height:100%; object-fit:cover; filter: grayscale(1) contrast(1.08); transform: scale(1.01); }
.founder-cred{ margin-top: 22px; color: var(--off-white-faint); font-size: 13px; line-height:1.9; }
.founder-role{ color: var(--red); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; margin-bottom: 14px; display:block; }
@media (max-width: 860px){
  .founder-row{ grid-template-columns: 1fr; gap: 30px; padding: 60px 0; }
  .founder-row:nth-child(even){ direction: ltr; }
}

.philosophy-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.philosophy-item{ padding-top: 26px; border-top: 1px solid var(--line-strong); }
.philosophy-item .mono-num{ display:block; margin-bottom: 18px; font-family: var(--display); font-size:14px; }
.philosophy-item h3{ font-size:1.1rem; font-weight:300; margin-bottom:10px; }
.philosophy-item p{ font-size:13.5px; color: var(--off-white-dim); }
@media (max-width: 900px){ .philosophy-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .philosophy-grid{ grid-template-columns: 1fr; } }

/* ---------- Projects page ---------- */
.filters{ display:flex; flex-wrap:wrap; gap: 10px 28px; margin-bottom: 60px; }
.filter-btn{
  font-size: 11px; letter-spacing:0.18em; text-transform:uppercase; color: var(--off-white-faint);
  padding-bottom: 6px; border-bottom: 1px solid transparent;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.filter-btn.is-active, .filter-btn:hover{ color: var(--off-white); border-color: var(--red); }

.grid-projects-full{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.grid-projects-full .proj-card{ transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.grid-projects-full .proj-card.is-hidden{ display:none; }
@media (max-width: 900px){ .grid-projects-full{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .grid-projects-full{ grid-template-columns: 1fr; } }

/* project modal */
.proj-modal{
  position: fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background: rgba(6,6,6,0.88); backdrop-filter: blur(10px);
  opacity:0; pointer-events:none;
  transition: opacity 420ms var(--ease);
}
.proj-modal.is-open{ opacity:1; pointer-events:all; }
.proj-modal-inner{
  max-width: 860px; width: 88vw; max-height: 82vh; overflow:auto;
  background: var(--charcoal); border:1px solid var(--line-strong);
  padding: 60px;
  transform: translateY(24px);
  transition: transform 420ms var(--ease);
}
.proj-modal.is-open .proj-modal-inner{ transform: translateY(0); }
.proj-modal-bp{ width:100%; aspect-ratio: 16/9; margin-bottom: 30px; }
.proj-modal-close{ position:absolute; top:36px; right:6vw; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; }
.proj-modal-meta{ display:flex; gap: 40px; margin-top: 26px; flex-wrap:wrap; }
.proj-modal-meta div span{ display:block; }
.proj-modal-meta .k{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color: var(--off-white-faint); margin-bottom:6px; }
.proj-modal-meta .v{ font-size:14px; color: var(--off-white); }
@media (max-width: 700px){ .proj-modal-inner{ padding: 36px 26px; } }

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 90px;
}
.contact-info .info-row{ padding: 26px 0; border-top: 1px solid var(--line); }
.contact-info .info-row:last-child{ border-bottom: 1px solid var(--line); }
.contact-info .k{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--off-white-faint); margin-bottom: 10px; }
.contact-info .v{ font-size: clamp(1.1rem, 2vw, 1.4rem); font-family: var(--display); font-weight:300; }
.contact-info .v a:hover{ color: var(--red); }

.field{ margin-bottom: 30px; }
.field label{ display:block; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color: var(--off-white-faint); margin-bottom: 12px; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom: 1px solid var(--line-strong);
  color: var(--off-white); font-family: var(--body); font-size: 16px; font-weight:300;
  padding: 10px 0; transition: border-color 300ms var(--ease);
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--red); }
.field textarea{ resize: vertical; min-height: 90px; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; gap: 50px; } }

/* utility */
.center-cta{ text-align:center; }
.mt-huge{ margin-top: clamp(60px,10vw,140px); }

/* ============================================================
   LUXURY MEDIA SYSTEM — photography, parallax, Ken Burns, reveal
   ============================================================ */
.media-frame{
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  clip-path: inset(0 0 0 0);
}
.media-frame.reveal-clip{
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1500ms var(--ease-soft);
}
.media-frame.reveal-clip.is-visible{ clip-path: inset(0 0 0% 0); }
.media-frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  display:block;
  filter: grayscale(0.55) contrast(1.12) brightness(0.62) sepia(0.12) hue-rotate(-6deg) saturate(1.3);
  transform: scale(1.12);
  transition: transform 1800ms var(--ease-soft), filter 800ms var(--ease);
}
.media-frame.duotone-red img{
  filter: grayscale(1) contrast(1.2) brightness(0.5);
}
.media-frame.duotone-red::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(200,30,30,0.22), rgba(5,5,5,0.55) 60%, rgba(5,5,5,0.9));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.media-frame.duotone-red::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: radial-gradient(ellipse at 30% 20%, rgba(200,30,30,0.14), transparent 55%);
  pointer-events: none;
}
.media-frame.is-visible img{ transform: scale(1); }
.media-frame.kenburns img{ animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns{
  0%{ transform: scale(1.06) translate(0,0); }
  100%{ transform: scale(1.16) translate(-1.4%, -1.6%); }
}
.media-frame .frame-caption{
  position:absolute; left:24px; bottom:22px; z-index:2;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--off-white-dim);
}
.media-frame .frame-corner{
  position:absolute; z-index:2; top:20px; left:20px;
  width:22px; height:22px;
  border-top:1px solid var(--gold-soft); border-left:1px solid var(--gold-soft);
  opacity:0.7;
}

[data-parallax]{ will-change: transform; }

/* Editorial gallery grid */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 12vw;
  gap: 14px;
}
.gallery-grid .media-frame:nth-child(1){ grid-column: 1 / 4; grid-row: 1 / 4; }
.gallery-grid .media-frame:nth-child(2){ grid-column: 4 / 7; grid-row: 1 / 3; }
.gallery-grid .media-frame:nth-child(3){ grid-column: 4 / 6; grid-row: 3 / 6; }
.gallery-grid .media-frame:nth-child(4){ grid-column: 6 / 7; grid-row: 3 / 5; }
.gallery-grid .media-frame:nth-child(5){ grid-column: 1 / 4; grid-row: 4 / 6; }
@media (max-width: 860px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 34vw; }
  .gallery-grid .media-frame:nth-child(1){ grid-column: 1/3; grid-row: 1/2; }
  .gallery-grid .media-frame:nth-child(2){ grid-column: 1/2; grid-row: 2/3; }
  .gallery-grid .media-frame:nth-child(3){ grid-column: 2/3; grid-row: 2/3; }
  .gallery-grid .media-frame:nth-child(4){ grid-column: 1/2; grid-row: 3/4; }
  .gallery-grid .media-frame:nth-child(5){ grid-column: 2/3; grid-row: 3/4; }
}

/* Full-bleed cinematic image band */
.image-band{ position:relative; height: 78vh; overflow:hidden; }
.image-band .media-frame{ position:absolute; inset:0; height:100%; }
.image-band-caption{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 0 6vw 70px;
}

/* ---------- Word-by-word text reveal ---------- */
.word-reveal .word{
  display:inline-block;
  overflow:hidden;
}
.word-reveal .word span{
  display:inline-block;
  transform: translateY(110%);
  transition: transform 1000ms var(--ease-soft);
}
.word-reveal.is-visible .word span{ transform: translateY(0); }