/*
Theme Name: Kliek
Description: Custom theme for Kliek Online. Home, About, Services and Contact.
Version: 1.6
*/
:root{--deep:#312820;--stone:#413c34;--sand:#c8c1ba;--cream:#f8f7f2;--w:#fff;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Jost',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:300 1.0625rem/1.7 var(--sans);color:var(--stone);background:var(--cream);-webkit-font-smoothing:antialiased;padding-bottom:56px}
body.open{overflow:hidden}
img{max-width:100%;display:block}a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.1;color:var(--deep)}
h1{font-size:clamp(2.6rem,10vw,5.2rem)}h2{font-size:clamp(2rem,7vw,3.4rem)}h3{font-size:1.6rem}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.sec{padding:4.5rem 0}.dark{background:var(--deep);color:var(--sand)}.dark h1,.dark h2,.dark h3{color:var(--cream)}
.lead{font-size:1.2rem;max-width:36rem;margin-top:1rem}.mt{margin-top:2rem}.sm{font-size:.95rem;margin-top:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.75rem;border:1px solid currentColor;background:none;color:inherit;font:400 1rem var(--sans);letter-spacing:.03em;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--deep);color:var(--cream)}.dark .btn:hover{background:var(--cream);color:var(--deep)}
.btn.fill{background:var(--deep);color:var(--cream);border-color:var(--deep)}.btn.fill:hover{background:var(--stone)}
.dark .btn.fill{background:var(--cream);color:var(--deep);border-color:var(--cream)}.dark .btn.fill:hover{background:var(--sand)}
.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus,select:focus,textarea:focus,.track:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.hd{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--sand)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.brand img{height:44px;width:auto}.nav{display:none}.nav a{text-decoration:none;padding:.5rem .9rem}.nav a:hover{text-decoration:underline;text-underline-offset:6px}
.burger{display:grid;place-items:center;width:48px;height:48px;background:none;border:0;cursor:pointer;color:var(--deep);font-size:2.2rem;font-weight:300}
.burger i,.burger i:before{display:block;width:26px;height:1.5px;background:currentColor;position:relative}.burger i{top:-4px}.burger i:before{content:"";position:absolute;top:8px}
body.home .hd{position:absolute;left:0;right:0;background:none;border:0}body.home .brand{visibility:hidden}body.home .burger,body.home .nav a{color:var(--cream)}
.menu{position:fixed;inset:0;z-index:30;background:var(--deep);display:none;flex-direction:column;justify-content:center;padding:2rem}body.open .menu{display:flex}
.menu a{font:300 2.25rem var(--serif);color:var(--cream);text-decoration:none;padding:.7rem 0;border-bottom:1px solid var(--stone)}
.menu .x{position:absolute;top:10px;right:10px;color:var(--cream)}
.bar{position:fixed;bottom:0;left:0;right:0;z-index:15;display:flex;background:var(--deep);padding-bottom:env(safe-area-inset-bottom)}
.bar a{flex:1;min-height:56px;display:grid;place-items:center;color:var(--cream);text-decoration:none;font-weight:400}.bar a+a{border-left:1px solid var(--stone)}
.hero{background:var(--deep);color:var(--sand);padding:6.5rem 0 4rem}.hero .wrap{display:grid;gap:2.5rem}
.hero img.logo{width:min(44vw,190px);margin-bottom:2.5rem}.hero h1{max-width:14ch}.hero p.lead{color:var(--sand)}
.fig{aspect-ratio:4/5;overflow:hidden;background:var(--sand)}.fig img{width:100%;height:100%;object-fit:cover}
.fig.off{box-shadow:-14px 14px 0 var(--stone);margin-left:14px}
.ph{width:100%;height:100%;min-height:220px;display:grid;place-items:center;background:var(--sand);color:var(--stone);font-size:.85rem;padding:1rem;text-align:center}
.two{display:grid;gap:2.5rem}
.rows{margin-top:2.5rem}.rows a{display:grid;gap:.4rem;padding:1.5rem 0;border-top:1px solid var(--sand);text-decoration:none}.rows a:last-child{border-bottom:1px solid var(--sand)}.rows h3{font-size:1.9rem}
.hl{background:var(--sand);padding:1.25rem 1.5rem;color:var(--deep);margin:1.5rem 0}
details{border-top:1px solid var(--sand)}details:last-of-type{border-bottom:1px solid var(--sand)}
summary{list-style:none;cursor:pointer;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:1rem;font:300 1.75rem var(--serif);color:var(--deep);padding:.75rem 0}
summary::-webkit-details-marker{display:none}summary:after{content:"+";font:300 1.75rem var(--sans)}details[open] summary:after{content:"\2013"}
.dd{padding:0 0 1.5rem}.meta{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;font-weight:400;color:var(--deep);margin-bottom:.75rem}
.ticks{list-style:none;padding:0;margin-top:1rem}.ticks li{padding:.35rem 0 .35rem 1.25rem;position:relative}.ticks li:before{content:"/";position:absolute;left:0}
.grid{display:grid;gap:1.75rem;margin-top:2rem}.grid h3{font-size:1.4rem;margin-bottom:.2rem}
.steps{list-style:none;padding:0;margin-top:2rem;counter-reset:s}
.steps li{border-color:var(--stone);counter-increment:s;display:grid;grid-template-columns:3.2rem 1fr;padding:1.25rem 0;border-top:1px solid var(--sand)}
.steps li:before{content:counter(s,decimal-leading-zero);font:300 1.5rem var(--serif);color:var(--deep)}.steps b{display:block;font:300 1.75rem var(--serif);color:var(--deep)}
.track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;align-items:flex-start;padding:2rem max(1.25rem,calc((100vw - 1100px)/2 + 1.25rem));scroll-padding-left:1.25rem}
.card{flex:0 0 min(85vw,420px);scroll-snap-align:start;background:var(--w);padding:1.75rem;font-size:1rem}.card p+p{margin-top:.8em}
.card cite{display:block;margin-top:1.25rem;font:italic 400 1.5rem var(--serif);color:var(--deep)}
.form{display:grid;gap:1.1rem}label{display:grid;gap:.4rem;font-weight:400;color:var(--deep)}
input,select,textarea{font:inherit;color:var(--deep);background:var(--w);border:1px solid var(--sand);border-radius:0;padding:.8rem 1rem;min-height:48px;width:100%}
.hp{position:absolute;left:-9999px}.note{padding:1rem 1.25rem;margin-bottom:1.5rem;background:var(--w);border-left:3px solid var(--deep)}
.ft{background:var(--deep);color:var(--sand);padding:3.5rem 0 2rem}.ft .wrap{display:grid;gap:2rem}.ft img{width:150px}.ft a{text-decoration:none}.ft a:hover{text-decoration:underline}.ft small{display:block;margin-top:1rem;opacity:.7}
[id]{scroll-margin-top:84px}
@media(min-width:860px){
.hero img.logo{width:340px}
body{padding-bottom:0}.bar,.burger{display:none}.nav{display:flex}.sec{padding:6.5rem 0}
.hero{padding:9rem 0 6rem}.hero .wrap{grid-template-columns:1.25fr .75fr;align-items:center}
.two{grid-template-columns:1fr 1fr;align-items:center;gap:5rem}.rows a{grid-template-columns:1fr 1.3fr;align-items:center;gap:2rem}
.grid{grid-template-columns:1fr 1fr;gap:2rem 4rem}.ft .wrap{grid-template-columns:1.2fr 1fr 1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* per-section colours, set in Customize > Kliek colours */
.s{background:var(--bg);color:var(--tx);--ln:color-mix(in srgb,var(--tx) 30%,transparent)}
.s h1,.s h2,.s h3,.s summary,.s label,.s .meta,.s .steps b,.s .steps li:before{color:var(--hd)}
.s p.lead{color:var(--tx)}
.s .btn:hover{background:var(--hd);color:var(--bg)}
.s .btn.fill{background:var(--hd);color:var(--bg);border-color:var(--hd)}
.s .btn.fill:hover{background:var(--tx);border-color:var(--tx)}
.s details,.s .rows a,.s .rows a:last-child,.s .steps li{border-color:var(--ln)}
.s .hl{background:color-mix(in srgb,var(--tx) 14%,var(--bg));color:var(--hd)}
.s a:focus-visible,.s summary:focus-visible{outline-color:var(--hd)}
.s .card{background:#fff;color:var(--stone)}.s .card cite{color:var(--deep)}
.s .fig.off{box-shadow:-14px 14px 0 color-mix(in srgb,var(--tx) 35%,var(--bg))}