/* ==========================================================================
   RAÚL CALABUIG — NUTRICIÓN
   Estética: minimalista, blanco y negro, editorial, alto contraste.
   ========================================================================== */

:root{
  --black:#0a0a0a;
  --white:#f7f6f3;
  --off:#efeee9;
  --line:#d8d6cf;
  --gray:#8a887f;
  --gray-dark:#54524a;

  --sans:'Inter', 'Helvetica Neue', Helvetica, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.65,0,.35,1);

  --container: min(92vw, 1240px);
  --nav-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  background:var(--white);
  color:var(--black);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.5;
  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{ list-style:none; }
button{ font-family:inherit; background:none; border:none; cursor:pointer; color:inherit; }
input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit; }
em{ font-style:normal; font-family:inherit; font-weight:inherit; }

::selection{ background:var(--black); color:var(--white); }

/* Fluid type scale */
h1,h2,h3{ font-weight:800; letter-spacing:-0.02em; line-height:1.02; }

/* ==========================================================================
   GRAIN / TEXTURE OVERLAY — sutil, para que el blanco/negro no sea plano
   ========================================================================== */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--black); color:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.25rem;
  transition:transform .9s var(--ease-soft), opacity .6s ease .1s;
}
.preloader.is-done{ transform:translateY(-100%); opacity:0; pointer-events:none; }
.preloader__mark{
  font-family:var(--sans); font-style:normal; font-weight:800; letter-spacing:-0.02em;
  font-size:clamp(2.5rem, 8vw, 4rem);
}
.preloader__count{
  font-size:.8rem; letter-spacing:.15em; font-variant-numeric:tabular-nums;
  color:var(--gray);
}
body.is-loading{ overflow:hidden; height:100vh; }

/* ==========================================================================
   CUSTOM CURSOR (desktop only, see JS gate)
   ========================================================================== */
.cursor{
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  transform:translate(-50%,-50%);
  display:none;
}
.has-cursor .cursor{ display:block; }
.cursor__dot{
  position:absolute; top:0; left:0; width:6px; height:6px; border-radius:50%;
  background:var(--black); transform:translate(-50%,-50%);
}
.cursor__ring{
  position:absolute; top:0; left:0; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--black); transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), opacity .25s ease, background .25s ease;
}
.has-cursor.cursor--link .cursor__ring{
  width:64px; height:64px; background:rgba(10,10,10,.06);
}
.has-cursor.cursor--link .cursor__dot{ opacity:0; }

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
section{ position:relative; padding:clamp(5rem,10vw,9rem) 0; }
.section-head{
  width:var(--container); margin:0 auto clamp(2.5rem,6vw,4.5rem);
}
.section-tag{
  display:inline-block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gray-dark); margin-bottom:1rem; font-weight:600;
}
.section-title{
  font-size:clamp(2.2rem, 5.5vw, 4rem);
}
.section-desc{
  margin-top:1rem; max-width:46ch; color:var(--gray-dark); font-size:1.05rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  --pad-y:1rem; --pad-x:1.75rem;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:var(--pad-y) var(--pad-x);
  font-size:.92rem; font-weight:600; letter-spacing:.01em;
  border-radius:100px; border:1px solid var(--black);
  overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .3s ease, transform .3s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--black); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.btn--solid{ background:var(--black); color:var(--white); }
.btn--solid::before{ background:var(--white); }
.btn--solid:hover{ color:var(--black); }

.btn--ghost{ background:transparent; color:var(--black); }
.btn--ghost:hover{ color:var(--white); }

.btn--light{ border-color:var(--white); color:var(--white); }
.btn--light::before{ background:var(--white); }
.btn--light:hover{ color:var(--black); }

.btn--lg{ padding:1.25rem 2.5rem; font-size:1rem; }
.btn:active{ transform:scale(.97); }

.nav-cta{
  display:none;
  background:rgba(247,246,243,.12);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--white); border-color:rgba(247,246,243,.5);
  transition:color .45s var(--ease), border-color .4s ease, background .4s ease;
}
.nav-cta::before{ background:rgba(247,246,243,.95); }
.nav-cta:hover{ color:var(--black); }

.site-header.is-scrolled .nav-cta{
  background:var(--black); color:var(--white); border-color:var(--black);
}
.site-header.is-scrolled .nav-cta::before{ background:var(--white); }
.site-header.is-scrolled .nav-cta:hover{ color:var(--black); }

@media (min-width:920px){ .nav-cta{ display:inline-flex; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  transition:transform .5s var(--ease), background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header.is-scrolled{
  background:rgba(247,246,243,.82); backdrop-filter:blur(10px) saturate(140%);
  border-color:var(--line);
}

/* Al llegar a la web (arriba del todo) el header flota sobre el vídeo
   del hero, así que el texto va en blanco para que se lea. En cuanto
   se hace scroll aparece el fondo claro y el texto pasa a negro. */
.logo__mark{ border-color:var(--white); color:var(--white); transition:border-color .4s ease, color .4s ease; }
.logo__text{ color:var(--white); transition:color .4s ease; }
.logo__text em{ color:rgba(247,246,243,.7); transition:color .4s ease; }
.nav-desktop a{ color:var(--white); transition:color .4s ease; }
.nav-desktop a::after{ background:var(--white); }
.burger span{ background:var(--white); }

.site-header.is-scrolled .logo__mark{ border-color:var(--black); color:var(--black); }
.site-header.is-scrolled .logo__text{ color:var(--black); }
.site-header.is-scrolled .logo__text em{ color:var(--gray-dark); }
.site-header.is-scrolled .nav-desktop a{ color:var(--black); }
.site-header.is-scrolled .nav-desktop a::after{ background:var(--black); }
.site-header.is-scrolled .burger span{ background:var(--black); }
.site-header__inner{
  width:var(--container); margin:0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

.logo{ display:flex; align-items:center; gap:.65rem; }
.logo__mark{
  width:38px; height:38px; border:1px solid; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:800; letter-spacing:.02em;
  flex-shrink:0;
}
.logo__text{
  display:flex; flex-direction:column; line-height:1.1;
  font-weight:700; font-size:.92rem; letter-spacing:.01em;
}
.logo__text em{ font-size:.68rem; font-weight:400; }

.nav-desktop{ display:none; gap:2.1rem; }
@media (min-width:920px){ .nav-desktop{ display:flex; } }
.nav-desktop a{
  position:relative; font-size:.88rem; font-weight:500; padding:.3rem 0;
}
.nav-desktop a span{ position:relative; }
.nav-desktop a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-desktop a:hover::after,
.nav-desktop a.is-active::after{ transform:scaleX(1); transform-origin:left; }

.burger{
  width:44px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  z-index:600; position:relative;
}
@media (min-width:920px){ .burger{ display:none; } }
.burger span{
  width:22px; height:1.5px; transition:transform .35s var(--ease), opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */
.mobile-menu{
  position:fixed; inset:0; z-index:450; background:var(--black); color:var(--white);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--nav-h) + 2rem) 6vw 3rem;
  clip-path:circle(0% at calc(100% - 40px) 42px);
  transition:clip-path .65s var(--ease-soft);
  pointer-events:none;
}
.mobile-menu.is-open{
  clip-path:circle(150% at calc(100% - 40px) 42px);
  pointer-events:auto;
}
.mobile-menu nav{ display:flex; flex-direction:column; gap:.4rem; }
.mobile-menu__link{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--sans); font-size:clamp(1.8rem,8vw,2.9rem); font-weight:700; letter-spacing:-0.01em;
  padding:.4rem 0; border-bottom:1px solid rgba(247,246,243,.12);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu.is-open .mobile-menu__link{ opacity:1; transform:translateY(0); }
.mobile-menu.is-open .mobile-menu__link:nth-child(1){ transition-delay:.12s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2){ transition-delay:.18s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3){ transition-delay:.24s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4){ transition-delay:.30s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5){ transition-delay:.36s; }
.mobile-menu__num{ font-family:var(--sans); font-size:.75rem; color:var(--gray); }
.mobile-menu__footer{
  display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; color:var(--gray);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:var(--nav-h); position:relative; overflow:hidden;
  background:var(--black); color:var(--white);
}

.hero__media{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background-image:url("assets/img/hero-poster.jpg");
  background-size:cover; background-position:center;
}
.hero__video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.25) contrast(1.05);
}
.hero.video-off .hero__video{ display:none; }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(10,10,10,.4) 45%, rgba(10,10,10,.8) 100%);
}
.hero__marquee, .hero__content, .hero__scroll{ position:relative; z-index:1; }

.hero__marquee{
  position:absolute; top:calc(var(--nav-h) + 1.2rem); left:0; width:100%;
  border-top:1px solid rgba(247,246,243,.25); border-bottom:1px solid rgba(247,246,243,.25);
  padding:.6rem 0; overflow:hidden; color:var(--white);
}
.hero__marquee-track{
  display:flex; width:max-content;
  animation:marquee 26s linear infinite;
}
.hero__marquee-track span{
  font-size:.78rem; letter-spacing:.14em; font-weight:600; white-space:nowrap; padding-right:0;
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.hero__content{
  width:var(--container); margin:0 auto; padding-top:6rem;
}
.eyebrow{
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-dark);
  margin-bottom:1.4rem; font-weight:600;
}
.hero__title{
  font-size:clamp(2.6rem, 8.6vw, 6.4rem);
  letter-spacing:-0.03em;
}
.reveal-line{ display:block; overflow:hidden; }
.reveal-line__inner{ display:block; transform:translateY(110%); transition:transform .9s var(--ease-soft); }
.hero.is-ready .reveal-line__inner{ transform:translateY(0); }
.hero.is-ready .reveal-line:nth-child(2) .reveal-line__inner{ transition-delay:.08s; }
.hero.is-ready .reveal-line:nth-child(3) .reveal-line__inner{ transition-delay:.16s; }

.hero .eyebrow{ color:rgba(247,246,243,.8); }

.hero__sub{
  max-width:44ch; font-size:1.15rem; color:rgba(247,246,243,.82); margin:2rem 0 2.6rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero .btn--solid{ background:var(--white); color:var(--black); border-color:var(--white); }
.hero .btn--solid::before{ background:var(--black); }
.hero .btn--solid:hover{ color:var(--white); }

.hero .btn--ghost{ color:var(--white); border-color:var(--white); }
.hero .btn--ghost::before{ background:var(--white); }
.hero .btn--ghost:hover{ color:var(--black); }

.hero__scroll{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,246,243,.7);
}
.hero__scroll-line{ width:1px; height:46px; background:rgba(247,246,243,.3); overflow:hidden; }
.hero__scroll-line i{
  display:block; width:100%; height:40%; background:var(--white);
  animation:scrollLine 2s var(--ease-soft) infinite;
}
@keyframes scrollLine{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(250%); } }

/* ==========================================================================
   REVEAL ON SCROLL (generic)
   ========================================================================== */
.reveal-up{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid{
  width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:3rem;
}
@media (min-width:860px){ .about__grid{ grid-template-columns:0.85fr 1.15fr; gap:5rem; align-items:center; } }

.photo-frame{
  position:relative; aspect-ratio:4/5; width:100%; border-radius:6px; overflow:hidden;
  background:var(--black); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.05);
}
.photo-frame__placeholder{
  display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; padding:1.5rem;
}
.photo-frame__initials{ font-family:var(--sans); font-weight:800; font-size:3rem; letter-spacing:-0.02em; }
.photo-frame__hint{ font-size:.68rem; letter-spacing:.08em; color:var(--gray); text-transform:uppercase; }

.about__lead{ font-size:1.3rem; font-weight:500; line-height:1.5; margin-bottom:1.4rem; }
.about__text{ color:var(--gray-dark); font-size:1.02rem; margin-bottom:1.8rem; }

.tag-list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.tag-list li{
  font-size:.8rem; font-weight:600; letter-spacing:.02em; padding:.55rem 1rem;
  border:1px solid var(--line); border-radius:100px; color:var(--gray-dark);
}

.about__signature{
  margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:1.05rem; font-weight:700; letter-spacing:-0.01em;
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ background:var(--off); }
.services__grid{
  width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
@media (min-width:760px){ .services__grid{ grid-template-columns:repeat(3,1fr); } }

.service-card{
  background:var(--off); padding:2.6rem 2rem;
  transition:background .4s ease, color .4s ease;
}
.service-card:hover{ background:var(--black); color:var(--white); }
.service-card__num{
  display:block; font-family:var(--sans); font-weight:700; font-size:1rem; color:var(--gray); margin-bottom:2.4rem;
}
.service-card:hover .service-card__num{ color:rgba(247,246,243,.5); }
.service-card h3{ font-size:1.35rem; margin-bottom:.9rem; }
.service-card p{ color:var(--gray-dark); font-size:.96rem; }
.service-card:hover p{ color:rgba(247,246,243,.75); }

/* ==========================================================================
   METHOD / TIMELINE
   ========================================================================== */
.timeline{ width:var(--container); margin:0 auto; position:relative; }
.timeline__line{
  position:absolute; left:1.9rem; top:.5rem; bottom:.5rem; width:1px; background:var(--line);
}
@media (min-width:700px){ .timeline__line{ left:3.9rem; } }
.timeline__line-fill{
  display:block; width:100%; height:0%; background:var(--black);
  transition:height 1.4s var(--ease-soft);
}
.timeline.in-view .timeline__line-fill{ height:100%; }

.timeline__item{
  position:relative; display:flex; gap:1.6rem; padding:2.4rem 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:700px){ .timeline__item{ gap:2.8rem; } }
.timeline__item:last-child{ border-bottom:none; }
.timeline__num{
  flex-shrink:0; width:3.8rem; height:3.8rem; border-radius:50%;
  border:1px solid var(--black); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:700; z-index:1;
}
@media (min-width:700px){ .timeline__num{ width:7.8rem; height:auto; border-radius:0; border:none; background:none; justify-content:flex-start; font-family:var(--sans); font-weight:800; font-size:2.4rem; letter-spacing:-0.02em; }}
.timeline__body h3{ font-size:1.4rem; margin-bottom:.6rem; }
.timeline__body p{ color:var(--gray-dark); max-width:52ch; }

/* ==========================================================================
   CASOS DE ÉXITO — before/after slider
   ========================================================================== */
.cases__grid{
  width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:3rem;
}
@media (min-width:760px){ .cases__grid{ grid-template-columns:1fr 1fr; gap:2.5rem; } }

.ba-slider{
  position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden;
  background:var(--black); cursor:ew-resize; user-select:none; touch-action:pan-y;
}
.ba-slider__before,.ba-slider__after{
  position:absolute; inset:0; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; color:var(--white);
}
.ba-slider__after{ background-color:#1c1c1c; filter:contrast(1.05); }
.ba-slider__before{
  background-color:#2c2c2c;
  clip-path:inset(0 50% 0 0);
  filter:grayscale(1) contrast(1.1);
}
.ba-slider__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--white);
  transform:translateX(-50%); display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.ba-slider__handle-icon{
  position:absolute; width:42px; height:42px; border-radius:50%; background:var(--white); color:var(--black);
  display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.ba-slider__tag{
  position:absolute; top:1rem; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:.4rem .75rem; border-radius:100px; background:rgba(10,10,10,.55); color:var(--white); backdrop-filter:blur(4px);
  pointer-events:none;
}
.ba-slider__tag--before{ left:1rem; }
.ba-slider__tag--after{ right:1rem; }

.photo-frame .photo-frame__placeholder,
.ba-slider .photo-frame__placeholder{ position:absolute; inset:0; display:flex; }

.case-card__info{ padding-top:1.4rem; display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; }
.case-card__info h3{ font-size:1.25rem; }
.case-card__info p{ color:var(--gray-dark); font-size:.92rem; }
.case-card__link{
  position:relative; font-size:.85rem; font-weight:700; margin-top:.3rem;
}
.case-card__link::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:var(--black);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.case-card__link:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ==========================================================================
   CASE DETAIL PAGES (hugo.html / alvaro.html)
   ========================================================================== */
.case-intro{
  padding-top:calc(var(--nav-h) + 3.5rem); padding-bottom:4rem;
  background:var(--black); color:var(--white);
}
.case-intro__back{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; font-weight:600; color:rgba(247,246,243,.7);
  margin-bottom:2rem; transition:color .3s ease;
}
.case-intro__back:hover{ color:var(--white); }
.case-intro .section-tag{ color:rgba(247,246,243,.8); }
.case-intro__title{
  font-size:clamp(2.4rem,7vw,4.6rem); letter-spacing:-0.02em; margin:.7rem 0 0;
}
.case-intro__role{
  font-size:.9rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(247,246,243,.6); margin-bottom:1.3rem;
}
.case-intro__lead{ max-width:62ch; font-size:1.2rem; color:rgba(247,246,243,.82); }

.case-visual{ padding-top:0; }
.case-visual__wrap{ width:var(--container); max-width:640px; margin:0 auto; }

.case-content__block{ width:var(--container); max-width:760px; margin:0 auto 3.2rem; }
.case-content__block:last-child{ margin-bottom:0; }
.case-content__block .section-tag{ display:block; margin-bottom:1rem; }

.case-next{ padding-top:0; }
.case-next__link{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem;
  width:var(--container); margin:0 auto; padding:2.4rem 2rem; border:1px solid var(--line); border-radius:8px;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.case-next__link:hover{ background:var(--black); color:var(--white); border-color:var(--black); }
.case-next__label{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray); }
.case-next__name{ font-size:1.6rem; font-weight:800; letter-spacing:-0.02em; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  background:var(--black); color:var(--white);
  text-align:center; padding:clamp(5rem,12vw,8rem) 6vw;
  display:flex; flex-direction:column; align-items:center; gap:2.4rem;
}
.cta-band h2{ font-size:clamp(2rem,6vw,3.6rem); max-width:20ch; }
.cta-band .btn--solid{ background:var(--white); color:var(--black); border-color:var(--white); }
.cta-band .btn--solid::before{ background:var(--black); }
.cta-band .btn--solid:hover{ color:var(--white); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid{
  width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:3.5rem;
}
@media (min-width:900px){ .contact__grid{ grid-template-columns:1.4fr 1fr; } }

.contact-form{
  display:grid; grid-template-columns:1fr; gap:1.6rem;
}
@media (min-width:600px){ .contact-form{ grid-template-columns:1fr 1fr; } }
.field--full{ grid-column:1/-1; }

.field{ position:relative; }
.field input, .field textarea, .field select{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:.9rem 0 .7rem; font-size:1rem; outline:none;
  transition:border-color .3s ease;
}
.field select{ appearance:none; cursor:pointer; }
.field textarea{ resize:vertical; min-height:3rem; }
.field label{
  position:absolute; left:0; top:.9rem; color:var(--gray); font-size:1rem;
  transition:transform .25s var(--ease), font-size .25s var(--ease), color .25s ease;
  pointer-events:none; transform-origin:left top;
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--black); }
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field select:focus ~ label,
.field select:valid ~ label{
  transform:translateY(-1.3rem) scale(.75); color:var(--black);
}

.form-status{
  grid-column:1/-1; font-size:.85rem; min-height:1.2rem; color:var(--gray-dark);
}
.form-status.is-error{ color:#b3261e; }
.form-status.is-success{ color:#1e6b3a; }

.contact-side{ display:flex; flex-direction:column; gap:2rem; }
.contact-side__block{ display:flex; flex-direction:column; gap:.35rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
.contact-side__block:last-child{ border-bottom:none; padding-bottom:0; }
.contact-side__label{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray); }
.contact-side__block a, .contact-side__block p{ font-size:1.15rem; font-weight:600; }
.contact-side__block a{ position:relative; width:fit-content; }
.contact-side__block a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:var(--black);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.contact-side__block a:hover::after{ transform:scaleX(1); transform-origin:left; }

.contact-side__map{
  margin-top:.5rem; border-radius:6px; overflow:hidden; border:1px solid var(--line);
  filter:grayscale(1) contrast(1.05); transition:filter .4s ease;
}
.contact-side__map:hover{ filter:grayscale(0); }
.contact-side__map iframe{ display:block; width:100%; height:220px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--black); color:var(--white); padding:4rem 0 2rem; }
.site-footer__top{
  width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding-bottom:3rem; border-bottom:1px solid rgba(247,246,243,.14);
}
.logo--footer .logo__mark{ border-color:var(--white); }
.logo--footer .logo__text em{ color:var(--gray); }

.site-footer__bottom{
  width:var(--container); margin:2rem auto 0;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-size:.82rem; color:var(--gray);
}
.site-footer__social{ display:flex; gap:1.4rem; }
.site-footer__social a{ position:relative; }
.site-footer__social a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--white);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.site-footer__social a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ==========================================================================
   RESPONSIVE FIXES
   ========================================================================== */
@media (max-width:599px){
  .contact-form{ gap:1.2rem; }
}