/* ============================================================
   HAVN ARCHITECTS — concept in the visual language of egecarpets.com
   Tokens lifted 1:1 from Ege Carpets (colors, fluid space/type scale,
   0.8s underline/zoom hover, 94→78px header, inverse footer).
   ============================================================ */

:root {
  /* --- palette (Ege neutrals + heritage green + yellow highlight) --- */
  --white: #ffffff;
  --ink: #1b1b1b;
  --n50: #f9f8f3;
  --n100: #f0efe9;
  --n200: #d9d8d3;
  --n300: #aaa9a3;
  --n400: #89877d;
  --n500: #6d6b61;
  --n600: #57564c;
  --heritage: #183028;
  --yellow: #f8f1ab;
  --accent: #0f8763;
  --error: #a3392a;

  --surface-default: var(--white);
  --surface-inverse: var(--ink);
  --text-default: var(--ink);
  --text-inverse: var(--white);

  /* --- fluid space scale (Ege exact clamps) --- */
  --space-s:   clamp(1rem, .9644rem + .1519vw, 1.25rem);
  --space-m:   clamp(1.25rem, 1.1966rem + .2279vw, 1.625rem);
  --space-l:   clamp(1.5rem, 1.4466rem + .2279vw, 1.875rem);
  --space-xl:  clamp(1.875rem, 1.8127rem + .2659vw, 2.3125rem);
  --space-2xl: clamp(2rem, 1.9288rem + .3038vw, 2.5rem);
  --space-3xl: clamp(2.25rem, 2.161rem + .3798vw, 2.875rem);
  --space-4xl: clamp(3rem, 2.8932rem + .4558vw, 3.75rem);
  --space-5xl: clamp(4rem, 3.8576rem + .6077vw, 5rem);
  --space-6xl: clamp(6rem, 5.7864rem + .9115vw, 7.5rem);
  --space-7xl: clamp(9.5rem, 9.1617rem + 1.4432vw, 11.875rem);

  /* --- fluid display scale (Ege exact clamps) --- */
  --display-step-0: clamp(1rem, .9644rem + .1519vw, 1.25rem);
  --display-step-1: clamp(1.2rem, 1.1573rem + .1823vw, 1.5rem);
  --display-step-2: clamp(1.44rem, 1.3887rem + .2188vw, 1.8rem);
  --display-step-3: clamp(1.728rem, 1.6665rem + .2625vw, 2.16rem);
  --display-step-4: clamp(2.0736rem, 1.9998rem + .315vw, 2.592rem);
  --display-step-5: clamp(2.4883rem, 2.3997rem + .378vw, 3.1104rem);
  --text-fluid-sm:   clamp(.875rem, .8352rem + .1765vw, .9722rem);
  --text-fluid-base: clamp(1rem, .9545rem + .2014vw, 1.1667rem);

  --tracking-narrow: .01775rem;
  --tracking-wide: .025em;

  /* --- motion (Ege) --- */
  --ease: cubic-bezier(.25, .1, .25, 1);
  --link-hover-animation-duration: .8s;
  --header-initial-height: 94px;
  --header-scrolled-height: 78px;

  --content-pad: clamp(1.25rem, 4vw, 3.5rem);
  --font-primary: 'Marcellus', 'Times New Roman', serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: currentColor; text-decoration: none; cursor: pointer; }
button { font: inherit; background: none; border: none; cursor: pointer; color: currentColor; }
body {
  font-family: var(--font-primary);
  font-size: var(--text-fluid-base);
  line-height: 1.3;
  color: var(--text-default);
  background: var(--surface-default);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* contain off-screen scroll-reveal transforms (±40px) so they never widen the page */
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- type utilities (Ege display steps) ---------- */
.display-1 { font-size: var(--display-step-5); line-height: 1; letter-spacing: var(--tracking-narrow); font-weight: 400; }
.display-4 { font-size: var(--display-step-2); line-height: 1; letter-spacing: var(--tracking-narrow); font-weight: 400; }
.display-6 { font-size: var(--display-step-0); line-height: 1.2; }
.tracking-narrow { letter-spacing: var(--tracking-narrow); }
.muted { opacity: .6; }
.content-pad { padding-inline: var(--content-pad); }

/* ---------- underline links (Ege .link — 0.8s draw, origin swap) ---------- */
.link { position: relative; display: inline-block; line-height: 120%; }
.link::before, .link::after {
  content: ""; position: absolute; left: 0; bottom: -.125rem;
  width: 100%; height: .0625rem; background: currentColor; opacity: .5;
}
.link::after {
  opacity: 1; transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--link-hover-animation-duration) var(--ease);
}
.link:hover::after, .group:hover .link::after { transform-origin: 0 50%; transform: scaleX(1); }
/* nav variant: underline only on hover */
.link-hover-only::before { opacity: 0; }

/* ---------- image zoom (Ege .link-image — scale 1.04, 0.8s ease-in-out) ---------- */
.card-media { position: relative; overflow: hidden; background: var(--n100); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.link-image { transition: transform var(--link-hover-animation-duration) ease-in-out; will-change: transform; }
.group:hover .link-image { transform: scale(1.04); }
.ratio-34 { aspect-ratio: 3 / 4; }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-1610 { aspect-ratio: 16 / 10; }

/* ---------- buttons (Ege btn-level1 filled / btn-level2 outline) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(.5rem, .45rem + .25vw, .9375rem) clamp(.875rem, .8rem + .3vw, 1.25rem);
  font-size: var(--text-fluid-base); letter-spacing: .576px;
  border: 1px solid var(--ink); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-level1 { background: var(--ink); color: var(--white); }
.btn-level1:hover, .btn-level1:focus-visible { background: transparent; color: var(--ink); }
.btn-level2 { background: transparent; color: var(--ink); }
.btn-level2:hover, .btn-level2:focus-visible { background: var(--ink); color: var(--white); }

/* ============================================================
   HEADER — transparent over hero, 94→78px shrink, hairline rule
   ============================================================ */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  height: var(--header-initial-height);
  padding-inline: var(--content-pad);
  background: transparent; color: var(--text-inverse);
  transition: height .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease);
}
.site-header.is-scrolled {
  height: var(--header-scrolled-height);
  background: var(--surface-default); color: var(--text-default);
}
.site-header.is-open { color: var(--text-inverse); }
.header-inner { position: relative; height: 100%; display: flex; align-items: center; gap: var(--space-2xl); z-index: 2; }
.header-rule {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; opacity: .3;
  transition: opacity .7s var(--ease) .3s;
}
.brand { font-size: 1.375rem; letter-spacing: .14em; display: flex; align-items: baseline; gap: .5rem; }
.brand-sub { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; opacity: .7; }
.header-nav { display: flex; gap: var(--space-l); margin-left: var(--space-4xl); font-size: var(--text-fluid-sm); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-l); font-size: var(--text-fluid-sm); }
.menu-btn { position: relative; width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.menu-btn-line { width: 22px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.site-header.is-open .menu-btn-line:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.site-header.is-open .menu-btn-line:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* fullscreen menu (Ege: inverse panel slides down 600ms) */
.menu-panel {
  position: fixed; inset: 0; height: 100vh; width: 100vw;
  background: var(--surface-inverse); color: var(--text-inverse);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .6s var(--ease), visibility 0s .6s;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-4xl);
  padding: calc(var(--header-initial-height) + var(--space-2xl)) var(--content-pad) var(--space-4xl);
  z-index: 1;
}
.menu-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0;
  pointer-events: none; transition: opacity .5s var(--ease); z-index: 0;
}
.site-header.is-open .menu-panel { transform: translateY(0); visibility: visible; transition: transform .6s var(--ease); }
.site-header.is-open .menu-scrim { opacity: 1; pointer-events: auto; }
.menu-nav { display: flex; flex-direction: column; gap: var(--space-s); }
.menu-link { font-size: var(--display-step-4); line-height: 1.1; letter-spacing: var(--tracking-narrow); overflow: hidden; width: fit-content; }
.menu-link span { display: inline-block; transform: translateY(110%); transition: transform .7s var(--ease), opacity .5s var(--ease); opacity: 0; }
.site-header.is-open .menu-link span { transform: translateY(0); opacity: 1; }
.site-header.is-open .menu-link:nth-child(1) span { transition-delay: .15s; }
.site-header.is-open .menu-link:nth-child(2) span { transition-delay: .2s; }
.site-header.is-open .menu-link:nth-child(3) span { transition-delay: .25s; }
.site-header.is-open .menu-link:nth-child(4) span { transition-delay: .3s; }
.site-header.is-open .menu-link:nth-child(5) span { transition-delay: .35s; }
.site-header.is-open .menu-link:nth-child(6) span { transition-delay: .4s; }
.menu-link:hover span { opacity: .6; }
.menu-meta { display: flex; gap: var(--space-6xl); font-size: var(--text-fluid-sm); opacity: .7; line-height: 1.6; }

/* ============================================================
   HERO — fullscreen media, 35% scrim, split headline L/R
   ============================================================ */
.hero { position: relative; min-height: 100svh; width: 100%; color: var(--text-inverse); overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-img {
  width: 100%; height: 100%; object-fit: cover;
  animation: hero-drift 18s var(--ease) both;
}
@keyframes hero-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.hero-topfade { position: absolute; inset-inline: 0; top: 0; height: var(--header-initial-height); background: linear-gradient(to bottom, rgba(0,0,0,.1), transparent); }
.hero-words {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-6xl);
  padding: var(--space-6xl) var(--content-pad);
}
.hero-word h1, .hero-word h2 { font-size: var(--display-step-5); line-height: 1; letter-spacing: var(--tracking-narrow); font-weight: 400; }
@media (min-width: 1024px) {
  .hero-words { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* hero entrance (Ege: appear-from-right / appear-from-left, mobile slide-from-bottom/top) */
@media (prefers-reduced-motion: no-preference) {
  .hero-word--left  { animation: appear-from-right 1s var(--ease) .2s both; }
  .hero-word--right { animation: appear-from-left 1s var(--ease) .35s both; }
  @media (max-width: 1023.5px) {
    .hero-word--left  { animation-name: slide-from-bottom; }
    .hero-word--right { animation-name: slide-from-top; }
  }
}
@keyframes appear-from-right  { from { opacity: 0; transform: translateX(2.5rem); }  to { opacity: 1; transform: none; } }
@keyframes appear-from-left   { from { opacity: 0; transform: translateX(-1.25rem); } to { opacity: 1; transform: none; } }
@keyframes appear-from-bottom { from { opacity: 0; transform: translateY(5rem); }   to { opacity: 1; transform: none; } }
@keyframes slide-from-bottom  { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes slide-from-top     { from { opacity: 0; transform: translateY(-2.5rem); } to { opacity: 1; transform: none; } }

/* ============================================================
   MODULES — shared section rhythm (Ege: py-6xl)
   ============================================================ */
.module { padding-block: var(--space-6xl); }
.module-head {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-s);
  margin-bottom: var(--space-3xl);
}
.module-head-right { display: flex; flex-direction: column; gap: var(--space-s); }
@media (min-width: 768px) {
  .module-head { flex-direction: row; align-items: center; }
  .module-head-right { flex-direction: row; align-items: center; gap: var(--space-5xl); }
}

/* scroll reveals (Ege inline-style pattern: opacity 0 + translate ±40px → none) */
[data-reveal] { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: transform, opacity; }
[data-reveal="from-right"]  { transform: translateX(40px); }
[data-reveal="from-left"]   { transform: translateX(-40px); }
[data-reveal="from-top"]    { transform: translateY(-40px); }
[data-reveal="from-bottom"] { transform: translateY(40px); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* card grids (Ege: 3-col, aspect 3/4, staggered column drop-in) */
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl) .625rem; }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card a { display: flex; flex-direction: column; gap: var(--space-s); }
.card-label { font-size: var(--text-fluid-sm); font-weight: 400; align-self: flex-start; }
.card-date { font-size: var(--text-fluid-sm); opacity: .5; margin-top: .25rem; }
/* column stagger: JS sets --drop per column, resolves on scroll */
[data-stagger-cols] .card { transform: translateY(var(--drop, 0px)); transition: transform 1.1s var(--ease); }
[data-stagger-cols].is-settled .card { transform: translateY(0); }

.journal-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl); }
@media (min-width: 900px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   HERITAGE BAND — deep green surface + yellow text highlight
   ============================================================ */
.heritage { background: var(--heritage); color: var(--text-inverse); }
.heritage-inner {
  min-height: 80vh; display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-2xl); padding-block: var(--space-6xl); max-width: 68rem;
}
.eyebrow { font-size: var(--text-fluid-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: .6; }
.eyebrow-lc { opacity: .8; margin-bottom: var(--space-s); }
.heritage-title { max-width: 24ch; }
.heritage-title .hl { font-style: normal; color: var(--yellow); }
.heritage-link { align-self: flex-start; }

/* ============================================================
   CAROUSEL — pinned left label + snap track (Ege Concepts)
   ============================================================ */
.carousel-module { position: relative; }
.carousel-pin {
  position: absolute; top: 50%; left: var(--content-pad); transform: translateY(-50%);
  z-index: 10; width: clamp(228px, 25vw, 345px);
  display: flex; flex-direction: column; gap: var(--space-l);
}
.carousel { position: relative; width: 100%; }
.carousel-track {
  display: flex; gap: .625rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-left: 75vw; padding-right: var(--content-pad);
  scroll-padding-left: 75vw;
  cursor: grab;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
@media (min-width: 768px) {
  .carousel-track {
    padding-left: calc(25% + var(--space-2xl) + var(--space-3xl));
    scroll-padding-left: calc(25% + var(--space-2xl) + var(--space-3xl));
  }
}
.carousel-slide {
  flex: 0 0 auto; width: clamp(320px, 25vw, 377px); scroll-snap-align: start;
  opacity: .6; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.carousel-slide.is-active { opacity: 1; transform: none; }
.carousel-slide .card-label { margin-top: var(--space-m); }
.carousel-slide a { display: block; }
.carousel-nav { display: flex; gap: .5rem; justify-content: flex-end; padding: var(--space-l) var(--content-pad) 0; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn:hover { background: var(--ink); color: var(--white); }
@media (max-width: 767.5px) {
  .carousel-pin { position: static; transform: none; width: auto; padding-inline: var(--content-pad); margin-bottom: var(--space-2xl); }
  .carousel-track { padding-left: var(--content-pad); scroll-padding-left: var(--content-pad); }
}

/* ============================================================
   EDITORIAL — 12-col feature (Ege: Matter by Snøhetta)
   ============================================================ */
.editorial { background: var(--n50); }
.editorial-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3xl);
  align-items: center; padding-block: var(--space-4xl);
}
.editorial-text { display: flex; flex-direction: column; gap: var(--space-l); max-width: 34rem; }
.editorial-body { white-space: pre-wrap; margin-bottom: var(--space-l); opacity: .85; line-height: 1.5; }
.editorial-text .btn { align-self: flex-start; }
@media (min-width: 1024px) {
  .editorial-grid { grid-template-columns: repeat(12, 1fr); }
  .editorial-text { grid-column: 2 / span 4; }
  .editorial-media { grid-column: 7 / span 6; }
  .editorial--flip .editorial-text { grid-column: 8 / span 4; grid-row: 1; }
  .editorial--flip .editorial-media { grid-column: 1 / span 6; grid-row: 1; }
}
.editorial--flip { background: var(--n100); }

/* ============================================================
   FOOTER — inverse, min-h-screen, giant wordmark (Ege)
   ============================================================ */
.site-footer {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--surface-inverse); color: var(--text-inverse);
  padding: var(--space-6xl) var(--content-pad) var(--space-3xl);
}
.footer-mark {
  font-size: clamp(6rem, 24vw, 22rem); line-height: .9; letter-spacing: .02em;
  color: var(--white); margin-bottom: var(--space-5xl); user-select: none;
}
.footer-cols {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3xl);
  margin-bottom: auto; padding-bottom: var(--space-6xl);
  font-size: var(--text-fluid-sm); line-height: 1.6;
}
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-col { display: flex; flex-direction: column; gap: .625rem; align-items: flex-start; }
.footer-col p { opacity: .7; }
.footer-heading { font-size: var(--text-fluid-sm); font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: .45; margin-bottom: .5rem; }
.footer-news { max-width: 22rem; }
.news-form { position: relative; display: flex; align-items: center; width: 100%; border-bottom: 1px solid rgba(255,255,255,.4); }
.news-form input {
  flex: 1; background: none; border: none; color: var(--white);
  padding: .625rem 0; font: inherit; font-size: var(--text-fluid-sm); outline: none;
}
.news-form input::placeholder { color: rgba(255,255,255,.5); }
.news-form button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: transform .4s var(--ease); }
.news-form button svg { width: 20px; height: 20px; }
.news-form button:hover { transform: translateX(4px); }
.news-ok { position: absolute; left: 0; bottom: -1.75rem; font-size: .8rem; color: var(--yellow); opacity: 0; transition: opacity .4s var(--ease); }
.news-form.sent .news-ok { opacity: 1; }
.footer-legal {
  display: flex; flex-direction: column; gap: var(--space-s);
  padding-top: var(--space-l); border-top: 1px solid rgba(255,255,255,.2);
  font-size: var(--text-fluid-sm); opacity: .8;
}
.footer-legal-links { display: flex; gap: var(--space-l); }
@media (min-width: 768px) { .footer-legal { flex-direction: row; justify-content: space-between; align-items: center; } }

/* ---------- responsive header ---------- */
@media (max-width: 1023.5px) {
  .header-nav, .header-contact { display: none; }
}

/* ============================================================
   ABOUT + CONTACT PAGE ADDITIONS — same tokens, same motion
   ============================================================ */

/* nav active state (current page) */
.link.is-active::before { opacity: .5; }
.link.is-active::after { opacity: 1; transform: scaleX(1); transform-origin: 0 50%; }
.menu-link.is-active { text-decoration: underline; text-underline-offset: .35em; }

/* sub-page hero intro line (About / Contact heroes) */
.hero-intro {
  position: absolute; left: var(--content-pad); bottom: var(--space-4xl); z-index: 1;
  max-width: 26rem; font-size: var(--text-fluid-base); line-height: 1.5;
}

/* card content wrapper for non-linked cards (values, team) */
.card-inner { display: flex; flex-direction: column; gap: var(--space-s); }
.card-role { font-size: var(--text-fluid-sm); opacity: .65; line-height: 1.5; }

/* by-the-numbers stats */
.stats-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4xl) var(--space-l); }
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-item { border-top: 1px solid var(--n200); padding-top: var(--space-m); }
.stat-number { display: flex; align-items: baseline; gap: .1em; }
.stat-label { margin-top: var(--space-s); }

/* team grid (portrait ratio-34, reuses .card / .link-image / .card-inner) */
.team-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl) .625rem; }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Contact page layout ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4xl); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 7fr 5fr; gap: var(--space-5xl); align-items: start; } }

/* form */
.form-field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: var(--space-l); }
.form-label { font-size: var(--text-fluid-sm); letter-spacing: var(--tracking-wide); }
.form-label .req { opacity: .55; margin-left: .2em; }
.form-label .opt { opacity: .5; font-size: var(--text-fluid-sm); margin-left: .3em; }
.form-input, .form-select, .form-textarea {
  width: 100%; font: inherit; font-size: var(--text-fluid-base); color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--n300); border-radius: 0;
  padding: .625rem .125rem; outline: none; transition: border-color .2s var(--ease);
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1b1b' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .25rem center; background-size: 18px;
  padding-right: 1.75rem;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
.form-input:focus-visible, .form-select:focus-visible, .form-textarea:focus-visible { border-color: var(--ink); }
.form-textarea { resize: vertical; min-height: 8rem; }
.form-field.has-error .form-input,
.form-field.has-error .form-select,
.form-field.has-error .form-textarea { border-color: var(--error); }
.form-error { font-size: var(--text-fluid-sm); color: var(--error); min-height: 1.2em; opacity: 0; transition: opacity .2s var(--ease); }
.form-field.has-error .form-error { opacity: 1; }
.form-actions { display: flex; align-items: center; gap: var(--space-l); margin-top: var(--space-m); flex-wrap: wrap; }
.form-status { font-size: var(--text-fluid-sm); opacity: .7; }
.form-status.is-success { color: var(--heritage); opacity: 1; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* contact info cards */
.info-cards { display: flex; flex-direction: column; margin-bottom: var(--space-2xl); }
.info-card { display: flex; gap: var(--space-m); align-items: flex-start; padding-block: var(--space-m); border-top: 1px solid var(--n200); }
.info-card:last-child { border-bottom: 1px solid var(--n200); }
.info-card svg { width: 20px; height: 20px; flex: none; margin-top: .25em; }
.info-card-heading { font-size: var(--text-fluid-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: .5; margin-bottom: .25rem; }
.info-card p { opacity: .85; line-height: 1.5; }

/* map block (existing photo, duotone + pin, no external embed) */
.map-block { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--n100); }
.map-block img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.map-tint { position: absolute; inset: 0; background: var(--heritage); mix-blend-mode: multiply; opacity: .6; }
.map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); color: var(--yellow); filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.map-pin svg { width: 34px; height: 34px; }
.map-label { position: absolute; left: var(--content-pad); bottom: var(--content-pad); background: var(--white); color: var(--ink); padding: var(--space-m) var(--space-l); max-width: 20rem; font-size: var(--text-fluid-sm); line-height: 1.5; }
.map-label strong { display: block; font-size: var(--text-fluid-base); margin-bottom: .25rem; }
@media (max-width: 767.5px) {
  .map-label { left: var(--space-m); right: var(--space-m); bottom: var(--space-m); max-width: none; }
}

/* social row */
.social-row { display: flex; gap: var(--space-l); flex-wrap: wrap; }

/* ============================================================
   PROJECTS / PROJECT / APPROACH PAGE ADDITIONS — same tokens, same motion
   ============================================================ */

/* ---------- projects index: filter bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: var(--space-2xl); }
.filter-chip {
  font-family: inherit; font-size: var(--text-fluid-sm); letter-spacing: .576px;
  padding: .5rem .95rem; border: 1px solid var(--n300); color: var(--ink); background: transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filter-chip:hover, .filter-chip:focus-visible { border-color: var(--ink); }
.filter-chip.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.filter-count { margin-left: auto; font-size: var(--text-fluid-sm); opacity: .55; }
.card-meta { font-size: var(--text-fluid-sm); opacity: .55; margin-top: .15rem; }
.card.is-hidden { display: none; }

/* ---------- project case study: facts / künye ---------- */
.facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3xl) var(--space-l); }
@media (min-width: 768px)  { .facts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .facts-grid { grid-template-columns: repeat(6, 1fr); } }
.fact-item { border-top: 1px solid var(--n200); padding-top: var(--space-m); }
.fact-label { font-size: var(--text-fluid-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: .5; margin-bottom: .35rem; }
.fact-value { font-size: var(--text-fluid-base); line-height: 1.35; }

/* ---------- lead paragraph under a module head ---------- */
.lead { max-width: 40rem; font-size: var(--display-step-0); line-height: 1.5; opacity: .85; }

/* ---------- full-bleed figure + gallery ---------- */
.figure-bleed { margin-block: var(--space-4xl); }
.figure-bleed img { width: 100%; height: auto; object-fit: cover; }
.figure-caption { padding: var(--space-m) var(--content-pad) 0; font-size: var(--text-fluid-sm); opacity: .6; }
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: .625rem; }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- numbered process list (project + approach) ---------- */
.process-list { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl) var(--space-2xl); }
@media (min-width: 768px)  { .process-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-list.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.process-item { border-top: 1px solid var(--n200); padding-top: var(--space-m); display: flex; flex-direction: column; gap: .5rem; }
.process-num { font-size: var(--text-fluid-sm); letter-spacing: var(--tracking-wide); opacity: .5; }
.process-body { font-size: var(--text-fluid-base); opacity: .8; line-height: 1.5; }

/* ---------- sustainability green band (Ege: circular economy) ---------- */
.eco { background: var(--heritage); color: var(--text-inverse); }
.eco-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4xl); align-items: center; padding-block: var(--space-6xl); }
@media (min-width: 1024px) { .eco-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5xl); } }
.eco-text { display: flex; flex-direction: column; gap: var(--space-l); }
.eco-media .card-media { background: rgba(255,255,255,.06); }
.eco-title .hl { font-style: normal; color: var(--yellow); }
.principle-list { display: flex; flex-direction: column; }
.principle-item { display: flex; gap: var(--space-m); align-items: flex-start; padding-block: var(--space-m); border-top: 1px solid rgba(255,255,255,.18); }
.principle-item:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.principle-item svg { width: 20px; height: 20px; flex: none; margin-top: .2em; color: var(--yellow); }
.principle-heading { font-size: var(--text-fluid-base); margin-bottom: .25rem; }
.principle-body { font-size: var(--text-fluid-sm); opacity: .8; line-height: 1.5; }

/* ---------- culture band (full-bleed image + overlay) ---------- */
.culture-band { position: relative; min-height: 70vh; display: flex; align-items: flex-end; overflow: hidden; }
.culture-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.culture-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.culture-inner { position: relative; z-index: 1; color: var(--white); padding: var(--space-6xl) var(--content-pad); max-width: 46rem; display: flex; flex-direction: column; gap: var(--space-l); }

/* ---------- next-project band ---------- */
.next-project { border-top: 1px solid var(--n200); padding-block: var(--space-5xl); }
.next-project a { display: flex; flex-direction: column; gap: var(--space-s); }
.next-project-title { font-size: var(--display-step-5); line-height: 1; letter-spacing: var(--tracking-narrow); display: inline-flex; align-items: center; gap: var(--space-m); flex-wrap: wrap; }
.next-project svg { width: .62em; height: .62em; transition: transform .4s var(--ease); }
.next-project a:hover .next-project-title svg { transform: translateX(.4rem); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-img { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-stagger-cols] .card { transform: none; transition: none; }
  .link::after, .link-image, .menu-panel, .menu-link span { transition: none; }
  .carousel-slide { opacity: 1; transform: none; transition: none; }
  .next-project svg, .filter-chip { transition: none; }
}