/*
Theme Name: Quillens Glass
Description: Custom WordPress theme for Quillens Glass and Home Improvement LLC.
Version: 1.0.0
Author: Altiscope
Text Domain: quillens-glass
Requires at least: 6.0
Requires PHP: 7.4
*/

:root{
 --tl:#11808C; --tl-d:#0B5D66; --tl-l:#58C6D0; --dk:#0F2429; --dk2:#15323A;
 --pg:#FFFFFF; --alt:#EFF4F5; --line:#D6E0E2; --ink:#0E1A1D; --body2:#4E5F63;
 --maxw:1180px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--pg);color:var(--ink);font:400 17px/1.68 "Spline Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:"Geologica",system-ui,sans-serif;font-weight:800;line-height:1.06;letter-spacing:-.035em;margin:0}
h2{font-size:clamp(31px,4.4vw,52px)}
h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
p{margin:0 0 14px}
.eyebrow{font:600 11.5px/1 "Spline Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--tl-d);margin:0 0 12px}
.lead{font-size:18px;color:var(--body2)}
.sec{padding:84px 0}
.sec.alt{background:var(--alt)}
.sec.dk{background:var(--dk);color:#E7F0F1}
.sec.dk .lead{color:#9DB4B8}
.sec.dk .eyebrow{color:var(--tl-l)}

.btn{max-width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
 font:600 14px/1 "Spline Sans",sans-serif;padding:16px 25px;border-radius:5px;text-decoration:none;
 border:2px solid transparent;cursor:pointer;transition:.15s}
.btn.b1{background:var(--tl);color:#fff;border-color:var(--tl)}
.btn.b1:hover{background:var(--tl-d);border-color:var(--tl-d)}
.btn.o{background:transparent;color:var(--tl-d);border-color:#B4C6C9}
.btn.o:hover{border-color:var(--tl-d);background:rgba(17,128,140,.08)}
.hero .btn.o,.sec.dk .btn.o,.band .btn.o{color:#fff;border-color:rgba(255,255,255,.45)}
.hero .btn.o:hover,.sec.dk .btn.o:hover,.band .btn.o:hover{border-color:#fff;background:rgba(255,255,255,.13)}

header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.hd{display:flex;align-items:center;gap:14px;padding:11px 22px;max-width:var(--maxw);margin:0 auto}
.mark{display:flex;align-items:center;gap:11px;flex:1;min-width:0;text-decoration:none}
.mark .gl{width:34px;height:34px;flex:none}
.mark .nm{min-width:0}
.mark b{display:block;font-family:"Geologica",sans-serif;font-weight:800;font-size:19px;line-height:1;letter-spacing:-.035em;white-space:nowrap}
.mark span{display:block;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--body2);margin-top:3px;white-space:nowrap}
nav.lnks{display:flex;gap:21px;font:500 14px/1 "Spline Sans",sans-serif}
nav.lnks a{text-decoration:none;color:var(--body2)}
nav.lnks a:hover{color:var(--tl)}
.hd .btn{padding:13px 17px}
@media(max-width:1060px){nav.lnks{display:none}}
@media(max-width:520px){.hd{gap:9px;padding:9px 13px}.mark .gl{width:28px;height:28px}.mark b{font-size:15.5px}.mark span{font-size:9px;letter-spacing:.12em}.hd .btn{padding:11px 11px;font-size:12px}}

.hero{background:var(--dk);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse at 20% 26%,rgba(88,198,208,.26),transparent 62%)}
.hero .wrap{position:relative;z-index:2;padding:70px 22px 62px;
 display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:center}
.hero h1{font-size:clamp(38px,5.6vw,66px);max-width:14ch}
.hero h1 em{font-style:normal;color:var(--tl-l)}
.hero .lead{color:#A6BEC2;max-width:48ch;margin:18px 0 26px}
.hcta{display:flex;flex-wrap:wrap;gap:12px}
.tag{display:inline-flex;align-items:center;gap:9px;font:600 11.5px/1 "Spline Sans",sans-serif;letter-spacing:.15em;text-transform:uppercase;
 color:#C7DBDE;border:1px solid rgba(255,255,255,.26);padding:9px 15px;border-radius:4px;margin-bottom:20px}
.hshot{border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.16);position:relative}
.hshot img{width:100%;aspect-ratio:3/4;object-fit:cover}
.hshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 15px 12px;font-size:13px;color:#E7F0F1;
 background:linear-gradient(transparent,rgba(5,16,19,.9))}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr;gap:30px;padding-top:46px}}

.strip{background:var(--tl-d);color:#fff}
.strip .wrap{display:flex;flex-wrap:wrap;gap:0 30px;padding:0 22px}
.strip div{flex:1 1 180px;min-width:0;padding:22px 0}
.strip b{display:block;font-family:"Geologica",sans-serif;font-weight:700;font-size:23px;line-height:1.15;letter-spacing:-.03em}
.strip span{display:block;font-size:13.5px;margin-top:3px;color:#BFE2E6}

.cfg{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;margin-top:34px;align-items:start}
.stage{background:#0B1D22;border:1px solid #23474F;border-radius:10px;padding:10px}
.stage svg{width:100%;height:auto;display:block;border-radius:6px}
.rdt{background:#15323A;border:1px solid #23474F;border-radius:10px;padding:20px 18px;margin-top:12px}
.rdt b{display:block;font-family:"Geologica",sans-serif;font-size:20px;font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1.2}
.rdt span{display:block;font-size:15px;color:#9DB4B8;margin-top:7px}
.pane{background:#15323A;border:1px solid #23474F;border-radius:10px;padding:22px 20px}
.pane .ttl{font:600 11px/1 "Spline Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--tl-l);margin:0 0 11px}
.pane .ttl.b{margin-top:21px}
.ops{display:flex;flex-wrap:wrap;gap:7px}
.op{font:500 13.5px/1.3 "Spline Sans",sans-serif;background:rgba(255,255,255,.05);color:#C6D6D9;
 border:1.5px solid #2D5962;padding:10px 12px;border-radius:5px;cursor:pointer;transition:.13s;text-align:left;
 display:inline-flex;align-items:center;gap:8px}
.op:not([aria-pressed=true]):hover{border-color:var(--tl-l);color:#fff}
.op[aria-pressed=true]{background:var(--tl);border-color:var(--tl);color:#fff;font-weight:600}
.sw{width:15px;height:15px;border-radius:4px;flex:none;border:1px solid rgba(0,0,0,.3)}
.pane .note{font-size:13.5px;color:#88A0A4;margin:18px 0 0;border-top:1px solid #23474F;padding-top:13px}
.pane .btn{margin-top:13px;width:100%}
@media(max-width:940px){.cfg{grid-template-columns:1fr}}

.svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin-top:38px}
.svc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 22px 24px;border-top:4px solid var(--tl)}
.svc .n{font:600 11px/1 "Spline Sans",sans-serif;letter-spacing:.18em;color:var(--tl);display:block;margin-bottom:11px}
.svc h3{margin-bottom:8px}
.svc p{font-size:15.5px;color:var(--body2);margin:0}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px;margin-top:34px}
.gal figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gal.wide img{aspect-ratio:4/3}
.gal figcaption{padding:13px 15px 15px;font-size:14px;color:var(--body2)}

.band{background:var(--tl);color:#fff;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(118deg,transparent 0 20px,rgba(255,255,255,.06) 20px 40px)}
.band .wrap{position:relative;z-index:2;padding:56px 22px;display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.band h2{max-width:17ch}
.band .btn.b1{background:#0F2429;color:#fff;border-color:#0F2429}
.band .btn.b1:hover{background:#06161A;border-color:#06161A}

.qgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.form{background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px 26px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
label{display:block;font:600 10.5px/1 "Spline Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--body2);margin:0 0 7px}
.fld{margin-bottom:15px}
input,select,textarea{width:100%;font:400 15.5px/1.5 "Spline Sans",sans-serif;color:var(--ink);background:#FAFCFC;
 border:1.5px solid var(--line);border-radius:6px;padding:12px 13px}
input::placeholder,textarea::placeholder{color:#8D9B9E}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--tl);background:#fff}
textarea{min-height:150px;resize:vertical}
.fnote{font-size:13px;color:var(--body2);margin:14px 0 0}
.contact{margin:26px 0 0;padding:0}
.contact li{list-style:none;display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.contact .k{font:600 10.5px/1 "Spline Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--body2);width:84px;flex:none;padding-top:6px}
.contact .v{font-family:"Geologica",sans-serif;font-weight:800;font-size:26px;line-height:1.05;letter-spacing:-.035em;text-decoration:none;color:var(--tl-d)}
.contact .v.sm{font:500 15.5px/1.5 "Spline Sans",sans-serif;word-break:break-word;color:var(--ink)}
.contact a:hover{color:var(--tl)}
@media(max-width:900px){.qgrid{grid-template-columns:1fr}.row{grid-template-columns:1fr}}

footer{background:var(--dk);color:#92A9AD;padding:48px 0 32px;font-size:14.5px}
footer a{color:#D5E3E5;text-decoration:none;word-break:break-word}
footer a:hover{color:var(--tl-l)}
.fgrid{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.fmk{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.fmk b{font-family:"Geologica",sans-serif;font-weight:800;font-size:20px;color:#fff;letter-spacing:-.035em;line-height:1.1}
.fh{font-family:"Geologica",sans-serif;font-weight:700;font-size:17px;color:#fff;margin-bottom:8px;letter-spacing:-.03em}
.fcred{border-top:1px solid #1E3F47;margin-top:32px;padding-top:20px;font-size:13px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
@media(max-width:620px){.sec{padding:58px 0}.band .wrap{padding:46px 22px}}

.qgh-logo{width:40px;height:40px;object-fit:contain}
body.admin-bar header{top:32px}
@media(max-width:782px){body.admin-bar header{top:46px}}
section[id]{scroll-margin-top:88px}
#faq details{border-bottom:1px solid var(--line);padding:12px 0}
#faq summary{cursor:pointer;font-weight:700}
.qgh-credit{background:var(--dk);color:#c7d7d9;padding:11px 0;font-size:12px;text-align:center}
.qgh-credit a{color:inherit}
.blk-g{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.blk-g--flip .blk-im{order:2}
.blk-im{margin:0}.blk-im img{width:100%;border-radius:8px}
.blk h2 em{color:var(--tl)}
.blk.dk h2 em{color:var(--tl-l)}
.blk-p,.blk-b{margin-top:18px}
@media(max-width:720px){.blk-g{grid-template-columns:1fr}.blk-g--flip .blk-im{order:0}}