@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&display=swap");

:root{
  --mewsys-black:#050505;
  --mewsys-white:#ffffff;
  --mewsys-text:#565853;
  --mewsys-muted:#8a8c86;
  --mewsys-line:#e6e6e0;
  --mewsys-soft:#f6f6f2;
  --mewsys-shell:min(1320px,calc(100% - 40px));
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:#fff;
  color:#050505;
  font-family:Inter,Arial,sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

.contact-page{
  background:#fff;
  color:#050505;
}

.contact-shell{
  width:var(--mewsys-shell);
  margin:auto;
}

.contact-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#8a8c86 !important;
  font-size:10px;
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.contact-kicker:before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#050505;
}

.contact-kicker--dark{
  color:#a6a8a3 !important;
}

.contact-kicker--dark:before{
  background:#fff;
}


/* =========================================================
   HERO
   ========================================================= */

.contact-hero{
  background:#fff;
  border-bottom:1px solid var(--mewsys-line);
}

.contact-hero__grid{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:1.08fr .92fr;
}

.contact-hero__copy{
  padding:120px 70px 64px 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.contact-hero h1{
  max-width:920px;
  margin:22px 0 0;
  color:#050505 !important;
  font:600 clamp(64px,7.5vw,112px)/.86 "Inter Tight",Inter,sans-serif;
  letter-spacing:-.066em;
}

.contact-hero__lead{
  max-width:710px;
  margin:34px 0 0;
  color:#565853 !important;
  font-size:16px;
  line-height:1.72;
}

.contact-hero__meta{
  margin-top:54px;
  padding-top:28px;
  border-top:1px solid var(--mewsys-line);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.contact-hero__meta div{
  display:grid;
  gap:8px;
}

.contact-hero__meta span{
  color:#8a8c86 !important;
  font-size:9px;
  letter-spacing:.1em;
}

.contact-hero__meta strong{
  max-width:180px;
  color:#050505 !important;
  font-size:11px;
  line-height:1.45;
  font-weight:600;
}

.contact-hero__visual{
  min-height:620px;
  background-image:
    linear-gradient(0deg,rgba(0,0,0,.10),rgba(0,0,0,.10)),
    url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1600&q=82");
  background-size:cover;
  background-position:center;
  filter:grayscale(1);
}


/* =========================================================
   FORM
   ========================================================= */

.contact-form-section{
  padding:120px 0;
  background:#f6f6f2;
  border-bottom:1px solid var(--mewsys-line);
}

.contact-form-layout{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:100px;
  align-items:start;
}

.contact-form-intro{
  position:sticky;
  top:110px;
}

.contact-form-intro h2{
  max-width:640px;
  margin:20px 0 0;
  color:#050505 !important;
  font:600 clamp(46px,5.4vw,76px)/.94 "Inter Tight",Inter,sans-serif;
  letter-spacing:-.055em;
}

.contact-form-intro > p{
  max-width:570px;
  margin:26px 0 0;
  color:#565853 !important;
  font-size:14px;
  line-height:1.72;
}

.contact-direct{
  margin-top:48px;
  border-top:1px solid #dcdcd6;
}

.contact-direct__item{
  padding:19px 0;
  border-bottom:1px solid #dcdcd6;
  display:grid;
  grid-template-columns:145px 1fr;
  gap:24px;
}

.contact-direct__item span{
  color:#8a8c86 !important;
  font-size:10px;
}

.contact-direct__item strong{
  color:#050505 !important;
  font-size:11px;
  font-weight:600;
}

.contact-form-shell{
  min-height:620px;
  padding:44px;
  border:1px solid #deded8;
  border-radius:28px;
  background:#fff;
  color:#050505 !important;
}

/* Formulari CMS: selectors deliberadament amplis però limitats al contenidor */
.contact-form-shell form{
  display:grid;
  gap:22px;
}

.contact-form-shell label{
  display:block;
  margin-bottom:8px;
  color:#050505 !important;
  font-size:11px;
  font-weight:600;
}

.contact-form-shell input,
.contact-form-shell textarea,
.contact-form-shell select{
  width:100%;
  min-height:52px;
  padding:13px 15px;
  border:1px solid #d9d9d3;
  border-radius:12px;
  outline:none;
  background:#fff;
  color:#050505 !important;
  font:500 14px/1.4 Inter,Arial,sans-serif;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.contact-form-shell textarea{
  min-height:150px;
  resize:vertical;
}

.contact-form-shell input::placeholder,
.contact-form-shell textarea::placeholder{
  color:#9b9d97 !important;
}

.contact-form-shell input:focus,
.contact-form-shell textarea:focus,
.contact-form-shell select:focus{
  border-color:#050505;
  box-shadow:0 0 0 3px rgba(5,5,5,.06);
}

.contact-form-shell button,
.contact-form-shell input[type="submit"]{
  min-height:50px;
  padding:0 20px;
  border:0;
  border-radius:999px;
  background:#050505 !important;
  color:#fff !important;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}

.contact-form-shell button:hover,
.contact-form-shell input[type="submit"]:hover{
  background:#222 !important;
}


/* =========================================================
   ENCAIX
   ========================================================= */

.contact-fit{
  padding:116px 0;
  background:#fff;
}

.contact-fit__head{
  max-width:950px;
  margin-bottom:56px;
}

.contact-fit__head h2{
  margin:20px 0 0;
  color:#050505 !important;
  font:600 clamp(48px,6vw,82px)/.94 "Inter Tight",Inter,sans-serif;
  letter-spacing:-.058em;
}

.contact-fit__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--mewsys-line);
}

.contact-fit__item{
  min-height:310px;
  padding:28px 30px 28px 0;
  border-bottom:1px solid var(--mewsys-line);
  border-right:1px solid var(--mewsys-line);
}

.contact-fit__item + .contact-fit__item{
  padding-left:30px;
}

.contact-fit__item:last-child{
  border-right:0;
}

.contact-fit__item span{
  color:#8a8c86 !important;
  font-size:9px;
}

.contact-fit__item h3{
  max-width:340px;
  margin:72px 0 0;
  color:#050505 !important;
  font:600 clamp(28px,3vw,40px)/1 "Inter Tight",Inter,sans-serif;
  letter-spacing:-.04em;
}

.contact-fit__item p{
  max-width:360px;
  margin:18px 0 0;
  color:#565853 !important;
  font-size:12px;
  line-height:1.65;
}


/* =========================================================
   FINAL
   ========================================================= */

.contact-bottom{
  background:#050505;
  color:#fff !important;
}

.contact-bottom__grid{
  min-height:620px;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
}

.contact-bottom__visual{
  background-image:
    linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)),
    url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1600&q=82");
  background-size:cover;
  background-position:center;
  filter:grayscale(1);
}

.contact-bottom__copy{
  padding:80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.contact-bottom h2{
  max-width:630px;
  margin:22px 0 0;
  color:#fff !important;
  font:600 clamp(54px,6.4vw,92px)/.9 "Inter Tight",Inter,sans-serif;
  letter-spacing:-.06em;
}

.contact-bottom p{
  max-width:540px;
  margin:28px 0 0;
  color:#a9aba6 !important;
  font-size:14px;
  line-height:1.72;
}

.contact-bottom__cta{
  align-self:flex-start;
  margin-top:36px;
  padding-bottom:6px;
  border-bottom:1px solid #fff;
  color:#fff !important;
  font-size:11px;
  font-weight:700;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){
  .contact-hero__grid,
  .contact-form-layout,
  .contact-bottom__grid{
    grid-template-columns:1fr;
  }

  .contact-hero__copy{
    padding:100px 0 64px;
  }

  .contact-hero__visual{
    min-height:520px;
  }

  .contact-form-intro{
    position:static;
  }

  .contact-fit__grid{
    grid-template-columns:1fr;
  }

  .contact-fit__item,
  .contact-fit__item + .contact-fit__item{
    padding:28px 0;
    border-right:0;
  }

  .contact-fit__item h3{
    margin-top:42px;
  }

  .contact-bottom__visual{
    min-height:480px;
  }

  .contact-bottom__copy{
    padding:70px 0;
  }
}

@media(max-width:650px){
  :root{
    --mewsys-shell:calc(100% - 24px);
  }

  .contact-hero__grid{
    min-height:auto;
  }

  .contact-hero__copy{
    padding:72px 0 46px;
  }

  .contact-hero h1{
    font-size:58px;
  }

  .contact-hero__lead{
    font-size:14px;
  }

  .contact-hero__meta{
    grid-template-columns:1fr;
  }

  .contact-hero__visual{
    min-height:380px;
  }

  .contact-form-section,
  .contact-fit{
    padding:78px 0;
  }

  .contact-form-intro h2{
    font-size:46px;
  }

  .contact-form-shell{
    padding:22px;
    border-radius:20px;
  }

  .contact-direct__item{
    grid-template-columns:1fr;
    gap:7px;
  }

  .contact-fit__head h2{
    font-size:48px;
  }

  .contact-bottom__visual{
    min-height:350px;
  }

  .contact-bottom__copy{
    padding:58px 0;
  }

  .contact-bottom h2{
    font-size:52px;
  }
}