/* ============================================================
   ATELIER BRUT — Brutalist revival 2025
   Bordeaux / Quai des Chartrons
   ============================================================ */

:root{
  --bg:#F5F5F0;
  --ink:#0A0A0A;
  --line:#0A0A0A;
  --red:#FF3B30;
  --blue:#0047FF;
  --yellow:#F5E94B;
  --green:#84CC16;
  --paper:#FFFFFF;
  --grey:#9A9A92;

  --font-disp:"Archivo Black", "Space Grotesk", system-ui, sans-serif;
  --font-sans:"Space Grotesk", system-ui, sans-serif;
  --font-mono:"Space Mono", ui-monospace, monospace;

  --bd: 3px solid var(--line);
  --bd-thick: 6px solid var(--line);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);overflow-x:hidden}
body{font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}
::selection{background:var(--yellow);color:var(--ink)}

/* ============ TICKER ============ */
.ticker{
  background:var(--ink);color:var(--bg);
  border-bottom:var(--bd-thick);
  overflow:hidden;white-space:nowrap;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  padding:9px 0;
}
.ticker__track{display:inline-flex;gap:32px;animation:slide 38s linear infinite}
.ticker__track span{display:inline-block}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:24px;
  padding:18px 28px;
  border-bottom:var(--bd-thick);
}
.nav__logo{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-disp);font-size:14px;line-height:.95;letter-spacing:.02em;
  text-transform:uppercase;
}
.nav__logo sup{font-size:7px;vertical-align:super}
.nav__sq{
  width:22px;height:22px;background:var(--red);
  border:var(--bd);display:inline-block;
  transform:rotate(-6deg);
}
.nav__links{
  display:flex;flex-wrap:wrap;gap:22px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  justify-content:center;
}
.nav__links a{position:relative;padding:6px 2px;transition:color .2s}
.nav__links a:hover{color:var(--red);text-shadow:2px 0 var(--blue),-2px 0 var(--yellow)}
.nav__cta{
  display:inline-block;background:var(--ink);color:var(--bg);
  padding:14px 22px;border:var(--bd);
  font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.1em;
  transition:transform .2s, background .2s;
}
.nav__cta:hover{background:var(--red);transform:rotate(-2deg) translate(-2px,-2px)}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:48px 28px 80px;
  border-bottom:var(--bd-thick);
}
.hero__meta{
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
  padding-bottom:18px;border-bottom:1px dashed var(--ink);margin-bottom:36px;
}
.hero__job{
  font-family:var(--font-disp);
  font-size:clamp(80px, 16vw, 240px);
  line-height:.82;letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--ink);
}
.hero__job::after{
  content:"●";color:var(--red);font-size:.4em;vertical-align:super;
  margin-left:.1em;
}
.hero__slogan{
  font-family:var(--font-sans);font-weight:500;
  font-size:clamp(18px, 2.2vw, 28px);
  line-height:1.25;letter-spacing:-.01em;
  max-width:680px;
  margin:36px 0 56px auto;text-align:right;
}
.hero__slogan em{font-style:italic;background:var(--yellow);padding:0 6px}

.hero__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border:var(--bd-thick);
  background:var(--ink);
  gap:3px;
}
.hero__cell{
  background:var(--paper);
  padding:24px 22px;min-height:240px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
  transition:transform .35s ease;
}
.hero__cell:hover{transform:translateY(-4px) rotate(-1deg)}
.hero__cell--yellow{background:var(--yellow)}
.hero__cell--red{background:var(--red);color:var(--bg)}
.hero__cell--blue{background:var(--blue);color:var(--bg)}
.hero__cell--photo{padding:0;min-height:240px}
.hero__cell--photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
.hero__num{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em}
.hero__label{
  font-family:var(--font-disp);font-size:clamp(28px,3.4vw,46px);
  line-height:1;letter-spacing:-.02em;text-transform:uppercase;
}
.hero__sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;opacity:.85}

.hero__bottom{
  margin-top:40px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;
}
.bigbtn{
  display:inline-block;
  background:var(--ink);color:var(--bg);
  padding:24px 32px;
  font-family:var(--font-disp);font-size:clamp(20px, 2.4vw, 32px);
  letter-spacing:-.01em;text-transform:uppercase;
  border:var(--bd-thick);
  transition:transform .25s, background .25s, color .25s;
}
.bigbtn:hover{background:var(--yellow);color:var(--ink);transform:rotate(-1.5deg) translateY(-3px)}
.bigbtn--red{background:var(--red)}
.bigbtn--red:hover{background:var(--blue);color:var(--bg)}

.hero__rating{
  display:grid;grid-template-columns:auto auto;align-items:center;gap:6px 14px;
  background:var(--paper);border:var(--bd);padding:14px 18px;
}
.hero__rating strong{
  grid-row:1/3;font-family:var(--font-disp);font-size:48px;line-height:1;
  letter-spacing:-.02em;color:var(--red);
}
.hero__rating span{font-size:14px;letter-spacing:.2em;color:var(--ink)}
.hero__rating small{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--grey)}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--red);color:var(--bg);
  border-bottom:var(--bd-thick);
  overflow:hidden;
}
.marquee__track{
  display:inline-flex;gap:48px;align-items:center;
  font-family:var(--font-disp);
  font-size:clamp(60px, 10vw, 140px);
  letter-spacing:-.02em;text-transform:uppercase;
  padding:18px 0;
  animation:slide 28s linear infinite;
  white-space:nowrap;
}

/* ============ MANIFESTO ============ */
.manifesto{
  padding:90px 28px 100px;
  background:var(--bg);
  border-bottom:var(--bd-thick);
}
.manifesto__tag{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:42px;
  color:var(--ink);
}
.manifesto__grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:start;
}
.manifesto__title{
  font-family:var(--font-disp);
  font-size:clamp(56px, 8.5vw, 130px);
  line-height:.88;letter-spacing:-.03em;
  text-transform:uppercase;
}
.manifesto__title s{color:var(--grey);text-decoration-thickness:6px;text-decoration-color:var(--red)}
.manifesto__title mark{background:var(--yellow);padding:0 .12em;color:var(--ink)}
.manifesto__body{
  font-size:17px;line-height:1.6;
  border-left:var(--bd);padding:6px 0 0 28px;
}
.manifesto__body p{margin-bottom:18px}
.manifesto__points{
  list-style:none;border-top:2px solid var(--ink);margin-top:32px;
}
.manifesto__points li{
  display:flex;justify-content:space-between;
  padding:14px 0;border-bottom:1px dashed var(--ink);
  font-family:var(--font-mono);font-size:14px;
}
.manifesto__points b{
  font-family:var(--font-disp);font-size:22px;color:var(--red);
  letter-spacing:-.02em;
}

/* ============ WORKS ============ */
.works{
  padding:90px 28px 110px;background:var(--ink);color:var(--bg);
  border-bottom:var(--bd-thick);
}
.works__head{
  display:grid;grid-template-columns:1fr 1.4fr 1fr;
  gap:32px;align-items:end;margin-bottom:56px;
}
.works__tag{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow);
}
.works__head h2{
  font-family:var(--font-disp);
  font-size:clamp(60px, 10vw, 160px);line-height:.85;
  letter-spacing:-.04em;text-transform:uppercase;
}
.works__head p{max-width:320px;font-size:15px;line-height:1.5;color:#cdcdc6}

.works__grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  border:var(--bd-thick);
  background:var(--bg);
}
.work{position:relative;overflow:hidden;border-right:var(--bd);border-bottom:var(--bd);background:var(--paper)}
.work img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1);transition:transform .6s ease, filter .4s}
.work:hover img{transform:scale(1.06) rotate(-1deg);filter:grayscale(0) contrast(1.1)}
.work__meta{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--bg);
  padding:14px 16px;
  border-top:var(--bd);
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);
}
.work__meta h3{
  font-family:var(--font-disp);font-size:14px;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--ink);
}

.work--a{grid-column:1/4;grid-row:1/3;aspect-ratio:4/3}
.work--b{grid-column:4/7;grid-row:1;aspect-ratio:3/2}
.work--c{grid-column:4/6;grid-row:2;aspect-ratio:1/1}
.work--d{grid-column:6/7;grid-row:2;aspect-ratio:1/2}
.work img{aspect-ratio:inherit}

/* ============ SERVICES ============ */
.services{
  padding:90px 28px 110px;
  background:var(--yellow);
  border-bottom:var(--bd-thick);
  position:relative;
}
.services__tag{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:30px;
}
.services__title{
  font-family:var(--font-disp);
  font-size:clamp(58px, 9vw, 140px);line-height:.85;letter-spacing:-.04em;
  text-transform:uppercase;margin-bottom:60px;
}
.services__list{display:grid;gap:0;border:var(--bd-thick);background:var(--ink)}
.srv{
  display:grid;
  grid-template-columns:140px 1fr 200px;
  gap:24px;align-items:start;
  padding:36px 28px;background:var(--bg);
  border-bottom:var(--bd);
  transition:background .25s;
}
.srv:last-child{border-bottom:0}
.srv:hover{background:var(--paper)}
.srv--alt{background:var(--red);color:var(--bg)}
.srv--alt:hover{background:#ff5247}
.srv__num{
  font-family:var(--font-disp);font-size:96px;line-height:.85;
  letter-spacing:-.04em;color:var(--ink);
}
.srv--alt .srv__num{color:var(--bg)}
.srv__body h3{
  font-family:var(--font-disp);font-size:clamp(28px,3vw,42px);
  letter-spacing:-.02em;text-transform:uppercase;margin-bottom:12px;
}
.srv__body p{font-size:15px;line-height:1.5;margin-bottom:14px;max-width:540px}
.srv__body ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 24px}
.srv__body li{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em}
.srv__price{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;text-align:right;
  border-left:var(--bd);padding-left:22px;align-self:stretch;
}
.srv--alt .srv__price{border-left-color:var(--bg)}
.srv__price b{
  display:block;font-family:var(--font-disp);font-size:36px;
  letter-spacing:-.02em;margin-top:6px;color:var(--ink);
}
.srv--alt .srv__price b{color:var(--yellow)}

/* ============ STUDIO ============ */
.studio{
  padding:90px 28px 110px;
  background:var(--bg);
  border-bottom:var(--bd-thick);
}
.studio__head{display:grid;grid-template-columns:1fr 2fr;gap:32px;align-items:end;margin-bottom:48px}
.studio__tag{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;
}
.studio__head h2{
  font-family:var(--font-disp);font-size:clamp(56px, 8vw, 130px);
  line-height:.85;letter-spacing:-.04em;text-transform:uppercase;
}
.studio__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(2, minmax(220px, 1fr));
  gap:18px;
}
.studio__shot{
  position:relative;border:var(--bd);overflow:hidden;background:var(--paper);
  transition:transform .35s;
}
.studio__shot:hover{transform:rotate(-1deg) translateY(-3px)}
.studio__shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.studio__shot figcaption{
  position:absolute;left:0;bottom:0;right:0;
  background:var(--bg);padding:10px 14px;
  border-top:var(--bd);
  display:flex;gap:14px;align-items:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.studio__shot figcaption span{
  display:inline-block;background:var(--ink);color:var(--bg);padding:2px 6px;
}
.studio__shot--big{grid-row:1/3;grid-column:1/3}
.studio__quote{
  background:var(--blue);color:var(--bg);
  border:var(--bd);padding:28px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:rotate(1.5deg);
}
.studio__quote p{
  font-family:var(--font-disp);font-size:clamp(22px, 2vw, 30px);
  line-height:1.1;letter-spacing:-.02em;text-transform:uppercase;
}
.studio__quote em{background:var(--yellow);color:var(--ink);padding:0 6px;font-style:italic}
.studio__quote span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  margin-top:18px;text-transform:uppercase;
}

/* ============ PROCESS ============ */
.process{
  padding:90px 28px 110px;
  background:var(--paper);
  border-bottom:var(--bd-thick);
}
.process__tag{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:24px;
}
.process h2{
  font-family:var(--font-disp);font-size:clamp(56px, 8vw, 130px);
  line-height:.85;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:52px;
}
.process__steps{
  display:grid;grid-template-columns:repeat(4, 1fr);
  border:var(--bd-thick);
}
.step{
  background:var(--bg);
  padding:32px 24px;border-right:var(--bd);
  display:flex;flex-direction:column;gap:18px;
  min-height:300px;position:relative;
  transition:background .25s;
}
.step:last-child{border-right:0}
.step:hover{background:var(--yellow)}
.step--y{background:var(--yellow)}
.step--y:hover{background:var(--bg)}
.step--r{background:var(--red);color:var(--bg)}
.step--r:hover{background:var(--ink)}
.step--b{background:var(--blue);color:var(--bg)}
.step--b:hover{background:var(--ink)}
.step__n{
  font-family:var(--font-disp);font-size:64px;line-height:1;
  letter-spacing:-.04em;
}
.step h3{
  font-family:var(--font-disp);font-size:24px;
  text-transform:uppercase;letter-spacing:-.01em;
}
.step p{font-size:14px;line-height:1.5}

/* ============ CONTACT ============ */
.contact{
  padding:90px 28px 100px;
  background:var(--bg);
  border-bottom:var(--bd-thick);
}
.contact__tag{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:36px;
}
.contact__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
}
.contact__left h2{
  font-family:var(--font-disp);font-size:clamp(56px, 8vw, 130px);
  line-height:.85;letter-spacing:-.04em;text-transform:uppercase;
}
.contact__left > p{max-width:480px;margin:24px 0 36px;font-size:16px;line-height:1.5}
.contact__list{list-style:none;border-top:var(--bd);margin-bottom:36px}
.contact__list li{
  display:grid;grid-template-columns:140px 1fr;gap:18px;
  padding:18px 0;border-bottom:1px dashed var(--ink);
  align-items:baseline;
}
.contact__list span{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);
}
.contact__list a, .contact__list em{
  font-family:var(--font-disp);font-size:clamp(18px, 1.8vw, 26px);
  line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;font-style:normal;
  transition:color .2s;
}
.contact__list a:hover{color:var(--red);text-shadow:2px 0 var(--blue)}

.contact__right{display:flex;flex-direction:column;gap:0}
#map-card{
  position:relative;width:100%;height:520px;
  border:var(--bd-thick);background:#e8e8e0;overflow:hidden;
}
#leaflet-map{width:100%;height:100%}
#map-loader{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#f1f1ea;z-index:10;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--ink);
}
.contact__mapfoot{
  display:flex;justify-content:space-between;
  background:var(--ink);color:var(--bg);
  border:var(--bd-thick);border-top:0;
  padding:12px 18px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.contact__mapfoot span:first-child{color:var(--red)}

/* ============ BAND ============ */
.band{
  background:var(--ink);color:var(--yellow);
  overflow:hidden;border-bottom:var(--bd-thick);
}
.band__track{
  display:inline-flex;gap:40px;align-items:center;
  font-family:var(--font-disp);
  font-size:clamp(36px,6vw,72px);
  letter-spacing:-.02em;text-transform:uppercase;
  padding:20px 0;white-space:nowrap;
  animation:slide 30s linear infinite;
}

/* ============ FOOTER ============ */
.foot{
  background:var(--bg);padding:60px 28px 0;
  position:relative;
}
.foot__top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;
  padding-bottom:48px;border-bottom:var(--bd);
}
.foot__brand h3{
  font-family:var(--font-disp);font-size:36px;line-height:.9;
  letter-spacing:-.02em;text-transform:uppercase;margin:14px 0 10px;
}
.foot__brand sup{font-size:9px;vertical-align:super}
.foot__brand p{font-size:13px;line-height:1.4;color:var(--grey)}
.foot__col h4{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:18px;
}
.foot__col a, .foot__col span{
  display:block;padding:5px 0;
  font-family:var(--font-sans);font-size:15px;
  transition:color .2s;
}
.foot__col a:hover{color:var(--red)}
.foot__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  padding:24px 0 18px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--grey);
}
.foot__big{
  font-family:var(--font-disp);
  font-size:clamp(80px, 22vw, 360px);
  line-height:.78;letter-spacing:-.05em;
  text-transform:uppercase;
  text-align:center;
  color:transparent;
  -webkit-text-stroke:2px var(--ink);
  padding:0 0 20px;
  overflow:hidden;
  user-select:none;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .nav{grid-template-columns:auto auto;gap:14px}
  .nav__links{display:none}
  .nav__cta{padding:10px 14px;font-size:11px}

  .hero{padding:32px 18px 56px}
  .hero__meta{flex-direction:column;gap:6px}
  .hero__slogan{text-align:left;margin:28px 0 36px}
  .hero__grid{grid-template-columns:repeat(2,1fr)}
  .hero__cell{min-height:170px;padding:18px}
  .hero__bottom{flex-direction:column;align-items:flex-start}
  .bigbtn{padding:18px 22px}

  .manifesto, .works, .services, .studio, .process, .contact{padding:60px 18px 70px}
  .manifesto__grid{grid-template-columns:1fr;gap:32px}
  .manifesto__body{padding-left:18px}

  .works__head{grid-template-columns:1fr;gap:14px}
  .works__grid{grid-template-columns:1fr 1fr}
  .work--a, .work--b, .work--c, .work--d{
    grid-column:auto;grid-row:auto;aspect-ratio:1/1;
  }
  .work--a{grid-column:1/3;aspect-ratio:4/3}

  .srv{grid-template-columns:1fr;gap:14px;padding:24px 20px}
  .srv__num{font-size:64px}
  .srv__price{border-left:0;border-top:var(--bd);padding:14px 0 0;text-align:left}

  .studio__head{grid-template-columns:1fr;gap:12px}
  .studio__grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .studio__shot--big{grid-column:1/3;grid-row:auto}
  .studio__shot{aspect-ratio:4/3}

  .process__steps{grid-template-columns:1fr 1fr}
  .step{border-right:var(--bd);border-bottom:var(--bd);min-height:240px}
  .step:nth-child(2n){border-right:0}
  .step:nth-last-child(-n+2){border-bottom:0}

  .contact__grid{grid-template-columns:1fr;gap:32px}
  #map-card{height:380px}
  .contact__list li{grid-template-columns:1fr;gap:4px}

  .foot__top{grid-template-columns:1fr 1fr;gap:24px}
  .foot__brand{grid-column:1/3}
}

@media (max-width: 480px){
  .hero__grid{grid-template-columns:1fr}
  .hero__cell{min-height:140px}
  .works__grid{grid-template-columns:1fr}
  .work--a{grid-column:auto}
  .studio__grid{grid-template-columns:1fr}
  .studio__shot--big{grid-column:auto}
  .process__steps{grid-template-columns:1fr}
  .step{border-right:0}
  .foot__top{grid-template-columns:1fr}
  .foot__brand{grid-column:auto}
}

/* Leaflet marker reset */
.lh-marker{background:transparent !important;border:0 !important}