/* ==========================================================================
   UPTURN — MAKE IT HIT
   Editorial / brutalist / minimalist agency site.
   Palette: #000000 · #FFFFFF · #FC6EA5 (from the client's own brand manual)
   ========================================================================== */

@font-face {
  font-family: 'Rubik Distressed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/rubik-distressed-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122;
}

:root{
  --black:#000000;
  --white:#ffffff;
  --pink:#fc6ea5;
  --pink-soft: rgba(252,110,165,.16);
  --pink-mid: rgba(252,110,165,.45);
  --line: rgba(255,255,255,.18);
  --line-dark: rgba(0,0,0,.14);

  --font-sans: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;
  --font-stamp: 'Rubik Distressed', var(--font-sans);

  --container: min(1360px, 92vw);
  --gutter: clamp(1.1rem, 3vw, 2.6rem);
  --radius: 2px;

  --ease-out: cubic-bezier(.16,.84,.36,1);
  --ease-hit: cubic-bezier(.2,1.4,.4,1);
  --dur-fast: .35s;
  --dur-med: .7s;
  --dur-slow: 1.1s;

  --header-h: clamp(64px, 8vw, 84px);
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ margin:0; padding:0; }
body{
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline: 2px solid var(--pink); outline-offset: 3px; }
::selection{ background: var(--pink); color:#000; }

.container{ width: var(--container); margin-inline:auto; }
.only-mobile{ display:none; }

/* ---------- utility: reveal-on-scroll ----------
   Base state is ALWAYS visible. Hidden states only apply once JS confirms
   it booted (html.has-js) so a broken/blocked script never hides content. */
.reveal{ opacity:1; transform:none; }
.has-js .reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.has-js .reveal.is-visible{ opacity:1; transform:none; }

.reveal[data-split]{ opacity:1; transform:none; } /* defensive: split text never hides by default */
.split-word{ display:inline-block; opacity:1; transform:none; will-change:transform; }
.has-js [data-split] .split-word{
  opacity:0;
  transform: translateY(.6em) rotate(1.5deg);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.has-js [data-split].is-visible .split-word{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .has-js .reveal, .has-js [data-split] .split-word{ transition-duration: .01ms !important; }
}

/* ---------- grain / texture overlay (stand-in for real editorial photography) ---------- */
.grain{
  position:absolute; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity:.06;
  mix-blend-mode: overlay;
  z-index:1;
}
.grain--light{ mix-blend-mode: multiply; opacity:.05; }

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; z-index:999;
  pointer-events:none;
  border-radius:50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--pink); }
.cursor-ring{
  width:34px; height:34px;
  border:1px solid rgba(252,110,165,.65);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s;
}
html.cursor-enabled .cursor-dot, html.cursor-enabled .cursor-ring{ display:block; }
.cursor-dot, .cursor-ring{ display:none; }
html.cursor-enabled, html.cursor-enabled a, html.cursor-enabled button{ cursor:none; }
.cursor-ring.is-active{ width:64px; height:64px; border-color: var(--pink); background: rgba(252,110,165,.08); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:100;
  height: var(--header-h);
  transition: height var(--dur-fast);
}
/* Visual chrome (background/blur) lives on this inner bar, not on .site-header itself.
   backdrop-filter creates a new containing block for fixed-position descendants, which
   would break the full-viewport mobile menu panel if it lived on the header directly. */
.site-header__bar{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline: var(--gutter);
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast);
}
.site-header.is-compact{ height: clamp(56px,7vw,68px); }
.site-header.is-compact .site-header__bar{ background: rgba(0,0,0,.82); }

.site-header__logo{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.site-header__logo img{ height: clamp(26px,3.4vw,34px); width:auto; }
.site-header__logo span{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.6);
  display:none;
}
@media (min-width:560px){ .site-header__logo span{ display:inline; } }

.site-header__nav{ display:flex; align-items:center; gap: clamp(1.2rem,2.4vw,2.4rem); }
.site-header__nav a{
  position:relative; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  padding-block:.3rem;
}
.site-header__nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--pink);
  transition: width var(--dur-fast) var(--ease-out);
}
.site-header__nav a:hover::after, .site-header__nav a:focus-visible::after{ width:100%; }
.site-header__nav a.site-header__cta{
  border:1px solid var(--white); padding:.5rem 1rem; border-radius: 999px;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.site-header__nav a.site-header__cta::after{ display:none; }
.site-header__nav a.site-header__cta:hover{ background:var(--pink); border-color:var(--pink); color:#000; }

/* mobile disclosure menu — works with zero JS via <details>.
   Positioned as a direct child of the unfiltered <header> (see HTML comment) so its
   position:fixed panel anchors to the viewport instead of a filtered ancestor. */
.mobile-menu{ display:none; }
.mobile-menu summary{
  list-style:none; display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  padding:.5rem .2rem; user-select:none;
}
.mobile-menu summary::-webkit-details-marker{ display:none; }
.mobile-menu .bars{ position:relative; width:22px; height:14px; }
.mobile-menu .bars span{
  position:absolute; left:0; right:0; height:2px; background:var(--white);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.mobile-menu .bars span:nth-child(1){ top:0; }
.mobile-menu .bars span:nth-child(2){ top:6px; }
.mobile-menu .bars span:nth-child(3){ top:12px; }
.mobile-menu[open] .bars span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.mobile-menu[open] .bars span:nth-child(2){ opacity:0; }
.mobile-menu[open] .bars span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
.mobile-menu[open] .label-open{ display:none; }
.mobile-menu:not([open]) .label-close{ display:none; }

.mobile-menu__panel{
  position: fixed; inset: var(--header-h) 0 0 0; z-index:90;
  background: var(--black);
  display:flex; flex-direction:column; justify-content:center;
  padding: 2rem var(--gutter) 3rem;
  gap: .4rem;
}
.mobile-menu__links{ display:flex; flex-direction:column; }
.mobile-menu__links a{
  font-family: var(--font-stamp); text-transform:uppercase;
  font-size: clamp(2.2rem, 11vw, 3.4rem); line-height:1.05;
  padding-block:.25rem; border-bottom:1px solid var(--line);
}
.mobile-menu__links a:active, .mobile-menu__links a:hover{ color:var(--pink); }
.mobile-menu__meta{ margin-top:1.6rem; font-size:.8rem; color:rgba(255,255,255,.55); line-height:1.7; }
.mobile-menu__meta a{ color:var(--white); }

@media (max-width: 900px){
  .site-header__nav{ display:none; }
  .mobile-menu{
    display:flex; align-items:center;
    position:absolute; top:0; right:0; height:var(--header-h);
    padding-inline: var(--gutter);
    z-index:5;
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 4rem;
  overflow:hidden;
  isolation:isolate;
}
.hero__beam{
  position:absolute; z-index:0; pointer-events:none;
  top:-20%; left:50%; width:220%; height:70%;
  background: conic-gradient(from 200deg at 50% 50%, transparent 0deg, rgba(252,110,165,.14) 40deg, transparent 90deg, transparent 360deg);
  transform: translateX(-50%);
  animation: beam-drift 18s linear infinite;
}
@keyframes beam-drift{ to{ transform: translateX(-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .hero__beam{ animation-duration: 90s; } }

.hero__eyebrow{
  position:relative; z-index:2;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: clamp(1.4rem,4vw,2.4rem);
}
.hero__eyebrow::before{ content:'●'; color:var(--pink); margin-right:.6em; font-size:.6em; vertical-align:middle; }

.hero__lockup{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  transform-style:preserve-3d; will-change:transform;
}
.hero__wordmark{
  width: min(78vw, 720px);
  height:auto;
}
.hero__tagline{
  font-family: var(--font-stamp); text-transform:uppercase; color:var(--pink);
  font-size: clamp(2.6rem, 10vw, 7.4rem);
  line-height:.86;
  margin-top: clamp(-1.2rem, -3vw, -.6rem);
  margin-left: clamp(0px, 6vw, 90px);
}

.hero__statement{
  position:relative; z-index:2;
  max-width: 40ch;
  font-size: clamp(1.05rem, 2.1vw, 1.4rem);
  line-height:1.5;
  color: rgba(255,255,255,.86);
  margin-top: clamp(1.6rem,4vw,2.6rem);
  padding-left: clamp(0px, 6vw, 90px);
  border-left: 2px solid var(--pink);
  padding-left: 1rem;
}

.hero__scrollcue{
  position:absolute; right: var(--gutter); bottom: 2.2rem; z-index:2;
  display:flex; align-items:center; gap:.6rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55);
  writing-mode: vertical-rl;
}
.hero__scrollcue span{
  width:1px; height:46px; background: linear-gradient(var(--pink), transparent);
  animation: cue-fall 1.8s ease-in-out infinite;
}
@keyframes cue-fall{ 0%,100%{ transform: scaleY(.4); opacity:.4; } 50%{ transform: scaleY(1); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .hero__scrollcue span{ animation:none; opacity:.7; } }
@media (max-width: 640px){ .hero__scrollcue{ display:none; } }

/* one-time impact flash — pure CSS, no JS dependency, can never block the page */
.impact-flash{
  position:fixed; inset:0; z-index:400;
  background: var(--pink);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  animation: impact-seq 1.15s var(--ease-hit) forwards;
}
.impact-flash span{
  font-family: var(--font-stamp); text-transform:uppercase; color:#000;
  font-size: clamp(2.2rem, 9vw, 6rem);
  transform: scale(.4);
}
@keyframes impact-seq{
  0%{ opacity:1; }
  12%{ opacity:1; }
  55%{ opacity:1; }
  100%{ opacity:0; visibility:hidden; }
}
.impact-flash span{ animation: impact-punch 1.15s var(--ease-hit) forwards; }
@keyframes impact-punch{
  0%{ transform: scale(.3) rotate(-4deg); }
  14%{ transform: scale(1.08) rotate(1deg); }
  22%{ transform: scale(1) rotate(0deg); }
  100%{ transform: scale(1.4); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .impact-flash{ animation-duration: .5s; }
  .impact-flash span{ animation: none; opacity:0; transition: opacity .4s ease .1s; }
}

/* ==========================================================================
   MARQUEE TICKER
   ========================================================================== */
.marquee{
  position:relative;
  background: var(--white); color:#000;
  border-block: 1px solid #000;
  overflow:hidden;
  padding-block: clamp(.7rem, 2vw, 1.1rem);
  transform: rotate(-1deg);
  margin-block: -1px;
}
.marquee__track{
  display:flex; width:max-content;
  animation: marquee 26s linear infinite;
  gap: 2.4rem;
}
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation-duration: 110s; } }
.marquee__track span{
  font-family: var(--font-stamp); text-transform:uppercase;
  font-size: clamp(1.1rem, 3vw, 1.9rem);
  white-space:nowrap; display:flex; align-items:center; gap:2.4rem;
}
.marquee__track span::after{ content:'✦'; color:var(--pink); font-size:.7em; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ==========================================================================
   SECTION SCAFFOLDING
   ========================================================================== */
section{ position:relative; }
.section-black{ background:var(--black); color:var(--white); }
.section-white{ background:var(--white); color:#000; }
.section-pad{ padding-block: clamp(4.5rem, 10vw, 8.5rem); }

.kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; margin-bottom: clamp(1.4rem,3vw,2.2rem);
}
.kicker::before{ content:''; width:26px; height:1px; background:var(--pink); }

/* ==========================================================================
   MANIFESTO
   ========================================================================== */
.manifesto__grid{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}
.manifesto__pull{
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height:1.14; font-weight:700; letter-spacing:-.01em;
}
.manifesto__body p{
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height:1.75; color:#333;
  margin-bottom:1.2em; max-width:58ch;
}
.manifesto__body p:last-child{ margin-bottom:0; }

.manifesto__values{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-top: clamp(3rem,6vw,4.5rem);
}
.manifesto__values li{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  border:1px solid #000; border-radius:999px; padding:.55rem 1.1rem;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.manifesto__values li:nth-child(odd){ transform: rotate(-1.2deg); }
.manifesto__values li:nth-child(even){ transform: rotate(1deg); }
.manifesto__values li:hover{ background:var(--pink); border-color:var(--pink); color:#000; transform: rotate(0) translateY(-2px); }

@media (max-width: 860px){
  .manifesto__grid{ grid-template-columns:1fr; gap:2rem; }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services__head{ margin-bottom: clamp(2.5rem,5vw,4rem); }
.services__title{
  font-size: clamp(1.9rem, 4.4vw, 3.6rem);
  line-height:1.08; font-weight:700; max-width:18ch;
}
.services__title .ink{
  font-family: var(--font-stamp); text-transform:uppercase; color:var(--pink);
  font-size:1.05em;
}

.services__band{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.service-panel{
  position:relative;
  border-bottom:1px solid var(--line);
  padding: clamp(1.6rem,4vw,2.6rem) 0;
  display:grid; grid-template-columns: 70px 1fr;
  align-items:baseline;
  cursor:pointer;
  transition: padding-block var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.service-panel__index{
  font-size:.85rem; color: rgba(255,255,255,.4); font-weight:600;
}
.service-panel__name{
  font-family: var(--font-stamp); text-transform:uppercase;
  font-size: clamp(1.8rem, 5.4vw, 4.4rem);
  line-height:1; transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.service-panel__desc{
  grid-column: 2; max-width:52ch;
  color: rgba(255,255,255,.72);
  font-size: clamp(.95rem, 1.2vw, 1.08rem); line-height:1.65;
  overflow:hidden; max-height:0; opacity:0;
  transition: max-height var(--dur-med) var(--ease-out), opacity var(--dur-fast), margin-top var(--dur-med) var(--ease-out);
}
/* readable-without-js fallback: description always shown until enhanced */
.service-panel__desc{ max-height:none; opacity:1; margin-top:.5rem; }

.has-js .service-panel__desc{ max-height:0; opacity:0; margin-top:0; }
.has-js .service-panel:hover .service-panel__name,
.has-js .service-panel.is-open .service-panel__name{ color:var(--pink); transform: translateX(10px); }
.has-js .service-panel:hover .service-panel__desc,
.has-js .service-panel.is-open .service-panel__desc{ max-height:200px; opacity:1; margin-top:.9rem; }
.has-js .service-panel:hover, .has-js .service-panel.is-open{ background: rgba(252,110,165,.05); }

@media (max-width: 640px){
  .service-panel{ grid-template-columns: 44px 1fr; }
}

/* ==========================================================================
   METHOD (Estrategia + Creatividad + Performance)
   ========================================================================== */
.method__stack{
  display:flex; flex-wrap:wrap; align-items:center; gap: clamp(.6rem,2vw,1.4rem);
  margin-bottom: clamp(2rem,5vw,3rem);
}
.method__word{
  font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size: clamp(2.1rem, 7vw, 5.4rem);
  line-height:1;
  position:relative;
  transition: color var(--dur-fast);
}
.method__word:hover{ color:var(--pink); }
.method__plus{
  font-family: var(--font-stamp); color:var(--pink);
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  transform: rotate(-8deg);
}
.method__note{
  max-width:56ch; font-size: clamp(1rem,1.6vw,1.2rem); line-height:1.7; color:#333;
}

/* ==========================================================================
   SELECTED WORK
   ========================================================================== */
.work__head{ margin-bottom: clamp(2.4rem,5vw,3.6rem); max-width:60ch; }
.work__head h2{
  font-size: clamp(1.8rem, 4.2vw, 3.2rem); line-height:1.12; font-weight:700; margin-bottom:.9rem;
}
.work__head p{ color: rgba(255,255,255,.65); font-size: clamp(1rem,1.4vw,1.1rem); line-height:1.6; }

.work__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem,2vw,1.6rem);
}
.work-card{
  position:relative; aspect-ratio: 4/5;
  border:1px dashed rgba(255,255,255,.28);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: clamp(1rem,2vw,1.4rem);
  overflow:hidden;
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.work-card::before{ content:''; position:absolute; inset:0; }
.work-card__num{ font-size:.78rem; color:rgba(255,255,255,.4); }
.work-card__stamp{
  align-self:center; margin:auto;
  font-family: var(--font-stamp); text-transform:uppercase; color:rgba(255,255,255,.5);
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  border:1px solid rgba(255,255,255,.3); border-radius:999px;
  padding:.5rem 1.1rem;
  transform: rotate(-6deg);
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.work-card:hover{ border-color: var(--pink); transform: translateY(-4px); }
.work-card:hover .work-card__stamp{ color:var(--pink); border-color:var(--pink); transform: rotate(0deg) scale(1.04); }
.work-card__glow{
  position:absolute; width:220px; height:220px; right:-80px; top:-80px; border-radius:50%;
  background: radial-gradient(circle, rgba(252,110,165,.35), transparent 70%);
  opacity:0; transition: opacity var(--dur-med);
}
.work-card:hover .work-card__glow{ opacity:1; }

@media (max-width: 860px){
  .work__grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px){
  .work__grid{ grid-template-columns: 1fr; }
  .work-card{ aspect-ratio: 16/10; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ overflow:hidden; }
.about__lead{
  font-size: clamp(1.9rem, 4.6vw, 3.8rem); font-weight:700; line-height:1.1;
  max-width:16ch; margin-bottom: clamp(1.6rem,3vw,2.2rem);
}
.about__body{
  max-width:58ch; font-size: clamp(1rem,1.5vw,1.15rem); line-height:1.75; color:#333;
  margin-bottom: clamp(2rem,4vw,2.8rem);
}
.about__tags{ display:flex; flex-wrap:wrap; gap:.6rem; }
.about__tags li{
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  background:#000; color:#fff; padding:.55rem 1.05rem; border-radius:2px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.about__tags li:hover{ background:var(--pink); color:#000; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.cta{ background: var(--pink); color:#000; overflow:hidden; }
.cta .kicker::before{ background:#000; }
.cta__headline{
  font-family: var(--font-stamp); text-transform:uppercase;
  font-size: clamp(3rem, 12vw, 8.5rem);
  line-height:.86;
  margin-bottom: clamp(2rem,5vw,3.2rem);
}
.cta__button{
  display:inline-flex; align-items:center; gap:1rem;
  background:#000; color:#fff;
  font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size: clamp(1rem,1.6vw,1.2rem);
  padding: clamp(1rem,2vw,1.3rem) clamp(1.6rem,3vw,2.2rem);
  border-radius:999px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.cta__button:hover{ transform: scale(1.04); }
.cta__arrow{ transition: transform var(--dur-fast) var(--ease-out); }
.cta__button:hover .cta__arrow{ transform: translateX(6px); }

.cta__meta{
  margin-top: clamp(2.4rem,5vw,3.4rem);
  display:flex; flex-wrap:wrap; gap: 1.6rem 2.4rem;
  font-size: clamp(.95rem,1.4vw,1.1rem); font-weight:600;
}
.cta__meta a{ border-bottom:1px solid rgba(0,0,0,.35); padding-bottom:2px; }
.cta__meta a:hover{ border-color:#000; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:#000; padding-top: clamp(3rem,6vw,4.5rem); }
.site-footer__top{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom: clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap; gap:1.5rem;
}
.site-footer__badge{ height:44px; width:auto; }
.site-footer__nav{ display:flex; flex-wrap:wrap; gap: clamp(1rem,2vw,2rem); }
.site-footer__nav a{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.75); }
.site-footer__nav a:hover{ color:var(--pink); }

.site-footer__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:2rem;
  padding-block: clamp(2.4rem,5vw,3.6rem);
  border-bottom:1px solid var(--line);
}
.site-footer__grid h4{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45);
  margin-bottom:.9rem; font-weight:700;
}
.site-footer__grid a, .site-footer__grid p{
  display:block; font-size:.95rem; color:rgba(255,255,255,.85); line-height:1.9;
}
.site-footer__grid a:hover{ color:var(--pink); }
.site-footer__grid p{ color:rgba(255,255,255,.55); }
.social-note{ font-size:.72rem; color:rgba(255,255,255,.35); margin-top:.4rem; }

.site-footer__bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: clamp(1.4rem,3vw,2rem);
  font-size:.78rem; color:rgba(255,255,255,.45);
}
.back-to-top{
  width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.back-to-top:hover{ background:var(--pink); border-color:var(--pink); color:#000; transform: translateY(-3px); }

@media (max-width: 700px){
  .site-footer__grid{ grid-template-columns: 1fr; gap:1.8rem; }
  .site-footer__bottom{ flex-direction:column-reverse; gap:1.2rem; text-align:center; }
}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-form{
  margin-top: clamp(2rem,4vw,2.6rem);
  max-width: 640px;
  display:flex; flex-direction:column; gap: 1.1rem;
}
.contact-form__honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.contact-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.contact-form__field{ display:flex; flex-direction:column; gap:.4rem; }
.contact-form__field label{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:rgba(0,0,0,.6);
}
.contact-form__field input, .contact-form__field textarea{
  font: inherit; font-size:1rem; color:#000;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.22);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  resize: vertical;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.contact-form__field input:focus, .contact-form__field textarea:focus{
  outline:none; border-color:#000; background:#fff;
}
.contact-form__submit{ align-self:flex-start; border:0; }
.contact-form__status{ font-size:.9rem; font-weight:600; min-height:1.4em; margin:0; }
.contact-form__status[data-state="ok"]{ color:#0a5c2b; }
.contact-form__status[data-state="err"]{ color:#7a1414; }
.contact-form.is-sending .contact-form__submit{ opacity:.6; pointer-events:none; }

@media (max-width: 560px){
  .contact-form__row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   FLOATING SOCIAL BUTTONS (Instagram + WhatsApp)
   ========================================================================== */
.social-float{
  position: fixed; right: clamp(1rem,3vw,1.6rem); bottom: clamp(1rem,3vw,1.6rem);
  z-index: 95;
  display:flex; flex-direction:column; gap:.7rem;
}
.social-float__btn{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#000; color:#fff;
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast);
}
.social-float__btn:hover{ transform: translateY(-3px) scale(1.06); background: var(--pink); color:#000; }
.social-float__btn--wsp:hover{ background:#25D366; color:#000; }

@media (max-width: 560px){
  .social-float__btn{ width:46px; height:46px; }
}

/* ==========================================================================
   MAGNETIC helper (JS adds inline transform on mousemove near element)
   ========================================================================== */
.magnetic{ will-change: transform; }