/* Bird Eye — minimal cinematic landing (EN/FR) */
:root{
  --bg:#0e0e0e;
  --paper:#f5f3ef;
  --paper2:#efece6;
  --ink:#141414;
  --muted:#6a6864;
  --sand:#cbb79a;
  --sand2:#b9a17c;
  --radius:18px;
  --shadow: 0 18px 60px rgba(0,0,0,.28);
  --max: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 50% -200px, rgba(203,183,154,.18), transparent 65%),
              linear-gradient(#121212, #0b0b0b);
  color: var(--paper);
}

a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(10,10,10,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}

.brand{display:flex; flex-direction:column; gap:4px; letter-spacing:.22em; text-transform:uppercase}
.brand__name{
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing:.28em;
}
.brand__tag{
  font-size: 11px;
  color: rgba(245,243,239,.75);
  letter-spacing:.36em;
}

.nav{display:flex; gap:22px; font-size:13px; letter-spacing:.18em; text-transform:uppercase}
.nav a{opacity:.78}
.nav a:hover{opacity:1}

.lang{
  display:flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  background: transparent; border: 1px solid rgba(245,243,239,.18);
  color: var(--paper);
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
}
.lang:hover{border-color: rgba(203,183,154,.55)}
.lang__sep{opacity:.5}

.burger{
  display:none;
  width:44px; height:44px;
  border-radius: 999px;
  background: transparent;
  border:1px solid rgba(245,243,239,.18);
  cursor:pointer;
}
.burger span{display:block; height:2px; margin:7px 10px; background: rgba(245,243,239,.75)}

.mobile{
  display:flex; flex-direction:column; gap:14px;
  padding:18px 20px 22px;
  border-top:1px solid rgba(255,255,255,.08);
}
.mobile a{font-size:13px; letter-spacing:.18em; text-transform:uppercase; opacity:.85}

.hero{position:relative}
.hero__media{
  height: 72vh;
  min-height: 560px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.20) 45%, rgba(0,0,0,.55)),
    radial-gradient(900px 520px at 72% 35%, rgba(203,183,154,.30), transparent 70%),
    url("assets/hero.jpg") center/cover no-repeat;
  filter: saturate(1.02);
}
.hero__content{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:center;
  gap:14px;
  padding-top: 24px;
}
.hero__title{
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: .02em;
  margin:0;
  max-width: 820px;
}
.hero__subtitle{
  margin:0;
  color: rgba(245,243,239,.78);
  max-width: 560px;
  font-size: 15px;
  line-height: 1.65;
}
.hero__cta{display:flex; gap:12px; margin-top:10px; flex-wrap:wrap}
.hero__locale{margin-top:12px; font-size:12px; letter-spacing:.08em; color: rgba(245,243,239,.65)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(203,183,154,.55);
  background: rgba(203,183,154,.12);
  color: var(--paper);
  font-size: 12px;
  letter-spacing:.18em;
  text-transform: uppercase;
}
.btn:hover{background: rgba(203,183,154,.18)}
.btn--ghost{border-color: rgba(245,243,239,.18); background: rgba(245,243,239,.06)}
.btn--ghost:hover{background: rgba(245,243,239,.10)}
.btn--dark{
  border-color: rgba(0,0,0,.22);
  background: linear-gradient(180deg, #d2bf9f, #bda27a);
  color: #161616;
}
.btn--dark:hover{filter: brightness(1.03)}

.statement{
  background: linear-gradient(180deg, rgba(245,243,239,.96), rgba(239,236,230,.96));
  color: var(--ink);
}
.statement__inner{
  padding: 44px 0;
  text-align:center;
}
.statement__kicker{
  letter-spacing:.22em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(20,20,20,.72);
}
.statement__text{
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  margin: 14px auto 0;
  max-width: 760px;
}
.statement__text--sub{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: rgba(20,20,20,.70);
  margin-top: 10px;
}

.section{padding: 70px 0}
.section--soft{background: rgba(245,243,239,.06); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06)}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}
.section__title{
  margin:0;
  font-family:"Cormorant Garamond", serif;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 18px;
}
.section__desc{margin:0; color: rgba(245,243,239,.68); font-size: 13px; max-width: 520px; line-height:1.6}

.grid{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.card{
  border-radius: var(--radius);
  overflow:hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}
.card__img{
  height: 220px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55)),
    url("assets/portfolio-1.jpg") center/cover no-repeat;
}
.card__img--2{background:
  linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55)),
  url("assets/portfolio-2.jpg") center/cover no-repeat;}
.card__img--3{background:
  linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55)),
  url("assets/portfolio-3.jpg") center/cover no-repeat;}
.card__label{
  padding: 16px 16px 18px;
  text-align:center;
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(245,243,239,.88);
}

.services{
  margin-top: 28px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}
.service{
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
}
.service--alt{
  background: linear-gradient(180deg, rgba(203,183,154,.10), rgba(255,255,255,.03));
  border-color: rgba(203,183,154,.25);
}
.service__name{
  font-family:"Cormorant Garamond", serif;
  font-size: 22px;
  margin-bottom: 6px;
}
.service__line{color: rgba(245,243,239,.74); font-size: 13px; margin-bottom: 14px}
.service__list{margin:0; padding-left: 18px; color: rgba(245,243,239,.82); line-height:1.9; font-size: 13px}
.service__list li{margin: 2px 0}

.about{
  margin-top: 26px;
  border-radius: var(--radius);
  padding: 26px 22px;
  background: linear-gradient(180deg, rgba(245,243,239,.96), rgba(239,236,230,.94));
  color: var(--ink);
  box-shadow: var(--shadow);
}
.about__big{
  font-family:"Cormorant Garamond", serif;
  font-size: 28px;
  line-height:1.15;
  margin-bottom: 18px;
}
.about__cols{display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px}
.about__h{letter-spacing:.22em; text-transform:uppercase; font-size: 11px; color: rgba(20,20,20,.72); margin-bottom: 8px}
.about__p{margin:0; font-size: 14px; color: rgba(20,20,20,.78); line-height:1.65}

.cta{
  padding: 74px 0;
  background:
    radial-gradient(900px 420px at 50% 10%, rgba(203,183,154,.25), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.35));
}
.cta__inner{text-align:center}
.cta__title{
  font-family:"Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 44px;
  margin:0;
}
.cta__text{margin: 10px auto 0; max-width: 620px; color: rgba(245,243,239,.75); line-height:1.65}
.cta__actions{margin-top: 18px; display:flex; flex-direction:column; align-items:center; gap:10px}
.cta__small{font-size: 12px; color: rgba(245,243,239,.62); letter-spacing:.04em}

.footer{
  padding: 26px 0 36px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(245,243,239,.70);
}
.footer__inner{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer__links{display:flex; gap:18px}
.footer__links a{opacity:.75}
.footer__links a:hover{opacity:1}

@media (max-width: 920px){
  .nav{display:none}
  .burger{display:block}
  .services{grid-template-columns: 1fr}
  .grid{grid-template-columns: 1fr}
  .about__cols{grid-template-columns: 1fr}
  .hero__media{min-height: 520px}
}