/* ============================================================
   LIV PILATES — shared stylesheet for blog pages
   Same tokens as the homepage. Edit here and every blog
   page updates at once.
   ============================================================ */
:root{
  --plaster:#EDEAE2;
  --plaster-deep:#E4E0D6;
  --pine:#17211D;
  --pine-soft:#3A453F;
  --stone:#CFC8BC;
  --stone-faint:#DDD8CE;
  --brass:#9A7B4F;

  --f-display:'Italiana',serif;
  --f-body:'Poppins',system-ui,sans-serif;

  --gutter:clamp(20px,5vw,88px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--plaster);color:var(--pine);
  font-family:var(--f-body);font-weight:300;line-height:1.7;
  letter-spacing:.012em;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--pine);color:var(--plaster)}
:focus-visible{outline:1.5px solid var(--brass);outline-offset:4px}

.eyebrow{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--brass)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gutter);
  background:rgba(237,234,226,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--stone-faint);
}
.mark img{height:44px;width:auto}
@media (max-width:600px){ .mark img{height:36px} }
nav{display:flex;align-items:center;gap:30px}
nav a{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine-soft);position:relative;padding:4px 0}
nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--brass);transition:width .45s var(--ease)}
nav a:hover::after{width:100%}
nav a:hover{color:var(--pine)}
.btn{
  display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:13px 26px;border:1px solid var(--pine);color:var(--pine);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.btn:hover{background:var(--pine);color:var(--plaster)}
.btn-solid{background:var(--pine);color:var(--plaster)}
.btn-solid:hover{background:var(--brass);border-color:var(--brass);color:#fff}
@media (max-width:820px){ nav .nav-link{display:none} }

/* ---------- page shell ---------- */
main{padding:clamp(56px,8vw,104px) var(--gutter) clamp(70px,9vw,120px)}
.wrap{max-width:1180px;margin:0 auto}
.narrow{max-width:660px;margin:0 auto}

.page-head{margin-bottom:clamp(44px,6vw,72px)}
.page-head h1{font-family:var(--f-display);font-weight:400;font-size:clamp(38px,6vw,74px);line-height:1.02;margin:18px 0 20px}
.page-head p{font-size:clamp(14.5px,1.5vw,17px);color:var(--pine-soft);max-width:52ch}

/* ---------- post list ---------- */
.posts{border-top:1px solid var(--pine)}
.post-row{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,220px);
  gap:26px 44px;align-items:start;
  padding:34px 4px;border-bottom:1px solid var(--stone);
  position:relative;transition:padding-left .5s var(--ease);
}
.post-row::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--brass);transition:width .7s var(--ease)}
.post-row:hover::before{width:100%}
.post-row:hover{padding-left:16px}
.post-meta{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-bottom:12px}
.post-row h2{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,3vw,36px);line-height:1.13;margin-bottom:12px}
.post-row p{font-size:14px;color:var(--pine-soft);max-width:60ch}
.post-row .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--plaster-deep)}
.post-row .thumb img{width:100%;height:100%;object-fit:cover}
.read{display:inline-block;margin-top:16px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);border-bottom:1px solid transparent;transition:border-color .4s ease}
.post-row:hover .read{border-bottom-color:var(--brass)}
@media (max-width:760px){
  .post-row{grid-template-columns:1fr}
  .post-row .thumb{order:-1;aspect-ratio:16/9}
}

/* ---------- article ---------- */
.crumbs{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pine-soft);margin-bottom:26px}
.crumbs a:hover{color:var(--brass)}
.crumbs span{color:var(--stone);margin:0 8px}

article h1{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,5vw,58px);line-height:1.06;margin:16px 0 22px}
.byline{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);
  padding-bottom:26px;border-bottom:1px solid var(--stone);margin-bottom:38px;
}
.lead{font-size:clamp(16px,1.8vw,19px);line-height:1.62;color:var(--pine);margin-bottom:34px}

article h2{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(25px,3vw,36px);line-height:1.16;
  margin:52px 0 18px;
}
article h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(20px,2.2vw,26px);margin:36px 0 14px;
}
article p{margin-bottom:20px;color:var(--pine-soft);font-size:15.5px}
article strong{font-weight:500;color:var(--pine)}
article em{font-style:italic}
article ul,article ol{margin:0 0 24px 0;padding-left:20px;color:var(--pine-soft);font-size:15.5px}
article li{margin-bottom:10px}
article ul{list-style:none;padding-left:0}
article ul li{position:relative;padding-left:22px}
article ul li::before{content:'—';position:absolute;left:0;color:var(--brass)}
article figure{margin:38px 0}
article figure img{width:100%}
article figcaption{margin-top:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine-soft)}
article blockquote{
  margin:36px 0;padding:4px 0 4px 26px;border-left:1px solid var(--brass);
  font-family:var(--f-display);font-size:clamp(21px,2.4vw,29px);line-height:1.34;color:var(--pine);
}
article a:not(.btn){border-bottom:1px solid var(--brass);transition:color .35s ease}
article a:not(.btn):hover{color:var(--brass)}

/* ---------- end-of-post call to action ---------- */
.cta-box{
  margin-top:58px;border:1px solid var(--stone);padding:clamp(28px,4vw,44px);
}
.cta-box h3{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.15;margin-bottom:14px}
.cta-box p{font-size:14px;color:var(--pine-soft);margin-bottom:24px}

/* ---------- footer ---------- */
footer{background:var(--pine);color:var(--plaster);padding:clamp(56px,7vw,84px) var(--gutter) 30px}
footer .foot-mark{width:clamp(110px,12vw,150px);margin-bottom:34px}
footer .cta{font-family:var(--f-display);font-size:clamp(28px,4.4vw,54px);line-height:1.06;max-width:16ch}
footer .cta a{border-bottom:1px solid rgba(237,234,226,.3);transition:border-color .4s ease,color .4s ease}
footer .cta a:hover{color:var(--brass);border-bottom-color:var(--brass)}
.foot-row{
  margin-top:clamp(44px,6vw,72px);padding-top:24px;border-top:1px solid rgba(237,234,226,.16);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,234,226,.5);
}
.foot-row a:hover{color:var(--brass)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}

/* ---------- whatsapp ---------- */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:flex;align-items:center;gap:10px;
  background:var(--pine);color:var(--plaster);
  padding:14px 20px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.wa:hover{background:var(--brass);transform:translateY(-2px)}
.wa svg{width:15px;height:15px;fill:currentColor;flex:none}
@media (max-width:600px){ .wa span{display:none} .wa{padding:15px;right:16px;bottom:16px} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   FRANCHISE PAGE
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,80px);align-items:start}
@media (max-width:900px){ .split{grid-template-columns:1fr;gap:44px} }

.pitch h2{font-family:var(--f-display);font-weight:400;font-size:clamp(25px,3vw,38px);line-height:1.12;margin:0 0 18px}
.pitch p{font-size:15px;color:var(--pine-soft);margin-bottom:18px;max-width:54ch}
.pitch ul{list-style:none;margin:26px 0 0}
.pitch li{position:relative;padding:14px 0 14px 26px;border-top:1px solid var(--stone);font-size:14.5px;color:var(--pine-soft)}
.pitch li:last-child{border-bottom:1px solid var(--stone)}
.pitch li::before{content:'—';position:absolute;left:0;color:var(--brass)}
.pitch li strong{color:var(--pine);font-weight:500}

.note{
  margin-top:32px;padding:22px 24px;background:var(--plaster-deep);
  font-size:13.5px;color:var(--pine-soft);
}

/* ---------- form ---------- */
.form-card{border:1px solid var(--stone);padding:clamp(26px,3.5vw,44px);background:var(--plaster)}
.form-card h2{font-family:var(--f-display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.12;margin-bottom:10px}
.form-card > p{font-size:13.5px;color:var(--pine-soft);margin-bottom:30px}

.field{margin-bottom:20px}
.field label{
  display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:14.5px;font-weight:300;color:var(--pine);
  background:transparent;border:0;border-bottom:1px solid var(--stone);
  padding:10px 0;border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .4s var(--ease);
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 11px) 18px,calc(100% - 6px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px;cursor:pointer;
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--brass)}
.field input::placeholder,.field textarea::placeholder{color:var(--stone)}
.two-up{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px}
@media (max-width:560px){ .two-up{grid-template-columns:1fr} }

.form-card button{
  width:100%;margin-top:10px;cursor:pointer;font-family:var(--f-body);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:16px 26px;border:1px solid var(--pine);background:var(--pine);color:var(--plaster);
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.form-card button:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.form-card button:disabled{opacity:.5;cursor:wait}
.consent{margin-top:16px;font-size:11.5px;color:var(--pine-soft);line-height:1.6}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

.form-msg{display:none;padding:22px 24px;font-size:14px;line-height:1.6}
.form-msg.ok{display:block;background:var(--pine);color:var(--plaster)}
.form-msg.err{display:block;background:var(--plaster-deep);color:var(--pine);border:1px solid var(--brass)}
.form-msg strong{display:block;font-family:var(--f-display);font-size:22px;margin-bottom:8px;font-weight:400}