/* Livi London — livi.agency */
:root{
  --green:#65B895; --green-dk:#2F8A63; --green-lt:#EAF6F0;
  --blue:#2F6A9E; --blue-dk:#1F4A70; --ink:#1E2A35; --muted:#5B6B78;
  --line:#E3E9EE; --bg:#FFFFFF; --bg2:#F6F9FB; --wa:#25D366;
  --radius:14px; --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--bg)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--blue-dk);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:700}
h2{font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:650}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;min-height:72px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand:hover{text-decoration:none}
.brand img{display:block;height:60px;width:auto}
.wordmark{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600;font-size:1.35rem;color:var(--blue);letter-spacing:.01em}
.nav{display:flex;gap:6px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:8px;color:var(--ink);font-weight:500}
.nav a.on,.nav a:hover{background:var(--green-lt);color:var(--blue-dk);text-decoration:none}
.langs{display:flex;gap:4px}
.langs a{padding:5px 8px;border-radius:999px;font-size:.85rem;font-weight:600;color:var(--muted);border:1px solid transparent}
.langs a.on{color:var(--blue-dk);border-color:var(--green);background:#fff}
.langs a:hover{text-decoration:none;border-color:var(--line)}
.mtoggle,.burger{display:none}

/* hero */
.hero{background:linear-gradient(180deg,var(--green-lt) 0%,#fff 100%);padding:56px 0 40px;border-bottom:1px solid var(--line)}
.hero h1{max-width:18ch}
.lead{font-size:1.15rem;color:var(--muted);max-width:62ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;background:var(--green-dk);color:#fff;font-weight:600;padding:13px 22px;border-radius:999px;border:0;cursor:pointer;font-size:1rem;line-height:1.2;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn:hover{background:#26714F;text-decoration:none}
.btn.alt{background:#fff;color:var(--blue-dk);border:2px solid var(--blue)}
.btn.alt:hover{background:var(--bg2)}

/* sections */
section.wrap{padding:36px 16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.one{display:grid;grid-template-columns:1fr}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 18px;box-shadow:0 2px 12px rgba(31,74,112,.05)}
.card h2{position:relative;padding-left:16px}
.card h2:before{content:"";position:absolute;left:0;top:.2em;width:5px;height:1em;border-radius:3px;background:var(--green)}
.steps,.ticks{margin:0;padding:0 0 0 1.4em}
.steps li,.ticks li{margin:0 0 .6em}
.ticks{list-style:none;padding:0}
.ticks li{position:relative;padding-left:1.7em}
.ticks li:before{content:"";position:absolute;left:0;top:.45em;width:.85em;height:.85em;border-radius:50%;background:var(--green)}
.contactline{border-top:1px solid var(--line);color:var(--muted)}
.contactgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:18px 0 6px}
.contactgrid strong{color:var(--blue-dk)}
.tel{color:var(--muted)}
.prose{max-width:760px}
.prose h2{margin-top:1.6em;font-size:1.2rem}
.muted{color:var(--muted)}

/* forms */
.formwrap{max-width:640px;margin:0 auto;padding-bottom:64px}
.form{display:grid;gap:14px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.form label{display:grid;gap:6px;font-weight:600;font-size:.95rem;color:var(--blue-dk)}
.form input,.form select,.form textarea{font:inherit;padding:12px 14px;border:1px solid #C9D4DC;border-radius:10px;background:#fff;color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--green);border-color:var(--green)}
.form .chk{grid-template-columns:auto 1fr;align-items:start;font-weight:400;color:var(--ink);font-size:.9rem}
.form .chk input{width:auto;margin-top:4px}
.form .btn{justify-self:start;margin-top:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.alt-contact{color:var(--muted);margin-top:14px}
.wa{color:#1a8f47;font-weight:600}
.notice{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-weight:600}
.notice.ok{background:var(--green-lt);color:#1f5e42;border:1px solid var(--green)}
.notice.err{background:#FDECEC;color:#8a1c1c;border:1px solid #f1b3b3}

/* footer */
.foot{background:var(--blue-dk);color:#D9E4EE;padding:36px 0 22px;margin-top:24px;font-size:.93rem}
.foot a{color:#fff}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot .langs.small a{color:#B8CAD9;padding:2px 6px}
.copy{margin:22px 0 0;color:#9FB4C6;font-size:.85rem}

/* mobile */
@media (max-width:820px){
  .two,.fcols,.contactgrid{grid-template-columns:1fr}
  .burger{display:block;margin-left:auto;width:44px;height:44px;position:relative;cursor:pointer}
  .burger span,.burger span:before,.burger span:after{content:"";position:absolute;left:10px;width:24px;height:2px;background:var(--blue-dk);border-radius:2px;transition:.2s}
  .burger span{top:21px}.burger span:before{top:-7px;left:0}.burger span:after{top:7px;left:0}
  .nav{display:none;width:100%;flex-direction:column;gap:2px;padding:6px 0 10px;margin:0}
  .nav a{padding:12px 10px;font-size:1.05rem}
  .langs{width:100%;justify-content:flex-start;padding-bottom:10px;display:none}
  .mtoggle:checked ~ .nav,.mtoggle:checked ~ .langs{display:flex}
  .hero{padding:36px 0 30px}
  .wordmark{font-size:1.2rem}
  .btn{width:100%;text-align:center;padding:15px 20px}
  .ctas{flex-direction:column}
  section.wrap{padding:26px 16px}
  .card{padding:20px 18px 12px}
}