/* ==========================================================================
   ANEMOS PEYZAJ & MİMARLIK — Design System
   "Toprak Dergisi" sistemi — editöryel/dergi dili, kart-grid değil.

   Katman kuralı (z-index, her component bu sırayı takip eder):
   0 = arkaplan görseller/medya  1 = dev dekoratif tipografi (gradient-clip YA DA outline/blend, asla ikisi bir arada)
   2 = global grain dokusu (tek katman, sabit)  3 = gerçek okunabilir içerik (blend/clip YOK)  9999 = özel imleç
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --forest-950:#0f150d;
  --forest-900:#1c2818;
  --forest-800:#22301f;
  --forest-700:#2f4025;
  --olive-600:#4c5a35;
  --olive-500:#6b7a48;
  --sage-400:#94a06d;
  --sage-300:#b3bb92;
  --gold-500:#c9a876;
  --gold-400:#d9c39a;
  --cream-100:#faf7f0;
  --cream-50:#fffdf9;
  --ink:#1a1f16;
  --white:#ffffff;

  --font-display:'Fraunces', 'Times New Roman', serif;
  --font-body:'Jost', 'Segoe UI', sans-serif;

  --container:1360px;
  --gutter:clamp(24px, 5vw, 80px);
  --section-pad:clamp(72px, 11vw, 160px);

  --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast:.4s;
  --dur-med:.8s;
  --dur-slow:1.4s;

  --shadow-soft:0 20px 60px -20px rgba(15,21,13,.25);
  --shadow-lift:0 30px 80px -20px rgba(15,21,13,.35);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
html.no-js body{ cursor:auto; }
body{
  position:relative;
  font-family:var(--font-body);
  background:var(--cream-100);
  color:var(--ink);
  font-weight:300;
  line-height:1.7;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
input, textarea, select{ font-family:inherit; font-size:inherit; color:inherit; }
svg{ display:block; }
::selection{ background:var(--forest-900); color:var(--cream-100); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Grain texture (global, single layer, z:2) ---------- */
body::before{
  content:'';
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
  opacity:.035;
  mix-blend-mode:overlay;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--forest-900);
  line-height:1.1;
  letter-spacing:-0.01em;
  position:relative; z-index:3;
}
.h1, h1{ font-size:clamp(2.6rem, 6vw, 5.4rem); font-weight:400; }
.h2, h2{ font-size:clamp(2.1rem, 4.4vw, 3.6rem); }
.h3, h3{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); }
.h4, h4{ font-size:clamp(1.15rem, 1.6vw, 1.4rem); font-family:var(--font-body); font-weight:500; letter-spacing:.02em; }

.eyebrow{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--olive-500);
  font-weight:500;
  margin-bottom:22px;
}
.eyebrow::before{ content:''; width:38px; height:1px; background:var(--gold-500); flex-shrink:0; }

.lede{ position:relative; z-index:3; font-size:clamp(1.05rem, 1.6vw, 1.3rem); font-weight:300; color:var(--forest-800); line-height:1.65; }
.muted{ color:var(--olive-600); }
.text-center{ text-align:center; }

/* Drop-cap — recurring signature motif on intro paragraphs, always plain (no blend/clip) */
.dropcap::first-letter{
  float:left; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:4.2em; line-height:.78; color:var(--gold-500); margin:.02em .1em 0 0;
}

/* ---------- Editorial-scale typography — TWO modes, never combined on one element ---------- */
/* Mode A: gradient-clip (no blend, reads against a plain background) */
.type-clip-gold{
  background:linear-gradient(120deg, var(--gold-400), var(--cream-100));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Mode B: outline-only decorative number (solid stroke, no fill, no blend, no clip) */
.type-outline{ color:transparent; -webkit-text-stroke:1px rgba(28,40,24,.09); text-stroke:1px rgba(28,40,24,.09); }
.type-outline-light{ color:transparent; -webkit-text-stroke:1px rgba(250,247,240,.28); text-stroke:1px rgba(250,247,240,.28); }
/* Mode B variant: solid fill + blend (sits over a photograph) */
.type-blend{ color:var(--forest-900); mix-blend-mode:multiply; opacity:.32; }
.type-blend-invert{ color:var(--cream-100); mix-blend-mode:difference; }

.page-num{
  font-family:var(--font-display); font-style:italic; font-weight:500; line-height:1;
  position:absolute; z-index:1; pointer-events:none; user-select:none;
}

/* ---------- Layout ---------- */
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; }
.section-pad{ padding-block:var(--section-pad); }
.section-pad-sm{ padding-block:clamp(56px, 7vw, 110px); }

.bg-forest{ background:var(--forest-900); color:var(--cream-100); }
.bg-forest .h2, .bg-forest h2, .bg-forest h3{ color:var(--cream-100); }
.bg-cream{ background:var(--cream-100); }
.bg-white{ background:var(--white); }

/* ---------- Buttons ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:17px 34px;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  border-radius:100px;
  transition:box-shadow var(--dur-fast) var(--ease-out-expo), background var(--dur-fast), color var(--dur-fast);
  white-space:nowrap;
  will-change:transform;
}
.btn-primary{ background:var(--forest-900); color:var(--cream-100); }
.btn-primary:hover{ background:var(--olive-600); box-shadow:var(--shadow-lift); }
.btn-gold{ background:var(--gold-500); color:var(--forest-950); }
.btn-gold:hover{ background:var(--gold-400); box-shadow:var(--shadow-lift); }
.btn-outline{ border:1px solid rgba(250,247,240,.55); color:inherit; }
.btn-outline:hover{ background:rgba(250,247,240,.12); }
.btn-outline.dark{ border-color:rgba(28,40,24,.35); color:var(--forest-900); }
.btn-outline.dark:hover{ background:rgba(28,40,24,.06); }
.btn-arrow{ transition:transform var(--dur-fast) var(--ease-out-expo); }
.btn:hover .btn-arrow{ transform:translateX(6px); }
.btn .btn-label{ display:inline-block; }

.text-link{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--forest-900); padding-bottom:4px;
}
.text-link::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:right;
  transition:transform var(--dur-med) var(--ease-out-expo);
}
.text-link:hover::after{ transform-origin:left; }

/* ---------- Custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--forest-900); pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); transition:width .3s var(--ease-out-expo), height .3s var(--ease-out-expo), background .3s, opacity .3s;
  mix-blend-mode:difference; opacity:0;
}
.cursor-ring{
  position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(28,40,24,.5); pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%); transition:width .35s var(--ease-out-expo), height .35s var(--ease-out-expo), opacity .35s, border-color .35s, background .35s;
  opacity:0;
}
body.cursor-active .cursor, body.cursor-active .cursor-ring{ opacity:1; }
.cursor-ring.hover{ width:70px; height:70px; background:rgba(28,40,24,.06); }
.cursor-ring.hover.has-label{ width:88px; height:88px; background:var(--forest-900); border-color:var(--forest-900); }
.cursor-label{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none; transform:translate(-50%,-50%);
  color:var(--cream-100); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; opacity:0; transition:opacity .3s;
}
.cursor-label.is-visible{ opacity:1; }
@media (hover:none), (pointer:coarse){ .cursor, .cursor-ring{ display:none; } }

/* ---------- Magnetic buttons ---------- */
.magnetic{ display:inline-flex; }
.magnetic .btn-label{ display:inline-block; will-change:transform; }

/* ---------- Preloader — "kapak açılışı" ---------- */
.preloader{ position:fixed; inset:0; z-index:10000; }
.preloader-panel{
  position:absolute; left:0; width:100%; height:52%; background:var(--forest-900); overflow:hidden;
  transition:transform 1s var(--ease-out-expo);
}
.preloader-panel.top{ top:0; }
.preloader-panel.bottom{ bottom:0; }
.preloader-letter{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-46%);
  font-size:clamp(6rem,20vw,15rem); font-style:italic; font-weight:500;
  clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.65,0,.35,1);
}
.preloader-panel.top .preloader-letter{ transform:translate(-50%,20%); }
.preloader-panel.bottom .preloader-letter{ transform:translate(-50%,-120%); }
.preloader-rule{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:0; height:1px; background:var(--gold-500);
  transition:width .5s var(--ease-out-expo) .1s;
}
.preloader.is-lettered .preloader-letter{ clip-path:inset(0 0 0 0); }
.preloader.is-lettered .preloader-rule{ width:64px; }
.preloader.is-opening .preloader-panel.top{ transform:translateY(-100%); }
.preloader.is-opening .preloader-panel.bottom{ transform:translateY(100%); }
.preloader.is-done{ visibility:hidden; }

/* ---------- Page transition (link-triggered fade) ---------- */
body.is-leaving{ pointer-events:none; }
body.is-leaving main, body.is-leaving .site-header, body.is-leaving .site-footer{
  opacity:0; transform:translateY(-14px); transition:opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo);
}
main, .site-header, .site-footer{ opacity:1; transform:translateY(0); }
body.is-entering main{ animation:pageEnter .6s var(--ease-out-expo) .1s both; }
@keyframes pageEnter{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

/* ---------- Reveal (IntersectionObserver class-toggle — not a scroll-hijack) ---------- */
[data-reveal]{ opacity:0; transform:translateY(46px); transition:opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo); }
[data-reveal].is-inview{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-56px); }
[data-reveal="left"].is-inview{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(56px); }
[data-reveal="right"].is-inview{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal="scale"].is-inview{ transform:scale(1); }
[data-reveal-delay="1"]{ transition-delay:.12s; }
[data-reveal-delay="2"]{ transition-delay:.24s; }
[data-reveal-delay="3"]{ transition-delay:.36s; }
[data-reveal-delay="4"]{ transition-delay:.48s; }
[data-reveal-delay="5"]{ transition-delay:.6s; }
[data-reveal-delay="6"]{ transition-delay:.72s; }
html.no-js [data-reveal]{ opacity:1; transform:none; }

/* ---------- Section heads ---------- */
.section-head{ position:relative; z-index:3; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:64px; flex-wrap:wrap; }
.section-head .h2{ max-width:14ch; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:500;
  padding:26px 0;
  transition:background var(--dur-med) var(--ease-out-expo), padding var(--dur-med) var(--ease-out-expo), box-shadow var(--dur-med), backdrop-filter .4s;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:14px; z-index:2; }
.brand-mark{ width:42px; height:42px; flex-shrink:0; transition:transform .5s var(--ease-out-expo); }
.brand:hover .brand-mark{ transform:rotate(18deg); }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-word{ font-family:var(--font-display); font-size:1.32rem; letter-spacing:.05em; color:var(--cream-100); transition:color var(--dur-med); }
.brand-sub{ font-family:var(--font-body); font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-400); margin-top:3px; }

.site-header.is-scrolled{ background:rgba(250,247,240,.92); backdrop-filter:blur(14px); box-shadow:0 10px 40px -20px rgba(15,21,13,.25); padding:16px 0; }
.site-header.is-scrolled .brand-word{ color:var(--forest-900); }
.site-header.is-scrolled .nav-link{ color:var(--forest-800); }
.site-header.is-scrolled .nav-link::after{ background:var(--forest-800); }
.site-header.is-scrolled .menu-btn span{ background:var(--forest-900); }
.site-header.is-scrolled .header-social{ color:var(--forest-800); border-color:rgba(28,40,24,.3); }

.main-nav{ display:flex; align-items:center; gap:48px; }
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-link{
  position:relative; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--cream-100); padding-bottom:4px; transition:color var(--dur-med);
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--cream-100);
  transform:scaleX(0); transform-origin:right; transition:transform var(--dur-med) var(--ease-out-expo);
}
.nav-link:hover::after, .nav-link.is-active::after{ transform-origin:left; transform:scaleX(1); }
.header-social{
  display:flex; align-items:center; gap:8px; color:var(--cream-100); border:1px solid rgba(250,247,240,.4);
  border-radius:100px; padding:9px 18px 9px 16px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  transition:all var(--dur-fast);
}
.header-social:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--forest-950); }

.menu-btn{ display:none; flex-direction:column; gap:6px; width:32px; z-index:1200; }
.menu-btn span{ display:block; width:100%; height:1px; background:var(--cream-100); transition:all .4s var(--ease-out-expo); }
.site-header.is-scrolled .menu-btn.is-open span{ background:var(--forest-900); }
body.nav-open .site-header .menu-btn.is-open span{ background:var(--cream-100); }

.mobile-nav{
  position:fixed; inset:0; background:var(--forest-900); z-index:1100;
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gutter);
  clip-path:circle(0% at calc(100% - 40px) 40px); transition:clip-path .8s var(--ease-out-expo);
}
.mobile-nav.is-open{ clip-path:circle(150% at calc(100% - 40px) 40px); }
.mobile-nav-links{ display:flex; flex-direction:column; gap:8px; }
.mobile-nav-links a{
  font-family:var(--font-display); font-size:clamp(2.4rem,8vw,4.2rem); color:var(--cream-100); font-style:italic; font-weight:400;
  opacity:0; transform:translateY(30px); transition:opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo);
}
.mobile-nav.is-open .mobile-nav-links a{ opacity:1; transform:translateY(0); }
.mobile-nav-links a:nth-child(1){ transition-delay:.1s; }
.mobile-nav-links a:nth-child(2){ transition-delay:.18s; }
.mobile-nav-links a:nth-child(3){ transition-delay:.26s; }
.mobile-nav-links a:nth-child(4){ transition-delay:.34s; }
.mobile-nav-links a:nth-child(5){ transition-delay:.42s; }
.mobile-nav-foot{ margin-top:56px; display:flex; gap:28px; opacity:0; transition:opacity .6s var(--ease-out-expo) .5s; }
.mobile-nav.is-open .mobile-nav-foot{ opacity:1; }
.mobile-nav-foot a{ color:var(--gold-400); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; }
body.nav-open{ overflow:hidden; }

/* ==========================================================================
   Hero — asymmetric 7fr/5fr split, bleed image, gradient-clip first word
   ========================================================================== */
.hero{ position:relative; min-height:100vh; display:grid; grid-template-columns:7fr 5fr; color:var(--cream-100); }
.hero-media{ position:relative; overflow:hidden; margin-right:calc(var(--gutter) * -1); }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.hero-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent 55%, rgba(15,21,13,.35)); z-index:1; pointer-events:none; }
.webgl-hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.webgl-hero-canvas ~ img{ opacity:0; }
.webgl-ripple-canvas{ position:fixed; top:0; left:0; z-index:40; pointer-events:none; opacity:0; transition:opacity .35s ease; }
.hero-panel{ position:relative; z-index:3; background:var(--forest-900); display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,6vw,80px); }
.hero-pagenum{ right:calc(41.6667% + 4%); top:12%; font-size:clamp(6rem,13vw,11rem); }
.hero-eyebrow{ color:var(--gold-400); }
.hero-eyebrow::before{ background:var(--gold-400); }
.hero-title{ max-width:14ch; }
.hero-title-lead{ display:block; font-size:clamp(3.6rem,9vw,7.5rem); font-style:italic; font-weight:500; line-height:.95; }
.hero-title-rest{ display:block; font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:400; color:var(--cream-100); margin-top:8px; }
.hero-sub{ max-width:420px; margin-top:26px; color:rgba(250,247,240,.78); font-size:clamp(1rem,1.2vw,1.1rem); }
.hero-actions{ display:flex; align-items:center; gap:26px; margin-top:44px; flex-wrap:wrap; }
.reading-progress{ margin-top:clamp(40px,6vw,72px); width:100%; height:1px; background:rgba(250,247,240,.2); position:relative; overflow:hidden; }
.reading-progress-lbl{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(250,247,240,.5); margin-top:10px; }

.page-hero{ position:relative; min-height:64vh; display:grid; grid-template-columns:7fr 5fr; color:var(--cream-100); }
.page-hero .hero-panel{ padding:clamp(36px,5vw,64px); }
.page-hero .hero-title-lead{ font-size:clamp(2.6rem,6vw,4.6rem); }
.page-hero .hero-pagenum{ font-size:clamp(5rem,9vw,8rem); }
.breadcrumb{ display:flex; align-items:center; gap:10px; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(250,247,240,.6); margin-bottom:18px; }
.breadcrumb span{ color:var(--gold-400); }

@media (max-width:980px){
  .hero, .page-hero{ grid-template-columns:1fr; }
  .hero-media{ margin-right:0; min-height:56vh; }
  .hero-pagenum{ display:none; }
}

/* ==========================================================================
   Philosophy — sticky media (native CSS, no JS), text flows past
   ========================================================================== */
.philosophy{ display:grid; grid-template-columns:5fr 7fr; gap:var(--gutter); align-items:start; }
.philosophy-media{ position:sticky; top:14vh; align-self:start; }
.philosophy-media-frame{ position:relative; aspect-ratio:4/5; overflow:hidden; clip-path:polygon(0 3%, 100% 0, 100% 97%, 0 100%); }
.philosophy-media-frame img{ width:100%; height:100%; object-fit:cover; }
.philosophy-copy{ position:relative; z-index:3; }
.stat-row{ display:flex; flex-direction:column; margin-top:56px; }
.stat-block{ display:flex; align-items:baseline; gap:24px; padding-block:20px; border-top:1px solid rgba(28,40,24,.14); }
.stat-block:last-child{ border-bottom:1px solid rgba(28,40,24,.14); }
.stat-num{ font-family:var(--font-display); font-size:clamp(2.4rem,4.4vw,3.6rem); color:var(--forest-900); font-style:italic; min-width:2.4ch; }
.stat-num .suffix{ font-size:.6em; margin-left:2px; }
.stat-lbl{ font-size:.86rem; color:var(--olive-600); letter-spacing:.03em; }

@media (max-width:980px){
  .philosophy{ grid-template-columns:1fr; }
  .philosophy-media{ position:static; margin-bottom:36px; }
}

/* ==========================================================================
   Services teaser — "budama listesi" (pruning list), replaces card grid
   ========================================================================== */
.pruning-list{ display:flex; align-items:stretch; border-top:1px solid rgba(28,40,24,.14); border-bottom:1px solid rgba(28,40,24,.14); }
.pruning-item{
  position:relative; flex:0 0 clamp(190px,15vw,260px); height:62vh; overflow:hidden; cursor:pointer;
  border-right:1px solid rgba(28,40,24,.14); transition:flex-grow .6s var(--ease-out-expo), flex-basis .6s var(--ease-out-expo);
}
.pruning-item:last-child{ border-right:none; }
.pruning-item-label{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:space-between; padding:28px 20px;
}
.pruning-item-num{ font-family:var(--font-display); font-style:italic; font-size:clamp(2.2rem,4vw,3.2rem); color:var(--gold-500); }
.pruning-item-title{
  font-family:var(--font-display); font-size:clamp(1.3rem,2vw,1.7rem); color:var(--forest-900);
  writing-mode:vertical-rl; text-orientation:mixed; align-self:flex-start; transform:rotate(180deg);
}
.pruning-item-media{ position:absolute; inset:0; z-index:1; clip-path:inset(100% 0 0 0); transition:clip-path .55s cubic-bezier(.5,0,0,1); }
.pruning-item-media img{ width:100%; height:100%; object-fit:cover; }
.pruning-item-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,21,13,.82), rgba(15,21,13,.15) 60%); }
.pruning-item-desc{ position:relative; z-index:2; color:var(--cream-100); font-size:.86rem; max-width:28ch; opacity:0; transition:opacity .4s ease .1s; }

@media (hover:hover) and (pointer:fine){
  .pruning-item:hover{ flex-grow:2.4; flex-basis:340px; }
  .pruning-item:hover .pruning-item-media{ clip-path:inset(0 0 0 0); }
  .pruning-item:hover .pruning-item-desc{ opacity:1; }
  .pruning-item:hover .pruning-item-title{ writing-mode:horizontal-tb; transform:none; color:var(--cream-100); }
  .pruning-item:hover .pruning-item-num{ color:var(--gold-400); }
}
@media (max-width:980px), (hover:none){
  .pruning-list{ flex-direction:column; border:none; }
  .pruning-item{ flex:none; height:auto; border-right:none; border-bottom:1px solid rgba(28,40,24,.14); }
  .pruning-item-label{ position:relative; padding:28px 0; flex-direction:row; align-items:center; justify-content:space-between; }
  .pruning-item-title{ writing-mode:horizontal-tb; transform:none; color:var(--forest-900); }
  .pruning-item-media{ position:relative; clip-path:none; aspect-ratio:16/10; }
  .pruning-item-media::after{ display:none; }
  .pruning-item-desc{ position:relative; opacity:1; color:var(--olive-600); padding-bottom:24px; max-width:none; }
}

/* ==========================================================================
   Featured projects — sticky horizontal rail (the ONE scroll-hijack, desktop only)
   ========================================================================== */
.projects-stage{ position:relative; }
.projects-stage-inner{ overflow:hidden; }
.projects-rail{ display:flex; gap:28px; width:max-content; }
.project-tile{ position:relative; border-radius:4px; overflow:hidden; cursor:pointer; flex-shrink:0; width:min(70vw,460px); transition:filter .4s ease; }
.project-tile[data-ratio="portrait"]{ aspect-ratio:3/4; }
.project-tile[data-ratio="square"]{ aspect-ratio:1/1; }
.project-tile[data-ratio="tall"]{ aspect-ratio:4/5; }
.project-tile[data-ratio="wide"]{ aspect-ratio:16/9; align-self:center; }
.project-tile img{ width:100%; height:100%; object-fit:cover; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transition:clip-path .45s var(--ease-out-expo); }
@media (hover:hover) and (pointer:fine){
  .project-tile:hover img{ clip-path:polygon(0 0,100% 0,100% 96%,4% 100%); }
}
.project-tile.is-dim{ filter:grayscale(.55) opacity(.6); }
.project-tile-num{ font-size:clamp(3.5rem,7vw,6rem); left:-6px; bottom:-16px; }
.project-tile-overlay{ position:absolute; inset:0; z-index:2; background:linear-gradient(0deg, rgba(15,21,13,.86) 0%, transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; }
.project-tile-cat{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); position:relative; z-index:3; }
.project-tile-title{ font-family:var(--font-display); font-size:1.2rem; color:var(--cream-100); margin-top:6px; position:relative; z-index:3; }
.projects-progress{ width:100%; height:1px; background:rgba(28,40,24,.14); position:relative; margin-bottom:40px; overflow:hidden; }

@media (min-width:981px){
  .projects-stage{ height:320vh; }
  .projects-stage-inner{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; }
}
@media (max-width:980px){
  .projects-stage{ overflow:hidden; }
  .projects-stage-inner{ width:100%; overflow:hidden; }
  .projects-rail{ width:100%; max-width:100%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; }
  .project-tile{ scroll-snap-align:center; width:78vw; }
}

/* ==========================================================================
   Cinematic Scenes — hizmetlerden sahneler (sticky pinned, katmanlı parallax)
   ========================================================================== */
.cinematic-scenes{ position:relative; background:var(--forest-950); }
.cinematic-stage{ position:relative; }
.cinematic-frame{ position:relative; height:100vh; overflow:hidden; }

.cinematic-scene{
  position:absolute; inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease-out-expo);
}
.cinematic-scene[data-is-active="true"]{ opacity:1; pointer-events:auto; }

.cinematic-scene-bg{ position:absolute; inset:-6% -4%; z-index:1; }
.cinematic-scene-bg img{
  width:100%; height:100%; object-fit:cover;
  will-change:transform;
  transform:scale(1.06);
}
.cinematic-tour-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; pointer-events:none; }
.cinematic-tour-canvas ~ .cinematic-scene .cinematic-scene-bg{ opacity:0; }
.cinematic-scene::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, rgba(15,21,13,.80) 0%, rgba(15,21,13,.42) 45%, rgba(15,21,13,.08) 72%);
}
.cinematic-scene-copy{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(28px, 6vw, 96px);
  max-width:640px;
  color:var(--cream-100);
  will-change:transform, opacity;
}
.cinematic-scene-num{ font-size:clamp(3.2rem,6vw,5.5rem); position:absolute; top:8%; left:clamp(20px,5vw,72px); opacity:.5; }
.cinematic-scene-copy .eyebrow{ color:var(--gold-400); }
.cinematic-scene-copy .eyebrow::before{ background:var(--gold-400); }
.cinematic-scene-title{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(2rem, 4.4vw, 3.6rem); line-height:1.08; margin-top:18px;
}
.cinematic-scene-sub{ font-size:clamp(.95rem,1.2vw,1.1rem); color:rgba(250,247,240,.78); margin-top:16px; max-width:46ch; }

.cinematic-progress{ position:absolute; top:0; left:0; width:100%; height:2px; background:rgba(250,247,240,.14); z-index:5; }
.cinematic-progress-fill{ display:block; height:100%; background:var(--gold-500); transform-origin:left; transform:scaleX(0); }

.cinematic-dots{
  position:absolute; right:clamp(16px,4vw,48px); top:50%; transform:translateY(-50%); z-index:5;
  display:flex; flex-direction:column; gap:12px;
}
.cinematic-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(250,247,240,.3); transition:background .3s ease, transform .3s ease; }
.cinematic-dots span.is-active{ background:var(--gold-500); transform:scale(1.4); }

@media (min-width:981px){
  .cinematic-stage{ height:calc(var(--scene-count, 5) * 100vh); }
  .cinematic-frame{ position:sticky; top:0; }
  /* Desktop drives .cinematic-scene-copy opacity/transform inline, every scroll
     frame (see main.js) — the generic [data-reveal] 1s transition would smear
     that into a laggy delay, so it's neutralized here and mobile keeps it. */
  .cinematic-scene-copy[data-reveal]{ transition:none; }
}

@media (max-width:980px){
  .cinematic-stage{ height:auto; }
  .cinematic-frame{ position:static; height:auto; overflow:visible; display:flex; flex-direction:column; gap:2px; }
  .cinematic-scene{
    position:relative; inset:auto; opacity:1; pointer-events:auto;
    height:82vh; min-height:420px;
    transition:none;
  }
  .cinematic-scene-bg{ inset:0; }
  .cinematic-scene-bg img{ transform:scale(1.02); }
  .cinematic-progress, .cinematic-dots{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .cinematic-stage{ height:auto !important; }
  .cinematic-frame{ position:static !important; height:auto !important; overflow:visible !important; display:flex; flex-direction:column; gap:2px; }
  .cinematic-scene{ position:relative !important; opacity:1 !important; pointer-events:auto !important; height:auto; min-height:60vh; transition:none !important; }
  .cinematic-scene-bg img{ transform:none !important; }
  .cinematic-progress, .cinematic-dots{ display:none; }
}

/* ==========================================================================
   Process — single column, giant background numerals, IO active-state
   ========================================================================== */
.process-list{ position:relative; }
.process-item{ position:relative; min-height:44vh; display:flex; flex-direction:column; justify-content:center; padding-block:32px; border-top:1px solid rgba(28,40,24,.14); color:var(--sage-300); transition:color .6s ease; }
.process-item:last-child{ border-bottom:1px solid rgba(28,40,24,.14); }
.process-item.is-active{ color:var(--forest-900); }
.process-item h3, .process-item p{ color:inherit; transition:color .6s ease; }
.process-item p{ color:var(--olive-500); }
.process-item.is-active p{ color:var(--olive-600); }
.process-bg-num{ font-size:clamp(9rem,22vw,19rem); right:2%; top:50%; transform:translateY(-50%); opacity:.05; transition:opacity .6s ease; }
.process-item.is-active .process-bg-num{ opacity:.11; }
.process-num{ font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--gold-500); position:relative; z-index:3; }
.process-item h3{ max-width:16ch; margin-top:10px; position:relative; z-index:3; }
.process-item p{ max-width:44ch; margin-top:10px; position:relative; z-index:3; }

/* ==========================================================================
   Testimonials — quote stack, sticky quote-mark, IO active-state (no carousel)
   ========================================================================== */
.testimonial-wrap{ display:grid; grid-template-columns:1fr 2fr; gap:var(--gutter); }
.testimonial-mark-col{ position:relative; }
.testimonial-mark{ position:sticky; top:22vh; font-size:clamp(6rem,11vw,9rem); line-height:.7; color:transparent; -webkit-text-stroke:1px rgba(201,168,118,.4); }
.quote-stack{ display:flex; flex-direction:column; }
.quote-block{ padding-block:44px; border-top:1px solid rgba(28,40,24,.12); opacity:.4; transform:scale(.98); transition:opacity .5s ease, transform .5s var(--ease-out-expo); }
.quote-block:last-child{ border-bottom:1px solid rgba(28,40,24,.12); }
.quote-block.is-active{ opacity:1; transform:scale(1); }
.quote-text{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.2vw,1.85rem); color:var(--forest-900); line-height:1.5; }
.quote-name{ margin-top:24px; font-weight:500; letter-spacing:.03em; }
.quote-role{ font-size:.82rem; color:var(--olive-600); margin-top:3px; }

@media (max-width:980px){
  .testimonial-wrap{ grid-template-columns:1fr; }
  .testimonial-mark{ position:static; margin-bottom:12px; }
}

/* ==========================================================================
   CTA banner — two separate layers: effect on image, solid text on top
   ========================================================================== */
.cta-banner{ position:relative; overflow:hidden; }
.cta-banner-media{ position:absolute; inset:0; z-index:0; filter:grayscale(1); }
.cta-banner-media img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:luminosity; opacity:.4; }
.cta-banner .container{ position:relative; z-index:3; text-align:center; }
.cta-track{ overflow:hidden; }
.cta-track-inner{ display:inline-block; will-change:transform; }
.cta-banner h2{ color:var(--cream-100); max-width:18ch; margin-inline:auto; }
.cta-banner p{ max-width:46ch; margin-inline:auto; margin-top:20px; color:rgba(250,247,240,.75); }
.cta-banner .btn{ margin-top:32px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ padding-top:var(--section-pad); padding-bottom:36px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--gutter); padding-bottom:64px; }
.footer-brand .brand{ margin-bottom:22px; }
.footer-brand .brand-word{ color:var(--cream-100); }
.footer-about{ color:rgba(250,247,240,.65); max-width:34ch; font-size:.94rem; }
.footer-social-row{ display:flex; gap:14px; margin-top:28px; }
.footer-social-row a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(250,247,240,.25); display:flex; align-items:center; justify-content:center; transition:all .3s; }
.footer-social-row a:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--forest-950); }
.footer-col h4{ color:var(--cream-100); margin-bottom:24px; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-family:var(--font-body); font-weight:500; }
.footer-col ul{ display:flex; flex-direction:column; gap:14px; }
.footer-col a, .footer-col address{ color:rgba(250,247,240,.65); font-size:.92rem; font-style:normal; transition:color .3s; }
.footer-col a:hover{ color:var(--gold-400); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:30px; border-top:1px solid rgba(250,247,240,.14); color:rgba(250,247,240,.5); font-size:.8rem; flex-wrap:wrap; gap:12px; }
.footer-credit{ color:rgba(250,247,240,.62); }

/* ==========================================================================
   About page — sticky cross-fade media + drop-cap manifesto + values list
   ========================================================================== */
.about-story{ display:grid; grid-template-columns:5fr 7fr; gap:calc(var(--gutter) + 20px); align-items:start; }
.about-media{ position:sticky; top:12vh; height:74vh; }
.about-media-frame{ position:relative; width:100%; height:100%; overflow:hidden; clip-path:polygon(0 3%, 100% 0, 100% 97%, 0 100%); }
.about-media-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease; }
.about-media-frame img.is-active{ opacity:1; }
.about-copy p{ margin-bottom:22px; color:var(--forest-800); }
.about-copy p::before{ content:''; display:block; width:32px; height:1px; background:var(--gold-500); margin-bottom:22px; }
.about-copy p:first-of-type::before{ display:none; }

.values-list{ counter-reset:val; }
.values-list li{ position:relative; padding:36px 0 36px 8rem; border-top:1px solid rgba(28,40,24,.12); }
.values-list li:last-child{ border-bottom:1px solid rgba(28,40,24,.12); }
.values-list-num{ font-size:clamp(4rem,8vw,6.5rem); left:0; top:50%; transform:translateY(-50%); }
.values-list h3{ font-size:1.3rem; transition:color .3s; }
.values-list p{ margin-top:10px; color:var(--olive-600); max-width:50ch; }
@media (hover:hover){ .values-list li:hover h3{ color:var(--gold-500); } }

@media (max-width:980px){
  .about-story{ grid-template-columns:1fr; }
  .about-media{ position:static; height:auto; margin-bottom:32px; }
  .about-media-frame{ aspect-ratio:4/5; }
  .about-media-frame img{ opacity:1; position:static; }
  .about-media-frame img ~ img{ display:none; }
  .values-list li{ padding-left:5.5rem; }
}

/* ==========================================================================
   Services page — sticky nav + zigzag rows + giant numerals + drawer hover
   ========================================================================== */
.services-page-layout{ display:grid; grid-template-columns:1fr 2.4fr; gap:var(--gutter); }
.services-nav{ position:sticky; top:20vh; align-self:start; display:flex; flex-direction:column; gap:18px; }
.services-nav a{ display:flex; align-items:center; gap:14px; font-size:.9rem; color:var(--olive-500); transition:color .3s; }
.services-nav a::before{ content:''; width:0; height:1px; background:var(--gold-500); transition:width .3s var(--ease-out-expo); }
.services-nav a.is-active{ color:var(--gold-500); }
.services-nav a.is-active::before{ width:24px; }

.service-row{ position:relative; min-height:60vh; display:flex; flex-direction:column; justify-content:center; padding-block:64px; border-top:1px solid rgba(28,40,24,.12); overflow:hidden; }
.service-row:last-child{ border-bottom:1px solid rgba(28,40,24,.12); }
.service-row-num{ font-size:clamp(6rem,11vw,9rem); top:6%; }
.service-row.align-left .service-row-num{ left:-1%; }
.service-row.align-right .service-row-num{ right:-1%; }
.service-row-grid{ position:relative; z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); align-items:center; }
.service-row.align-right .service-row-grid{ direction:rtl; }
.service-row.align-right .service-row-grid > *{ direction:ltr; }
.service-row-media{ position:relative; aspect-ratio:5/4; overflow:hidden; border-radius:2px; }
.service-row-media img{ width:100%; height:100%; object-fit:cover; }
.service-row-drawer{
  position:absolute; inset:0; z-index:2; background:var(--forest-900); color:var(--cream-100); padding:32px;
  display:flex; flex-direction:column; justify-content:flex-end; clip-path:inset(100% 0 0 0); transition:clip-path .5s cubic-bezier(.5,0,0,1);
}
@media (hover:hover) and (pointer:fine){ .service-row-media:hover .service-row-drawer{ clip-path:inset(0 0 0 0); } }
.service-row-drawer p{ font-size:.92rem; color:rgba(250,247,240,.85); }
.service-row-copy h2{ max-width:14ch; }
.service-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.service-tag{ font-size:.72rem; letter-spacing:.06em; padding:8px 16px; border:1px solid rgba(28,40,24,.2); border-radius:100px; color:var(--olive-600); }

@media (max-width:980px){
  .services-page-layout{ grid-template-columns:1fr; }
  .services-nav{ position:static; flex-direction:row; flex-wrap:wrap; gap:10px 20px; margin-bottom:24px; }
  .service-row-grid, .service-row.align-right .service-row-grid{ grid-template-columns:1fr; direction:ltr; }
  .service-row-drawer{ position:relative; clip-path:none; }
  .service-row-num{ font-size:clamp(4rem,16vw,6rem); }
}

/* ==========================================================================
   Projects page — asymmetric grid + torn-edge hover + FLIP filter + iris lightbox
   ========================================================================== */
.filter-bar{ position:relative; z-index:3; display:flex; flex-wrap:wrap; gap:28px; margin-bottom:56px; }
.filter-btn{ position:relative; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--olive-600); padding-bottom:6px; transition:color .3s; }
.filter-btn::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold-500); transition:width .3s var(--ease-out-expo); }
.filter-btn.is-active{ color:var(--forest-900); }
.filter-btn.is-active::after{ width:100%; }

.project-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gutter); }
.project-card{ cursor:pointer; grid-column:span 3; }
.project-card:nth-child(6n+1){ grid-column:span 3; }
.project-card:nth-child(6n+2){ grid-column:span 3; }
.project-card:nth-child(6n+3){ grid-column:span 2; }
.project-card:nth-child(6n+4){ grid-column:span 4; }
.project-card:nth-child(6n+5){ grid-column:span 4; }
.project-card:nth-child(6n+6){ grid-column:span 2; }
.project-card.is-hidden{ display:none; }
.project-card-media{ position:relative; overflow:hidden; aspect-ratio:4/5; }
.project-card:nth-child(3n+2) .project-card-media{ aspect-ratio:1/1; }
.project-card:nth-child(4n+3) .project-card-media{ aspect-ratio:16/10; }
.project-card-media img{ width:100%; height:100%; object-fit:cover; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transition:clip-path .45s var(--ease-out-expo); }
@media (hover:hover) and (pointer:fine){ .project-card:hover .project-card-media img{ clip-path:polygon(0 0,100% 0,100% 95%,5% 100%); } }
.project-card-num{ font-size:clamp(2.6rem,5vw,4rem); left:-4px; bottom:-10px; z-index:2; }
.project-card-info{ position:relative; z-index:3; padding-top:20px; }
.project-card-cat{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-500); margin-bottom:6px; }
.project-card p{ font-size:.86rem; color:var(--olive-600); margin-top:8px; }

.lightbox{ position:fixed; inset:0; background:rgba(15,21,13,.96); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; }
.lightbox.is-open{ opacity:1; pointer-events:auto; clip-path:circle(150% at var(--click-x,50%) var(--click-y,50%)); }
.lightbox:not(.is-open){ clip-path:circle(0% at var(--click-x,50%) var(--click-y,50%)); }
.lightbox{ transition:clip-path .6s cubic-bezier(.65,0,.35,1), opacity .1s; }
.lightbox-inner{ max-width:min(90vw,1100px); width:100%; padding:0 24px; }
.lightbox-inner img{ width:100%; max-height:78vh; object-fit:contain; }
.lightbox-cap{ display:flex; justify-content:space-between; color:var(--cream-100); margin-top:20px; font-size:.9rem; flex-wrap:wrap; gap:10px; }
.lightbox-cap .gold{ color:var(--gold-400); letter-spacing:.1em; text-transform:uppercase; font-size:.72rem; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed; width:52px; height:52px; border-radius:50%; border:1px solid rgba(250,247,240,.3); color:var(--cream-100);
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.lightbox-close{ top:30px; right:var(--gutter); }
.lightbox-prev{ left:clamp(16px,3vw,50px); top:50%; transform:translateY(-50%); }
.lightbox-next{ right:clamp(16px,3vw,50px); top:50%; transform:translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--forest-950); }

@media (max-width:980px){
  .project-grid{ grid-template-columns:1fr; }
  .project-card, .project-card:nth-child(6n+1), .project-card:nth-child(6n+2), .project-card:nth-child(6n+3), .project-card:nth-child(6n+4), .project-card:nth-child(6n+5), .project-card:nth-child(6n+6){ grid-column:span 1; }
  .project-card:nth-child(3n+2) .project-card-media, .project-card:nth-child(4n+3) .project-card-media{ aspect-ratio:4/5; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:calc(var(--gutter) + 20px); }
.contact-map-col{ position:sticky; top:12vh; align-self:start; }
.contact-info-block p{ color:var(--forest-800); max-width:38ch; }
.contact-info-row{ display:flex; gap:18px; padding-block:22px; border-top:1px solid rgba(28,40,24,.14); }
.contact-info-row:first-of-type{ border-top:none; margin-top:28px; }
.contact-info-row .ico{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(28,40,24,.25); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--forest-900); }
.contact-info-row h4{ font-size:.98rem; margin-bottom:6px; }
.contact-info-row p, .contact-info-row a{ color:var(--olive-600); font-size:.92rem; }
.map-embed{ margin-top:28px; overflow:hidden; aspect-ratio:16/12; filter:saturate(.15) brightness(.95) contrast(1.05); }
.map-embed iframe{ width:100%; height:100%; border:0; }

.form-field{ margin-bottom:30px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form-field label{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sage-400); margin-bottom:10px; }
.form-field label .fnum{ color:var(--gold-500); margin-right:4px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(28,40,24,.28); padding:12px 2px;
  font-size:1.05rem; color:var(--forest-900); position:relative;
}
.form-field-line{ position:relative; }
.form-field-line::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--gold-500); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out-expo); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:none; }
.form-field input:focus ~ .form-field-line, .form-field textarea:focus ~ .form-field-line{ transform:scaleX(1); }
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select{ border-color:#a8493a; }
.form-error{ display:none; font-size:.76rem; color:#a8493a; margin-top:8px; }
.form-field.has-error .form-error{ display:block; }
.form-note{ font-size:.82rem; color:var(--olive-600); margin-top:18px; }
.form-hp{ position:absolute !important; left:-9999px !important; opacity:0 !important; pointer-events:none !important; }
.form-alert{ background:#fbe9e7; color:#8a3b2f; border:1px solid #f1c6bd; padding:12px 14px; margin-bottom:22px; font-size:.9rem; }
.form-success{ display:none; background:var(--forest-900); color:var(--cream-100); padding:32px; text-align:center; }
.form-success.is-visible{ display:block; animation:formIn .6s var(--ease-out-expo); }
@keyframes formIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
.form-success h3{ color:var(--cream-100); }
.contact-form.is-submitted{ display:none; }
.contact-form button[disabled]{ opacity:.72; cursor:wait; }

@media (max-width:980px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-map-col{ position:static; order:2; margin-top:40px; }
  .form-row{ grid-template-columns:1fr; }
}

/* ---------- Instagram strip ---------- */
.insta-strip{ display:grid; grid-template-columns:repeat(5,1fr); position:relative; z-index:3; }
.insta-tile{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.insta-tile img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.7); transition:transform .6s var(--ease-out-expo), filter .5s ease; }
.insta-tile-overlay{ position:absolute; inset:0; background:rgba(15,21,13,.5); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .4s; color:var(--cream-100); }
.insta-tile:hover img{ transform:scale(1.08); filter:grayscale(0); }
.insta-tile:hover .insta-tile-overlay{ opacity:1; }

[data-count]{ font-variant-numeric:tabular-nums; }

/* ---------- Responsive misc ---------- */
@media (max-width:1180px){
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:48px; }
}
@media (max-width:980px){
  .main-nav{ display:none; }
  .menu-btn{ display:flex; }
}
@media (max-width:640px){
  .footer-top{ grid-template-columns:1fr; }
  .insta-strip{ grid-template-columns:repeat(3,1fr); }
  .section-head{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Mobile polish: remove desktop editorial overflow ---------- */
@media (max-width:980px){
  html, body{ max-width:100%; overflow-x:hidden; }

  .projects-stage,
  .projects-stage-inner{
    overflow:visible;
  }
  .projects-stage-inner{
    display:block;
    height:auto;
  }
  .projects-progress{
    display:none;
  }
  .projects-rail{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    max-width:100%;
    gap:18px;
    overflow:visible;
    scroll-snap-type:none;
    padding:0 var(--gutter) 0;
  }
  .project-tile,
  .project-tile[data-ratio="portrait"],
  .project-tile[data-ratio="square"],
  .project-tile[data-ratio="tall"],
  .project-tile[data-ratio="wide"]{
    width:100%;
    max-width:100%;
    aspect-ratio:4/5;
    align-self:stretch;
    scroll-snap-align:none;
    border-radius:6px;
  }
  .project-tile-num{
    font-size:clamp(3rem, 18vw, 4.5rem);
    left:-4px;
    bottom:-12px;
  }
  .project-tile-overlay{
    padding:18px;
  }
  .project-tile-title{
    font-size:clamp(1.35rem, 7vw, 2rem);
    line-height:1.08;
  }
}

@media (max-width:640px){
  :root{
    --gutter:22px;
    --section-pad:64px;
  }
  body{
    -webkit-text-size-adjust:100%;
  }
  .site-header{
    padding:18px 0;
  }
  .site-header.is-scrolled{
    padding:14px 0;
  }
  .brand{
    gap:12px;
  }
  .brand-mark{
    width:40px;
    height:40px;
  }
  .brand-word{
    font-size:1.18rem;
  }
  .brand-sub{
    font-size:.5rem;
    letter-spacing:.22em;
  }
  .menu-btn{
    width:30px;
  }
  .hero,
  .page-hero{
    min-height:auto;
  }
  .hero-media{
    min-height:46svh;
  }
  .page-hero .hero-media{
    min-height:34svh;
  }
  .hero-panel{
    padding:42px var(--gutter) 46px;
  }
  .hero-title-lead{
    font-size:clamp(3rem, 15vw, 4.35rem);
  }
  .page-hero .hero-title-lead{
    font-size:clamp(2.45rem, 12vw, 3.5rem);
  }
  .section-head{
    gap:18px;
    margin-bottom:34px;
  }
  .section-head .h2{
    max-width:11ch;
  }
  .h2, h2{
    font-size:clamp(2rem, 10vw, 2.85rem);
  }
  .philosophy-media{
    margin-bottom:28px;
  }
  .philosophy-media-frame{
    aspect-ratio:4/3;
    clip-path:none;
    border-radius:6px;
  }
  .stat-row{
    margin-top:36px;
  }
  .stat-block{
    gap:16px;
    padding-block:16px;
  }
}