/* ANEX guest site — Bootstrap 5 base + ANEX Properties brand (2026 book).
   Architectural, warm and quiet: Ink + Alabaster surfaces, Verde accent,
   Space Grotesk headings, Instrument Sans body. Tokens live in brand.css. */
:root{
  /* Legacy aliases kept so existing markup keeps resolving, now brand-mapped */
  --ink-900:var(--anex-ink);
  --ink-700:#3D372C;
  --ink-600:var(--anex-muted);
  --ink-400:var(--anex-taupe);
  --line:var(--anex-stone-line);
  --bg:var(--anex-alabaster);

  --bs-body-font-family:var(--font-body);
  --bs-body-bg:var(--anex-alabaster);
  --bs-body-color:var(--anex-ink);
  --bs-secondary-color:var(--anex-muted);
  --bs-primary:#24473C;
  --bs-primary-rgb:36,71,60;
  --bs-border-radius:.5rem;
  --bs-border-radius-lg:.625rem;
  --bs-border-radius-sm:.375rem;
  --bs-border-color:var(--anex-stone-line);
  --bs-link-color:var(--anex-verde);
  --bs-link-hover-color:var(--anex-ink);
}
/* Sticky footer: body is a flex column filling the viewport, main grows to
   push the footer to the very bottom. padding-top clears the fixed nav and
   matches its exact height so the hero sits flush under the header. */
body{background:var(--bs-body-bg);color:var(--anex-ink);-webkit-font-smoothing:antialiased;
  padding-top:56px;display:flex;flex-direction:column;min-height:100vh}
h1,h2,h3,.h1,.h2,.h3{letter-spacing:-.02em}
main{flex:1 0 auto}
footer.site-footer{flex-shrink:0}

/* ===== navbar — locked to exactly 56px so it matches body padding-top and
   the content (hero / split image) sits flush under it, no Alabaster gap ===== */
.guest-nav{background:var(--anex-ink);height:56px;padding:0 20px;display:flex;align-items:center}
.guest-nav>div{width:100%}
.guest-nav-fixed{position:fixed;top:0;left:0;right:0;z-index:1030;box-shadow:0 2px 12px rgba(20,17,13,.15)}
.brand-link{display:block;line-height:0}
.brand-logo{height:30px;width:auto;display:block;margin:0}
.guest-nav .nav-tag{color:var(--anex-taupe);font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600}

/* ===== hero ===== (Verde full-bleed, as in the brand book's essence slide) */
.hero{background:var(--anex-verde);color:var(--anex-alabaster);padding:76px 0 110px}
.hero .eyebrow{color:var(--anex-verde-soft);text-transform:uppercase;letter-spacing:3px;font-size:12px;font-weight:600;margin-bottom:16px}
.hero h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;font-size:clamp(30px,4.5vw,48px);line-height:1.06;margin-bottom:18px}
.hero p{color:rgba(250,247,241,.78);font-size:16.5px;max-width:520px;line-height:1.7}

/* ===== floating login card ===== */
.login-card{background:var(--anex-white);border-radius:var(--anex-radius-card);box-shadow:var(--anex-shadow-card);padding:34px;margin-top:-72px;position:relative;z-index:2}
.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:12px;font-weight:600;margin-bottom:14px}
.form-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--anex-muted);font-weight:600}
.form-control{border-radius:var(--anex-radius-btn);padding:.7rem .9rem;border-color:var(--anex-stone-line)}
.form-control:focus{border-color:var(--anex-verde);box-shadow:0 0 0 3px rgba(36,71,60,.14)}

/* ===== feature / section cards ===== */
.feature-card{background:var(--anex-white);border:1px solid var(--anex-stone-line);border-radius:var(--anex-radius-card);padding:28px;height:100%;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;box-shadow:var(--anex-shadow-card);transition:transform .15s,box-shadow .15s}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 24px 50px -26px rgba(20,17,13,.32);color:inherit}
.feature-card.is-disabled{opacity:.55;pointer-events:none}
.feature-icon{width:46px;height:46px;border-radius:10px;background:rgba(36,71,60,.10);color:var(--anex-verde);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feature-card h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;font-size:21px;margin:0}
.feature-card p{color:var(--anex-muted);font-size:14px;line-height:1.6;margin:0}
.feature-top{display:flex;justify-content:space-between;align-items:flex-start}

.pill{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:var(--anex-radius-pill);white-space:nowrap}
.pill-ok{background:#E3F0EA;color:#1F5F45}
.pill-warn{background:var(--anex-stone);color:var(--anex-muted)}
.pill-soon{background:var(--anex-stone);color:var(--anex-taupe)}

/* ===== buttons (legacy aliases → Ink primary; see brand.css for .btn-ink/.btn-verde) ===== */
.btn-bronze,.btn-terracotta{--bs-btn-bg:var(--anex-ink);--bs-btn-border-color:var(--anex-ink);--bs-btn-color:var(--anex-alabaster);--bs-btn-hover-bg:#000;--bs-btn-hover-border-color:#000;--bs-btn-hover-color:var(--anex-alabaster)}

/* ===== invoice ===== */
.invoice-card{border-radius:var(--anex-radius-card);overflow:hidden;box-shadow:var(--anex-shadow-card);border:1px solid var(--anex-stone-line)}
.invoice-head{background:var(--anex-ink);color:var(--anex-alabaster);padding:30px 34px}
.invoice-head .no{color:rgba(250,247,241,.6);font-size:12px;text-align:right}
.invoice-foot{background:var(--anex-ink);color:rgba(250,247,241,.6);padding:22px 34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.invoice-foot-logo{height:52px;width:auto;flex-shrink:0}
.invoice-foot-text{font-size:11px;line-height:1.7}
@media(max-width:575px){.invoice-foot{flex-direction:column;align-items:flex-start;gap:12px}}
.stay-box{background:var(--anex-alabaster);border:1px solid var(--anex-stone-line);border-radius:8px;padding:16px 20px;margin-bottom:26px}
.stay-box b{display:block;font-size:15px;margin-bottom:2px}
.stay-box span{font-size:13px;color:var(--anex-muted)}
.small-caps{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--anex-taupe);margin-bottom:8px;font-weight:600}
.grand-total{background:var(--anex-ink);color:var(--anex-alabaster);border-radius:8px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.grand-total span:first-child{text-transform:uppercase;letter-spacing:1px;font-size:12.5px;color:rgba(250,247,241,.72)}
.grand-total span:last-child{color:var(--anex-alabaster);font-weight:600;font-size:19px;font-family:var(--font-display)}

/* ===== match list (choose page) ===== */
.match-item{display:block;width:100%;text-align:left;background:var(--anex-white);border:1px solid var(--anex-stone-line);border-radius:8px;padding:18px 22px;margin-bottom:12px;transition:box-shadow .15s,border-color .15s}
.match-item:hover{border-color:var(--anex-verde);box-shadow:0 8px 20px -10px rgba(20,17,13,.18)}

footer.site-footer{background:var(--anex-ink);color:rgba(250,247,241,.55);padding:48px 0;font-size:13.5px}
footer.site-footer a{color:var(--anex-verde-soft);text-decoration:none}
footer.site-footer a:hover{color:var(--anex-alabaster)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:0 56px}
.footer-info{text-align:right}
footer.site-footer .footer-logo-lg{height:104px;width:auto;display:block}
footer.site-footer .footer-text{line-height:1.8}
footer.site-footer .footer-text b{color:var(--anex-alabaster);font-weight:600}
footer.site-footer .footer-copy{font-size:12px;color:rgba(250,247,241,.4)}
@media(max-width:767px){
  .footer-inner{flex-direction:column;text-align:center;padding:0 24px;gap:24px}
  .footer-info{text-align:center}
}

@media(max-width:576px){
  .hero{padding:56px 0 90px}
  .login-card{margin-top:-56px;padding:24px}
}

/* ===== split-screen login ===== */
.split-shell{display:flex;flex-wrap:wrap;min-height:82vh}
.split-left{flex:1 1 420px;display:flex;align-items:center;justify-content:center;padding:48px 32px}
.split-left-inner{width:100%;max-width:400px}
.login-box{background:var(--anex-white);border:1px solid var(--anex-stone-line);border-radius:var(--anex-radius-card);padding:38px 34px;box-shadow:var(--anex-shadow-card)}
.split-right{flex:1 1 420px;position:relative;overflow:hidden;min-height:440px}
/* Ken Burns: slow, continuous zoom + pan so the photo feels alive. */
.split-right-img{position:absolute;inset:0;background-image:url('/static/bakcground_2.jpg');
  background-size:cover;background-position:center;
  animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{
  0%{transform:scale(1.06) translate(0,0)}
  100%{transform:scale(1.18) translate(-2.5%,-2%)}
}
/* Radial vignette — darker toward the edges, clean in the centre. */
.split-right-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 68% 68% at 50% 45%,transparent 12%,rgba(15,13,9,.55) 55%,rgba(10,8,5,.9) 100%)}

@media(max-width:991px){
  .split-shell{min-height:auto}
  .split-right{min-height:260px;order:-1}
}