/* =========================================================
   massage by Deny — landing page
   ========================================================= */

:root {
  --bg:          #FBF8F4;
  --bg-alt:      #F4EDE2;
  --bg-warm:     #F7F1E8;
  --surface:     #FFFFFF;

  --accent:      #B4794A;
  --accent-dark: #96602F;
  --accent-soft: #E8D6C0;

  --ink:         #16120F;
  --body:        #554C44;
  --muted:       #8A7D72;
  --line:        #E7DCCD;

  --font-head: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --radius:    14px;
  --radius-lg: 22px;
  --shadow:    0 18px 48px -22px rgba(60, 38, 18, .34);

  --container:       1120px;   /* landing page */
  --container-legal:  760px;   /* legal pages — narrower for reading */
  --header-h:          74px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); margin: 0; line-height: 1.15; letter-spacing: -.02em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; }
svg { width: 100%; height: 100%; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section   { padding: clamp(56px, 8vw, 96px) 0; }
.center    { text-align: center; }

/* ---------- shared bits ---------- */
.eyebrow {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.section-title { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, #C08A56 0%, #A56C39 100%);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(150, 96, 47, .8);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(150, 96, 47, .85); }
.btn-primary:active { transform: translateY(0); }
.btn-sm  { padding: 10px 18px; font-size: 13.5px; letter-spacing: .01em; }
.btn-lg  { padding: 17px 34px; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
/* normal wrapping, not nowrap: on a 360px phone this button's label is what
   would otherwise force the whole pricing card wider than the screen */
.btn-block {
  display: flex; width: 100%;
  padding: 17px 20px;
  font-size: 16px; letter-spacing: .03em; text-transform: uppercase;
  white-space: normal; text-align: center;
}

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 244, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px rgba(60,38,18,.5); }
.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
/* Sized by height, width follows the artwork. No ring around it — the monogram
   is a self-contained mark and boxing it in fights the design. */
.brand-logo { height: 34px; width: auto; flex: none; display: block; }
.brand-name { font-family: var(--font-head); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }

.header-right { display: flex; align-items: center; gap: 18px; }

.lang-switch { display: inline-flex; align-items: center; gap: 8px; }
.lang-btn {
  background: none; border: 0; padding: 4px 2px;
  font-family: var(--font-head); font-size: 13px; font-weight: 500;
  color: var(--muted); cursor: pointer; letter-spacing: .06em;
  transition: color .15s ease;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.is-active { color: var(--accent); font-weight: 600; }
.lang-sep { width: 1px; height: 13px; background: var(--line); }

/* ---------- hero ---------- */
.hero { background: var(--bg); }
.hero-grid {
  display: grid;
  /* The hero photo is a wide room shot. Giving the media column the larger
     share, and keeping the hero from growing too tall, is what stops the crop
     from swallowing the scene at the narrow end of desktop. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  align-items: center;
  min-height: min(68vh, 560px);
  /* Lines the headline up with every .container below it. Uses 100% rather
     than 100vw on purpose — 100vw includes the scrollbar and pushes the
     headline a few px right of the rest of the page. */
  padding-left: max(24px, calc((100% - var(--container)) / 2 + 24px));
}
.hero-copy {
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 64px) clamp(40px, 6vw, 76px) 0;
}
.hero-title {
  font-size: clamp(38px, 5.6vw, 66px);
  font-weight: 700;
  letter-spacing: -.035em;
  margin-bottom: 20px;
}
.hero-lead {
  font-size: clamp(15.5px, 1.35vw, 17.5px);
  max-width: 34ch;
  margin-bottom: 32px;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 30px;
}
.hero-meta li { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--body); }
.hero-meta svg { width: 19px; height: 19px; flex: none; color: var(--accent); }

.hero-media { position: relative; height: 100%; min-height: 320px; overflow: hidden; }
/* Hero framing. This is a CROP setting, not a layout one — the layout still has
   only the two versions. The photo is a wide room shot, and how much of it fits
   the hero column changes a lot with screen width, so the focal point moves in
   one step at 1200px. See the min-width block further down. */
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(251,248,244,.45) 5%, rgba(251,248,244,0) 15%);
  pointer-events: none;
}

/* ---------- about ---------- */
.about { background: var(--bg); padding-top: clamp(20px, 3vw, 40px); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.about-media { max-width: 420px; }
.about-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;   /* keeps Deny's face out of the crop */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.about-copy h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; margin-bottom: 20px; }
.about-copy p + p { margin-top: 15px; }
.about-copy p { max-width: 46ch; }

/* ---------- what you'll learn ---------- */
.learn { background: var(--bg-alt); }
.learn .section-title { max-width: 22ch; margin: 0 auto 52px; }

.features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 34px);
}
.feature { text-align: center; }
.feature-icon {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  color: var(--accent);
}
.feature h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 9px; }
.feature p  { font-size: 13.5px; line-height: 1.6; color: var(--body); }

/* ---------- gallery ---------- */
.gallery { background: var(--bg-alt); padding-bottom: clamp(56px, 8vw, 96px); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
.gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.gallery figure:hover img { transform: scale(1.045); }

/* ---------- pricing ---------- */
.pricing { background: var(--bg-warm); }
.pricing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4.5vw, 52px);
  align-items: center;
}
.pricing-left, .pricing-right { min-width: 0; }
.pricing-left h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin-bottom: 22px; }

.check-list li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  margin-bottom: 11px;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 3px; top: .52em;
  width: 13px; height: 7px;
  border-left: 2.2px solid var(--accent);
  border-bottom: 2.2px solid var(--accent);
  transform: rotate(-45deg);
}

.pricing-note {
  margin-top: 26px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
}

.pricing-right {
  background: var(--bg-warm);
  border-radius: var(--radius);
  padding: clamp(26px, 3.5vw, 38px) clamp(20px, 3vw, 32px);
  text-align: center;
}
.price-label { font-family: var(--font-head); font-size: 16px; font-weight: 600; color: var(--ink); }
.price {
  font-family: var(--font-head);
  font-size: clamp(52px, 7vw, 72px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.04em;
  line-height: 1.05;
  margin: 6px 0 24px;
}
.price-secure {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--muted);
}
.price-secure svg { width: 15px; height: 15px; flex: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-alt); padding: clamp(40px, 5vw, 60px) 0 28px; border-top: 1px solid var(--line); }
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.footer-brand { display: flex; align-items: center; gap: 18px; }
/* The one place the lockup runs big enough for "DENYS KORBAN" to be readable. */
.footer-logo { height: 76px; width: auto; flex: none; display: block; }
.footer-name { font-family: var(--font-head); font-size: 16.5px; font-weight: 600; color: var(--ink); }
.footer-tagline { font-size: 13.5px; color: var(--muted); }

.footer-head {
  font-family: var(--font-head);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.footer-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.footer-list svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.footer-list a { text-decoration: none; transition: color .15s ease; }
.footer-list a:hover { color: var(--accent); }
.footer-list.plain a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }

.copyright {
  max-width: var(--container);
  margin: 30px auto 0;
  padding-inline: 24px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- sticky mobile buy bar ---------- */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar .btn { padding: 13px 20px; font-size: 14px; }
.mobile-bar-price { display: flex; flex-direction: column; line-height: 1.25; }
.mobile-bar-label { font-size: 11px; color: var(--muted); }
.mobile-bar-amount { font-family: var(--font-head); font-size: 21px; font-weight: 700; color: var(--ink); }

/* =========================================================
   Responsive — deliberately TWO layouts and nothing in between.

     900px and up  → desktop: multi-column
     below 900px   → mobile: one column, capped at --container (620px)
                     and centred, so a 500px window and an 880px window
                     show the same design with more air around it.

   Resist adding a third breakpoint here. The in-between states
   (3 feature cards with 2 orphans, a squeezed two-column hero) are
   exactly what this replaced.
   ========================================================= */

@media (max-width: 899.98px) {

  /* One knob: every .container, the hero and the legal pages follow this. */
  :root {
    --container:       620px;
    --container-legal: 620px;
    --header-h:         64px;
  }

  /* ---- hero: photo on top, copy under ---- */
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    max-width: calc(var(--container) + 48px);
    margin-inline: auto;
    padding-left: 0;
  }
  .hero-media { order: -1; min-height: 0; }
  .hero-media img {
    aspect-ratio: 16 / 11; height: auto;
    object-position: 32% 45%;
    transform: none;
  }
  .hero-media::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(251,248,244,0) 22%); }
  .hero-copy { padding: 32px 24px 48px; max-width: none; }
  .hero-lead { max-width: none; }
  .btn-lg { width: 100%; }

  /* ---- about ---- */
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-media { max-width: 380px; }
  .about-copy p { max-width: none; }

  /* ---- features: two per row, left-aligned ---- */
  .features { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .learn .section-title { max-width: none; margin-bottom: 44px; }
  .feature { text-align: left; }
  .feature-icon { margin-inline: 0; width: 44px; height: 44px; margin-bottom: 12px; }

  /* ---- gallery + pricing + footer: single column ---- */
  .gallery-grid { grid-template-columns: 1fr; }
  .pricing-card { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }

  /* ---- header swaps its buy button for the sticky bottom bar ---- */
  .brand-name { font-size: 15.5px; }
  .brand-logo { height: 29px; }
  .footer-logo { height: 64px; }
  .header-right .btn-sm { display: none; }
  .mobile-bar { display: flex; }
}

/* ---------------------------------------------------------
   Hero crop on wide screens — NOT a third layout.

   The wider the window, the more of the photo the hero column can show, and
   past ~1200px the plain cover crop pulls back far enough that Deny and the
   hands doing the massage stop being the subject. So from 1200px up the focal
   point moves right, onto his hands, and the image zooms slightly past cover.
   The low transform-origin (28%) takes that extra crop off the floor at the
   bottom rather than off the top of his head.

   Below 1200px the column is narrow enough that cover already crops in tight;
   applying this there would push her out of frame entirely.
--------------------------------------------------------- */
@media (min-width: 1200px) {
  .hero-media img {
    object-position: 82% 50%;
    transform: scale(1.22);
    transform-origin: 82% 28%;
  }
}

/* =========================================================
   Legal pages
   ========================================================= */
.legal { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 88px); }
.legal .container { max-width: var(--container-legal); }
.legal h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; margin-bottom: 8px; }
.legal .updated { font-size: 13px; color: var(--muted); margin-bottom: 40px; }
.legal h2 {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 32px; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legal li { margin-bottom: 7px; }
/* identity blocks (name, NIF, address) — a list for structure, not for bullets */
.legal ul.plain-list { padding-left: 0; list-style: none; }
.legal ul.plain-list li { margin-bottom: 5px; }
.legal ul.plain-list strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal .todo {
  background: #FFF4E2;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 32px;
  font-size: 14px;
  color: #7A5320;
}
.legal .todo strong { color: #5E3D12; }
.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; text-decoration: none; color: var(--muted);
  margin-bottom: 28px;
}
.back-link:hover { color: var(--accent); }
.back-link svg { width: 15px; height: 15px; }

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .site-header, .mobile-bar { display: none; }
}