/* ═══════════════════════════════════════════════════════════════════
   THE DESK — design system for bookeldeco.com, the Eldeco booking
   desk (transactional-only; two live project visit-landings + a
   routing home). Same dark-gold family as eldecoflats.com (warm
   near-black ink, gold #B08D3D + gilt #E6C57E, Fraunces display /
   Inter body / IBM Plex Mono verification tags) — kept deliberately
   LEAN: no registry ledger, no conflict panels, no price tables.
   This site does exactly one job: get a visit booked, then hand off
   to the project hub (eldecoflats.com / eldecoeoe.com) for detail.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#131110;
  --ink-2:#0F0D0B;
  --panel:#1C1815;
  --panel-2:#221D17;
  --light:#F3EBD9;
  --soft:rgba(243,235,217,.74);
  --faint:rgba(243,235,217,.5);
  --line:rgba(230,197,126,.16);
  --line-2:rgba(230,197,126,.32);
  --gold:#B08D3D;
  --gilt:#E6C57E;
  --err:#F0A28C;
  --ok:#9FCB9A;
  --radius:3px;
  --wrap:1120px;
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{overflow-x:hidden;}
body{
  margin:0;color:var(--light);
  background:
    radial-gradient(120% 60% at 50% -8%,rgba(230,197,126,.05),transparent 60%),
    linear-gradient(180deg,#151210 0%,#131110 42%,#100E0C 100%);
  background-color:var(--ink);
  font:400 1rem/1.6 var(--font-body);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--gilt);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:#F3DEA9;text-decoration-thickness:2px;}
*:focus-visible{outline:3px solid var(--gilt);outline-offset:2px;}
::selection{background:var(--gilt);color:#1A1409;}

.skip-link{position:absolute;left:-999px;top:0;background:var(--gilt);color:#1A1409;padding:.6rem 1rem;z-index:200;font:600 .85rem var(--font-body);}
.skip-link:focus{left:.5rem;top:.5rem;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1rem,4vw,2rem);}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.fine{font-size:.78rem;line-height:1.7;color:var(--faint);}
.center{text-align:center;}
.narrow{max-width:64ch;}

h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;letter-spacing:-.01em;line-height:1.12;margin:0 0 .6rem;color:var(--light);}
main h2{font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.1;margin-top:3rem;padding-top:1.3rem;position:relative;}
main h2::before{content:"";position:absolute;top:0;left:0;width:48px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gilt));}
h3{font-size:1.1rem;line-height:1.2;}
p{margin:0 0 1rem;color:var(--soft);}
p strong,li strong{color:var(--light);}
.lede{font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.6;color:var(--soft);max-width:60ch;}
.eyebrow{font:600 .74rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gilt);margin:0 0 .6rem;}

/* ── HEADER ── */
.desk-head{position:relative;z-index:20;background:rgba(19,17,16,.92);border-bottom:1px solid var(--line-2);backdrop-filter:saturate(1.1) blur(4px);}
.desk-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem;flex-wrap:wrap;}
.desk-mark{font-family:var(--font-mono);font-weight:600;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--light);text-decoration:none;white-space:nowrap;}
.desk-mark b{color:var(--gilt);}
.desk-nav{display:flex;gap:1.35rem;flex-wrap:wrap;font:600 .78rem var(--font-mono);letter-spacing:.03em;text-transform:uppercase;}
.desk-nav a{color:var(--soft);text-decoration:none;}
.desk-nav a:hover,.desk-nav a[aria-current="page"]{color:var(--gilt);}
.desk-cta{display:flex;align-items:center;gap:.75rem;}
.desk-cta .tel{font:600 .82rem var(--font-mono);color:var(--light);text-decoration:none;white-space:nowrap;}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--radius);width:38px;height:38px;padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.menu-btn span{display:block;width:18px;height:2px;background:var(--gilt);}
@media (max-width:720px){
  .desk-nav{display:none;width:100%;order:3;flex-direction:column;gap:0;background:#161311;border-top:1px solid var(--line);margin-top:.75rem;}
  .desk-nav a{padding:.7rem 0;border-bottom:1px solid var(--line);}
  body.nav-open .desk-nav{display:flex;}
  .menu-btn{display:flex;}
  .desk-cta .tel span{display:none;}
}

/* ── TICKER ── */
.desk-ticker{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.desk-ticker .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .9rem;padding:.6rem clamp(1rem,4vw,2rem);}
.desk-ticker span{font:600 .7rem/1.5 var(--font-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--soft);white-space:nowrap;}
.desk-ticker .sep{color:var(--line-2);}
@media (max-width:560px){.desk-ticker span{font-size:.64rem;white-space:normal;text-align:center;}}

/* ── HERO (shared shell) ── */
.desk-hero{position:relative;padding:0;overflow:hidden;color:var(--light);border-bottom:1px solid var(--gold);
  background:radial-gradient(90% 120% at 88% 8%,rgba(230,197,126,.10),transparent 58%),linear-gradient(158deg,#1B1613 0%,#151210 52%,#0F0D0B 100%);}
.desk-hero .wrap{position:relative;z-index:2;padding-top:clamp(2.4rem,6vw,4rem);padding-bottom:clamp(2.2rem,5vw,3.6rem);}
.desk-hero__glow{position:absolute;z-index:0;right:-8%;top:4%;width:52%;height:82%;pointer-events:none;background:radial-gradient(closest-side,rgba(230,197,126,.14),transparent 72%);filter:blur(8px);}
.desk-hero h1{font-size:clamp(2.1rem,4.6vw,3.3rem);max-width:15ch;}
.desk-hero h1 em{font-style:italic;color:var(--gilt);}

/* ── PROJECT SELECTOR (home) ── */
.select-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,1.6rem);margin-top:2rem;}
@media (max-width:760px){.select-grid{grid-template-columns:1fr;}}
.pcard{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:6px;padding:clamp(1.3rem,2.6vw,1.9rem);display:flex;flex-direction:column;gap:.85rem;transition:border-color .2s,transform .2s;}
.pcard:hover{border-color:var(--gold);transform:translateY(-2px);}
.pcard__tag{display:inline-flex;align-self:flex-start;font:600 .68rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gilt);border:1px solid var(--line-2);border-radius:2px;padding:.28rem .55rem;}
.pcard__tag--live{color:#1A1409;background:var(--gilt);border-color:var(--gilt);}
.pcard h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0;}
.pcard__loc{font:500 .82rem var(--font-body);color:var(--soft);margin:0;}
.pcard__facts{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem;}
.pcard__facts li{font-size:.86rem;color:var(--soft);display:flex;gap:.5rem;align-items:baseline;}
.pcard__facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;transform:translateY(-2px);}
.pcard__facts b{color:var(--light);}
.pcard__cta{margin-top:auto;padding-top:.6rem;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 .92rem var(--font-body);text-decoration:none;border-radius:2px;padding:.85rem 1.5rem;border:1px solid transparent;cursor:pointer;transition:filter .15s,transform .15s;}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:translateY(1px);}
.btn-gold{background:linear-gradient(180deg,var(--gilt),var(--gold));color:#1A1409;}
.btn-ghost{background:transparent;color:var(--light);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--gilt);color:var(--gilt);}
.btn-block{width:100%;}
.btn-sm{padding:.6rem 1.05rem;font-size:.82rem;}

/* ── TRUST STRIP ── */
.trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2);}
.trust-strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;padding:1.4rem clamp(1rem,4vw,2rem);}
@media (max-width:760px){.trust-strip .wrap{grid-template-columns:repeat(2,1fr);}}
.trust-item{text-align:center;}
.trust-item__n{display:block;font:600 1.15rem var(--font-serif);color:var(--gilt);}
.trust-item__l{display:block;font-size:.72rem;color:var(--faint);margin-top:.15rem;}

/* ── FACT STRIP (visit pages) ── */
.fact-strip{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.1rem 0 0;}
.fact-chip{font:600 .76rem var(--font-mono);letter-spacing:.02em;color:var(--soft);border:1px solid var(--line-2);border-radius:2px;padding:.4rem .7rem;white-space:nowrap;}
.fact-chip--gold{color:#1A1409;background:var(--gilt);border-color:var(--gilt);}
.fact-chip a{color:inherit;}

/* ── SECTIONS ── */
section{padding:clamp(2rem,5vw,3.2rem) 0;}
.section-ink2{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ── LEAD CARD / FORM ── */
.lead-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.8rem,4vw,3rem);align-items:start;}
@media (max-width:860px){.lead-layout{grid-template-columns:1fr;}}
.lead-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--gold);border-radius:6px;padding:clamp(1.4rem,3vw,2rem);position:sticky;top:1rem;}
.lead-card h3{margin-bottom:.35rem;}
.field{margin-bottom:.9rem;}
.field label{display:block;font:600 .74rem var(--font-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--soft);margin-bottom:.35rem;}
.field input,.field select{width:100%;background:var(--ink);border:1px solid var(--line-2);border-radius:2px;color:var(--light);font:500 .95rem var(--font-body);padding:.75rem .85rem;}
.field input::placeholder{color:var(--faint);}
.field input:focus,.field select:focus{border-color:var(--gilt);outline:none;}
.form-err{display:none;color:var(--err);font-size:.8rem;margin:-.3rem 0 .8rem;}
.form-err.show{display:block;}
.hp{position:absolute;left:-9999px;}
.form-note{font-size:.72rem;color:var(--faint);line-height:1.6;margin-top:.7rem;}
.form-thankyou{display:none;text-align:center;padding:.5rem 0;}
.form-thankyou.show{display:block;}
.form-thankyou .check{width:44px;height:44px;border-radius:50%;background:var(--gilt);color:#1A1409;display:flex;align-items:center;justify-content:center;margin:0 auto .7rem;}
.form-thankyou .check svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;}
.form-thankyou h4{margin-bottom:.3rem;}
.wa-continue-btn{margin-top:1rem;}

/* ── FAQ ── */
.faq-list{display:flex;flex-direction:column;gap:.6rem;}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:.15rem .1rem;}
.faq-item summary{cursor:pointer;list-style:none;font:600 .96rem var(--font-body);color:var(--light);padding:.95rem 1.1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font:400 1.3rem var(--font-serif);color:var(--gilt);flex:none;}
.faq-item[open] summary::after{content:"−";}
.faq-a{margin:0 1.1rem 1rem;color:var(--soft);font-size:.92rem;}

/* ── ROUTE-OUT NOTE (deep-link box) ── */
.route-note{background:var(--ink-2);border:1px dashed var(--line-2);border-radius:4px;padding:1.1rem 1.3rem;margin:1.4rem 0;font-size:.9rem;color:var(--soft);}
.route-note a{font-weight:600;}

/* ── FOOTER ── */
.desk-foot{border-top:1px solid var(--line-2);background:var(--ink-2);padding:2.2rem 0 1.2rem;}
.foot-links{display:flex;flex-wrap:wrap;gap:1.2rem;font:600 .78rem var(--font-mono);text-transform:uppercase;letter-spacing:.03em;margin-bottom:1.4rem;}
.foot-links a{color:var(--soft);text-decoration:none;}
.foot-links a:hover{color:var(--gilt);}
.site-disclosure{background:var(--ink-2);}
.disclosure p{font-size:.76rem;line-height:1.7;color:var(--faint);margin:0 0 .8rem;}
.disclosure strong{color:var(--soft);}
.print-stamp{font-family:var(--font-mono);font-size:.68rem;}

/* ── WA FLOAT + STICKY MOBILE BAR ── */
.wa-float{position:fixed;right:1.1rem;bottom:1.1rem;width:54px;height:54px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4);z-index:50;}
.wa-float svg{width:27px;height:27px;fill:#fff;}
.sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:49;display:none;gap:.6rem;padding:.6rem .8rem;background:rgba(19,17,16,.96);border-top:1px solid var(--line-2);backdrop-filter:blur(6px);}
.sticky-bar .btn{flex:1;}
.sticky-bar__call{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--line-2);border-radius:2px;flex:none;color:var(--gilt);}
.sticky-bar__call svg{width:20px;height:20px;fill:currentColor;}
@media (max-width:720px){
  .sticky-bar{display:flex;}
  .wa-float{display:none;}
  body{padding-bottom:72px;}
}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;transition-delay:calc(var(--i,0)*40ms);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none;}}