/* ALEX RABIA COACHING — site v1.1 · design system from approved mockup */
:root{
  --bg:#0A0A0A; --panel:#121212; --panel2:#161616;
  --gold:#C9A45C; --gold-bright:#E8BC72; --gold-dim:rgba(201,164,92,.28);
  --white:#F5F2EC; --body:#C9C6BF; --dim:#8A867E;
  --disp:'Montserrat','Futura','Century Gothic','Helvetica Neue',Arial,sans-serif;
  --text:'Inter','Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font-family:var(--text);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim) 18%,var(--gold-dim) 82%,transparent);position:relative;margin:0 auto}
.rule::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%) rotate(45deg);background:var(--gold)}
h1,h2,h3{font-family:var(--disp);color:var(--white);font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.28}
.btn{display:inline-block;font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;padding:17px 34px;border:1px solid var(--gold);color:var(--white);transition:.35s;background:transparent;cursor:pointer}
.btn:hover{background:var(--gold);color:#0A0A0A}
.btn.solid{background:var(--gold);color:#0A0A0A}
.btn.solid:hover{background:var(--gold-bright)}
.btn.ghost{border-color:rgba(245,242,236,.22);color:var(--body)}
.btn.ghost:hover{border-color:var(--gold);color:var(--white);background:transparent}

/* CTA band — same filter CTA after every block */
.cta-band{text-align:center;padding:34px 0 0}
.cta-band .micro{font-size:12.5px;color:var(--dim);margin-top:14px}

/* build flags — remove before launch; unverified items stay visibly red */
.build-flag{background:#3A0E0E;border:1px solid #C0392B;color:#F0B9B0;font-family:var(--text);font-size:12.5px;padding:10px 16px;margin:18px auto;max-width:760px;text-align:center}

/* announcement bar (hidden until config numbers are TRUE) */
#announce{display:none;background:var(--panel2);border-bottom:1px solid rgba(201,164,92,.2);text-align:center;padding:9px 16px;font-family:var(--disp);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-bright)}

/* nav */
nav{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(10,10,10,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,164,92,.14)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:46px;width:auto}
.brand span{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.34em;color:var(--white)}
.brand span em{font-style:normal;color:var(--gold);font-weight:400}
.nav-links{display:flex;gap:38px;align-items:center}
.nav-links a{font-family:var(--disp);font-size:10.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--body);transition:.3s}
.nav-links a:hover{color:var(--gold-bright)}
.nav-cta{font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--white);border:1px solid var(--gold);padding:11px 20px;transition:.3s;white-space:nowrap}
.nav-cta:hover{background:var(--gold);color:#0A0A0A}
@media(max-width:900px){.nav-links a{display:none}.nav-links .nav-cta{display:inline-block}}
@media(max-width:640px){
  .brand span{display:none}
  .brand img{height:40px}
  .nav-in{height:64px}
  .nav-cta{font-size:9px;letter-spacing:.18em;padding:10px 14px}
  .hero{padding-top:110px}
}

/* prominent inline text links */
.text-link{display:inline-block;color:var(--gold-bright);font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;border:1px solid rgba(201,164,92,.45);padding:14px 22px;text-shadow:0 0 16px rgba(232,188,114,.5);box-shadow:0 0 22px rgba(201,164,92,.14);transition:.3s}
.text-link:hover{color:#0A0A0A;background:var(--gold-bright);text-shadow:none}

/* hero */
.hero{position:relative;padding:170px 0 0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:end}
.hero h1{font-size:clamp(30px,4.6vw,52px);font-weight:800}
.hero h1 .g{color:var(--gold)}
.hero-sub{margin:26px 0 36px;max-width:52ch;font-size:16px;color:var(--body)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hero-micro{font-size:12.5px;color:var(--dim);margin-bottom:30px}
.hero-note{font-family:var(--disp);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);padding-bottom:58px}
.hero-note b{color:var(--gold);font-weight:600}
.hero-photo{position:relative}
.hero-photo::before{content:"";position:absolute;inset:26px -18px 0 26px;border:1px solid var(--gold-dim);pointer-events:none}
.hero-photo img{position:relative;width:100%;filter:contrast(1.02);
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
.hero-ghost{position:absolute;top:60px;right:-140px;width:560px;opacity:.5;pointer-events:none}
.hero.inner{padding:170px 0 0}
.hero.inner h1{font-size:clamp(26px,3.8vw,44px)}
@media(max-width:900px){.hero{padding-top:130px}.hero-grid{grid-template-columns:1fr}.hero-photo{max-width:420px}.hero-ghost{display:none}}

/* sections */
section{padding:110px 0}
.sec-head{text-align:center;margin-bottom:64px}
.sec-head h2{font-size:clamp(22px,3vw,32px);margin-top:18px}
.sec-head p{max-width:60ch;margin:18px auto 0;color:var(--dim)}
.prose{max-width:68ch;margin:0 auto}
.prose p{margin-bottom:20px;font-size:15.5px}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--white);font-weight:500}
/* Privacy and Terms are the only long-form prose on the public site, and until now .prose
   styled paragraphs only — so a policy with headings and lists rendered as an undifferentiated
   wall. A privacy policy nobody can scan is a consent nobody really gave. */
.prose h2{font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:38px 0 14px}
.prose h2:first-child{margin-top:0}
.prose ul{margin:0 0 20px 0;padding-left:20px;list-style:none}
.prose ul li{position:relative;font-size:15.5px;margin-bottom:11px;padding-left:4px}
.prose ul li:before{content:"";position:absolute;left:-14px;top:11px;width:5px;height:1px;background:var(--gold)}
.prose .dimtx{font-size:13px;color:var(--dim);margin-bottom:26px}
.prose a{color:var(--gold-bright);border-bottom:1px solid rgba(201,164,92,.35)}
.prose a:hover{border-bottom-color:var(--gold-bright)}

/* method pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pillar{background:var(--panel);padding:44px 34px;border-top:1px solid var(--gold);transition:.4s}
.pillar:hover{background:var(--panel2);transform:translateY(-4px)}
.pillar .k{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:.3em;color:var(--gold)}
.pillar .s{font-family:var(--disp);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin:10px 0 20px}
.pillar p{font-size:14.5px}
@media(max-width:900px){.pillars{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(201,164,92,.14)}
.step{background:var(--bg);padding:40px 30px}
.step .n{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.2em;color:var(--gold)}
.step h3{font-size:13px;margin:14px 0 12px;letter-spacing:.22em}
.step p{font-size:13.5px;color:var(--dim)}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps.five{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.steps,.steps.three,.steps.five{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps,.steps.three,.steps.five{grid-template-columns:1fr}}

/* packages */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.pack{background:var(--panel);padding:46px 36px;display:flex;flex-direction:column;border:1px solid rgba(245,242,236,.07);position:relative;transition:.4s}
.pack:hover{border-color:var(--gold-dim)}
.pack.hot{border:1px solid var(--gold);background:var(--panel2);transform:scale(1.03)}
.pack .tab{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#0A0A0A;font-family:var(--disp);font-size:9.5px;font-weight:700;letter-spacing:.28em;padding:7px 16px;white-space:nowrap}
.pack .name{font-family:var(--disp);font-size:15px;font-weight:700;letter-spacing:.26em;color:var(--white);text-transform:uppercase}
.pack .tag{font-style:italic;color:var(--gold);font-size:14px;margin:10px 0 24px}
.pack .price{font-family:var(--disp);font-size:34px;font-weight:700;color:var(--white);letter-spacing:.04em}
.pack .price small{font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--dim)}
.pack ul{list-style:none;margin:26px 0 30px;flex:1}
.pack li{font-size:13.8px;padding:9px 0 9px 26px;position:relative;border-bottom:1px solid rgba(245,242,236,.05)}
.pack li::before{content:"—";position:absolute;left:0;color:var(--gold)}
.pack li b{color:var(--white);font-weight:500}
.pack .avail{font-family:var(--disp);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-bright);margin:-12px 0 22px}
.pack .note{font-size:12.5px;color:var(--dim);margin:-14px 0 24px}
.pack .btn{text-align:center}
.bg-shift{background:linear-gradient(180deg,var(--bg),#0D0C0A 50%,var(--bg))}
@media(max-width:980px){.packs{grid-template-columns:1fr;max-width:460px;margin:0 auto}.pack.hot{transform:none}}

/* results */
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative}
.r-card{display:block;background:var(--panel);padding:40px 34px;border-left:1px solid var(--gold);transition:.35s}
a.r-card:hover{background:var(--panel2);border-left-color:var(--gold-bright);transform:translateY(-4px);box-shadow:0 8px 30px rgba(201,164,92,.12)}
.r-card .num{font-family:var(--disp);font-size:40px;font-weight:800;color:var(--gold);letter-spacing:.02em}
.r-card .what{font-family:var(--disp);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--white);margin:8px 0 16px}
.r-card p{font-size:13.5px;color:var(--dim)}
.r-card .quote{font-style:italic;color:var(--body);margin-top:14px}
.compliance{font-size:11.5px;color:var(--dim);text-align:center;margin-top:34px}
.ghost-bg{position:absolute;right:-120px;bottom:-60px;width:520px;opacity:.4;pointer-events:none}
@media(max-width:900px){.res{grid-template-columns:1fr}}

/* case studies */
.case{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:var(--panel);padding:48px;border:1px solid rgba(245,242,236,.07);margin-bottom:34px}
.case .head{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--white)}
.case .num{font-family:var(--disp);font-size:44px;font-weight:800;color:var(--gold);letter-spacing:.02em;margin:6px 0 4px}
.case .meta{font-family:var(--disp);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin-bottom:20px}
.case p{font-size:14.5px;margin-bottom:14px}
.case .quote{font-style:italic;color:var(--gold);font-size:15px}
.case .photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.case .photos figure{position:relative}
.case .photos figcaption{font-family:var(--disp);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin-top:10px;text-align:center}
@media(max-width:900px){.case{grid-template-columns:1fr;padding:32px}}

/* about */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:start}
.about-grid img{border:1px solid var(--gold-dim)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}

/* credentials strip */
.creds{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;background:rgba(201,164,92,.14);margin-top:56px}
.cred{background:var(--bg);padding:24px 30px;flex:1;min-width:220px;text-align:center}
.cred .t{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--white)}
.cred .d{font-size:12px;color:var(--dim);margin-top:6px}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid rgba(245,242,236,.08)}
.faq summary{cursor:pointer;list-style:none;padding:22px 34px 22px 0;font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--white);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:18px;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 24px;font-size:14.5px;max-width:64ch}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid rgba(245,242,236,.07);text-align:center}
.cmp th{font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--white)}
.cmp td:first-child,.cmp th:first-child{text-align:left;color:var(--body)}
.cmp .hi{background:rgba(201,164,92,.07);color:var(--white)}
.cmp b{color:var(--gold-bright);font-weight:600}
.cmp-scroll{overflow-x:auto}

/* forms */
.form{max-width:640px;margin:0 auto}
.form label{display:block;font-family:var(--disp);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--white);margin:26px 0 10px}
.form label .opt{color:var(--dim);font-weight:400}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea,.form select{width:100%;background:var(--panel);border:1px solid rgba(245,242,236,.34);color:var(--white);font-family:var(--text);font-size:16px;padding:14px 16px;outline:none;transition:.3s;border-radius:0;-webkit-appearance:none;appearance:none}
/* iOS: <16px triggers auto-zoom on focus and never zooms back. Border raised to ~3:1 for WCAG 1.4.11. */
.form select{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A45C' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--gold)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
section[id]{scroll-margin-top:90px}
footer .f a[href^="mailto"]{text-transform:lowercase}
footer .f{overflow-wrap:anywhere}
@media(max-width:640px){section{padding:64px 0}}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--gold)}
.form textarea{min-height:110px;resize:vertical}
.form .consent{display:flex;gap:12px;align-items:flex-start;margin:30px 0;font-size:13.5px}
.form .consent input{margin-top:5px;accent-color:var(--gold)}
.form .under{font-size:12.5px;color:var(--dim);text-align:center;margin-top:16px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* final band + footer */
.final{text-align:center;padding:130px 0}
.final h2{font-size:clamp(24px,3.4vw,38px);margin:20px 0 18px}
.final p{max-width:52ch;margin:0 auto 40px;color:var(--dim)}
.contact{display:flex;gap:44px;justify-content:center;flex-wrap:wrap;margin-top:56px}
.contact a{font-family:var(--disp);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--body);border-bottom:1px solid transparent;padding-bottom:4px;transition:.3s}
.contact a:hover{color:var(--gold-bright);border-color:var(--gold)}
footer{border-top:1px solid rgba(201,164,92,.14);padding:44px 0;text-align:center}
footer img{height:44px;margin:0 auto 18px;opacity:.9}
footer .f{font-family:var(--disp);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
footer .f em{font-style:normal;color:var(--gold)}
footer .f a:hover{color:var(--gold-bright)}

/* ── WHATSAPP ────────────────────────────────────────────────────────────────────────
   Jorge, 24 Aug: "copy the whatsapp symbol but with alex branding. back, white gold.
   not green."

   So: WhatsApp's glyph, Alex's colours. Gold disc, black glyph — the page background is
   #0A0A0A, so a black or white bubble would either vanish into it or fight the gold that
   every other call-to-action on the site uses. Gold also means the bubble reads as part of
   this site rather than as a third-party widget bolted onto it.

   Markup comes from js/site.js, not from twelve hand-edited footers — the nav and footer on
   this site are duplicated per page, and every time something is duplicated per page it ends
   up different per page. One definition, twelve pages.

   NOTE FOR LATER: WhatsApp's own brand guidelines ask for their green. Recolouring is
   normal practice and low-risk for a link to your own number, but it is Jorge's call and
   it is written down here so nobody rediscovers it as a surprise. */
.wa-bubble{
  position:fixed;z-index:45;
  right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);color:#0A0A0A;
  box-shadow:0 6px 22px rgba(0,0,0,.55),0 0 0 1px rgba(232,188,114,.5);
  transition:transform .25s ease,background .25s ease;
}
.wa-bubble svg{width:30px;height:30px;fill:currentColor;display:block}
.wa-bubble:hover{background:var(--gold-bright);transform:translateY(-2px) scale(1.04)}
.wa-bubble:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media(max-width:600px){.wa-bubble{width:52px;height:52px}.wa-bubble svg{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.wa-bubble{transition:none}.wa-bubble:hover{transform:none}}
@media print{.wa-bubble{display:none}}

/* The footer number: tap it, choose Call or WhatsApp. A bare tel: link does nothing at all
   on a desktop browser, which is where a good share of these visitors are reading. */
.ph-wrap{position:relative;display:inline-block}
.ph-choice{
  display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 10px);
  background:var(--panel);border:1px solid var(--gold-dim);border-radius:10px;
  padding:6px;min-width:190px;z-index:46;box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.ph-choice.open{display:block}
.ph-choice a{
  display:block;padding:9px 12px;border-radius:7px;text-align:left;
  font-family:var(--text);font-size:13px;letter-spacing:0;text-transform:none;color:var(--white);
}
.ph-choice a:hover{background:rgba(201,164,92,.14);color:var(--gold-bright)}
.ph-choice a small{display:block;color:var(--dim);font-size:11px}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}