/* Life Point — landing page
   Ported from design_handoff_lifepoint_landing / "Life Point Landing.dc.html".
   Tokens are the handoff's; the fabricated client strip, stats band and
   testimonial are deliberately absent (see NOTES.md). */

:root{
  --ink:#142D3E;
  --acc:#C4F238;
  --acc-hover:#B3E026;
  --page:#F6F6F3;
  --surface:#FFFFFF;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:'Manrope','Noto Sans Georgian',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--ink);text-decoration:none}
a:hover{color:#51660F}

h1,h2{margin:0;font-weight:800;letter-spacing:-0.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.acc{color:var(--acc)}

.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,72px);position:relative}

.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;
  font-size:13px;font-weight:700;
}
.skip:focus{left:0;color:#fff}

/* ── the bullseye mark ───────────────────────────────────────────────── */
.mark{
  display:inline-grid;place-items:center;flex:none;
  width:var(--m-size);height:var(--m-size);
  border:var(--m-ring) solid var(--m-color);
  border-radius:50%;
}
.mark::after{
  content:'';
  width:var(--m-dot);height:var(--m-dot);
  border-radius:50%;background:var(--acc);
}
.mark-ink-sm  {--m-size:20px; --m-ring:4px;   --m-dot:6px;  --m-color:var(--ink)}
.mark-ink-lg  {--m-size:44px; --m-ring:7px;   --m-dot:13px; --m-color:var(--ink)}
.mark-white-sm{--m-size:20px; --m-ring:4px;   --m-dot:6px;  --m-color:#FFFFFF}
.mark-white-xs{--m-size:18px; --m-ring:3.5px; --m-dot:5px;  --m-color:#FFFFFF}
.mark-white-lg{--m-size:150px;--m-ring:23px;  --m-dot:44px; --m-color:#FFFFFF}

/* ── buttons & links ─────────────────────────────────────────────────── */
.btn{
  display:inline-block;border-radius:999px;font-weight:800;
  font-size:15px;padding:15px 28px;line-height:1.2;
  transition:background-color .15s ease,border-color .15s ease;
}
.btn-lime{background:var(--acc);color:var(--ink)}
.btn-lime:hover{background:var(--acc-hover);color:var(--ink)}
.btn-sm{font-size:13px;padding:11px 20px}
.btn-md{font-size:14px;padding:13px 24px;flex:none}
.btn-lg{font-size:15px;padding:16px 30px}
.btn-outline{border:1.5px solid rgba(20,45,62,0.35);color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);color:var(--ink)}

.link-underline{
  font-size:15px;font-weight:800;color:var(--ink);padding:14px 4px;
  text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:2px;text-decoration-color:var(--acc);
  transition:text-decoration-color .15s ease;
}
.link-underline:hover{color:var(--ink);text-decoration-color:var(--ink)}

.dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{
  background:var(--surface);
  border-bottom:1px solid rgba(20,45,62,0.12);
  position:relative;overflow:hidden;
}
.ghost-ring{
  position:absolute;right:-150px;top:-130px;
  width:480px;height:480px;border:62px solid rgba(20,45,62,0.03);
  border-radius:50%;display:grid;place-items:center;pointer-events:none;
}
.ghost-ring::after{
  content:'';width:120px;height:120px;border-radius:50%;
  background:rgba(20,45,62,0.03);
}

.nav{display:flex;align-items:center;gap:clamp(16px,3vw,32px);padding:22px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand:hover{color:var(--ink)}
.brand-name{font-size:14px;font-weight:800;letter-spacing:0.14em}
.nav-link{font-size:13px;font-weight:700;color:rgba(20,45,62,0.7)}
.nav-link:hover{color:var(--ink)}

.hero-grid{
  display:flex;gap:clamp(32px,5vw,64px);align-items:center;flex-wrap:wrap;
  padding:clamp(40px,6vw,72px) 0 clamp(44px,6vw,80px);
}
.hero-copy{flex:1.2 1 400px;min-width:0}

.eyebrow-pill{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid rgba(20,45,62,0.22);border-radius:999px;padding:8px 16px;
  font-size:11.5px;font-weight:800;letter-spacing:0.1em;color:rgba(20,45,62,0.65);
}
/* The handoff specifies a max of 80px. That is safe for Latin but not for
   Georgian: `უსაფრთხოების` renders 8.33x the font size, so at 80px it is 666px
   wide — while .wrap caps at 1200px, which caps this column at ~527px. The
   word overflowed its column by 139px, ate the 64px gutter and overlapped the
   hero panel by 52px at 1920px. Invisible at 1280px, worse the wider the
   screen. 60px is the largest cap the narrowest column can hold. */
.hero-copy h1{
  margin:clamp(16px,2.5vw,24px) 0 0;
  font-size:clamp(38px,4.8vw,60px);line-height:1.05;
}
.lede{
  margin:clamp(18px,2.5vw,26px) 0 0;max-width:52ch;
  font-size:clamp(15px,1.6vw,17px);font-weight:500;line-height:1.7;
  color:rgba(20,45,62,0.75);
}
.cta-row{
  margin-top:clamp(26px,3.5vw,34px);
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.chips{
  margin-top:clamp(24px,3vw,32px);
  display:flex;gap:10px 22px;flex-wrap:wrap;
  font-size:12px;font-weight:700;color:rgba(20,45,62,0.6);
}
.chips li{display:flex;align-items:center;gap:8px}

.hero-art{flex:1 1 360px;min-width:0;position:relative;padding:26px 12px 34px 0}
.dashed-ring{
  position:absolute;right:-30px;bottom:-6px;width:190px;height:190px;
  border:2px dashed rgba(20,45,62,0.22);border-radius:50%;pointer-events:none;
}
.art-panel{
  position:relative;aspect-ratio:4/5;max-width:430px;margin-left:auto;
  border-radius:16px;background:var(--ink);
  display:grid;place-items:center;overflow:hidden;
  box-shadow:0 24px 60px rgba(20,45,62,0.2);
}
.art-ring{position:absolute;border-radius:50%}
.art-ring-dashed{width:340px;height:340px;border:1px dashed rgba(255,255,255,0.22)}
.art-ring-solid{width:250px;height:250px;border:1px solid rgba(255,255,255,0.12)}
.art-caption{
  position:absolute;top:20px;left:20px;
  font-size:10px;font-weight:800;letter-spacing:0.14em;color:rgba(255,255,255,0.55);
}

/* ── shared section furniture ────────────────────────────────────────── */
.eyebrow{font-size:12px;font-weight:800;letter-spacing:0.12em;color:rgba(20,45,62,0.55)}
.services h2,.approach h2{margin:14px 0 0;font-size:clamp(26px,3.4vw,42px)}
.h2-tight{line-height:1.2}
.section-lede{margin:14px 0 0;font-size:16px;font-weight:500;color:rgba(20,45,62,0.7)}
.services .section-lede{max-width:60ch;line-height:1.65}
.approach .section-lede{margin-top:16px;max-width:56ch;line-height:1.7}

/* ── services ────────────────────────────────────────────────────────── */
.services{background:var(--page)}
.services .wrap{padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,88px)}

.featured{
  margin-top:clamp(28px,4vw,44px);
  background:var(--ink);color:#FFFFFF;border-radius:14px;
  padding:clamp(26px,4vw,44px);
  display:flex;gap:clamp(24px,4vw,48px);align-items:center;flex-wrap:wrap;
  box-shadow:0 16px 40px rgba(20,45,62,0.16);
}
.featured-copy{flex:1 1 340px;min-width:0}
.featured-title{font-size:clamp(19px,2.2vw,24px);font-weight:800;line-height:1.3}
.featured-sub{
  margin-top:10px;font-size:14.5px;font-weight:500;line-height:1.65;
  color:rgba(255,255,255,0.75);
}

.index{
  margin-top:26px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:0 clamp(28px,4vw,64px);
}
.index li{border-top:1px solid rgba(20,45,62,0.14);padding:18px 0 20px}
.index-title{display:block;font-size:16px;font-weight:800;line-height:1.35}
.index-desc{
  display:block;margin-top:6px;font-size:13.5px;font-weight:500;line-height:1.6;
  color:rgba(20,45,62,0.68);
}

/* ── approach ────────────────────────────────────────────────────────── */
.approach{
  background:var(--surface);
  border-top:1px solid rgba(20,45,62,0.12);
  border-bottom:1px solid rgba(20,45,62,0.12);
}
.approach-grid{
  padding-top:clamp(48px,7vw,88px);padding-bottom:clamp(48px,7vw,88px);
  display:flex;gap:clamp(32px,5vw,72px);align-items:center;flex-wrap:wrap;
}
.approach-copy{flex:1.1 1 380px;min-width:0}
.approach-art{flex:1 1 320px;min-width:0}

.bullets{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.bullets li{display:flex;gap:12px;align-items:flex-start;font-size:15px;font-weight:600}
.bullet-dot{
  flex:none;margin-top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--acc);outline:2px solid var(--ink);outline-offset:2px;
}

.process{
  background:var(--ink);color:#FFFFFF;border-radius:14px;
  padding:clamp(24px,3vw,36px);
  box-shadow:0 20px 48px rgba(20,45,62,0.18);
}
.process-label{font-size:10.5px;font-weight:800;letter-spacing:0.12em;color:rgba(255,255,255,0.55)}
.process-steps{margin-top:6px;display:flex;flex-direction:column}
.process-steps li{
  display:flex;gap:18px;align-items:flex-start;padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,0.14);
}
.process-steps li:last-child{border-bottom:0}
.step-num{font-size:22px;font-weight:800;color:var(--acc);letter-spacing:-0.02em;flex:none}
.step-title{display:block;font-size:16px;font-weight:800}
.step-sub{
  display:block;margin-top:4px;font-size:13px;font-weight:500;line-height:1.55;
  color:rgba(255,255,255,0.7);
}
.process-foot{
  margin-top:6px;border-top:1px solid rgba(255,255,255,0.14);padding-top:16px;
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:800;letter-spacing:0.1em;color:rgba(255,255,255,0.7);
}

/* ── final cta ───────────────────────────────────────────────────────── */
.final{background:var(--surface);border-top:1px solid rgba(20,45,62,0.12)}
.final .wrap{
  padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px);
  text-align:center;
}
.final-h2{
  margin:22px auto 0;font-size:clamp(26px,4vw,48px);
  max-width:24ch;line-height:1.15;
}
.cta-center{margin-top:28px;justify-content:center}
.final-note{margin-top:18px;font-size:13px;font-weight:600;color:rgba(20,45,62,0.55)}

/* ── footer ──────────────────────────────────────────────────────────── */
.footer{background:var(--ink);color:#FFFFFF}
.footer .wrap{padding-top:clamp(40px,5vw,64px);padding-bottom:28px}
.footer a{color:rgba(255,255,255,0.85)}
.footer a:hover{color:#FFFFFF}

.footer-cols{display:flex;gap:32px 64px;flex-wrap:wrap;align-items:flex-start}
.footer-brand{flex:1.4 1 260px;min-width:0}
.footer-tagline{margin-top:14px;font-size:15px;font-weight:600;color:rgba(255,255,255,0.85)}
.footer-col{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:13px;font-weight:600}
.footer-label{font-size:10.5px;font-weight:800;letter-spacing:0.12em;color:rgba(255,255,255,0.5)}
.footer-bar{
  margin-top:36px;border-top:1px solid rgba(255,255,255,0.16);padding-top:18px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:11px;font-weight:600;color:rgba(255,255,255,0.55);
}
.footer-bar-tag{letter-spacing:0.08em}

/* ── narrow screens ──────────────────────────────────────────────────── */

/* Both two-column sections used to stack only once their flex-basis stopped
   fitting — the hero at ~890px, the approach at ~820px. That left a band
   roughly 890–1020px wide where the columns were technically not colliding
   but were badly squeezed: at 896px the headline sat 80px from the panel,
   the longest approach bullet sat 45px from the process card, and the hero
   CTA row wrapped onto two lines. Stacking early removes the whole band.

   1100px specifically: the hero CTA row needs 465px (281 button + 170 link
   + 14 gap) on one line, and the copy column only reaches that above ~1035px;
   the approach section needs more again before its gap stops being the only
   thing between a full-width bullet and the process card. Measured, not
   guessed — the widths either side of this are verified. */
@media (max-width:1100px){
  .hero-copy,.hero-art{flex:1 1 100%}
  .approach-copy,.approach-art{flex:1 1 100%}

  /* keep the panel and its dashed ring together once the column is full-width */
  .hero-art{max-width:442px;margin-inline:auto;padding:14px 12px 28px 0}
  .approach-grid{gap:clamp(32px,5vw,48px)}
}

@media (max-width:480px){
  .hero-art{max-width:none;padding:8px 12px 24px 0}
  .art-panel{margin-inline:auto}
  .dashed-ring{right:0}
  .nav{gap:14px;row-gap:12px}
  .ghost-ring{right:-220px;top:-180px}
}