/* ============================================================
   Benda Studio — Landing prod CSS
   Light-only · warm · editorial
   Source DS: benda-design-system-web.md (v1.0)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; src:url('../fonts/Inter_18pt-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal; src:url('../fonts/Inter_18pt-Medium.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:600; font-style:normal; src:url('../fonts/Inter_18pt-SemiBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; src:url('../fonts/Inter_18pt-Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Syne'; font-weight:500; font-style:normal; src:url('../fonts/Syne-Medium.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Syne'; font-weight:600; font-style:normal; src:url('../fonts/Syne-SemiBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Syne'; font-weight:700; font-style:normal; src:url('../fonts/Syne-Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Space Mono'; font-weight:400; font-style:normal; src:url('../fonts/SpaceMono-Regular.ttf') format('truetype'); font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --bg:#F7F4EF; --dark:#1C1C1A; --accent:#E8593A;
  --card:#FFFFFF; --border:#E8E4DC; --muted:#A09D97;
  --bg-sunk:#F0ECE5; --bg-raised:#FBF9F5;
  --dark-70:rgba(28,28,26,.70); --dark-50:rgba(28,28,26,.50);
  --dark-12:rgba(28,28,26,.12); --dark-06:rgba(28,28,26,.06);
  --accent-hover:#D94A2C; --accent-soft:#FCE8E1;
  --gradient-kraft:linear-gradient(180deg,#F7F4EF 0%,#F0ECE5 100%);
  --gradient-ember-soft:linear-gradient(135deg,#F7F4EF 0%,#FCE8E1 100%);
  --gradient-dusk:linear-gradient(135deg,#1C1C1A 0%,#3A2A22 100%);
  --shadow-xs:0 2px 12px rgba(28,28,26,.03);
  --shadow-md:0 8px 32px rgba(28,28,26,.06);
  --shadow-glow-accent:0 8px 32px rgba(232,89,58,.18);
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --font-heading:'Syne',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --nav-h:64px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--dark);
  font-family:var(--font-body); font-size:16px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
img { display:block; max-width:100%; }
button { font:inherit; }
a { color:inherit; }
::selection { background:var(--accent-soft); color:var(--dark); }

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); color:var(--dark); margin:0; }
h1 { font-size:64px; font-weight:700; line-height:1.05; letter-spacing:-.02em; }
h2 { font-size:56px; font-weight:700; line-height:1.08; letter-spacing:-.02em; }
h3 { font-size:48px; font-weight:600; line-height:1.10; letter-spacing:-.015em; }
h4 { font-size:40px; font-weight:600; line-height:1.15; letter-spacing:-.01em; }
h5 { font-size:32px; font-weight:600; line-height:1.20; letter-spacing:-.01em; }

.mono-sm { font:400 12px/1.4 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  border:0; cursor:pointer; border-radius:var(--radius-xs);
  padding:12px 18px; font:500 14px/1.2 var(--font-body);
  letter-spacing:0; text-transform:none; text-decoration:none;
  transition:background 250ms ease, box-shadow 250ms ease, color 250ms ease;
}
.btn--large { padding:14px 22px; font-size:15px; }
.btn--primary { background:var(--accent); color:#fff; }
.btn--primary:hover { background:var(--accent-hover); box-shadow:var(--shadow-glow-accent); }
.btn--secondary { background:var(--card); color:var(--dark); border:1px solid var(--border); }
.btn--secondary:hover { background:var(--bg-raised); }
.btn--ghost-light { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(12px); }
.btn--ghost-light:hover { background:rgba(255,255,255,.18); }
.btn-arrow { width:14px; height:14px; flex-shrink:0; }

/* ---------- Layout ---------- */
.container { max-width:1280px; margin:0 auto; padding:0; }
section { padding:128px 32px; }

/* ---------- Nav ---------- */
.nav {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px, 4vw, 32px);
  background:rgba(247,244,239,0); border-bottom:1px solid transparent;
  transition:background 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;
}
.nav.is-scrolled {
  background:rgba(247,244,239,.78);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:rgba(232,228,220,.6);
}
.nav__logo { display:flex; align-items:center; cursor:pointer; }
.nav__desktop { display:flex; gap:28px; font:400 13px/1.2 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.nav__desktop a { color:var(--dark); text-decoration:none; }
.nav__desktop a:hover { color:var(--accent); }
.nav__cta {
  background:var(--accent); color:#fff; border:0; border-radius:4px;
  padding:10px 16px; font:400 12px/1.2 var(--font-mono); letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  transition:background 250ms ease;
}
.nav__cta:hover { background:var(--accent-hover); }
.nav__burger {
  display:none; background:var(--card); border:1px solid var(--border);
  border-radius:8px; width:42px; height:42px; cursor:pointer;
  align-items:center; justify-content:center; padding:0; color:var(--dark);
}

/* Drawer */
.drawer__scrim {
  position:fixed; inset:0; z-index:60; background:rgba(28,28,26,.45);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity 250ms ease;
}
.drawer__scrim.is-open { opacity:1; pointer-events:auto; }
.drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:61;
  width:min(420px,88vw); background:var(--bg);
  box-shadow:-24px 0 64px rgba(28,28,26,.18);
  transform:translateX(100%); transition:transform 320ms cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
}
.drawer.is-open { transform:translateX(0); }
.drawer__head { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--border); }
.drawer__close { background:transparent; border:0; width:36px; height:36px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--dark); }
.drawer__nav { flex:1; padding:24px 16px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.drawer__nav a {
  display:flex; align-items:baseline; justify-content:space-between;
  padding:18px 16px; border-radius:8px; text-decoration:none; color:var(--dark);
  font:500 28px/1.1 var(--font-heading); letter-spacing:-.01em; text-transform:lowercase;
  transition:background 200ms ease;
}
.drawer__nav a:hover { background:var(--bg-sunk); }
.drawer__nav .num { font:400 11px/1 var(--font-mono); color:var(--muted); letter-spacing:.06em; }
.drawer__foot { padding:20px 24px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:14px; }
.drawer__foot .email { text-decoration:none; font:400 12px/1.4 var(--font-mono); color:var(--muted); letter-spacing:.04em; text-transform:uppercase; text-align:center; }
.drawer__foot .cities { display:flex; gap:8px; justify-content:center; font:400 11px/1.4 var(--font-mono); color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }

/* ---------- Hero (asymmetric) ---------- */
.hero {
  min-height:100vh;
  margin-top:calc(-1 * var(--nav-h));
  padding:calc(var(--nav-h) + 32px) 32px 32px;
  background:var(--bg); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.hero__inner {
  max-width:1280px; width:100%; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:center;
}
.hero__eyebrow { color:var(--accent); margin-bottom:24px; }
.hero h1 {
  font-size:clamp(40px, 5.5vw, 76px); line-height:1.04; letter-spacing:-.025em;
  text-wrap:balance; margin:0;
}
.hero h1 .accent { color:var(--accent); }
.hero__sub {
  font:400 19px/1.55 var(--font-body); color:var(--dark-70);
  max-width:520px; margin:28px 0 0; text-wrap:pretty;
}
.hero__ctas { display:flex; gap:12px; margin-top:40px; flex-wrap:wrap; }
.hero__badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:32px; }
.hero__badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 8px; border-radius:999px;
  background:var(--card); border:1px solid var(--border);
}
.hero__badge .num { font:400 11px/1 var(--font-mono); color:var(--accent); letter-spacing:.06em; }
.hero__badge .sep { width:1px; height:10px; background:var(--border); }
.hero__badge .lbl { font:500 13px/1 var(--font-body); color:var(--dark); }
.hero__photo {
  position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden;
  background:var(--bg-sunk);
}
.hero__photo img { width:100%; height:100%; object-fit:cover; }
.hero__sticker {
  position:absolute; left:16px; bottom:16px;
  padding:8px 12px; border-radius:999px;
  background:rgba(28,28,26,.78); color:#fff;
  font:400 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.hero__meta {
  max-width:1280px; margin:48px auto 0; width:100%;
  display:flex; gap:24px; padding-top:24px; border-top:1px solid var(--border);
  flex-wrap:wrap; justify-content:space-between; align-items:center;
  font:400 12px/1.4 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}

/* ---------- Services ---------- */
#services { padding:128px 32px 96px; background:var(--bg); }
.section__head {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:56px; gap:24px; flex-wrap:wrap;
}
.section__head h2 { max-width:760px; text-wrap:balance; }
.section__head .lead { font:400 16px/1.55 var(--font-body); color:var(--dark-70); max-width:380px; }

.services__list { display:flex; flex-direction:column; gap:16px; }
.service {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1.4fr; gap:0;
  transition:box-shadow 250ms ease;
  box-shadow:var(--shadow-xs);
}
.service.is-open { box-shadow:var(--shadow-md); }
.service__media { position:relative; min-height:340px; background:var(--bg-sunk); }
.service__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.service__chip {
  position:absolute; top:20px; left:20px;
  padding:6px 10px; border-radius:4px;
  background:rgba(247,244,239,.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font:400 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--dark);
}
.service__body { padding:40px 40px 36px; display:flex; flex-direction:column; }
.service__title { font-size:44px; font-weight:600; line-height:1.05; letter-spacing:-.02em; margin:0 0 16px; }
.service__tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.service__tag {
  padding:4px 10px; border-radius:999px; border:1px solid var(--border);
  font:400 12px/1.3 var(--font-body); color:var(--dark-70);
}
.service__blurb { font:400 16px/1.6 var(--font-body); color:var(--dark); margin:0 0 20px; max-width:520px; text-wrap:pretty; }
.service__toggle {
  align-self:flex-start; background:transparent; border:0; padding:0; cursor:pointer;
  font:400 12px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:8px;
}
.service__toggle .chev { transition:transform 250ms ease; display:inline-flex; }
.service.is-open .service__toggle .chev { transform:rotate(180deg); }
.service__list {
  margin:20px 0 0; padding:20px 0 0; border-top:1px solid var(--border);
  list-style:none; display:none; flex-direction:column; gap:10px;
}
.service.is-open .service__list { display:flex; }
.service__list li { display:flex; gap:12px; align-items:flex-start; font:400 15px/1.5 var(--font-body); color:var(--dark); }
.service__list .n { font:400 11px/1.7 var(--font-mono); color:var(--muted); letter-spacing:.04em; min-width:20px; }

/* ---------- Studio ---------- */
#studio {
  padding:112px 32px; background:var(--gradient-kraft);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.studio__inner {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.3fr; gap:80px; align-items:center;
}
.studio__media { position:relative; }
.studio__photo { position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:var(--bg-sunk); }
.studio__photo img { width:100%; height:100%; object-fit:cover; }
.studio__sticker {
  position:absolute; right:-16px; bottom:-16px;
  padding:14px 18px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow-md);
  font:400 12px/1.4 var(--font-mono); letter-spacing:.04em; text-transform:uppercase;
}
.studio__sticker .a { color:var(--accent); }
.studio__sticker .b { color:var(--muted); }
.studio__head { color:var(--accent); margin-bottom:24px; }
.studio h2 { max-width:680px; text-wrap:balance; margin:0 0 32px; }
.studio__p1 { font:400 18px/1.6 var(--font-body); color:var(--dark); max-width:560px; margin:0 0 20px; text-wrap:pretty; }
.studio__p2 { font:400 17px/1.6 var(--font-body); color:var(--dark-70); max-width:560px; margin:0 0 32px; text-wrap:pretty; }
.studio__stats {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  padding-top:32px; border-top:1px solid var(--border);
}
.studio__stats .k { font:700 36px/1 var(--font-heading); letter-spacing:-.02em; color:var(--dark); }
.studio__stats .v { color:var(--muted); margin-top:8px; }

/* ---------- Cities ---------- */
#villes { padding:112px 32px; background:var(--bg); }
.cities__title { font-size:clamp(36px, 4vw, 56px); letter-spacing:-.02em; margin:0; }
.cities__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.city {
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:32px 28px; display:flex; flex-direction:column; gap:16px; min-height:220px;
  transition:transform 250ms ease, box-shadow 250ms ease;
}
.city:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.city__row { display:flex; align-items:center; justify-content:space-between; }
.city__num { font:400 12px/1 var(--font-mono); color:var(--accent); letter-spacing:.06em; }
.city__dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px var(--accent-soft); }
.city__name { font:600 32px/1.1 var(--font-heading); letter-spacing:-.02em; margin:0 0 6px; }
.city__region { color:var(--muted); }
.city__detail { font:400 15px/1.55 var(--font-body); color:var(--dark-70); margin:auto 0 0; }

/* ---------- Process ---------- */
#process {
  position:relative; padding:128px 32px;
  background:var(--bg); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  overflow:hidden; isolation:isolate;
}
.process__bg, .process__mix, .process__veil { position:absolute; inset:0; }
.process__bg {
  background-image:url('../img/zetong-li-NAP14GEjvh8-unsplash.webp');
  background-size:cover; background-position:center;
  opacity:.32; filter:saturate(1.05); z-index:-3;
}
.process__mix {
  background:linear-gradient(135deg, rgba(247,244,239,.35) 0%, rgba(252,232,225,.55) 45%, rgba(232,89,58,.22) 100%);
  mix-blend-mode:multiply; z-index:-2;
}
.process__veil {
  background:linear-gradient(180deg, rgba(247,244,239,.85) 0%, rgba(247,244,239,.55) 35%, rgba(247,244,239,.55) 65%, rgba(247,244,239,.92) 100%);
  z-index:-1;
}
.process__inner { max-width:1280px; margin:0 auto; position:relative; }
.process__head { max-width:760px; margin-bottom:64px; }
.process__head .mono-sm { color:var(--accent); margin-bottom:16px; display:block; }
.process__head h2 { text-wrap:balance; margin:0; }
.process__head p { font:400 18px/1.6 var(--font-body); color:var(--dark-70); margin-top:24px; max-width:560px; text-wrap:pretty; }
.process__steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:stretch; }
.step { position:relative; display:flex; flex-direction:column; }
.step__badge {
  font:400 12px/1 var(--font-mono); color:var(--accent); letter-spacing:.06em;
  margin-bottom:24px;
}
.step__badge span {
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:var(--card); border:1px solid var(--border);
}
.step__t { font:600 26px/1.2 var(--font-heading); letter-spacing:-.01em; margin:0 0 14px; }
.step__d { font:400 15px/1.55 var(--font-body); color:var(--dark-70); text-wrap:pretty; margin:0 0 20px; }
.step__line { margin-top:auto; height:1px; background:var(--dark-12); }

/* ---------- Testimonials ---------- */
#avis {
  padding:128px 32px; background:var(--bg-sunk);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.avis__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.avis {
  margin:0; background:var(--card); border:1px solid var(--border);
  border-radius:16px; padding:36px 32px 32px;
  display:flex; flex-direction:column; gap:24px; min-height:360px; position:relative;
}
.avis__top { display:flex; align-items:center; justify-content:space-between; }
.avis__num { font:400 12px/1 var(--font-mono); color:var(--accent); letter-spacing:.06em; }
.avis__quote-mark { opacity:.18; }
.avis__quote {
  margin:0; font:500 19px/1.45 var(--font-heading); letter-spacing:-.01em;
  color:var(--dark); text-wrap:pretty; flex:1;
}
.avis__cap { padding-top:20px; border-top:1px solid var(--border); }
.avis__cap-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.avis__author { font:600 17px/1.3 var(--font-body); color:var(--dark); }
.avis__role { font:400 14px/1.4 var(--font-body); color:var(--dark-70); margin-top:4px; }
.avis__tag {
  padding:4px 10px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  font:400 11px/1.4 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
}

/* ---------- FAQ ---------- */
#faq { padding:128px 32px; background:var(--bg); }
.faq__inner { max-width:1100px; margin:0 auto; }
.faq__head { color:var(--accent); margin-bottom:16px; }
.faq__title { text-wrap:balance; margin:0 0 56px; max-width:760px; }
.faq__list { border-top:1px solid var(--border); }
.faq__item { border-bottom:1px solid var(--border); }
.faq__btn {
  width:100%; background:transparent; border:0; padding:24px 0; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:32px; text-align:left;
}
.faq__qrow { display:flex; gap:24px; align-items:flex-start; flex:1; }
.faq__num { font:400 12px/1.6 var(--font-mono); color:var(--muted); letter-spacing:.04em; min-width:24px; }
.faq__q { font:500 20px/1.4 var(--font-body); color:var(--dark); text-wrap:balance; }
.faq__plus {
  flex-shrink:0; width:32px; height:32px; border-radius:50%;
  background:var(--bg-sunk); color:var(--dark);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(0); transition:transform 250ms ease, background 250ms ease, color 250ms ease;
}
.faq__item.is-open .faq__plus { background:var(--accent); color:#fff; transform:rotate(45deg); }
.faq__a {
  display:none; padding:0 0 28px 48px;
  font:400 17px/1.6 var(--font-body); color:var(--dark-70); max-width:780px; text-wrap:pretty;
}
.faq__item.is-open .faq__a { display:block; }

/* ---------- Contact ---------- */
#contact { padding:128px 32px; background:var(--gradient-dusk); color:#fff; }
.contact__inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.contact__left .mono-sm { color:#F5CBAA; margin-bottom:24px; }
.contact__left h2 { color:#fff; text-wrap:balance; margin:0 0 24px; }
.contact__left p { font:400 19px/1.6 var(--font-body); color:rgba(255,255,255,.78); max-width:480px; margin:0 0 48px; text-wrap:pretty; }
.contact__cards { display:flex; flex-direction:column; gap:24px; }
.contact__card {
  display:flex; align-items:center; gap:16px; padding:20px 24px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; text-decoration:none; color:#fff;
  transition:background 250ms ease;
}
.contact__card:hover { background:rgba(255,255,255,.1); }
.contact__icon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact__icon--accent { background:var(--accent); }
.contact__icon--neutral { background:rgba(255,255,255,.12); }
.contact__card .lbl { font:400 12px/1.4 var(--font-mono); color:rgba(255,255,255,.6); letter-spacing:.04em; text-transform:uppercase; margin-bottom:4px; }
.contact__card .val { font:500 17px/1.3 var(--font-body); }
.contact__cities {
  margin-top:48px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; gap:24px; flex-wrap:wrap;
  font:400 12px/1.4 var(--font-mono); color:rgba(255,255,255,.6); letter-spacing:.04em; text-transform:uppercase;
}

.contact__form {
  display:flex; flex-direction:column; gap:20px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:36px;
}
.contact__form .mono-sm { color:rgba(255,255,255,.6); margin-bottom:8px; display:block; }
.field label { display:block; font:500 13px/1.2 var(--font-body); color:rgba(255,255,255,.78); margin-bottom:8px; }
.field input, .field textarea {
  width:100%; padding:10px 14px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); border-radius:8px;
  font:400 15px/1.2 var(--font-body); color:#fff; outline:none;
  box-sizing:border-box; transition:border-color 200ms ease, background 200ms ease;
}
.field input:focus, .field textarea:focus { border-color:var(--accent); background:rgba(255,255,255,.08); }
.field input { height:44px; }
.field textarea { min-height:120px; line-height:1.5; resize:vertical; font-family:var(--font-body); }
.field input::placeholder, .field textarea::placeholder { color:rgba(255,255,255,.4); }
.poles { display:flex; gap:8px; flex-wrap:wrap; }
.pole {
  padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  color:#fff; font:400 13px/1 var(--font-body); cursor:pointer;
  transition:background 200ms ease, border-color 200ms ease;
}
.pole:hover { background:rgba(255,255,255,.12); }
.pole.is-active { background:var(--accent); border-color:var(--accent); }
.contact__submit { align-self:flex-start; margin-top:8px; }

.contact__sent {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:48px;
}
.contact__sent .check {
  width:48px; height:48px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.contact__sent h5 { margin-top:24px; color:#fff; text-transform:lowercase; }
.contact__sent p { font:400 16px/1.55 var(--font-body); color:rgba(255,255,255,.78); margin-top:12px; }
.contact__sent button {
  margin-top:24px; background:transparent; border:0; padding:0; cursor:pointer;
  font:400 12px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:#F5CBAA;
}

/* ---------- Footer ---------- */
.footer { padding:80px 32px 40px; border-top:1px solid var(--border); background:var(--bg-sunk); }
.footer__grid { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; }
.footer__about p { font:400 15px/1.55 var(--font-body); color:var(--dark-70); margin:20px 0 0; max-width:340px; }
.footer__col .lbl { color:var(--muted); margin-bottom:16px; }
.footer__col a, .footer__col span { display:block; font:500 14px/2 var(--font-body); color:var(--dark); text-decoration:none; }
.footer__col a:hover { color:var(--accent); }
.footer__col .secondary { color:var(--dark-70); }
.footer__bottom {
  max-width:1280px; margin:56px auto 0;
  display:flex; justify-content:space-between;
  font:400 12px/1.4 var(--font-mono); color:var(--muted); letter-spacing:.04em; text-transform:uppercase;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* ---------- Focus visible ---------- */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position:absolute; top:-40px; left:8px; z-index:100;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:4px;
  text-decoration:none; font:500 14px/1.2 var(--font-body);
  transition:top 200ms ease;
}
.skip-link:focus { top:8px; outline:2px solid #fff; outline-offset:2px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
  html { scroll-behavior:auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1023px) {
  h1 { font-size:52px; } h2 { font-size:48px; } h3 { font-size:40px; }
  section { padding-left:24px; padding-right:24px; }
  .hero { min-height:100svh; }
  .hero__inner { grid-template-columns:1fr; gap:40px; }
  .hero__photo { aspect-ratio:16/10; max-height:60svh; }
  .hero__meta { margin-top:32px; }

  .service { grid-template-columns:1fr; }
  .service__media { min-height:220px; }

  .studio__inner { grid-template-columns:1fr; gap:48px; }
  .studio__media { max-width:480px; }

  .cities__grid { grid-template-columns:1fr; }
  .process__steps { grid-template-columns:1fr 1fr; gap:32px; }
  .avis__grid { grid-template-columns:1fr; }
  .contact__inner { grid-template-columns:1fr; gap:48px; }
  .footer__grid { grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width: 767px) {
  h1 { font-size:48px; } h2 { font-size:40px; } h3 { font-size:32px; }
  section { padding-top:72px; padding-bottom:64px; padding-left:20px; padding-right:20px; }
  #studio, #villes { padding-top:72px; padding-bottom:72px; }

  .nav__desktop, .nav__cta { display:none; }
  .nav__burger { display:inline-flex; }

  .hero { padding-left:20px; padding-right:20px; }
  .hero h1 { font-size:clamp(36px, 9vw, 52px); }
  .hero__sub { font-size:17px; }
  .hero__meta { flex-direction:column; align-items:flex-start; gap:8px; }

  .service__body { padding:28px 24px; }
  .service__title { font-size:32px; }

  .studio__sticker { right:12px; bottom:12px; }

  .process__steps { grid-template-columns:1fr; gap:32px; }

  .faq__btn { gap:12px; }
  .faq__qrow { gap:16px; }
  .faq__q { font-size:18px; }
  .faq__a { padding-left:40px; }

  .contact__form { padding:24px; }

  .footer__grid { grid-template-columns:1fr; }
  .footer__bottom { flex-direction:column; gap:12px; }
}

@media (max-width: 479px) {
  h1 { font-size:40px; } h2 { font-size:32px; } h3 { font-size:28px; }
  .service__chip { font-size:10px; }
  .hero__badge .lbl { font-size:12px; }
}