/* koevine.com. Paper, charcoal, and the steel blue from the water in the O. Montserrat throughout. Calm by design. */
:root { color-scheme:light;
  --paper:#F3F5F1; --white:#FFFFFF; --mist:#E4EAED; --charcoal:#2B2F33; --ink:#23272B; --muted:#5E6A73; --line:#D6DDE0;
  --steel:#4A6B82; --lake:#22607F; --steel-soft:#B9CBD6; --offwhite:#F3F5F1; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 18px/1.65 Montserrat,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--lake); text-underline-offset:3px; text-decoration-thickness:1px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid var(--steel); outline-offset:3px; }
.skip { position:absolute; left:-999px; } .skip:focus { left:16px; top:8px; z-index:10; background:var(--white); padding:6px 10px; }
.wrap { max-width:1160px; margin:0 auto; padding-inline:24px; }
@media (min-width:861px) { .wrap { padding-inline:40px; } }
h1,h2,h3 { font-weight:600; letter-spacing:-.012em; line-height:1.15; margin:0; color:var(--ink); }
h1 { font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.08; }
h2 { font-size:clamp(1.6rem,2.8vw,2.3rem); }
h3 { font-size:1.15rem; line-height:1.3; }
p { margin:0; max-width:60ch; }
.muted { color:var(--muted); }
.lead { font-size:clamp(1.1rem,1.6vw,1.3rem); color:var(--muted); line-height:1.5; }
.kicker { display:inline-block; font-size:.95rem; font-weight:600; color:var(--steel); margin-bottom:14px; }
.btn { display:inline-flex; align-items:center; gap:8px; background:var(--steel); color:#fff; font-weight:600; font-size:1rem; text-decoration:none; padding:14px 24px; border-radius:8px; border:0; cursor:pointer; line-height:1.2; }
.btn:hover { background:var(--lake); }
.btn.ghost { background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn.ghost:hover { border-color:var(--steel); color:var(--lake); background:transparent; }
.btn.sm { padding:10px 16px; font-size:.9rem; }
.link { font-weight:600; color:var(--lake); text-decoration:none; }
.link:hover { text-decoration:underline; }

/* top bar */
header.top { background:var(--charcoal); color:var(--offwhite); position:sticky; top:0; z-index:5; }
.hdr { display:flex; align-items:center; gap:28px; min-height:76px; }
.brand { line-height:0; margin-right:auto; } .brand img { width:200px; height:auto; }
header nav ul { display:flex; gap:26px; list-style:none; margin:0; padding:0; }
header nav a { color:var(--offwhite); text-decoration:none; font-size:.95rem; font-weight:500; opacity:.85; padding:6px 0; border-bottom:2px solid transparent; }
header nav a:hover { opacity:1; }
header nav a[aria-current] { opacity:1; border-color:var(--steel-soft); }
.call { color:var(--offwhite); text-decoration:none; font-weight:600; font-size:.95rem; white-space:nowrap; }
@media (max-width:900px) { .call { display:none; } }
@media (max-width:760px) { .hdr { flex-wrap:wrap; gap:10px 20px; padding-block:14px; } .brand { margin-right:auto; } .brand img { width:160px; }
  .hdr .btn.sm { padding:8px 12px; font-size:.82rem; } .brand img { width:140px; }
  header nav { order:3; width:100%; overflow-x:auto; } header nav ul { gap:20px; white-space:nowrap; } }

/* hero: words left, the mark right, water line underneath */
.hero { padding:88px 0 0; }
.hero .grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center; }
.hero h1 { max-width:20ch; }
.hero .lead { margin-top:24px; max-width:58ch; }
.hero .cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:34px; }
.hero .art { position:relative; aspect-ratio:1; width:100%; max-width:460px; justify-self:end; }
.hero .art svg { position:absolute; inset:0; width:100%; height:100%; }
.hero .art img { position:absolute; left:50%; top:50%; width:58%; transform:translate(-50%,-56%); }
.water { margin-top:64px; height:120px; display:block; width:100%; }
@media (max-width:900px) { .hero { padding-top:56px; } .hero .grid { grid-template-columns:1fr; gap:36px; } .hero .art { max-width:300px; margin:0 auto; } .water { margin-top:40px; height:80px; } }

/* three lines */
.lines { background:var(--white); padding:88px 0; }
.lines header { margin-bottom:44px; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.card { background:var(--paper); border-radius:14px; padding:30px 28px 28px; display:flex; flex-direction:column; gap:14px; border-top:4px solid var(--steel); color:inherit; text-decoration:none; }
.card:hover { background:var(--mist); }
.card svg { width:36px; height:36px; stroke:var(--steel); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.card h3 { font-size:1.3rem; }
.card p { color:var(--muted); font-size:1rem; flex:1; }
.card .link { font-size:.95rem; }
@media (max-width:900px) { .cards { grid-template-columns:1fr; } }

/* process band */
.band { background:var(--charcoal); color:var(--offwhite); padding:88px 0; }
.band h2 { color:var(--offwhite); }
.band .kicker { color:var(--steel-soft); }
.band p { color:#C6CED3; }
.steps { list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; counter-reset:s; }
.steps li { counter-increment:s; border-top:1px solid #4A5056; padding-top:18px; }
.steps li::before { content:"0" counter(s); display:block; color:var(--steel-soft); font-weight:600; font-size:.9rem; margin-bottom:10px; letter-spacing:.06em; }
.steps b { display:block; color:var(--offwhite); font-weight:600; margin-bottom:6px; }
.steps span { display:block; color:#B4BEC5; font-size:.95rem; line-height:1.5; }
@media (max-width:900px) { .steps { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .steps { grid-template-columns:1fr; } }

/* why: two quiet columns */
.why { padding:88px 0; }
.why .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 64px; margin-top:44px; }
.why h3 { margin-bottom:8px; }
.why p { color:var(--muted); font-size:1rem; }
@media (max-width:760px) { .why .grid { grid-template-columns:1fr; gap:28px; } }

/* contact */
.contact { background:var(--white); padding:88px 0; }
.contact .grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; align-items:start; margin-top:40px; }
.contact .side p { margin-bottom:18px; color:var(--muted); font-size:1rem; }
.contact .side a.big { display:block; font-size:1.25rem; font-weight:600; color:var(--ink); text-decoration:none; margin-bottom:6px; }
.contact .side a.big:hover { color:var(--lake); }
.next { list-style:none; margin:32px 0 0; padding:0; counter-reset:n; }
.next li { counter-increment:n; display:grid; grid-template-columns:30px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.95rem; color:var(--muted); }
.next li::before { content:counter(n); width:26px; height:26px; border-radius:50%; background:var(--mist); color:var(--steel); font-weight:600; font-size:.85rem; display:grid; place-items:center; }
.next b { color:var(--ink); font-weight:600; display:block; }
form.quote { background:var(--paper); border-radius:14px; padding:30px 28px; }
form.quote fieldset { border:0; padding:0; margin:0 0 22px; }
form.quote legend, form.quote label.lbl { display:block; font-weight:600; font-size:.92rem; margin-bottom:8px; color:var(--ink); }
form.quote legend i, form.quote label i { font-weight:400; color:var(--muted); font-style:normal; }
.choices { display:flex; flex-wrap:wrap; gap:8px; }
.choices label { position:relative; }
.choices input { position:absolute; opacity:0; inset:0; }
.choices span { display:inline-block; padding:9px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--white); font-size:.92rem; cursor:pointer; }
.choices input:checked + span { background:var(--steel); border-color:var(--steel); color:#fff; }
.choices input:focus-visible + span { outline:3px solid var(--steel); outline-offset:2px; }
form.quote input[type=text], form.quote input[type=tel], form.quote input[type=email], form.quote textarea { width:100%; font:inherit; font-size:1rem; padding:12px 14px; border:1.5px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink); }
form.quote textarea { resize:vertical; min-height:96px; }
.rf { margin-bottom:18px; } .rgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px) { .rgrid { grid-template-columns:1fr; } }
.fine { font-size:.85rem; color:var(--muted); margin:-8px 0 18px; }
.err { color:#9E2F1F; font-size:.85rem; margin:6px 0 0; } [aria-invalid] { border-color:#9E2F1F !important; }
.hp { position:absolute; left:-9999px; }
.ract { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px; }
.rerr { margin-top:14px; padding:12px 14px; border-radius:8px; background:#FBE9E5; color:#7A2316; font-size:.95rem; }
.rdone h3 { margin-bottom:10px; } .rdone pre { white-space:pre-wrap; font:inherit; font-size:.9rem; color:var(--muted); background:var(--white); padding:14px; border-radius:8px; }
.rdone details { margin:14px 0; } .rdone summary { cursor:pointer; font-weight:600; font-size:.95rem; }
@media (max-width:900px) { .contact .grid { grid-template-columns:1fr; } }

/* sub pages */
.pagehead { padding:72px 0 56px; }
.pagehead .lead { margin-top:18px; max-width:52ch; }
.section { padding:72px 0; }
.section + .section { border-top:1px solid var(--line); }
.section.white { background:var(--white); border:0; }
.section h2 { margin-bottom:28px; }
.section .cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.section .cols h3 { margin-bottom:8px; } .section .cols p, .section .cols li { color:var(--muted); font-size:1rem; }
.section ul { margin:0; padding-left:1.2em; } .section li { margin-bottom:6px; }
.section .prose p { margin-bottom:16px; } .section .prose p b { color:var(--ink); font-weight:600; }
.section .prose { max-width:62ch; }
.section .cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:24px; }
@media (max-width:900px) { .section .cols { grid-template-columns:1fr; gap:24px; } .pagehead { padding:52px 0 40px; } .section { padding:56px 0; } }

/* footer */
footer { background:var(--charcoal); color:#AEB7BD; padding:48px 0 56px; font-size:.92rem; }
footer .grid { display:grid; grid-template-columns:1fr auto; gap:24px 48px; align-items:start; }
footer img { width:150px; height:auto; margin-bottom:14px; opacity:.95; }
footer p { max-width:44ch; color:#AEB7BD; }
footer ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
footer a { color:var(--offwhite); text-decoration:none; } footer a:hover { text-decoration:underline; }
footer .legal { margin-top:28px; font-size:.82rem; color:#8E979E; }
@media (max-width:760px) { footer .grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* proof: screenshots and photos */
.hero .grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; }
.hero h1 { max-width:14ch; } .hero .lead { max-width:46ch; }
.stack { position:relative; justify-self:end; width:100%; max-width:560px; padding:0 0 40px 0; }
.stack .office { width:100%; border-radius:10px; box-shadow:0 20px 50px rgb(43 47 51/.25); }
.stack .phone { position:absolute; right:-6%; bottom:0; width:30%; border-radius:16px; box-shadow:0 16px 40px rgb(43 47 51/.3); }
@media (max-width:900px) { .hero .grid { grid-template-columns:1fr; } .stack { max-width:100%; } .stack .phone { right:0; } }
.shot { margin:0; } .shot img { width:100%; border-radius:10px; box-shadow:0 14px 36px rgb(43 47 51/.18); }
.shot.dark img { background:#1c2224; }
.shot figcaption { font-size:.9rem; color:var(--muted); margin-top:10px; }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; }
.split .cols { gap:22px; }
@media (max-width:900px) { .split { grid-template-columns:1fr; gap:28px; } }
.cols.n2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .cols.n1 { grid-template-columns:1fr; }
@media (max-width:600px) { .cols.n2 { grid-template-columns:1fr; } }
.section .cols.n2 h3, .section .cols.n1 h3 { font-size:1.05rem; }
/* about */
.about { background:var(--mist); padding:72px 0; }
.about .grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px 64px; align-items:start; }
.about .prose p { color:var(--ink); margin-bottom:14px; }
@media (max-width:760px) { .about .grid { grid-template-columns:1fr; gap:20px; } }
/* one page: the three lines as alternating sections */
.line { padding:88px 0; } .line:nth-of-type(odd) { background:var(--white); }
.line .lead { margin-top:14px; }
.points { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; }
.points li { padding-left:18px; border-left:3px solid var(--steel-soft); color:var(--muted); font-size:1rem; line-height:1.55; }
.points b { color:var(--ink); font-weight:600; }
.line .cta { display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:26px; }
.stack.small { padding-bottom:30px; max-width:100%; }
.lines header { margin-bottom:36px; }
@media (max-width:900px) { .line { padding:60px 0; } .line .split { grid-template-columns:1fr; } .line .split > div:last-child { order:-1; } }

.shot.art svg { width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 14px 36px rgb(43 47 51/.18); }