/* ============ TOKENS ============ */
  :root{
    --bone:#F7F3E7;
    --bone-dim:#EFE9D8;
    --ink:#13140D;
    --ink-soft:#41432F;
    --banana:#FFD200;
    --banana-deep:#F2B705;
    --jungle:#0E2A1C;
    --jungle-light:#1C4A32;
    --flash:#D8FF3D;

    --display: 'Archivo Black', sans-serif;
    --body: 'Space Grotesk', sans-serif;
    --mono: 'Space Mono', monospace;

    --container: min(1240px, 92vw);
    --radius: 999px;
    --ease: cubic-bezier(.16,.84,.44,1);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bone);
    color:var(--ink);
    font-family:var(--body);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  h1,h2,h3,p{ margin:0; }

  ::selection{ background:var(--banana); color:var(--ink); }

  /* custom cursor */
  body{
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><text y='22' font-size='24'>🍌</text></svg>") 6 22, auto;
  }
  a, button, .hoverable, input, textarea{
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><text y='26' font-size='28'>🐒</text></svg>") 8 26, pointer;
  }

  .eyebrow{
    font-family:var(--mono);
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .eyebrow.on-dark{ color:var(--flash); }

  .container{ width:var(--container); margin:0 auto; }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:var(--ink);
    color:var(--bone);
    font-family:var(--body);
    font-weight:600;
    font-size:.95rem;
    padding:.95rem 1.6rem;
    border-radius:var(--radius);
    border:none;
    transition:transform .35s var(--ease), background .3s ease, color .3s ease;
    will-change:transform;
  }
  .btn:hover{ background:var(--banana); color:var(--ink); }
  .btn.alt{ background:var(--banana); color:var(--ink); }
  .btn.alt:hover{ background:var(--ink); color:var(--bone); }

  /* ============ NAV ============ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:1.1rem 0;
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  }
  header.scrolled{
    background:rgba(247,243,231,.88);
    backdrop-filter:blur(10px);
    box-shadow:0 1px 0 rgba(19,20,13,.08);
    padding:.7rem 0;
  }
  nav.container{
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{
    display:flex; align-items:center; gap:.6rem;
  }
  .logo .brand-mark{ width:34px; height:34px; flex:none; }
  .logo .brand-word{ height:40px; width:auto; }
  .nav-links{ display:flex; gap:2.1rem; }
  .nav-links a{
    font-size:.88rem;
    font-weight:600;
    position:relative;
    padding-bottom:3px;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
    background:var(--banana-deep); transition:width .3s var(--ease);
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-cta{ display:flex; align-items:center; gap:1.4rem; }
  .nav-cta .btn{ padding:.65rem 1.3rem; font-size:.85rem; }
  .nav-social{ display:flex; align-items:center; gap:.7rem; }
  .nav-social a{
    width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(19,20,13,.18);
    transition:background .3s ease, border-color .3s ease, transform .3s var(--ease);
  }
  .nav-social a svg{ width:15px; height:15px; }
  .nav-social a:hover{ background:var(--banana); border-color:var(--banana); transform:translateY(-2px); }
  .burger{ display:none; }
  .lang-item{ display:flex; align-items:center; }
  .lang-toggle{
    display:flex; align-items:center; gap:.3rem;
    font-family:var(--mono); font-size:.78rem; font-weight:700;
    background:transparent; border:1px solid rgba(19,20,13,.2);
    border-radius:var(--radius); padding:.35rem .7rem; color:var(--ink);
    transition:border-color .25s ease;
  }
  .lang-toggle:hover{ border-color:var(--ink); }
  .lang-toggle .lang-opt{ padding:.15rem .35rem; border-radius:6px; transition:background .2s ease, color .2s ease; }
  .lang-toggle .lang-opt.active{ background:var(--banana); color:var(--ink); }
  .lang-toggle .lang-sep{ opacity:.35; }
  @media (max-width:600px){ .nav-social{ display:none; } }

  @media (max-width:860px){
    .nav-links{ display:none; }
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding:7rem 0 4rem;
    overflow:hidden;
  }
  .hero-deco{
    position:absolute; inset:0; pointer-events:none; z-index:0;
  }
  .hero-deco svg{ position:absolute; opacity:.9; }
  .hero .container{ position:relative; z-index:1; }
  .hero-eyebrow-row{
    display:flex; align-items:center; gap:.8rem; margin-bottom:1.6rem;
  }
  .dot{ width:8px; height:8px; border-radius:50%; background:var(--banana-deep); }

  h1.hero-title{
    font-family:var(--display);
    font-size:clamp(2.6rem, 8vw, 6.6rem);
    line-height:.96;
    letter-spacing:-.01em;
    text-transform:uppercase;
  }
  h1.hero-title .hl{
    background:var(--banana);
    padding:0 .1em;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }
  .hero-title-wrap{ position:relative; display:inline-block; max-width:100%; }
  .hero-scribble{
    position:absolute; left:2%; right:2%; bottom:-6px;
    width:96%; height:clamp(16px, 3vw, 30px);
    overflow:visible;
  }
  .hero-kinetic{
    margin-top:1.5rem;
    font-family:var(--mono);
    font-size:clamp(1rem, 2vw, 1.2rem);
    color:var(--ink);
    display:flex; align-items:center; min-height:1.6em;
  }
  .hero-kinetic .kinetic-prefix{ color:var(--ink-soft); }
  .hero-kinetic .kinetic-word{ font-weight:700; margin-left:.35em; }
  .hero-kinetic .kinetic-cursor{
    margin-left:.15em; color:var(--banana-deep); font-weight:700;
    animation:caretBlink 1s step-end infinite;
  }
  @keyframes caretBlink{ 0%,100%{ opacity:1 } 50%{ opacity:0 } }
  .hero-sub{
    max-width:520px;
    margin-top:1.8rem;
    font-size:1.05rem;
    line-height:1.55;
    color:var(--ink-soft);
  }
  .hero-actions{
    display:flex; align-items:center; gap:1.4rem; margin-top:2.4rem; flex-wrap:wrap;
  }
  .hero-actions .sub-note{ font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); }

  .scroll-cue{
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink-soft);
  }
  .scroll-cue .line{ width:1px; height:34px; background:var(--ink-soft); animation:scrollpulse 1.8s infinite ease-in-out; }
  @keyframes scrollpulse{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } }

  /* ============ MARQUEE ============ */
  .marquee{
    background:var(--jungle);
    color:var(--bone);
    padding:1.1rem 0;
    overflow:hidden;
    white-space:nowrap;
    border-top:1px solid rgba(247,243,231,.15);
    border-bottom:1px solid rgba(247,243,231,.15);
  }
  .marquee-track{
    display:inline-flex;
    animation:marquee 26s linear infinite;
  }
  .marquee-track span{
    font-family:var(--mono);
    font-size:.95rem;
    letter-spacing:.05em;
    padding:0 1.4rem;
    display:inline-flex; align-items:center; gap:1.4rem;
  }
  .marquee-track span em{ color:var(--flash); font-style:normal; }
  @keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

  /* peel divider */
  .peel-divider{ display:block; width:100%; height:64px; }
  .peel-divider.to-jungle path{ fill:var(--jungle); }
  .peel-divider.to-bone path{ fill:var(--bone); }

  /* ============ MANIFESTO ============ */
  .manifesto{
    background:var(--jungle);
    color:var(--bone);
    padding:1rem 0 6rem;
    position:relative;
  }
  .manifesto .container{ max-width:900px; }
  .manifesto-head{ margin-bottom:2.6rem; }
  .manifesto-head h2{
    font-family:var(--display);
    font-size:clamp(1.9rem, 4.4vw, 3rem);
    line-height:1.05;
    text-transform:uppercase;
    margin-top:.9rem;
  }
  .manifesto-head .parenthetical{
    font-family:var(--mono);
    font-size:.85rem;
    color:var(--flash);
    margin-top:.7rem;
    display:block;
  }
  .manifesto-lede{
    font-size:clamp(1.3rem,2.6vw,1.9rem);
    font-weight:600;
    line-height:1.35;
    margin:2.2rem 0 1.6rem;
  }
  .manifesto-intro{
    color:rgba(247,243,231,.78);
    font-size:1rem;
    line-height:1.7;
    max-width:640px;
  }
  .beliefs{ margin-top:3rem; display:flex; flex-direction:column; }
  .belief{
    display:grid; grid-template-columns:90px 1fr; gap:1.6rem;
    padding:2rem 0;
    border-top:1px solid rgba(247,243,231,.18);
  }
  .beliefs .belief:last-child{ border-bottom:1px solid rgba(247,243,231,.18); }
  .belief .num{
    font-family:var(--mono);
    font-size:.85rem;
    color:var(--flash);
    padding-top:.2rem;
  }
  .belief h3{
    font-family:var(--body);
    font-weight:700;
    font-size:1.15rem;
    margin-bottom:.5rem;
  }
  .belief p{
    color:rgba(247,243,231,.78);
    line-height:1.65;
    font-size:.98rem;
    max-width:620px;
  }
  .manifesto-close{
    margin-top:3rem;
    font-family:var(--display);
    font-size:clamp(1.2rem,2.6vw,1.7rem);
    text-transform:uppercase;
    line-height:1.3;
  }
  .manifesto-close .flash{ color:var(--flash); }

  /* ============ SERVICES ============ */
  .services{ padding:7rem 0 5rem; }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
    margin-bottom:3.4rem; flex-wrap:wrap;
  }
  .section-head h2{
    font-family:var(--display);
    font-size:clamp(2rem, 4.6vw, 3.4rem);
    text-transform:uppercase;
    margin-top:.7rem;
    max-width:640px;
    line-height:1.02;
  }
  .section-head .side-note{
    max-width:320px; font-size:.95rem; color:var(--ink-soft); line-height:1.6;
  }

  .service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:rgba(19,20,13,.14);
    border:1px solid rgba(19,20,13,.14);
  }
  .service-col{
    background:var(--bone);
    padding:2.1rem 1.7rem 2.4rem;
    transition:background .35s ease;
  }
  .service-col:hover{ background:var(--bone-dim); }
  .service-col .tag{
    font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.08em;
  }
  .service-col h3{
    font-family:var(--body); font-weight:700; font-size:1.3rem; margin:.6rem 0 1.4rem;
  }
  .service-col ul li{
    font-size:.92rem; padding:.55rem 0; border-top:1px solid rgba(19,20,13,.1);
    display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  }
  .service-col ul li:first-child{ border-top:none; }
  .service-col ul li span.arrow{ opacity:0; transform:translateX(-4px); transition:all .25s var(--ease); color:var(--banana-deep); }
  .service-col ul li:hover span.arrow{ opacity:1; transform:translateX(0); }

  @media (max-width:1000px){
    .service-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:560px){
    .service-grid{ grid-template-columns:1fr; }
  }

  /* offerings strip */
  .offerings{
    margin-top:1px;
    display:grid; grid-template-columns:repeat(3,1fr);
    border:1px solid rgba(19,20,13,.14); border-top:none;
  }
  .offer{
    padding:1.8rem 1.8rem 2rem;
    border-left:1px solid rgba(19,20,13,.14);
    background:var(--banana);
  }
  .offer:first-child{ border-left:none; }
  .offer .eyebrow{ color:var(--ink-soft); }
  .offer p.desc{ font-size:.9rem; margin-top:.6rem; color:var(--ink); line-height:1.55; }
  @media (max-width:760px){
    .offerings{ grid-template-columns:1fr; }
    .offer{ border-left:none; border-top:1px solid rgba(19,20,13,.14); }
    .offer:first-child{ border-top:none; }
  }

  /* ============ PROCESS ============ */
  .process{ background:var(--ink); color:var(--bone); padding:7rem 0; }
  .process .section-head h2{ color:var(--bone); }
  .process .section-head .side-note{ color:rgba(247,243,231,.65); }
  .process .eyebrow{ color:var(--flash); }
  .process-list{ display:flex; flex-direction:column; }
  .process-item{
    display:grid; grid-template-columns:120px 1fr 1fr; gap:2rem;
    padding:2.3rem 0; border-top:1px solid rgba(247,243,231,.16);
    align-items:baseline;
  }
  .process-item:last-child{ border-bottom:1px solid rgba(247,243,231,.16); }
  .process-item .step-num{ font-family:var(--display); font-size:1.6rem; color:var(--banana); }
  .process-item h3{ font-size:1.3rem; font-weight:700; }
  .process-item p{ color:rgba(247,243,231,.7); font-size:.94rem; line-height:1.6; }
  @media (max-width:760px){
    .process-item{ grid-template-columns:1fr; gap:.6rem; }
  }

  /* ============ GLOBAL ============ */
  .global{ padding:7rem 0; }
  .global-grid{
    display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
  }
  .global h2{
    font-family:var(--display); font-size:clamp(2rem,4.4vw,3.1rem); text-transform:uppercase; line-height:1.05; margin-top:.7rem;
  }
  .global p.lede{ margin-top:1.4rem; font-size:1.05rem; line-height:1.65; color:var(--ink-soft); max-width:520px; }
  .value-props{ display:flex; flex-direction:column; gap:1.4rem; }
  .value-prop{ display:flex; gap:1rem; align-items:flex-start; }
  .value-prop .ic{ width:34px; height:34px; flex:none; }
  .value-prop h4{ font-size:1rem; font-weight:700; margin-bottom:.3rem; }
  .value-prop p{ font-size:.9rem; color:var(--ink-soft); line-height:1.55; }
  @media (max-width:860px){ .global-grid{ grid-template-columns:1fr; } }

  /* ============ CTA ============ */
  .cta-block{
    background:var(--banana);
    padding:6rem 0;
    position:relative;
    overflow:hidden;
  }
  .cta-block .container{ position:relative; z-index:1; text-align:center; }
  .cta-block h2{
    font-family:var(--display);
    font-size:clamp(2.4rem, 8vw, 5.4rem);
    text-transform:uppercase;
    line-height:.98;
  }
  .cta-block p{ margin:1.4rem auto 2.2rem; max-width:480px; font-size:1.05rem; color:var(--ink-soft); }
  .cta-block .btn{ background:var(--ink); color:var(--bone); font-size:1.05rem; padding:1.1rem 2rem; }
  .cta-block .btn:hover{ background:var(--jungle); color:var(--bone); }
  .cta-emoji-row{ margin-top:2.6rem; font-size:1.6rem; letter-spacing:.6rem; opacity:.7; }

  /* ============ FOOTER ============ */
  footer{ background:var(--ink); color:var(--bone); padding:4rem 0 2rem; }
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:2.4rem;
    padding-bottom:3rem; border-bottom:1px solid rgba(247,243,231,.16);
  }
  .footer-logo{ font-family:var(--display); font-size:1.8rem; text-transform:uppercase; display:flex; align-items:center; gap:.8rem; }
  .footer-logo .brand-mark{ width:42px; height:42px; flex:none; }
  .footer-logo .brand-word{ height:26px; width:auto; }
  .footer-cols{ display:flex; gap:4rem; flex-wrap:wrap; }
  .footer-col .eyebrow{ color:var(--flash); margin-bottom:.9rem; display:block; }
  .footer-col a, .footer-col p{ display:block; font-size:.9rem; padding:.28rem 0; color:rgba(247,243,231,.85); }
  .footer-bottom{
    display:flex; justify-content:space-between; padding-top:1.6rem; flex-wrap:wrap; gap:1rem;
    font-family:var(--mono); font-size:.75rem; color:rgba(247,243,231,.55);
  }

  /* reveal on scroll */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .marquee-track{ animation:none; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .scroll-cue .line{ animation:none; }
  }

  /* contact form */
  .cta-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start;
    text-align:left; margin-top:3rem;
  }
  .cta-grid .cta-copy{ text-align:left; }
  .cta-grid .cta-copy h2{ font-size:clamp(2rem,5.6vw,3.6rem); }
  .contact-form{
    background:var(--ink); border-radius:20px; padding:2.2rem;
    display:flex; flex-direction:column; gap:1rem;
  }
  .form-row{ display:flex; flex-direction:column; gap:.4rem; }
  .contact-form input, .contact-form textarea{
    background:var(--bone); border:1px solid rgba(19,20,13,.15);
    border-radius:10px; padding:.85rem 1rem;
    font-family:var(--body); font-size:.95rem; color:var(--ink);
    outline:none; transition:border-color .25s ease, box-shadow .25s ease;
  }
  .contact-form textarea{ resize:vertical; min-height:110px; }
  .contact-form input:focus, .contact-form textarea:focus{
    border-color:var(--banana); box-shadow:0 0 0 3px rgba(255,163,2,.25);
  }
  .contact-form .btn{ align-self:flex-start; background:var(--banana); color:var(--ink); border:none; }
  .contact-form .btn:hover{ background:var(--bone); }
  .contact-form .btn:disabled{ opacity:.6; cursor:not-allowed; }
  .form-status{ font-family:var(--mono); font-size:.85rem; min-height:1.2em; color:var(--bone); }
  .form-status.ok{ color:var(--flash); }
  .form-status.err{ color:#ff8a7a; }
  @media (max-width:860px){
    .cta-grid{ grid-template-columns:1fr; gap:2.2rem; }
  }

  /* whatsapp floating bubble */
  .wa-float{
    position:fixed; right:1.5rem; bottom:1.5rem; z-index:300;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 24px rgba(19,20,13,.28);
    transition:transform .3s var(--ease);
  }
  .wa-float svg{ width:30px; height:30px; }
  .wa-float:hover{ transform:scale(1.08); }
  .wa-float::before{
    content:''; position:absolute; inset:0; border-radius:50%;
    background:#25D366; opacity:.55;
    animation:waPulse 2.4s ease-out infinite;
    z-index:-1;
  }
  @keyframes waPulse{
    0%{ transform:scale(1); opacity:.5; }
    100%{ transform:scale(1.7); opacity:0; }
  }
  @media (max-width:600px){
    .wa-float{ right:1rem; bottom:1rem; width:52px; height:52px; }
    .wa-float svg{ width:26px; height:26px; }
  }
  @media (prefers-reduced-motion: reduce){
    .wa-float::before{ animation:none; }
  }

  /* language picker modal */
  .lang-modal-overlay{
    position:fixed; inset:0; z-index:1000;
    display:flex; align-items:center; justify-content:center;
    background:rgba(19,20,13,.55); backdrop-filter:blur(6px);
    opacity:0; pointer-events:none; transition:opacity .35s ease;
    padding:1.5rem;
  }
  .lang-modal-overlay.open{ opacity:1; pointer-events:auto; }
  .lang-modal{
    position:relative; background:var(--bone); border-radius:24px;
    padding:2.6rem 2.2rem; max-width:380px; width:100%; text-align:center;
    box-shadow:0 30px 70px rgba(0,0,0,.35);
    transform:scale(.9) translateY(14px); opacity:0;
    transition:transform .45s var(--ease), opacity .4s ease;
  }
  .lang-modal-overlay.open .lang-modal{ transform:scale(1) translateY(0); opacity:1; }
  .lang-modal-close{
    position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
    border:1px solid rgba(19,20,13,.15); background:transparent; color:var(--ink);
    font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center;
    transition:background .25s ease, border-color .25s ease;
  }
  .lang-modal-close:hover{ background:var(--banana); border-color:var(--banana); }
  .lang-modal-mark{ font-size:2.6rem; margin-bottom:.5rem; display:inline-block; }
  .lang-modal-mark.bounce{ animation:langBounce 2.2s ease-in-out infinite; }
  @keyframes langBounce{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-6px) rotate(4deg); } }
  .lang-modal-title{ font-family:var(--display); font-size:1.25rem; text-transform:uppercase; line-height:1.35; }
  .lang-modal-title small{
    display:block; font-family:var(--body); font-weight:600; font-size:.92rem;
    text-transform:none; color:var(--ink-soft); margin-top:.35rem;
  }
  .lang-modal-actions{ display:flex; flex-direction:column; gap:.8rem; margin-top:1.8rem; }
  .lang-modal-btn{
    font-family:var(--body); font-weight:700; font-size:1rem;
    padding:.9rem 1.2rem; border-radius:var(--radius);
    border:2px solid var(--ink); background:transparent; color:var(--ink);
    transition:background .25s ease, color .25s ease, transform .25s var(--ease);
  }
  .lang-modal-btn:hover{ background:var(--ink); color:var(--bone); transform:translateY(-2px); }
  @media (prefers-reduced-motion: reduce){
    .lang-modal-mark.bounce{ animation:none; }
    .lang-modal-overlay, .lang-modal{ transition:none; }
  }

/* ============ BREADCRUMB ============ */
.breadcrumb{
  font-family:var(--mono); font-size:.78rem; color:var(--ink-soft);
  display:flex; align-items:center; gap:.5rem; margin-bottom:1.6rem;
}
.breadcrumb a{ color:var(--ink-soft); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.breadcrumb a:hover{ border-color:var(--ink-soft); }
.breadcrumb .sep{ opacity:.5; }

/* ============ SERVICE / BLOG PAGE HERO ============ */
.page-hero{
  padding:9rem 0 4rem;
  background:var(--bone);
}
.page-hero .eyebrow{ margin-bottom:1rem; display:block; }
.page-hero h1{
  font-family:var(--display);
  font-size:clamp(2.2rem, 6vw, 4.2rem);
  line-height:1.02;
  text-transform:uppercase;
  max-width:820px;
}
.page-hero h1 .hl{
  background:var(--banana); padding:0 .1em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.page-hero .lede{
  margin-top:1.4rem; max-width:640px; font-size:1.1rem; line-height:1.6; color:var(--ink-soft);
}

/* ============ SERVICE DETAIL ============ */
.detail{ padding:1rem 0 6rem; }
.detail .container{ max-width:900px; }
.detail h2{
  font-family:var(--display); font-size:clamp(1.5rem,3.4vw,2.1rem);
  text-transform:uppercase; margin:3rem 0 1.2rem; line-height:1.15;
}
.detail h2:first-child{ margin-top:0; }
.detail p{ font-size:1.02rem; line-height:1.75; color:var(--ink-soft); max-width:720px; }
.detail p + p{ margin-top:1rem; }
.detail ul.check-list{ margin-top:1.4rem; display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.6rem; }
.detail ul.check-list li{
  font-size:.98rem; color:var(--ink); display:flex; align-items:flex-start; gap:.6rem; line-height:1.5;
}
.detail ul.check-list li::before{
  content:'🍌'; font-size:.85rem; line-height:1.5; flex:none;
}
@media (max-width:700px){ .detail ul.check-list{ grid-template-columns:1fr; } }

.detail .cross-links{
  margin-top:3.2rem; padding-top:2.2rem; border-top:1px solid rgba(19,20,13,.14);
  display:flex; flex-wrap:wrap; gap:.8rem;
}
.detail .cross-links a{
  font-family:var(--mono); font-size:.82rem; padding:.55rem 1.1rem; border:1px solid rgba(19,20,13,.2);
  border-radius:var(--radius); transition:background .25s ease, border-color .25s ease;
}
.detail .cross-links a:hover{ background:var(--banana); border-color:var(--banana); }

.detail .inline-cta{
  margin-top:3rem; background:var(--jungle); color:var(--bone); border-radius:20px; padding:2.4rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem;
}
.detail .inline-cta p{ color:rgba(247,243,231,.85); font-size:1.05rem; max-width:420px; margin:0; }
.detail .inline-cta .btn{ background:var(--banana); color:var(--ink); white-space:nowrap; }
.detail .inline-cta .btn:hover{ background:var(--bone); }

/* ============ BLOG GRID ============ */
.blog-hero{ padding:9rem 0 3rem; }
.blog-hero .eyebrow{ margin-bottom:1rem; display:block; }
.blog-hero h1{
  font-family:var(--display); font-size:clamp(2.4rem,7vw,5rem); text-transform:uppercase; line-height:.98;
}
.blog-hero .lede{ margin-top:1.3rem; max-width:600px; font-size:1.08rem; line-height:1.6; color:var(--ink-soft); }

.blog-grid{
  padding:1rem 0 6rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(19,20,13,.14); border:1px solid rgba(19,20,13,.14);
}
.blog-card{
  background:var(--bone); padding:2.2rem 2rem; display:flex; flex-direction:column; gap:.9rem;
  transition:background .3s ease;
}
.blog-card:hover{ background:var(--bone-dim); }
.blog-card .tag{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.08em; }
.blog-card h3{ font-family:var(--body); font-weight:700; font-size:1.35rem; line-height:1.25; }
.blog-card p{ font-size:.95rem; color:var(--ink-soft); line-height:1.6; }
.blog-card .read-more{
  margin-top:.4rem; font-family:var(--mono); font-size:.82rem; color:var(--ink);
  display:inline-flex; align-items:center; gap:.4rem;
}
@media (max-width:760px){ .blog-grid{ grid-template-columns:1fr; } }

/* ============ ARTICLE ============ */
.article-hero{ padding:9rem 0 2.5rem; }
.article-hero .container{ max-width:760px; }
.article-hero .tag{ font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); letter-spacing:.08em; }
.article-hero h1{
  font-family:var(--display); font-size:clamp(2rem,5.6vw,3.4rem); text-transform:uppercase; line-height:1.04; margin-top:.9rem;
}
.article-hero .meta{ margin-top:1rem; font-family:var(--mono); font-size:.82rem; color:var(--ink-soft); }

.article-body{ padding:1rem 0 5rem; }
.article-body .container{ max-width:760px; }
.article-body p{ font-size:1.06rem; line-height:1.8; color:var(--ink); margin-top:1.3rem; }
.article-body p:first-child{ margin-top:0; }
.article-body h2{
  font-family:var(--body); font-weight:700; font-size:1.5rem; margin:2.6rem 0 1rem; line-height:1.3;
}
.article-body ul{ margin-top:1.2rem; padding-left:1.3rem; list-style:disc; }
.article-body ul li{ font-size:1.02rem; line-height:1.7; color:var(--ink); padding:.25rem 0; }
.article-body blockquote{
  margin:2rem 0; padding:1.4rem 1.8rem; background:var(--bone-dim); border-left:4px solid var(--banana-deep);
  font-size:1.1rem; font-style:italic; color:var(--ink-soft); border-radius:0 12px 12px 0;
}
.article-cta{
  margin-top:3rem; background:var(--jungle); color:var(--bone); border-radius:20px; padding:2.4rem;
  text-align:center;
}
.article-cta h3{ font-family:var(--display); font-size:1.5rem; text-transform:uppercase; margin-bottom:.8rem; }
.article-cta p{ color:rgba(247,243,231,.8); max-width:460px; margin:0 auto 1.4rem; }
.article-cta .btn{ background:var(--banana); color:var(--ink); }
.article-cta .btn:hover{ background:var(--bone); }

/* ============ NAV: blog pill ============ */
.nav-links a.pill{
  background:var(--ink); color:var(--bone); padding:.4rem .9rem; border-radius:var(--radius);
}
.nav-links a.pill::after{ display:none; }
.nav-links a.pill:hover{ background:var(--banana); color:var(--ink); }

/* ============ HOMEPAGE: subtitle + service links + blog teaser ============ */
.hero-seo-line{
  margin-top:1.1rem; font-size:1.02rem; color:var(--ink-soft); max-width:560px; line-height:1.55;
}
.service-col .col-link{
  margin-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:.8rem; color:var(--ink);
  border-bottom:1px solid rgba(19,20,13,.25);
}
.blog-teaser{ padding:6rem 0 7rem; background:var(--bone-dim); }
.blog-teaser .section-head .eyebrow{ display:block; margin-bottom:.7rem; }

/* ============ PROMO BANNER (home) ============ */
.promo-banner{
  display:block; position:relative; z-index:5;
  margin-top:82px;
  background:linear-gradient(90deg, var(--jungle), #2c4a3a 60%, var(--jungle));
  color:var(--bone);
  text-decoration:none;
  overflow:hidden;
  border-bottom:2px solid var(--banana);
}
.promo-banner::before{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg, rgba(247,243,231,.05) 0 12px, transparent 12px 24px);
  pointer-events:none;
}
.promo-banner-inner{
  position:relative;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.5rem 1.2rem;
  padding:.85rem 1.5rem;
  text-align:center;
}
.promo-banner-tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  background:var(--banana); color:var(--ink); padding:.3rem .7rem; border-radius:999px;
  white-space:nowrap;
}
.promo-banner-copy{
  font-family:var(--body); font-size:.98rem; font-weight:500;
  display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:center;
}
.promo-banner-copy strong{ font-weight:700; }
.promo-price{ font-family:var(--mono); font-size:.9rem; color:var(--banana); }
.promo-price s{ opacity:.6; margin-right:.35rem; }
.promo-banner-cta{
  font-family:var(--mono); font-size:.82rem; text-decoration:underline; white-space:nowrap;
  transition:opacity .2s ease;
}
.promo-banner:hover .promo-banner-cta{ opacity:.7; }
@media (max-width:640px){
  .promo-banner-inner{ padding:.9rem 1.2rem; }
  .promo-banner-copy{ font-size:.88rem; }
}

/* ============ PROMO LANDING PAGE ============ */
.promo-hero{
  padding:9rem 0 4rem; background:var(--banana); color:var(--ink); position:relative; overflow:hidden;
}
.promo-hero .container{ position:relative; z-index:1; }
.promo-hero .breadcrumb, .promo-hero .breadcrumb a{ color:rgba(19,20,13,.55) !important; }
.promo-hero-grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; margin-top:1.5rem;
}
.promo-hero-text .eyebrow{ display:inline-block; background:var(--jungle); color:var(--bone); padding:.35rem .9rem; border-radius:999px; font-size:.75rem; margin-bottom:1.3rem; }
.promo-hero-text h1{
  font-family:var(--display); font-size:clamp(2.1rem,5.4vw,3.4rem); text-transform:uppercase; line-height:1.05;
}
.promo-hero-text .promo-tagline{ margin-top:1.2rem; font-size:1.15rem; max-width:520px; color:rgba(19,20,13,.8); line-height:1.55; }
.promo-hero-text .promo-sell{ margin-top:.6rem; font-size:1rem; max-width:520px; color:rgba(19,20,13,.65); }
.promo-hero-media{
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(19,20,13,.12);
  box-shadow:0 20px 50px rgba(19,20,13,.15);
}
.promo-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px){
  .promo-hero-grid{ grid-template-columns:1fr; gap:2rem; }
  .promo-hero-media{ order:-1; max-height:280px; }
}

.promo-price-block{
  padding:5rem 0 2rem;
}
.promo-price-card{
  background:var(--bone-dim); border-radius:24px; padding:2.6rem; max-width:760px; margin:0 auto;
  border:1px solid rgba(19,20,13,.1);
}
.promo-price-card .cupo{
  font-family:var(--mono); font-size:.8rem; color:#E1543A; text-transform:uppercase; letter-spacing:.05em;
}
.promo-price-card h2{
  font-family:var(--display); font-size:clamp(1.5rem,3.6vw,2.2rem); text-transform:uppercase; margin:.6rem 0 1.6rem;
}
.price-table{ width:100%; border-collapse:collapse; margin-top:1rem; }
.price-table tr{ border-bottom:1px solid rgba(19,20,13,.12); }
.price-table td{ padding:.85rem .2rem; font-size:.98rem; }
.price-table td:last-child{ text-align:right; font-family:var(--mono); white-space:nowrap; }
.price-table tr.free td:last-child{ color:var(--jungle); font-weight:700; }
.price-table tr.total-row td{ font-weight:700; font-size:1.05rem; padding-top:1.2rem; border-bottom:none; }
.promo-price-compare{
  margin-top:2rem; display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  padding-top:1.6rem; border-top:2px solid var(--ink);
}
.promo-price-compare .old-price{ font-family:var(--mono); font-size:1.3rem; opacity:.45; text-decoration:line-through; }
.promo-price-compare .new-price{ font-family:var(--display); font-size:2.6rem; color:var(--jungle); }
.promo-price-compare .plus-iva{ font-family:var(--mono); font-size:.9rem; color:var(--ink-soft); }
.promo-fine-print{ margin-top:1.6rem; font-size:.88rem; color:var(--ink-soft); line-height:1.6; }
.promo-fine-print strong{ color:var(--ink); }

.promo-bonus{
  margin-top:2rem; background:var(--banana); border-radius:16px; padding:1.4rem 1.6rem;
  display:flex; gap:1rem; align-items:flex-start;
}
.promo-bonus .emoji{ font-size:1.6rem; line-height:1; }
.promo-bonus p{ margin:0; font-size:.95rem; color:var(--ink); }
.promo-bonus strong{ display:block; margin-bottom:.2rem; }

.promo-why{ padding:3rem 0 5rem; }
.promo-why .container{ max-width:760px; }
.promo-why h2{ font-family:var(--display); font-size:clamp(1.4rem,3.2vw,1.9rem); text-transform:uppercase; margin-bottom:1.1rem; }
.promo-why p{ font-size:1.03rem; line-height:1.75; color:var(--ink-soft); }
.promo-why blockquote{
  margin:1.6rem 0; padding:1.3rem 1.6rem; background:var(--bone-dim); border-left:4px solid var(--banana-deep);
  font-style:italic; color:var(--ink); border-radius:0 12px 12px 0; font-size:1.02rem;
}

.promo-contact{ padding:2rem 0 6rem; }
.promo-contact .container{ max-width:760px; }
.promo-contact-card{
  background:var(--jungle); color:var(--bone); border-radius:24px; padding:2.6rem;
  display:grid; grid-template-columns:1fr 1fr; gap:2.4rem;
}
@media (max-width:760px){ .promo-contact-card{ grid-template-columns:1fr; } }
.promo-contact-card h2{ font-family:var(--display); font-size:1.5rem; text-transform:uppercase; margin-bottom:.8rem; }
.promo-contact-card p{ color:rgba(247,243,231,.75); font-size:.95rem; line-height:1.6; }
.promo-form{ display:flex; flex-direction:column; gap:.8rem; }
.promo-form input, .promo-form textarea{
  width:100%; padding:.8rem 1rem; border-radius:10px; border:1px solid rgba(247,243,231,.25);
  background:rgba(247,243,231,.08); color:var(--bone); font-family:var(--body); font-size:.95rem;
}
.promo-form input::placeholder, .promo-form textarea::placeholder{ color:rgba(247,243,231,.5); }
.promo-form input:focus, .promo-form textarea:focus{ outline:2px solid var(--banana); background:rgba(247,243,231,.14); }
.promo-form textarea{ resize:vertical; min-height:90px; }
.promo-form .btn{ background:var(--banana); color:var(--ink); border:none; cursor:pointer; margin-top:.3rem; }
.promo-form .btn:hover{ background:var(--bone); }
.promo-direct-links{ display:flex; flex-direction:column; gap:.8rem; align-self:start; }
.promo-direct-links a{
  display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.92rem;
  background:rgba(247,243,231,.08); border:1px solid rgba(247,243,231,.2); border-radius:10px; padding:.85rem 1.1rem;
  transition:background .2s ease;
}
.promo-direct-links a:hover{ background:rgba(247,243,231,.16); }
.promo-direct-links svg{ width:20px; height:20px; flex:none; }
.promo-form-note{ font-size:.8rem; color:rgba(247,243,231,.55); margin-top:.4rem; }

/* ============ PROMO BILLBOARD (home, mid-page) ============ */
.promo-billboard{
  padding:5rem 0; background:var(--jungle); color:var(--bone); position:relative; overflow:hidden;
}
.promo-billboard::before{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg, rgba(247,243,231,.04) 0 14px, transparent 14px 28px);
  pointer-events:none;
}
.promo-billboard-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; align-items:center;
}
.promo-billboard-media{
  border-radius:20px; overflow:hidden; border:1px solid rgba(247,243,231,.15);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.promo-billboard-media img{ width:100%; display:block; }
.promo-billboard-copy .promo-banner-tag{ margin-bottom:1.2rem; display:inline-block; }
.promo-billboard-copy h2{
  font-family:var(--display); font-size:clamp(1.8rem,4.2vw,2.8rem); text-transform:uppercase; line-height:1.08;
}
.promo-billboard-copy p{ margin-top:1rem; font-size:1.05rem; color:rgba(247,243,231,.75); max-width:440px; line-height:1.6; }
.promo-billboard-price{
  margin-top:1.6rem; display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
}
.promo-billboard-price s{ font-family:var(--mono); font-size:1.1rem; opacity:.5; }
.promo-billboard-price strong{ font-family:var(--display); font-size:2.2rem; color:var(--banana); }
.promo-billboard-price span{ font-family:var(--mono); font-size:.85rem; color:rgba(247,243,231,.6); }
.promo-billboard-copy .btn{ margin-top:1.6rem; background:var(--banana); color:var(--ink); }
.promo-billboard-copy .btn:hover{ background:var(--bone); }
@media (max-width:860px){
  .promo-billboard-grid{ grid-template-columns:1fr; gap:2rem; }
  .promo-billboard-media{ order:-1; }
}