/* ============================================================
   TWT — shared styles for every page (teal + charcoal brand)
   Page-specific sections live in each page's own <style>.
   ============================================================ */
:root{
  /* brand — taken from the TWT logo */
  --teal:#1CABB0;
  --teal-hover:#2BC3C8;
  --teal-deep:#0E7C80;      /* teal for text on light backgrounds (readable) */
  --teal-soft:#E2F3F3;
  --ink:#232627;            /* deepest charcoal */
  --char:#2F3233;           /* dark section ground */
  --char-2:#3B3F40;         /* raised surfaces on dark */
  --logo-grey:#545454;
  --paper:#F4F4F1;          /* light section ground */
  --white:#FFFFFF;
  --line-l:#E1E1DC;
  --text-l:#232627;
  --dim-l:#5C6163;
  --fg:#F2F2F0;
  --fg-dim:rgba(242,242,240,.72);
  --fg-faint:rgba(242,242,240,.45);
  --hair:rgba(255,255,255,.12);
  --fh:'Oswald',sans-serif;
  --fb:'Archivo',sans-serif;
  --fm:'IBM Plex Mono',monospace;
  --tilt:15deg;             /* the lean of the Ts in the logo */
  --slant:5vw;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--char)}
body{background:var(--paper);color:var(--text-l);font-family:var(--fb);font-weight:400;overflow-x:hidden;opacity:0;-webkit-font-smoothing:antialiased}
::selection{background:var(--teal);color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none}
h1,h2,h3,h4{font-family:var(--fh);font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.twt-mark{display:block}
.teal{color:var(--teal)}
.dark{background:var(--char);color:var(--fg)}
.light{background:var(--paper);color:var(--text-l)}
.white{background:var(--white);color:var(--text-l)}
.light .teal,.white .teal{color:var(--teal-deep)}
main{position:relative}
.shell{max-width:1240px;margin:0 auto;padding:0 6vw}
.rise{opacity:0;transform:translateY(40px)}

/* ---------- CURSOR ---------- */
@media(hover:hover) and (pointer:fine){body{cursor:none}a,button,input,select,textarea,label{cursor:none}}
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--teal);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s,border .3s}
.cursor.is-link{width:44px;height:44px;background:rgba(28,171,176,.12);border:1.5px solid var(--teal)}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- PRELOADER ---------- */
.loader{position:fixed;inset:0;background:var(--logo-grey);z-index:10000;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.2rem}
.loader .twt-mark{width:min(46vw,240px);height:auto}
.loader-word{display:flex;overflow:hidden;flex-wrap:wrap;justify-content:center}
.loader-word span{font-family:var(--fh);font-weight:500;font-size:clamp(2rem,6.5vw,3.6rem);letter-spacing:.32em;text-transform:uppercase;opacity:0;transform:translateY(20px);display:inline-block;color:var(--teal)}
.loader-word span.sp{width:.7em}
.loader-line{position:absolute;bottom:0;left:0;height:4px;background:var(--teal);width:0%}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;width:100%;z-index:900;display:flex;justify-content:space-between;align-items:center;padding:1rem 4vw;transition:background .4s,box-shadow .4s,padding .4s}
nav.solid{background:rgba(35,38,39,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.06);padding:.7rem 4vw}
.nav-brand{display:flex;align-items:center;gap:.85rem}
.nav-brand .twt-mark{width:62px;height:auto}
.nav-name{font-family:var(--fh);font-weight:500;font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;color:#D9D9D9}
.nav-links{display:flex;gap:2rem;align-items:center}
.nav-links a{font-family:var(--fb);font-weight:500;font-size:.86rem;color:var(--fg-dim);transition:color .3s;position:relative}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--teal);transition:width .35s}
.nav-links a:hover,.nav-links a.on{color:#fff}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}
.nav-cta{background:var(--teal);color:var(--ink)!important;font-weight:600!important;padding:.7rem 1.2rem;border-radius:3px;transition:background .3s}
.nav-cta:hover{background:var(--teal-hover)}
.menu-tabs{display:none}
@media(max-width:760px){
  .nav-name{display:none}.nav-links a:not(.nav-cta){display:none}
  .menu-tabs{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:940;background:var(--ink);border-top:1px solid var(--hair);justify-content:space-around;padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom,0px))}
  .menu-tab{font-family:var(--fm);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}
  .menu-tab.active{color:var(--teal)}
  .wa{bottom:5.2rem!important}
}

/* ---------- WHATSAPP ---------- */
.wa{position:fixed;bottom:1.8rem;right:1.8rem;z-index:950;width:56px;height:56px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .35s cubic-bezier(.34,1.56,.64,1);opacity:0}
.wa:hover{transform:scale(1.1)}
.wa svg{width:26px;height:26px;fill:var(--ink)}
.wa .tip{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--fb);font-weight:500;font-size:.78rem;color:var(--fg);background:var(--ink);padding:.55rem .85rem;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .3s}
.wa:hover .tip{opacity:1}

/* ---------- BUTTONS ---------- */
.btn-teal{display:inline-block;font-family:var(--fh);font-weight:500;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--teal);padding:1.1rem 2.2rem;border-radius:3px;transition:background .3s;will-change:transform;text-align:center}
.btn-teal:hover{background:var(--teal-hover)}
.btn-teal:disabled{opacity:.6}
.btn-line{display:inline-block;font-family:var(--fh);font-weight:500;font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);border:1.5px solid rgba(242,242,240,.5);padding:1.05rem 2.1rem;border-radius:3px;transition:all .3s;will-change:transform;text-align:center}
.btn-line:hover{border-color:var(--teal);color:var(--teal)}
.light .btn-line,.white .btn-line{color:var(--text-l);border-color:var(--text-l)}
.light .btn-line:hover,.white .btn-line:hover{background:var(--text-l);color:#fff}
.btn-ghost{display:inline-block;font-family:var(--fh);font-weight:500;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);padding:.9rem 1.6rem;border:1.5px solid var(--teal);border-radius:3px;transition:all .3s}
.btn-ghost:hover{background:var(--teal);color:var(--ink)}
.hero-ctas{display:flex;gap:1.2rem;align-items:stretch;flex-wrap:wrap;justify-content:center}

/* ---------- LABELS ---------- */
.eyebrow{font-family:var(--fm);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);display:inline-flex;align-items:center;gap:.8rem}
.eyebrow::before{content:'';width:22px;height:3px;background:var(--teal);transform:skewX(calc(var(--tilt) * -1))}
.light .eyebrow,.white .eyebrow{color:var(--teal-deep)}
.badge{display:inline-block;font-family:var(--fb);font-weight:600;font-size:.76rem;letter-spacing:.04em;color:var(--teal-deep);background:var(--teal-soft);padding:.45rem .9rem;border-radius:99px;white-space:nowrap}
.badge.paid{color:var(--text-l);background:#EDEDEA}
.dark .badge{background:rgba(28,171,176,.16);color:var(--teal)}
.dark .badge.paid{background:rgba(255,255,255,.1);color:var(--fg)}
/* skewed number chip, echoing the leaning Ts */
.chip-no{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;background:var(--teal);color:var(--ink);font-family:var(--fh);font-weight:600;font-size:1rem;transform:skewX(calc(var(--tilt) * -1))}
.chip-no > span{transform:skewX(var(--tilt))}
.chip-no.alt{background:var(--char);color:#fff}

/* ---------- SLANTED EDGES ---------- */
.slant-b{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slant)),0 100%)}
.slant-t{clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%);margin-top:calc(var(--slant) * -1);position:relative;z-index:2}
.slant-tb{clip-path:polygon(0 var(--slant),100% 0,100% calc(100% - var(--slant)),0 100%);margin:calc(var(--slant) * -1) 0;position:relative;z-index:2}

/* ---------- HERO DECOR ---------- */
.gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bar{position:absolute;z-index:1;width:clamp(60px,9vw,130px);height:150%;background:var(--teal);opacity:.07;top:-25%;pointer-events:none}
.bar.l{left:4vw;transform:rotate(calc(var(--tilt) * -1))}
.bar.r{right:4vw;transform:rotate(var(--tilt))}
.hero-ground{background:radial-gradient(ellipse 70% 60% at 50% 38%,#3E4344 0%,var(--char) 62%,var(--ink) 100%)}

/* ---------- SUB-PAGE HERO ---------- */
.page-hero{position:relative;overflow:hidden;text-align:center;padding:11rem 6vw calc(var(--slant) + 12vh)}
.page-hero > *:not(.gl):not(.bar){position:relative;z-index:2}
.page-hero .badge{margin-bottom:1.8rem}
.page-hero h1{font-size:clamp(2.3rem,5.2vw,4.4rem);line-height:1.06;color:#fff;max-width:18ch;margin:0 auto}
.page-hero p{margin:1.8rem auto 0;max-width:58ch;color:var(--fg-dim);line-height:1.8;font-size:1.08rem}
.page-hero .hero-ctas{margin-top:2.6rem}

/* ---------- SECTION HEAD ---------- */
.sec-head{margin-bottom:6vh;display:flex;flex-direction:column;gap:1.1rem}
.sec-head.center{align-items:center;text-align:center}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05}
.sec-head p{max-width:62ch;color:var(--dim-l);line-height:1.8;font-size:1.06rem}
.dark .sec-head p{color:var(--fg-dim)}
.sec-head p strong{color:var(--text-l);font-weight:600}

/* ---------- CARDS (light sections) ---------- */
.card{background:#fff;border:1px solid var(--line-l);border-radius:6px;position:relative;overflow:hidden;transition:transform .4s,box-shadow .4s}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(35,38,39,.1)}
.card.accent::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:var(--teal)}
.white .card{background:var(--paper)}
.ticks{list-style:none;display:flex;flex-direction:column;gap:.75rem}
.ticks li{font-size:.95rem;color:var(--text-l);padding-left:1.9rem;position:relative;line-height:1.5}
.ticks li::before{content:'';position:absolute;left:0;top:.12em;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.5' fill='none' stroke='%230E7C80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}

/* ---------- FORMS (always on a dark surface) ---------- */
.form-card{text-align:left;background:var(--char-2);color:var(--fg);border-radius:6px;padding:2.4rem;border-top:6px solid var(--teal)}
.form-card > h3{font-size:1.3rem;color:#fff;margin-bottom:1.6rem}
form{display:flex;flex-direction:column;gap:1.4rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.f-field{display:flex;flex-direction:column;gap:.55rem}
.f-field label,.f-label{font-family:var(--fb);font-weight:500;font-size:.82rem;color:var(--fg-dim)}
.f-field label small{font-weight:400;opacity:.75}
.f-field input,.f-field select,.f-field textarea,.phone-code-select{background:var(--char);border:1.5px solid #4B5052;color:var(--fg);font-family:var(--fb);font-size:1rem;padding:.9rem 1rem;outline:none;transition:border-color .3s;border-radius:4px;-webkit-appearance:none;width:100%}
.f-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231CABB0' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.6rem}
.f-field input::placeholder,.f-field textarea::placeholder{color:rgba(242,242,240,.35)}
.f-field select option,.phone-code-select option{background:var(--char);color:var(--fg)}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus,.phone-code-select:focus{border-color:var(--teal)}
.f-field textarea{resize:vertical;min-height:110px}
.f-actions{display:flex;gap:1.8rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.f-hint{font-size:.82rem;color:var(--fg-faint)}
@media(max-width:700px){.f-row{grid-template-columns:1fr}.form-card{padding:1.8rem 1.3rem}}

/* ---------- CONTACT LINES ---------- */
.c-lines{display:flex;justify-content:center;gap:1rem 3rem;flex-wrap:wrap;margin-top:3.6rem}
.c-lines a{font-family:var(--fb);font-weight:500;font-size:.92rem;color:var(--fg-dim);transition:color .3s}
.c-lines a:hover{color:var(--teal)}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);padding:1.6rem 6vw calc(1.6rem + env(safe-area-inset-bottom,0px))}
.foot-fine{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--fm);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,242,240,.45);max-width:1240px;margin:0 auto}
.foot-fine a{color:var(--teal)}
@media(max-width:760px){footer{padding-bottom:5.5rem}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .gl{display:none}
}

/* success panel (injected by submit.js) when it sits inside a form card */
.form-card .twt-success{background:none;border:0;padding:1.5rem 0 .5rem}
.twt-status.is-error{color:#F5B4B0}