/* ===========================================
KINGDOM KONSTRUCTION — site.css
Shared styles for index, commercial, residential, about
=========================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Marcellus&family=Cormorant+Garamond:wght@500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
--bg:#0d0f14;
--bg-2:#11141b;
--bg-3:#161a23;
--ink:#0d0f14;
--ink-2:#243042;
--paper:#ffffff;
--paper-2:#f6f8fb;
--paper-3:#eef1f6;
--line:#1e2530;
--line-light:#dfe5ec;
--primary:#0077b6;
--accent:#00a8e8;
--accent-deep:#005a87;
--accent-glow:rgba(0,168,232,0.35);
--white:#ffffff;
--muted-d:#8a9bb0;
--muted-l:#5a6a7e;
--soft-d:#c8d4e0;
--soft-l:#7d8a9c;
--grad:linear-gradient(90deg,#00a8e8,#0077b6,#00a8e8);
--serif:'Perpetua','EB Garamond','Cormorant Garamond','Palatino Linotype',Georgia,serif;
--sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
--display:'Bebas Neue',sans-serif;
}
html,body{overflow-x:clip}
body{
font-family:var(--sans);
background:var(--paper);
color:var(--ink);
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
/* === GRADIENT BAR === */
.grad-bar{height:3px;background:var(--grad);width:100%}
/* === NAV (floating, transparent → solid on scroll) === */
.nav{
position:fixed;top:0;left:0;right:0;z-index:100;
background:transparent;
border-bottom:1px solid transparent;
color:var(--white);
transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease,padding .25s ease;
}
.nav.scrolled{
background:rgba(13,15,20,0.92);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1500px;margin:0 auto;transition:padding .25s ease}
.nav.scrolled .nav-inner{padding:12px 32px}
/* offset for non-hero pages so content isn't under the fixed nav */
.has-static-nav{padding-top:84px}
.brand{display:flex;align-items:center;gap:14px;cursor:pointer}
.brand img{height:46px;width:auto}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:2.5px;color:var(--white)}
.brand-sub{font-size:10px;letter-spacing:2.5px;color:var(--accent);font-weight:600;margin-top:4px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:var(--soft-d);transition:color .2s;letter-spacing:.4px}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-phone{font-weight:600;color:var(--white);font-size:14px;display:flex;align-items:center;gap:8px}
.nav-phone svg{width:16px;height:16px;color:var(--accent)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:13px 26px;border-radius:50px;
font-weight:600;font-size:13.5px;letter-spacing:.6px;
cursor:pointer;border:none;
transition:all .3s cubic-bezier(.2,.8,.2,1);
font-family:inherit;text-align:center;
position:relative;
}
.btn-primary{
background:linear-gradient(135deg,#00a8e8 0%,#0077b6 100%);
color:var(--white);
box-shadow:0 10px 30px -10px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-outline{background:rgba(255,255,255,.04);color:var(--white);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,168,232,.08);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-light)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{padding:16px 32px;font-size:15px}
.menu-toggle{display:none;background:none;border:none;color:var(--white);cursor:pointer;padding:8px}
.menu-toggle svg{width:24px;height:24px}
/* === HERO (centered, crown, luxury) === */
.hero{
position:relative;
min-height:100vh;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
background:#000;
text-align:center;
color:var(--white);
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:130%;object-fit:cover;opacity:.5;position:absolute;top:-15%;will-change:transform;}
.hero-bg::after{
content:'';position:absolute;inset:0;
background:
radial-gradient(ellipse 80% 60% at 50% 40%,rgba(0,168,232,.18),transparent 70%),
linear-gradient(180deg,rgba(13,15,20,.7) 0%,rgba(13,15,20,.55) 50%,rgba(13,15,20,.85) 100%);
}
.hero-content{position:relative;z-index:2;padding:120px 24px 80px;width:100%;max-width:1100px;animation:heroFade 1.4s ease-out both}
@keyframes heroFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-crown{
height:clamp(280px,38vw,520px);width:auto;margin:0 auto 24px;
filter:drop-shadow(0 18px 60px rgba(0,168,232,.6)) drop-shadow(0 6px 12px rgba(0,0,0,.45));
animation:crownFloat 6s ease-in-out infinite;
}
@keyframes crownFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero-wordmark{
font-family:var(--serif);
font-size:clamp(56px,8vw,112px);
font-weight:700;
letter-spacing:6px;
margin:0 auto 6px;
line-height:.95;
background:linear-gradient(180deg,#ffffff 0%,#e8eef5 60%,#a0b4c8 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
text-shadow:0 4px 30px rgba(0,168,232,.18);
/* compensate for letter-spacing visual right-shift on centered text */
padding-left:6px;
}
.hero-wordmark-2{
font-family:var(--serif);
font-size:clamp(18px,2vw,26px);
font-weight:400;
letter-spacing:14px;
color:var(--accent);
text-transform:uppercase;
margin:0 auto 36px;
/* compensate for letter-spacing trailing space */
padding-left:14px;
}
.hero-divider{
width:80px;height:1px;
background:linear-gradient(90deg,transparent,var(--accent),transparent);
margin:0 auto 28px;
}
.hero-tagline{
font-family:var(--serif);font-style:italic;
font-size:clamp(18px,1.8vw,24px);
color:var(--accent);
margin-bottom:20px;letter-spacing:.5px;
font-weight:400;
}
.hero-sub{
font-size:clamp(15px,1.3vw,17px);
color:var(--soft-d);max-width:640px;margin:0 auto 42px;line-height:1.75;
font-weight:300;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:56px}
.hero-trust{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:center;padding-top:32px;border-top:1px solid rgba(255,255,255,.1);max-width:900px;margin:0 auto}
.trust-item{display:flex;align-items:center;gap:8px;color:var(--soft-d);font-size:13px;font-weight:500}
.trust-item svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}
/* === DIVISION PICKER === */
.divisions{padding:80px 0;background:var(--paper)}
.div-head{text-align:center;max-width:680px;margin:0 auto 56px}
.div-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.div-card{
position:relative;border-radius:10px;overflow:hidden;
height:380px;cursor:pointer;
display:flex;align-items:flex-end;
background:#000;
transition:transform .35s ease,box-shadow .35s ease;
}
.div-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -20px rgba(0,90,135,.35)}
.div-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7;transition:transform .6s,opacity .35s}
.div-card:hover img{transform:scale(1.06);opacity:.85}
.div-card::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(13,15,20,.1) 0%,rgba(13,15,20,.92) 100%);
}
.div-card-body{position:relative;z-index:2;padding:36px;color:var(--white);width:100%}
.div-card-tag{font-size:11px;letter-spacing:3px;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:8px}
.div-card-title{font-family:var(--display);font-size:42px;line-height:1;letter-spacing:1.5px;margin-bottom:10px}
.div-card-desc{font-size:14px;color:var(--soft-d);margin-bottom:20px;max-width:440px}
.div-card-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:1px;color:var(--accent);text-transform:uppercase}
.div-card-cta svg{width:14px;height:14px;transition:transform .25s}
.div-card:hover .div-card-cta svg{transform:translateX(6px)}
/* === STATS BAND === */
.stats{
background:var(--ink);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:56px 0;color:var(--white);
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.stat{text-align:center;position:relative}
.stat:not(:last-child)::after{
content:'';position:absolute;right:-16px;top:20%;height:60%;width:1px;background:var(--line);
}
.stat-num{
font-family:var(--display);
font-size:clamp(40px,5vw,64px);line-height:1;
background:linear-gradient(135deg,#00a8e8,#0077b6);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
letter-spacing:1px;margin-bottom:8px;
}
.stat-label{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-d);font-weight:500}
/* === SECTIONS === */
.section{padding:100px 0;position:relative}
.section.light{background:var(--paper);color:var(--ink)}
.section.tinted{background:var(--paper-2);color:var(--ink)}
.section.dark{background:var(--ink);color:var(--white)}
.section-head{text-align:center;max-width:760px;margin:0 auto 72px}
.eyebrow{
display:inline-flex;align-items:center;gap:12px;
font-size:10.5px;font-weight:700;letter-spacing:3.5px;
color:var(--accent);text-transform:uppercase;margin-bottom:20px;
}
.eyebrow::before,.eyebrow::after{content:'';width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.eyebrow::after{background:linear-gradient(90deg,var(--accent),transparent)}
h2.display{
font-family:var(--display);
font-size:clamp(36px,4.5vw,56px);
line-height:1.05;letter-spacing:1.5px;
margin-bottom:18px;
}
h2.serif{
font-family:var(--serif);
font-size:clamp(34px,4vw,48px);
font-weight:700;line-height:1.15;letter-spacing:.5px;
margin-bottom:18px;
}
.section.dark h2.serif,.section.dark h2.display{color:var(--white)}
.section-sub{font-size:17px;line-height:1.7}
.section.light .section-sub,.section.tinted .section-sub{color:var(--muted-l)}
.section.dark .section-sub{color:var(--soft-d)}
/* === SERVICES (cards) === */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* Center a lone card in the last row of the 3-col services grid */
.services-grid .service-card:last-child:nth-child(3n+1){grid-column:2}
.service-card{
position:relative;background:var(--white);
border:1px solid var(--line-light);border-radius:10px;
overflow:hidden;transition:all .35s ease;display:block;
}
.section.dark .service-card{background:var(--bg-2);border-color:var(--line)}
.service-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 30px 60px -20px rgba(0,119,182,.18)}
.service-img{position:relative;height:220px;overflow:hidden}
.service-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.service-card:hover .service-img img{transform:scale(1.08)}
.service-img::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 50%,rgba(13,15,20,.3) 100%);
}
.service-body{padding:28px}
.service-tag{
display:inline-block;font-size:11px;letter-spacing:2px;font-weight:700;
color:var(--accent);text-transform:uppercase;margin-bottom:12px;
}
.service-title{font-size:22px;font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.25}
.section.dark .service-title{color:var(--white)}
.service-desc{font-size:14px;color:var(--muted-l);line-height:1.7;margin-bottom:18px}
.section.dark .service-desc{color:var(--muted-d)}
.service-link{
display:inline-flex;align-items:center;gap:8px;
font-size:13px;font-weight:700;color:var(--accent);
letter-spacing:.5px;text-transform:uppercase;
}
.service-link svg{width:14px;height:14px;transition:transform .25s}
.service-card:hover .service-link svg{transform:translateX(4px)}
.service-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:2px}
.service-link-alt{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted-l);letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--line-light);padding-bottom:2px;transition:color .2s,border-color .2s}
.service-link-alt:hover{color:var(--accent);border-color:var(--accent)}
.service-link-alt svg{width:11px!important;height:11px!important;flex-shrink:0}
/* === ABOUT (founders) === */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:32px}
.founder{
background:var(--white);
border:1px solid var(--line-light);border-radius:14px;
overflow:hidden;display:flex;flex-direction:column;
transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
box-shadow:0 4px 20px -10px rgba(13,15,20,.12);
}
.founder:hover{transform:translateY(-8px);box-shadow:0 40px 80px -30px rgba(0,90,135,.28)}
.founder-photo{
aspect-ratio:4/5;
background:
radial-gradient(circle at 30% 30%,rgba(0,168,232,.22),transparent 55%),
linear-gradient(145deg,#0d0f14 0%,#1a2332 45%,#0077b6 100%);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
position:relative;overflow:hidden;
}
.founder-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.founder-photo .crown-mark{
width:64px;height:auto;opacity:.7;
filter:drop-shadow(0 4px 12px rgba(0,168,232,.5));
position:relative;z-index:2;
}
.founder-initials{
font-family:var(--serif);font-size:88px;font-weight:700;
color:rgba(255,255,255,.96);letter-spacing:8px;
text-shadow:0 6px 30px rgba(0,168,232,.5);
position:relative;z-index:2;
}
.founder-photo-note{
font-size:9px;letter-spacing:3px;text-transform:uppercase;
color:rgba(255,255,255,.5);font-weight:600;
position:relative;z-index:2;
}
.founder-photo::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 70%,rgba(13,15,20,.5) 100%);
}
.founder-body{padding:36px}
.founder-role{font-size:10px;letter-spacing:3.5px;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:12px;display:inline-block}
.founder-name{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--ink);margin-bottom:4px;letter-spacing:.5px}
.founder-divider{width:36px;height:1px;background:var(--accent);opacity:.6;margin:14px 0}
.founder-title{font-size:13px;color:var(--muted-l);margin-bottom:8px;font-weight:500;letter-spacing:.5px}
.founder-bio{font-size:14px;color:var(--ink-2);line-height:1.85;font-weight:400}
.about-cta{margin-top:48px;text-align:center;font-size:15px;color:var(--muted-l);font-style:italic;font-family:var(--serif)}
/* === WHY US === */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.why-img{position:relative;border-radius:12px;overflow:hidden;height:520px;box-shadow:0 30px 60px -20px rgba(13,15,20,.4)}
.why-img img{width:100%;height:100%;object-fit:cover}
.why-img-badge{
position:absolute;bottom:24px;left:24px;
background:rgba(13,15,20,.95);
backdrop-filter:blur(12px);
border:1px solid var(--accent);
padding:18px 22px;border-radius:8px;color:var(--white);
}
.why-img-badge .num{font-family:var(--display);font-size:36px;color:var(--accent);line-height:1}
.why-img-badge .txt{font-size:11px;letter-spacing:1.5px;color:var(--soft-d);text-transform:uppercase;margin-top:4px}
.why-features{display:grid;gap:18px;margin-top:32px}
.feat{display:flex;gap:18px;align-items:flex-start;padding:20px;background:var(--white);border:1px solid var(--line-light);border-radius:8px;transition:border-color .25s,transform .25s}
.section.dark .feat{background:var(--bg-3);border-color:var(--line)}
.feat:hover{border-color:var(--accent);transform:translateX(4px)}
.feat-icon{
width:46px;height:46px;flex-shrink:0;
background:linear-gradient(135deg,rgba(0,168,232,.12),rgba(0,119,182,.04));
border:1px solid rgba(0,168,232,.3);border-radius:8px;
display:flex;align-items:center;justify-content:center;color:var(--accent);
}
.feat-icon svg{width:22px;height:22px}
.feat-text h4{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:4px}
.section.dark .feat-text h4{color:var(--white)}
.feat-text p{font-size:13px;color:var(--muted-l);line-height:1.6}
.section.dark .feat-text p{color:var(--muted-d)}
/* === PROJECTS GRID === */
.proj-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:280px 280px;gap:16px}
.proj{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;background:#000}
.proj:nth-child(1){grid-row:span 2}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform .6s,opacity .4s;opacity:.88}
.proj:hover img{transform:scale(1.06);opacity:1}
.proj-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,transparent 45%,rgba(13,15,20,.95));
display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:var(--white);
}
.proj-cat{font-size:10px;letter-spacing:2.5px;color:var(--accent);font-weight:700;text-transform:uppercase;margin-bottom:6px}
.proj-name{font-size:18px;font-weight:700}
/* === TESTIMONIALS === */
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.test-card{
background:var(--white);border:1px solid var(--line-light);border-radius:10px;
padding:32px;position:relative;transition:transform .3s,border-color .3s,box-shadow .3s;
}
.section.dark .test-card{background:var(--bg-3);border-color:var(--line)}
.test-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 20px 40px -16px rgba(0,168,232,.18)}
.test-card::before{
content:'"';position:absolute;top:8px;right:24px;
font-family:var(--serif);font-size:84px;color:var(--accent);opacity:.15;line-height:1;
}
.stars{display:flex;gap:3px;margin-bottom:18px}
.stars svg{width:16px;height:16px;color:#FFB800;fill:#FFB800}
.test-quote{font-size:15px;color:var(--ink-2);line-height:1.75;margin-bottom:20px;font-style:italic}
.section.dark .test-quote{color:var(--soft-d)}
.test-author{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-light)}
.section.dark .test-author{border-top-color:var(--line)}
.test-avatar{
width:44px;height:44px;border-radius:50%;
background:linear-gradient(135deg,var(--accent),var(--primary));
display:flex;align-items:center;justify-content:center;
font-weight:700;color:var(--white);font-size:15px;letter-spacing:1px;
}
.test-name{font-weight:600;color:var(--ink);font-size:14px}
.section.dark .test-name{color:var(--white)}
.test-loc{font-size:12px;color:var(--muted-l)}
.section.dark .test-loc{color:var(--muted-d)}
/* === FORMS === */
.form-wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.form-info h2{text-align:left}
.form-info .eyebrow{justify-content:flex-start}
.form-info .eyebrow::before{display:none}
.form-list{margin-top:32px;display:grid;gap:16px}
.form-list-item{display:flex;gap:14px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.form-list-item svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:3px}
.form-direct{
margin-top:36px;padding:24px;border-radius:10px;
background:var(--white);border:1px solid var(--line-light);border-left:3px solid var(--accent);
}
.form-direct .lbl{font-size:11px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;font-weight:700;margin-bottom:10px}
.form-direct .val{font-size:24px;font-weight:700;color:var(--ink)}
.form-direct a{display:block}
.form-direct .em{font-size:14px;color:var(--muted-l);margin-top:6px}
.form-card{
background:var(--white);border:1px solid var(--line-light);border-radius:12px;
padding:40px;position:relative;
box-shadow:0 30px 60px -30px rgba(13,15,20,.15);
}
.form-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:var(--grad);border-radius:12px 12px 0 0;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-group{margin-bottom:16px;position:relative}
.form-group label{display:block;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--ink-2);margin-bottom:8px;text-transform:uppercase}
.form-group label .req{color:var(--accent)}
.form-control{
width:100%;padding:13px 14px;
background:var(--paper-2);
border:1px solid var(--line-light);border-radius:6px;
color:var(--ink);font-size:14px;font-family:inherit;
transition:border-color .2s,box-shadow .2s,background .2s;
}
.form-control:focus{outline:none;border-color:var(--accent);background:var(--white);box-shadow:0 0 0 3px rgba(0,168,232,.12)}
textarea.form-control{resize:vertical;min-height:110px}
select.form-control{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a8e8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.file-drop{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:24px;border:2px dashed var(--line-light);border-radius:8px;
background:var(--paper-2);text-align:center;cursor:pointer;
transition:border-color .2s,background .2s;
}
.file-drop:hover{border-color:var(--accent);background:rgba(0,168,232,.04)}
.file-drop svg{width:28px;height:28px;color:var(--accent);margin-bottom:8px}
.file-drop .ft{font-size:13px;color:var(--ink-2);font-weight:600}
.file-drop .ft-sub{font-size:11px;color:var(--muted-l);margin-top:4px}
.form-submit{margin-top:8px;width:100%}
.form-msg{display:none;padding:14px;border-radius:6px;margin-top:16px;font-size:14px}
.form-msg.success{display:block;background:rgba(0,168,232,.08);border:1px solid var(--accent);color:var(--accent-deep)}
.form-msg.error{display:block;background:rgba(220,53,69,.08);border:1px solid #dc3545;color:#a02232}
.recaptcha-note{margin-top:14px;font-size:11px;color:var(--muted-l);text-align:center;line-height:1.5}
.recaptcha-note a{color:var(--accent);text-decoration:underline}
/* === LOCATION AUTOCOMPLETE === */
.loc-input-wrap{position:relative}
.loc-input-wrap .loc-icon{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
width:16px;height:16px;color:var(--accent);pointer-events:none;
}
.loc-input-wrap input{padding-left:40px}
.loc-detail-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:12px;margin-top:12px}
.loc-detail-grid .form-group{margin-bottom:0}
.pac-container{
border-radius:8px;border:1px solid var(--line-light);
box-shadow:0 12px 30px -10px rgba(13,15,20,.18);
font-family:var(--sans);margin-top:4px;
}
.pac-item{padding:10px 14px;font-size:13px;cursor:pointer}
.pac-item:hover{background:var(--paper-2)}
.pac-item-query{font-weight:600;color:var(--ink);font-size:13px}
.pac-matched{font-weight:700;color:var(--accent)}
/* === CTA STRIP === */
.cta-strip{
position:relative;padding:80px 0;text-align:center;
background:#000;overflow:hidden;color:var(--white);
}
.cta-strip-bg{position:absolute;inset:0;z-index:0}
.cta-strip-bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.cta-strip-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,119,182,.85),rgba(13,15,20,.92))}
.cta-strip .container{position:relative;z-index:2}
.cta-strip h2{margin-bottom:14px;color:var(--white)}
.cta-strip p{font-size:18px;color:var(--soft-d);margin-bottom:32px;max-width:640px;margin-left:auto;margin-right:auto}
.cta-strip-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* === FOOTER === */
.footer{background:#080a0e;border-top:1px solid var(--line);padding:64px 0 32px;color:var(--soft-d);font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.foot-brand img{height:54px;margin-bottom:18px}
.foot-tag{color:var(--accent);font-style:italic;font-size:14px;margin-bottom:18px;font-weight:500;font-family:var(--serif)}
.foot-desc{font-size:13px;color:var(--muted-d);line-height:1.7;margin-bottom:18px}
.foot-cred{display:flex;flex-wrap:wrap;gap:8px}
.foot-cred span{font-size:10px;font-weight:600;letter-spacing:1px;color:var(--accent);background:rgba(0,168,232,.08);border:1px solid rgba(0,168,232,.2);padding:5px 10px;border-radius:3px;text-transform:uppercase}
.footer h5{color:var(--white);font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.footer ul{list-style:none}
.footer li{margin-bottom:10px}
.footer a{color:var(--soft-d);font-size:13px;transition:color .2s}
.footer a:hover{color:var(--accent)}
.foot-contact-item{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin-bottom:14px}
.foot-contact-item svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:3px}
.footer-bottom{
padding-top:24px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
font-size:12px;color:var(--muted-d);
}
.foot-ids{display:flex;gap:24px;flex-wrap:wrap}
.foot-ids strong{color:var(--accent);letter-spacing:1px;font-weight:700}
/* === RESPONSIVE === */
@media (max-width:960px){
.nav-links,.nav-phone{display:none}
.menu-toggle{display:block}
.nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--ink);flex-direction:column;padding:24px;border-bottom:1px solid var(--line);gap:18px}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:32px}
.stat:nth-child(2)::after{display:none}
.services-grid,.test-grid,.div-grid,.about-grid{grid-template-columns:1fr;gap:20px}
.why-grid{grid-template-columns:1fr;gap:40px}
.why-img{height:380px}
.proj-grid{grid-template-columns:1fr 1fr;grid-template-rows:240px 240px 240px}
.proj:nth-child(1){grid-row:auto;grid-column:span 2}
.form-wrap{grid-template-columns:1fr;gap:40px}
.form-row,.loc-detail-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr;gap:32px}
.section{padding:72px 0}
.form-card{padding:28px}
.div-card{height:320px}
.hero-wordmark{letter-spacing:4px}
.hero-wordmark-2{letter-spacing:8px}
}
@media (max-width:560px){
/* Stats stay as 2x2 grid on phones — way better than vertical stack */
.stats-grid{grid-template-columns:1fr 1fr;gap:24px 16px;padding:0 4px}
.cred-band .stats-grid{grid-template-columns:1fr 1fr;gap:24px 16px;padding:0 4px}
.stat{min-width:0;padding:0 4px}
.stat::after{display:none!important}
/* Override the older 42px rule so numbers actually fit in a half-screen column */
.stat-num{font-size:clamp(26px,8vw,36px)!important;line-height:1.05}
.stat-label{font-size:10.5px;letter-spacing:1px;line-height:1.35;word-break:break-word}
.proj-grid{grid-template-columns:1fr;grid-template-rows:repeat(5,220px)}
.proj:nth-child(1){grid-column:auto}
.footer-grid{grid-template-columns:1fr;gap:32px}
.hero-actions .btn{width:100%}
.hero-crown{height:200px}
/* Tighten section padding on phones — was 72px, now feels more compact */
.section{padding:56px 0}
}
/* ============================================
AI-SEO PAGE PATTERNS — cooperatives, locations
============================================ */
/* Answer block (TLDR / quick-answer for AI extraction) */
.answer-block{max-width:920px;margin:0 auto;padding:48px 56px;background:linear-gradient(180deg,#fff,#f9fbfd);border:1px solid var(--line-light);border-left:4px solid var(--accent);border-radius:6px;box-shadow:0 24px 60px -30px rgba(13,15,20,.18)}
.answer-block .eyebrow{justify-content:flex-start;margin-bottom:18px}
.answer-block h2.serif{text-align:left;font-size:36px;line-height:1.15;margin-bottom:22px}
.answer-block .answer-lead{font-size:19px;line-height:1.65;color:var(--ink-2);margin-bottom:18px;font-weight:400}
.answer-block p:last-child{font-size:16px;line-height:1.7;color:var(--muted-l);margin:0}
.answer-block strong{color:var(--ink);font-weight:600}
/* Cooperatives grid */
.coop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.coop-card{background:var(--paper);border:1px solid var(--line-light);border-radius:8px;padding:32px 28px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;position:relative;overflow:hidden}
.coop-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,168,232,.04),transparent 60%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.coop-card:hover{transform:translateY(-6px);box-shadow:0 32px 60px -25px rgba(0,119,182,.25);border-color:rgba(0,168,232,.35)}
.coop-card:hover::before{opacity:1}
.coop-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:14px}
.coop-title{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1.1;margin-bottom:8px;color:var(--ink)}
.coop-meta{font-size:12px;color:var(--muted-l);font-style:italic;margin-bottom:14px;letter-spacing:.3px}
.coop-desc{font-size:14px;line-height:1.7;color:var(--muted-l);margin-bottom:22px}
.coop-meta-row{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid var(--line-light);font-size:11px;letter-spacing:1.5px;text-transform:uppercase}
.coop-meta-row span{color:var(--muted-l);font-weight:600}
.coop-meta-row strong{color:var(--ink);font-weight:700}
/* Comparison table */
.coop-table-wrap{overflow-x:auto;margin-top:8px;border-radius:8px;box-shadow:0 24px 60px -30px rgba(13,15,20,.15)}
.coop-table{width:100%;border-collapse:collapse;background:var(--paper);font-size:14px;min-width:680px}
.coop-table thead{background:linear-gradient(135deg,var(--ink),var(--bg-3))}
.coop-table thead th{color:var(--white);text-align:left;padding:20px 24px;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}
.coop-table thead th:first-child{color:var(--accent)}
.coop-table tbody td{padding:18px 24px;border-bottom:1px solid var(--line-light);color:var(--muted-l);line-height:1.5}
.coop-table tbody tr:last-child td{border-bottom:none}
.coop-table tbody tr:hover{background:var(--paper-2)}
.coop-table tbody td:first-child{font-weight:600;color:var(--ink);font-size:13px;letter-spacing:.3px}
.coop-table tbody td strong{color:var(--accent);font-weight:700}
/* Process steps */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:8px}
.step{position:relative;padding:36px 28px 28px;background:var(--paper);border:1px solid var(--line-light);border-radius:8px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 24px 50px -25px rgba(0,119,182,.18)}
.step-num{font-family:var(--serif);font-size:48px;line-height:1;color:var(--accent);font-weight:700;margin-bottom:12px;letter-spacing:-2px}
.step-title{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.25}
.step p{font-size:14px;line-height:1.7;color:var(--muted-l)}
/* FAQ accordion */
.faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--paper);border:1px solid var(--line-light);border-radius:6px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}
.faq-item[open]{border-color:rgba(0,168,232,.4);box-shadow:0 16px 40px -25px rgba(0,168,232,.3)}
.faq-item summary{padding:22px 28px;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;position:relative;padding-right:64px;line-height:1.4;transition:color .2s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:300;color:var(--accent);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--accent)}
.faq-item p{padding:0 28px 24px;font-size:15px;line-height:1.7;color:var(--muted-l)}
/* Locations grid */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.loc-card{background:var(--paper);border:1px solid var(--line-light);border-radius:8px;padding:32px 28px;display:block;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease;position:relative;overflow:hidden}
.loc-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,168,232,.05),transparent 60%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.loc-card:hover{transform:translateY(-6px);box-shadow:0 32px 60px -25px rgba(0,119,182,.25);border-color:rgba(0,168,232,.35)}
.loc-card:hover::before{opacity:1}
.loc-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--accent);text-transform:uppercase;margin-bottom:16px;padding:5px 10px;background:rgba(0,168,232,.08);border:1px solid rgba(0,168,232,.2);border-radius:3px}
.loc-title{font-family:var(--serif);font-size:28px;font-weight:700;line-height:1.15;margin-bottom:14px;color:var(--ink)}
.loc-desc{font-size:14px;line-height:1.7;color:var(--muted-l);margin-bottom:22px}
.loc-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;transition:gap .25s ease}
.loc-link svg{width:14px;height:14px;transition:transform .25s ease}
.loc-card:hover .loc-link{gap:12px}
.loc-card:hover .loc-link svg{transform:translateX(4px)}
/* ============================================
LUXURY POLISH — animations, hover, accents
============================================ */
/* Reveal-on-scroll baseline */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}
/* Subtle radial accent behind hero content */
.hero-content::before{content:'';position:absolute;left:50%;top:42%;width:700px;height:700px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,168,232,.12) 0%,transparent 60%);pointer-events:none;z-index:-1;filter:blur(20px)}
/* Service card lift + accent gradient sweep */
.service-card{position:relative;overflow:hidden}
.service-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,168,232,.06),transparent 55%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.service-card:hover::after{opacity:1}
.service-card:hover{transform:translateY(-6px);box-shadow:0 32px 60px -25px rgba(0,119,182,.22)}
/* Division card glow on hover */
.div-card{position:relative;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.div-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,168,232,.18) 100%);opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:1}
.div-card:hover{transform:translateY(-6px);box-shadow:0 40px 80px -30px rgba(0,168,232,.4)}
.div-card:hover::after{opacity:1}
/* Button shimmer on hover */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::before{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.2,.7,.2,1);z-index:0}
.btn-primary:hover::before{left:130%}
.btn-primary>*{position:relative;z-index:1}
/* Stat number gradient sheen */
.stat-num{background:linear-gradient(135deg,var(--accent) 0%,#7ed4ff 50%,var(--accent) 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 8s ease infinite}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* Hero crown subtle float */
.hero-crown{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
/* Section heading underline accent */
.section-head h2.serif{position:relative;display:inline-block}
/* Refine eyebrow: tiny dot accent */
.eyebrow::before,.eyebrow::after{content:'';display:inline-block;width:24px;height:1px;background:var(--accent);opacity:.5;vertical-align:middle;margin:0 12px}
/* Why-img subtle parallax-on-hover */
.why-img{overflow:hidden}
.why-img img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.why-img:hover img{transform:scale(1.05)}
/* Footer accent border */
.footer{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink) 0%,#080a0e 100%)}
/* Selection color */
::selection{background:var(--accent);color:var(--white)}
/* Scrollbar (webkit) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),var(--primary));border-radius:5px}
/* RESPONSIVE for new patterns */
@media (max-width:960px){
.coop-grid,.loc-grid{grid-template-columns:1fr 1fr;gap:16px}
.steps-grid{grid-template-columns:1fr 1fr;gap:18px}
.answer-block{padding:36px 32px}
.answer-block h2.serif{font-size:30px}
.answer-block .answer-lead{font-size:17px}
}
@media (max-width:560px){
.coop-grid,.loc-grid,.steps-grid{grid-template-columns:1fr}
.answer-block{padding:28px 22px}
.answer-block h2.serif{font-size:26px}
.faq-item summary{padding:18px 22px;padding-right:56px;font-size:15px}
.faq-item p{padding:0 22px 20px}
.coop-card,.loc-card{padding:26px 22px}
}
/* ============================================
6-CARD PROJECT GRID (replaces featured masonry for 6 items)
============================================ */
.proj-grid.proj-grid-6{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(2,320px);
gap:18px;
}
.proj-grid.proj-grid-6 .proj{grid-row:auto;grid-column:auto}
.proj-grid.proj-grid-6 .proj:nth-child(1){grid-row:auto;grid-column:auto}
/* Stronger image zoom on hover for projects */
.proj{cursor:pointer;border-radius:12px;overflow:hidden;position:relative}
.proj img{transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .4s}
.proj:hover img{transform:scale(1.08);opacity:1}
.proj::before{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 50%,rgba(0,168,232,.0) 70%,rgba(0,119,182,.35) 100%);
opacity:0;transition:opacity .5s ease;z-index:1;pointer-events:none;
}
.proj:hover::before{opacity:1}
/* ============================================
ABOUT US POLISH — tighten the founder cards
============================================ */
.about-grid{margin-top:48px;align-items:stretch}
.founder-photo{aspect-ratio:1/1.1}
.founder-photo .crown-mark{
width:auto;height:auto;
inset:auto;
}
.founder-photo .crown-mark{width:96px}
.founder-initials{font-size:72px;letter-spacing:6px}
.founder-photo-note{font-size:8px;letter-spacing:2.5px;opacity:.55}
.about-cta{
margin-top:64px;text-align:center;
font-size:18px;color:var(--ink-2);
font-style:italic;font-family:var(--serif);
max-width:720px;margin-left:auto;margin-right:auto;
letter-spacing:.3px;line-height:1.5;
padding:0 24px;
}
@media (max-width:760px){
.about-cta{
margin-top:40px;
font-size:15px;
line-height:1.55;
letter-spacing:.2px;
padding:0 20px;
max-width:420px;
}
}
@media (max-width:480px){
.about-cta{
margin-top:32px;
font-size:14px;
padding:0 16px;
}
}
/* ============================================
ADVANCED LUXURY EFFECTS
============================================ */
/* Scroll progress bar */
.scroll-progress{
position:fixed;top:0;left:0;height:3px;width:0%;
background:linear-gradient(90deg,#00a8e8,#0077b6,#00a8e8);
background-size:200% 100%;animation:sheen 4s ease infinite;
z-index:200;pointer-events:none;
transition:width .12s linear;
box-shadow:0 0 20px rgba(0,168,232,.6);
}
/* Section heading luxury underline */
.section-head h2.serif::after{
content:'';display:block;width:80px;height:2px;
margin:18px auto 0;
background:linear-gradient(90deg,transparent 0%,var(--accent) 50%,transparent 100%);
opacity:.7;
}
/* Premium gradient text on hero tagline */
.hero-tagline{
background:linear-gradient(135deg,#00a8e8 0%,#7ed4ff 50%,#00a8e8 100%);
background-size:200% 200%;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
animation:sheen 8s ease infinite;
}
/* Image-fill hover glow on division cards */
.div-card{filter:saturate(0.9) contrast(1.05);transition:filter .6s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease}
.div-card:hover{filter:saturate(1.15) contrast(1.1)}
/* Service-card image zoom on hover */
.service-img{overflow:hidden}
.service-img img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.service-card:hover .service-img img{transform:scale(1.06)}
/* Subtle aurora/blob behind hero (very luxurious feel) */
.hero{position:relative;isolation:isolate}
.hero::after{
content:'';position:absolute;
width:1100px;height:1100px;
top:-30%;left:50%;transform:translateX(-50%);
background:
radial-gradient(ellipse at 30% 40%,rgba(0,168,232,.18) 0%,transparent 55%),
radial-gradient(ellipse at 70% 60%,rgba(0,119,182,.14) 0%,transparent 60%);
filter:blur(40px);
pointer-events:none;z-index:0;
animation:auroraDrift 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
0%{transform:translateX(-50%) translateY(0) rotate(0deg)}
100%{transform:translateX(-50%) translateY(-30px) rotate(2deg)}
}
/* Hero corner accents (luxury frame feel) */
.hero-content::after{
content:'';display:block;
width:32px;height:1px;
margin:36px auto 0;
background:linear-gradient(90deg,transparent,var(--accent),transparent);
opacity:.5;
}
/* Stat hover lift */
.stat{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.stat:hover{transform:translateY(-4px)}
/* Refined nav blur */
.nav.scrolled{
background:rgba(13,15,20,0.85);
backdrop-filter:blur(20px) saturate(1.4);
-webkit-backdrop-filter:blur(20px) saturate(1.4);
}
/* Eyebrow refinement */
.eyebrow{font-weight:700;letter-spacing:3px}
/* Better button focus */
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Footer luxury accent */
.footer{position:relative}
.footer::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent);
opacity:.4;
}
/* Project gallery 6-card responsive */
@media (max-width:960px){
.proj-grid.proj-grid-6{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,260px);gap:14px}
}
@media (max-width:560px){
.proj-grid.proj-grid-6{grid-template-columns:1fr;grid-template-rows:repeat(6,240px)}
}
/* ============================================
NAV DROPDOWN — easier navigation to city pages
============================================ */
.nav-links{align-items:center}
.has-dropdown{position:relative;display:inline-flex;align-items:center}
.has-dropdown > a{display:inline-flex;align-items:center;gap:5px}
.has-dropdown > a::after{
content:'';display:inline-block;
width:0;height:0;
border-left:4px solid transparent;border-right:4px solid transparent;
border-top:4px solid currentColor;
margin-left:4px;opacity:.7;transition:transform .25s ease,opacity .25s;
}
.has-dropdown:hover > a::after{transform:rotate(180deg);opacity:1}
.dropdown-menu{
position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
min-width:240px;
background:rgba(13,15,20,0.96);
backdrop-filter:blur(20px) saturate(1.4);
-webkit-backdrop-filter:blur(20px) saturate(1.4);
border:1px solid var(--line);
border-radius:10px;
padding:10px;
display:flex;flex-direction:column;gap:2px;
opacity:0;pointer-events:none;
transition:opacity .25s ease,transform .25s cubic-bezier(.2,.7,.2,1);
box-shadow:0 30px 60px -20px rgba(0,0,0,.5),0 0 0 1px rgba(0,168,232,.12);
z-index:200;
}
.dropdown-menu::before{
content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
width:14px;height:14px;
background:rgba(13,15,20,0.96);
border-left:1px solid var(--line);border-top:1px solid var(--line);
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dropdown-menu a{
padding:11px 14px;
font-size:14px;font-weight:500;
color:var(--soft-d);
border-radius:6px;
transition:background .2s ease,color .2s ease,padding-left .25s ease;
white-space:nowrap;letter-spacing:.3px;
display:flex;align-items:center;gap:10px;
}
.dropdown-menu a:hover,.dropdown-menu a:focus{
background:rgba(0,168,232,.1);
color:var(--accent);
padding-left:18px;
}
.dropdown-menu .dd-divider{
height:1px;background:var(--line);
margin:6px 4px;
}
.dropdown-menu .dd-meta{
font-size:10px;font-weight:700;letter-spacing:2px;
color:var(--muted-l);text-transform:uppercase;
padding:8px 14px 4px;
}
@media (max-width:960px){
.has-dropdown{flex-direction:column;align-items:flex-start;width:100%}
.has-dropdown > a::after{display:none}
.dropdown-menu{position:static;transform:none;background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:6px 0 0 16px;opacity:1;pointer-events:auto;min-width:0}
.dropdown-menu::before{display:none}
.dropdown-menu a{padding:8px 0;font-size:13px}
.dropdown-menu a:hover{padding-left:8px}
}
/* ============================================
PREMIUM LUXURY POLISH — restraint, depth, refinement
============================================ */
/* Subtle noise texture overlay on dark sections (Stripe-style) */
.section.dark::before,
.hero::before {
content:'';position:absolute;inset:0;
background-image:url("data:image/svg+xml;utf8,");
pointer-events:none;z-index:1;opacity:.6;mix-blend-mode:overlay;
}
.hero{isolation:isolate}
.hero-content{position:relative;z-index:3}
/* Refined display typography — tighter leading on big text */
.hero-wordmark{line-height:.92;letter-spacing:.18em}
.serif{letter-spacing:-.01em}
h2.serif{line-height:1.12}
/* Premium button — multi-layer depth shadow */
.btn-primary{
box-shadow:
0 1px 0 rgba(255,255,255,.18) inset,
0 -1px 0 rgba(0,0,0,.18) inset,
0 8px 24px -6px rgba(0,168,232,.45),
0 2px 6px -2px rgba(0,90,135,.35);
}
.btn-primary:hover{
box-shadow:
0 1px 0 rgba(255,255,255,.22) inset,
0 -1px 0 rgba(0,0,0,.22) inset,
0 16px 40px -8px rgba(0,168,232,.55),
0 4px 10px -2px rgba(0,90,135,.4);
}
/* Refined card-edge soft glow on dark sections */
.section.dark .why-img{
box-shadow:0 40px 80px -30px rgba(0,168,232,.25),0 0 0 1px rgba(0,168,232,.08);
}
/* Premium focus rings for keyboard nav (a11y + polish) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,details:focus-visible,summary:focus-visible{
outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}
/* Subtle text-shadow refinement on hero copy */
.hero-sub{text-shadow:0 1px 12px rgba(0,0,0,.4)}
/* Stat divider lines — tasteful between */
.stats-grid .stat{position:relative}
.stats-grid .stat:not(:last-child)::after{
content:'';position:absolute;right:0;top:25%;height:50%;
width:1px;background:linear-gradient(180deg,transparent,rgba(0,168,232,.25),transparent);
}
/* Section transitions — softer break between alternating sections */
.section.tinted{background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 100%)}
.section.light + .section.tinted,
.section.tinted + .section.light{position:relative}
/* CTA strip refinement */
.cta-strip{position:relative;overflow:hidden}
.cta-strip::after{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse at 50% 50%,rgba(0,168,232,.12),transparent 70%);
pointer-events:none;
}
/* Footer credentials — premium pill styling */
.foot-cred span{
background:rgba(0,168,232,.06);
border:1px solid rgba(0,168,232,.18);
transition:all .25s ease;
}
.foot-cred span:hover{
background:rgba(0,168,232,.12);
border-color:rgba(0,168,232,.35);
transform:translateY(-1px);
}
/* Hero CTA group — subtle "trust" feeling */
.hero-trust{position:relative}
.hero-trust::before{
content:'';position:absolute;left:50%;top:0;
width:80px;height:1px;transform:translateX(-50%);
background:linear-gradient(90deg,transparent,rgba(0,168,232,.6),transparent);
}
/* Smooth-load image fade-in for any lazy images */
img[loading="lazy"]{transition:opacity .8s ease-out}
img[loading="lazy"]:not(.in-view){opacity:.85}
/* Refined details/summary cursor */
.faq-item summary{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* ============================================
FILE UPLOAD UI — premium drop zone + chips
============================================ */
.form-optional{font-size:11px;font-weight:500;color:var(--muted-l);letter-spacing:.5px;margin-left:8px;text-transform:uppercase;font-style:normal}
.file-drop{
display:block;cursor:pointer;
border:2px dashed rgba(0,168,232,.35);
border-radius:10px;
padding:24px 20px;
background:linear-gradient(180deg,rgba(0,168,232,.025),rgba(0,168,232,.06));
transition:all .25s ease;
position:relative;overflow:hidden;
}
.file-drop:hover,.file-drop:focus-within{
border-color:var(--accent);
background:linear-gradient(180deg,rgba(0,168,232,.06),rgba(0,168,232,.12));
transform:translateY(-1px);
box-shadow:0 12px 30px -16px rgba(0,168,232,.3);
}
.file-drop input[type="file"]{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;
}
.file-drop-inner{
display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
pointer-events:none;
}
.file-drop-inner svg{width:36px;height:36px;color:var(--accent);opacity:.85}
.file-drop-text{font-size:14px;color:var(--ink-2);font-weight:500;letter-spacing:.2px}
.file-drop-text strong{color:var(--accent);font-weight:700}
.file-drop-hint{font-size:11px;color:var(--muted-l);letter-spacing:.5px;text-transform:uppercase}
/* Selected file chips */
.file-preview{
display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
}
.file-chip{
display:inline-flex;align-items:center;gap:8px;
padding:8px 12px;
background:rgba(0,168,232,.1);
border:1px solid rgba(0,168,232,.25);
border-radius:6px;
font-size:12px;color:var(--ink);font-weight:500;
max-width:280px;
}
.file-chip svg{width:14px;height:14px;color:var(--accent);flex-shrink:0}
.file-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.file-chip em{color:var(--muted-l);font-style:normal;font-size:10px;letter-spacing:.5px;text-transform:uppercase;margin-left:auto}
/* Disabled submit button state */
.btn:disabled{opacity:.6;cursor:wait;transform:none!important}
/* ============================================
MOBILE RESPONSIVE POLISH
============================================ */
@media (max-width:960px){
/* Dropdown submenu — inline & always visible inside open mobile menu */
.nav-links.open .has-dropdown{display:block}
.nav-links.open .dropdown-menu{display:flex!important;opacity:1!important;pointer-events:auto!important}
/* Tighten section padding on mobile */
.section{padding:64px 0}
.answer-block{padding:32px 22px;border-radius:8px}
.answer-block h2.serif{font-size:28px}
.answer-block .answer-lead{font-size:16px}
/* Form refinements */
.form-card{padding:24px 20px;border-radius:8px}
.form-control{font-size:16px;padding:12px 14px} /* 16px prevents iOS zoom-on-focus */
/* Hero typography breathing room */
.hero-content{padding:100px 20px 60px}
.hero-wordmark{letter-spacing:3px}
.hero-wordmark-2{letter-spacing:6px}
.hero-sub{font-size:15px;line-height:1.7;padding:0 8px}
/* Trust strip wraps cleanly */
.hero-trust{flex-direction:column;align-items:flex-start;gap:10px;padding-top:24px;text-align:left;max-width:100%}
.hero-trust .trust-item{font-size:12px}
/* CTA buttons go full-width on small */
.hero-actions{flex-direction:column;gap:10px;width:100%;max-width:380px;margin-left:auto;margin-right:auto}
.hero-actions .btn{width:100%;justify-content:center}
/* Footer becomes single-column-aware */
.footer-grid{grid-template-columns:1fr 1fr;gap:36px}
.foot-brand{grid-column:span 2}
/* Stats grid tightens */
.stats{padding:48px 0}
.stat-num{font-size:42px}
.stat-label{font-size:11px}
/* Service cards more readable */
.service-card{border-radius:10px}
.service-img img{aspect-ratio:16/10;object-fit:cover}
.service-title{font-size:20px}
.service-desc{font-size:14px;line-height:1.65}
/* Why-grid stacks gracefully */
.why-img{height:auto;aspect-ratio:4/3}
.why-features{margin-top:24px}
.feat{padding:0}
/* Section heads */
.section-head h2.serif{font-size:30px;line-height:1.18}
.section-sub{font-size:15px;line-height:1.7}
/* Coop / location / steps grids — already 1fr at 560 */
.coop-card,.loc-card,.step{padding:24px 20px}
.coop-title,.loc-title{font-size:24px}
/* Hero crown a bit smaller on phones — was 200px */
.hero-crown{height:160px}
/* CTA strip mobile */
.cta-strip{padding:64px 20px}
.cta-strip h2.display{font-size:34px;line-height:1.1}
.cta-strip p{font-size:15px}
.cta-strip-actions{flex-direction:column;gap:10px;align-items:stretch;max-width:340px;margin:24px auto 0}
.cta-strip-actions .btn{width:100%}
/* File-drop tighter on mobile */
.file-drop{padding:18px 14px}
.file-drop-inner svg{width:30px;height:30px}
.file-drop-text{font-size:13px}
.file-drop-hint{font-size:10px;letter-spacing:.4px}
/* Comparison table — horizontal scroll already has, just tighter padding */
.coop-table thead th,.coop-table tbody td{padding:14px 16px;font-size:13px}
.coop-table thead th{font-size:11px}
}
@media (max-width:560px){
.footer-grid{grid-template-columns:1fr;gap:32px}
.foot-brand{grid-column:auto}
.hero-wordmark{font-size:48px;letter-spacing:2px}
.hero-wordmark-2{font-size:14px;letter-spacing:5px}
.hero-tagline{font-size:16px}
.answer-block h2.serif{font-size:24px}
.section-head h2.serif{font-size:26px}
.stats-grid{grid-template-columns:1fr 1fr;gap:18px}
.stats-grid .stat:not(:last-child)::after{display:none}
.file-chip{max-width:100%;flex:1 1 100%}
.file-chip span{max-width:none}
/* Hero crown ultra-mobile */
.hero-crown{height:120px}
}
/* ============================================
ADDITIONAL POLISH — modern & luxurious feel
============================================ */
/* Subtle grain on light sections too (very faint) */
.section.light::before,.section.tinted::before{
content:'';position:absolute;inset:0;
background-image:url("data:image/svg+xml;utf8,");
pointer-events:none;z-index:0;opacity:1;
}
.section.light,.section.tinted{position:relative;isolation:isolate}
.section.light > .container,.section.tinted > .container{position:relative;z-index:1}
/* Form card — premium glass surface */
.form-card{
position:relative;
background:var(--paper);
box-shadow:
0 32px 64px -28px rgba(13,15,20,.18),
0 12px 28px -16px rgba(0,90,135,.12),
0 0 0 1px rgba(0,168,232,.06);
border:none;
border-radius:14px;
overflow:hidden;
}
.form-card::before{
content:'';position:absolute;left:0;top:0;right:0;height:3px;
background:linear-gradient(90deg,var(--accent) 0%,var(--primary) 60%,var(--accent) 100%);
background-size:200% 100%;animation:sheen 6s ease infinite;
}
/* Form input refinement — cleaner focus state */
.form-control{
border:1px solid var(--line-light);
border-radius:8px;
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
background:#fff;
}
.form-control:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(0,168,232,.12);
outline:none;
background:#fff;
}
.form-control:hover:not(:focus){border-color:rgba(0,168,232,.45)}
/* Form labels — refined */
.form-group label{
font-size:12px;letter-spacing:1.2px;
color:var(--muted-l);
font-weight:600;text-transform:uppercase;
margin-bottom:6px;display:flex;align-items:center;gap:6px;
}
.form-group .req{color:var(--accent);font-weight:700}
/* Submit button — make it sing */
.form-submit{margin-top:8px;width:100%;justify-content:center;font-size:15px;letter-spacing:.5px}
/* Premium link underlines — animate in */
.legal-wrap a,.faq-item p a{
background-image:linear-gradient(currentColor,currentColor);
background-position:0 100%;
background-repeat:no-repeat;
background-size:100% 1px;
transition:background-size .3s ease;
}
.legal-wrap a:hover,.faq-item p a:hover{background-size:100% 2px}
/* Service tag — small enhancement */
.service-tag{
display:inline-block;
padding:4px 10px;
background:rgba(0,168,232,.08);
border:1px solid rgba(0,168,232,.18);
border-radius:3px;
letter-spacing:1.5px;
}
/* Eyebrow refinement on mobile alignment */
@media (max-width:960px){
.eyebrow::before,.eyebrow::after{width:18px;margin:0 8px}
}
/* ============================================
STICKY MOBILE CTA BAR — high-conversion pattern
============================================ */
.mcb{
display:none;
position:fixed;left:0;right:0;bottom:0;z-index:150;
padding:10px 12px calc(10px + env(safe-area-inset-bottom));
background:rgba(13,15,20,.96);
backdrop-filter:blur(20px) saturate(1.4);
-webkit-backdrop-filter:blur(20px) saturate(1.4);
border-top:1px solid rgba(0,168,232,.25);
box-shadow:0 -10px 40px -10px rgba(0,0,0,.35);
gap:8px;
}
.mcb-btn{
flex:1;min-width:0;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:14px 12px;
border-radius:50px;
font-size:14px;font-weight:700;letter-spacing:.4px;
transition:transform .2s ease,box-shadow .2s ease;
text-decoration:none;
}
.mcb-btn svg{width:16px;height:16px;flex-shrink:0}
.mcb-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcb-call{
background:rgba(255,255,255,.08);
color:#fff;
border:1px solid rgba(255,255,255,.22);
}
.mcb-call:active{transform:scale(.98)}
.mcb-bid{
background:linear-gradient(135deg,#00a8e8 0%,#0077b6 100%);
color:#fff;
box-shadow:0 6px 20px -6px rgba(0,168,232,.55),inset 0 1px 0 rgba(255,255,255,.18);
}
.mcb-bid:active{transform:scale(.98)}
@media (max-width:760px){
.mcb{display:flex}
body.has-mcb{padding-bottom:80px} /* prevent overlap with footer content */
}
/* ============================================
HERO — shorter (was full-screen), nav fix on mobile
============================================ */
/* Reduce hero min-height — feels more luxurious & gets value prop above the fold faster */
.hero{min-height:auto;padding:96px 0 64px}
.hero-content{padding:48px 24px 32px}
@media (min-width:961px){
.hero{min-height:78vh}
}
/* Hide the nav "Get a Quote / Submit Bid" button on small screens (sticky bar covers it).
Keeps just brand + phone + hamburger so the title doesn't get covered. */
@media (max-width:760px){
.nav-cta .btn-primary{display:none}
.nav-inner{padding:14px 18px}
.nav.scrolled .nav-inner{padding:10px 18px}
.brand img{height:38px}
.brand-name{font-size:18px;letter-spacing:2px}
.brand-sub{font-size:9px;letter-spacing:2px}
}
/* When the mobile menu is open, lift the sticky bar visually so it doesn't fight the menu */
.nav-links.open ~ .nav-cta + .mcb,
body:has(.nav-links.open) .mcb{opacity:.4;pointer-events:none}
/* ============================================
TRUST BADGE BAR — converts above the testimonials
============================================ */
.trust-strip{
padding:48px 0 8px;
background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
border-top:1px solid var(--line-light);
border-bottom:1px solid var(--line-light);
position:relative;
}
.trust-strip::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(0,168,232,.4) 30%,rgba(0,168,232,.4) 70%,transparent);
}
.trust-strip-head{text-align:center;margin-bottom:28px}
.trust-strip-eyebrow{
font-size:11px;font-weight:700;letter-spacing:3px;
color:var(--muted-l);text-transform:uppercase;
position:relative;padding:0 16px;
}
.trust-strip-eyebrow::before,.trust-strip-eyebrow::after{
content:'';display:inline-block;width:24px;height:1px;
background:var(--accent);opacity:.45;vertical-align:middle;margin:0 12px;
}
.trust-strip-grid{
display:grid;
grid-template-columns:repeat(8,minmax(0,1fr));
gap:14px;
align-items:stretch;
}
/* 6-item variant — used on the residential page so all six badges
fill the row evenly with no empty trailing columns. */
.trust-strip-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.tb{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:8px;padding:16px 10px;
background:var(--paper);
border:1px solid var(--line-light);
border-radius:8px;
transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
text-align:center;min-width:0;
}
.tb:hover{
border-color:rgba(0,168,232,.4);
transform:translateY(-2px);
box-shadow:0 12px 24px -16px rgba(0,119,182,.25);
}
.tb svg{width:22px;height:22px;color:var(--accent);flex-shrink:0;stroke-width:1.8}
.tb span{display:flex;flex-direction:column;line-height:1.25;font-size:11px;color:var(--muted-l);letter-spacing:.3px}
.tb span strong{color:var(--ink);font-weight:700;font-size:13px;letter-spacing:.2px;margin-bottom:2px}
@media (max-width:1100px){
.trust-strip-grid{grid-template-columns:repeat(4,1fr)}
.trust-strip-grid--6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
.trust-strip-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.trust-strip{padding:36px 0 8px}
.tb{padding:14px 8px}
.tb svg{width:18px;height:18px}
.tb span strong{font-size:12px}
.tb span{font-size:10px}
}
/* ============================================
FINAL OVERRIDES — brand sizing, crown still, centered mobile menu
============================================ */
/* Brand: enlarge crown slightly + tighten gap so crown sits closer to KINGDOM */
.brand{gap:8px}
.brand img{height:56px}
/* Disable the wobble/floaty animation on the hero crown (and any leftover) */
.hero-crown{animation:none!important}
/* Mobile menu: center the items + the dropdown sub-items so the side menu reads clean */
@media (max-width:960px){
.nav-links.open{
align-items:center;
text-align:center;
padding:32px 24px;
gap:14px;
}
.nav-links.open > a{
width:100%;
padding:8px 0;
font-size:15px;
}
/* Service Areas dropdown items — also centered */
.nav-links.open .has-dropdown{
width:100%;
text-align:center;
}
.nav-links.open .has-dropdown > a{
display:block;
width:100%;
padding:8px 0;
font-size:15px;
margin-bottom:6px;
}
.nav-links.open .dropdown-menu{
align-items:center;
padding:6px 0 12px;
}
.nav-links.open .dropdown-menu a{
width:auto;
padding:6px 12px;
font-size:13px;
}
.nav-links.open .dropdown-menu a:hover{padding-left:12px}
.nav-links.open .dd-meta{
text-align:center;width:100%;padding:6px 0;
}
}
/* Brand on small screens — keep proportional */
@media (max-width:760px){
.brand img{height:46px}
.brand{gap:6px}
}
/* ============================================
FINAL ROUND — hero=1 screen, brand centered, crown tight, trust uniform
============================================ */
/* Hero locked to single viewport height */
.hero{
height:100vh;
min-height:100vh;
max-height:100vh;
padding:0;
overflow:hidden;
display:flex;align-items:center;justify-content:center;
}
.hero-content{
padding:80px 24px 40px;
max-height:100vh;overflow:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:center;
}
/* Crown sits closer to KINGDOM wordmark on a shorter hero */
.hero-crown{
height:clamp(180px,22vw,300px);
margin:0 auto 4px;
}
.hero-wordmark{margin-top:-8px;margin-bottom:2px}
.hero-wordmark-2{margin-bottom:18px}
.hero-divider{margin:0 auto 16px}
.hero-tagline{margin-bottom:14px}
.hero-sub{margin-bottom:28px;max-width:620px}
.hero-actions{margin-bottom:28px}
.hero-trust{padding-top:18px;gap:14px 28px}
/* Mobile hero adjustments — keep 1 screen */
@media (max-width:760px){
.hero{height:100vh;min-height:100vh;max-height:100vh}
.hero-content{padding:72px 18px 28px}
.hero-crown{height:130px;margin-bottom:2px}
.hero-wordmark{font-size:46px}
.hero-wordmark-2{font-size:13px;margin-bottom:14px}
.hero-sub{font-size:14px;line-height:1.6;margin-bottom:20px}
.hero-actions{margin-bottom:20px}
.hero-trust{padding-top:14px;gap:8px 16px}
.hero-trust .trust-item{font-size:11px}
}
@media (max-width:560px){
.hero-crown{height:110px}
.hero-wordmark{font-size:42px;letter-spacing:1px}
}
/* Brand text — center the KINGDOM/KONSTRUCTION stack */
.brand-text{align-items:center;text-align:center}
.brand-name{letter-spacing:2.5px}
.brand-sub{letter-spacing:2.5px}
/* Trust strip — uniform card heights regardless of label length */
.tb{min-height:88px}
.tb span{flex:1;justify-content:center;display:flex;flex-direction:column;align-items:center}
.tb span strong{margin-bottom:1px}
@media (max-width:560px){
.tb{min-height:76px}
}
/* ============================================
HERO WORDMARK — powerful, modern, sleek
KINGDOM in Bebas Neue (condensed display, athletic-luxe)
KONSTRUCTION in Inter with wide tracking (editorial contrast)
============================================ */
.hero-wordmark{
font-family:var(--display); /* Bebas Neue */
font-weight:400;
font-size:clamp(78px,11vw,176px);
letter-spacing:.04em;
line-height:.92;
padding-left:.04em; /* compensate for Bebas's right-leaning letterspacing */
text-transform:uppercase;
/* keep the existing gradient sheen on the text */
background:linear-gradient(180deg,#ffffff 0%,#dfe7f0 55%,#9eb1c5 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
text-shadow:0 6px 30px rgba(0,168,232,.22);
margin-bottom:6px;
}
.hero-wordmark-2{
font-family:var(--sans); /* Inter */
font-weight:300;
font-size:clamp(11px,1.3vw,16px);
letter-spacing:.65em;
padding-left:.65em; /* compensate trailing letterspacing for centered text */
color:rgba(0,168,232,.92);
text-transform:uppercase;
margin-bottom:22px;
}
/* Mobile sizing for the new wordmark */
@media (max-width:760px){
.hero-wordmark{font-size:64px;letter-spacing:.05em}
.hero-wordmark-2{font-size:11px;letter-spacing:.55em;padding-left:.55em}
}
@media (max-width:560px){
.hero-wordmark{font-size:54px}
.hero-wordmark-2{font-size:10px;letter-spacing:.5em;padding-left:.5em}
}
/* ============================================
FINAL HERO WORDMARK — Perpetua serif, lighter weight, crown over text
============================================ */
.hero-wordmark{
font-family:var(--serif); /* Perpetua / EB Garamond */
font-weight:400;
font-size:clamp(64px,9vw,128px);
letter-spacing:5px;
padding-left:5px;
line-height:.95;
text-transform:uppercase;
background:linear-gradient(180deg,#ffffff 0%,#e8eef5 60%,#a0b4c8 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
text-shadow:0 4px 30px rgba(0,168,232,.18);
margin-bottom:4px;
}
.hero-wordmark-2{
font-family:var(--serif);
font-weight:400;
font-style:normal;
font-size:clamp(16px,1.7vw,22px);
letter-spacing:12px;
padding-left:12px;
color:var(--accent);
text-transform:uppercase;
margin-bottom:20px;
}
/* Crown sits directly over the text (no gap) */
.hero-crown{
margin:0 auto 0;
}
.hero-wordmark{
margin-top:-12px;
}
@media (max-width:760px){
.hero-wordmark{font-size:52px;letter-spacing:3px;padding-left:3px;margin-top:-8px}
.hero-wordmark-2{font-size:13px;letter-spacing:8px;padding-left:8px}
}
@media (max-width:560px){
.hero-wordmark{font-size:44px;letter-spacing:2px;padding-left:2px}
.hero-wordmark-2{font-size:11px;letter-spacing:6px;padding-left:6px}
}
/* ============================================
FINAL HERO REFINEMENT — better serif weight + crown sits on the text
============================================ */
/* Bring the wordmark up to give it more presence — between 400 and 700 */
.hero-wordmark{
font-weight:500;
font-size:clamp(72px,10vw,148px);
letter-spacing:6px;
padding-left:6px;
margin-top:-28px; /* crown sits directly on top of the text */
}
/* Crown stays no-margin so it visually attaches */
.hero-crown{margin:0 auto 0}
@media (max-width:760px){
.hero-wordmark{font-size:58px;letter-spacing:3px;padding-left:3px;margin-top:-18px}
}
@media (max-width:560px){
.hero-wordmark{font-size:48px;letter-spacing:2px;padding-left:2px;margin-top:-14px}
}
/* ============================================
HERO REFINEMENT — crown lower + sharper Perpetua
============================================ */
/* Push the whole hero content stack down so crown sits lower in the viewport */
.hero-content{
justify-content:flex-start;
padding-top:22vh;
padding-bottom:32px;
}
@media (max-width:760px){
.hero-content{padding-top:18vh;padding-bottom:28px}
}
@media (max-width:560px){
.hero-content{padding-top:16vh}
}
/* Sharper, cleaner Perpetua — crisper edges, refined rendering */
.hero-wordmark{
font-weight:600;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
/* Cleaner sheen — less blur in shadow so edges read sharp */
text-shadow:0 2px 12px rgba(0,168,232,.16),0 1px 2px rgba(0,0,0,.4);
/* Slightly tighter color stops for a crisper gradient */
background:linear-gradient(180deg,#ffffff 0%,#f0f4f8 50%,#b8c8d8 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* Match the subtitle to the cleaner crisp feel */
.hero-wordmark-2{
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
font-feature-settings:"kern" 1;
}
/* ============================================
FINAL HERO — revert layout, sharp wordmark, crown sits close to text
============================================ */
/* Revert: re-center the hero content stack (text back to where it was) */
.hero-content{
justify-content:center;
padding-top:80px;
padding-bottom:40px;
}
@media (max-width:760px){
.hero-content{padding-top:72px;padding-bottom:28px}
}
/* Crown sits closer to KINGDOM text — small bottom margin for breathing room */
.hero-crown{
margin:0 auto 8px;
filter:drop-shadow(0 14px 36px rgba(0,168,232,.5)) drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.hero-wordmark{margin-top:0}
/* Wordmark — EB Garamond (loaded reliably) at semi-bold for sharp serif clarity */
.hero-wordmark{
font-family:'EB Garamond','Cormorant Garamond','Perpetua','Palatino Linotype',Georgia,serif;
font-weight:700;
font-style:normal;
font-size:clamp(68px,9.5vw,140px);
letter-spacing:8px;
padding-left:8px;
line-height:1;
text-transform:uppercase;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
font-feature-settings:"kern" 1,"liga" 1,"dlig" 1;
background:linear-gradient(180deg,#ffffff 0%,#dde6ef 65%,#a4b6c8 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
text-shadow:0 1px 0 rgba(0,168,232,.15),0 8px 28px rgba(0,168,232,.25);
}
.hero-wordmark-2{
font-family:'EB Garamond','Cormorant Garamond','Perpetua',Georgia,serif;
font-weight:400;
font-style:italic;
font-size:clamp(16px,1.6vw,22px);
letter-spacing:10px;
padding-left:10px;
color:var(--accent);
text-transform:none;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
@media (max-width:760px){
.hero-wordmark{font-size:54px;letter-spacing:5px;padding-left:5px}
.hero-wordmark-2{font-size:14px;letter-spacing:7px;padding-left:7px}
}
@media (max-width:560px){
.hero-wordmark{font-size:46px;letter-spacing:4px;padding-left:4px}
.hero-wordmark-2{font-size:12px;letter-spacing:6px;padding-left:6px}
}
/* ============================================
FINAL WORDMARK — Cinzel (luxury-display serif)
KONSTRUCTION ALL CAPS, crown larger and visually lower
============================================ */
/* Crown — larger; sits visually lower by letting the text rise into its
transparent padding (the PNG itself isn't overlapping the type) */
.hero-crown{
height:clamp(220px,26vw,380px);
margin:0 auto 0;
filter:drop-shadow(0 18px 50px rgba(0,168,232,.55)) drop-shadow(0 6px 12px rgba(0,0,0,.45));
}
.hero-wordmark{margin-top:-58px}
@media (max-width:760px){
.hero-crown{height:200px}
.hero-wordmark{margin-top:-40px}
}
@media (max-width:560px){
.hero-crown{height:160px}
.hero-wordmark{margin-top:-30px}
}
/* KINGDOM — Cinzel, the serif used by luxury heritage brands.
Geometric, designed all-caps, refined thick/thin contrast. */
.hero-wordmark{
font-family:'Cinzel','Trajan Pro','Cormorant Garamond','EB Garamond',Georgia,serif;
font-weight:700;
font-style:normal;
font-size:clamp(64px,9vw,136px);
letter-spacing:.06em;
padding-left:.06em; /* compensate trailing track on centered text */
line-height:1;
text-transform:uppercase;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
font-feature-settings:"kern" 1,"liga" 1,"dlig" 1;
background:linear-gradient(180deg,#ffffff 0%,#dfe7f0 60%,#a4b5c8 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
text-shadow:0 4px 24px rgba(0,168,232,.22);
}
/* KONSTRUCTION — Marcellus (Roman inscriptional) ALL CAPS for refined
contrast against the heavier Cinzel above */
.hero-wordmark-2{
font-family:'Marcellus','Cinzel','EB Garamond',Georgia,serif;
font-weight:400;
font-style:normal;
font-size:clamp(15px,1.6vw,21px);
letter-spacing:.55em;
padding-left:.55em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:22px;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
@media (max-width:760px){
.hero-wordmark{font-size:54px;letter-spacing:.05em;padding-left:.05em}
.hero-wordmark-2{font-size:13px;letter-spacing:.45em;padding-left:.45em}
}
@media (max-width:560px){
.hero-wordmark{font-size:44px;letter-spacing:.04em;padding-left:.04em}
.hero-wordmark-2{font-size:11px;letter-spacing:.4em;padding-left:.4em}
}
/* Brand wordmark in nav — also Cinzel for consistency */
.brand-name{
font-family:'Cinzel','Trajan Pro','EB Garamond',Georgia,serif;
font-weight:700;
letter-spacing:.12em;
}
.brand-sub{
font-family:'Marcellus','Cinzel',Georgia,serif;
font-weight:400;
letter-spacing:.18em;
text-transform:uppercase;
}
/* ============================================
FINAL: trust badge formatting + crown lower over text
============================================ */
/* Crown sits lower over the text — wordmark slides further up into the
crown PNG's transparent padding (no actual visible overlap) */
.hero-wordmark{margin-top:-100px}
@media (max-width:760px){
.hero-wordmark{margin-top:-70px}
}
@media (max-width:560px){
.hero-wordmark{margin-top:-52px}
}
/* Trust signal badges — uniform 4-column grid layout, even spacing,
each badge equal width with consistent vertical/horizontal centering.
Bottom margin is tightened so the strip sits closer to the hero base
without excess dead space. */
.hero-trust{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
align-items:center;
justify-content:center;
max-width:1000px;margin:0 auto;
padding-top:18px;padding-bottom:0;
border-top:1px solid rgba(255,255,255,.1);
}
/* Pull the trust strip closer to the bottom of the hero by reducing the
.hero-content bottom padding on every page. */
.hero-content{padding-bottom:18px !important}
@media (max-width:760px){
.hero-content{padding-bottom:14px !important}
}
.hero-trust .trust-item{
display:flex;align-items:center;justify-content:center;gap:8px;
font-size:13px;font-weight:500;color:var(--soft-d);
text-align:center;line-height:1.3;
padding:6px 8px;
letter-spacing:.3px;
}
.hero-trust .trust-item svg{
width:16px;height:16px;color:var(--accent);flex-shrink:0;
}
@media (max-width:960px){
.hero-trust{grid-template-columns:repeat(2,1fr);gap:14px;max-width:520px}
}
@media (max-width:560px){
.hero-trust{grid-template-columns:1fr;gap:8px;max-width:340px;padding-top:18px}
.hero-trust .trust-item{font-size:12px;justify-content:center}
}
/* ============================================
CREDIBILITY BAND — unified stats + affiliations
============================================ */
.cred-band{
background:var(--ink);
color:var(--white);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:60px 0 52px;
}
.cred-band .stats-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
max-width:1100px;margin:0 auto;
}
.cred-divider{
max-width:200px;margin:44px auto 32px;
height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.aff-label{
text-align:center;
font-family:'Inter',sans-serif;
font-size:10.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
color:rgba(255,255,255,.5);
margin-bottom:32px;
}
.aff-logos{
display:grid;grid-template-columns:repeat(6,1fr);
gap:0;
max-width:1100px;margin:0 auto;padding:0 16px;
align-items:center;
}
.aff-item{
display:flex;align-items:center;justify-content:center;
height:56px;padding:0 12px;
opacity:.55;
filter:grayscale(100%) brightness(1.4) contrast(.95);
transition:opacity .3s ease,filter .3s ease,transform .25s ease;
position:relative;
}
.aff-item:not(:last-child)::after{
content:'';position:absolute;right:0;top:25%;height:50%;width:1px;
background:rgba(255,255,255,.08);
}
.aff-item:hover{
opacity:1;filter:grayscale(0%) brightness(1) contrast(1);
transform:translateY(-2px);
}
.aff-item img{
max-height:36px;max-width:100%;width:auto;height:auto;display:block;
object-fit:contain;
}
.aff-item.aff-text span{
font-family:'Cinzel','EB Garamond',Georgia,serif;
font-size:20px;font-weight:600;letter-spacing:.06em;
color:#fff;line-height:1;
}
@media (max-width:960px){
.cred-band{padding:56px 0 48px}
.aff-logos{grid-template-columns:repeat(3,1fr);gap:8px 0}
.aff-item{height:50px}
.aff-item:nth-child(3n)::after{display:none}
}
@media (max-width:560px){
.cred-band{padding:44px 0 36px}
.cred-band .stats-grid{gap:24px}
.cred-divider{margin:36px auto 28px}
.aff-label{font-size:9.5px;letter-spacing:.22em;margin-bottom:22px}
.aff-logos{grid-template-columns:repeat(2,1fr)}
.aff-item{height:44px;padding:0 8px}
.aff-item:nth-child(2n)::after{display:none}
.aff-item:nth-child(3n)::after{display:block}
.aff-item img{max-height:30px}
.aff-item.aff-text span{font-size:16px}
}
/* ============================================
GOVERNMENT & PUBLIC SECTOR PILLS — compact inline row
============================================ */
.gov-pills{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:8px 10px;
max-width:1100px;margin:24px auto 0;padding:0 16px;
}
.gov-pill{
display:inline-flex;align-items:center;gap:8px;
padding:7px 14px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.09);
border-radius:999px;
font-family:'Inter',sans-serif;
font-size:11.5px;font-weight:500;letter-spacing:.02em;
color:rgba(255,255,255,.78);
transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.gov-pill:hover{
border-color:rgba(0,168,232,.45);
background:rgba(0,168,232,.07);
transform:translateY(-1px);
}
.gov-pill svg{
width:13px;height:13px;color:var(--accent);flex-shrink:0;
}
.gov-pill b{
font-weight:700;color:#fff;letter-spacing:.04em;
margin-right:2px;
}
@media (max-width:560px){
.gov-pills{gap:6px 8px;padding:0 14px;margin-top:18px}
.gov-pill{font-size:10.5px;padding:6px 11px}
.gov-pill svg{width:12px;height:12px}
}
/* ============================================
COOPERATIVE CARD LOGOS — cooperative-purchasing.html
============================================ */
.coop-logo-wrap{
height:64px;
display:flex;align-items:center;justify-content:flex-start;
margin-bottom:18px;
}
.coop-logo{
max-height:48px;max-width:180px;width:auto;height:auto;
object-fit:contain;display:block;
filter:brightness(1) contrast(1);
}
.coop-logo-light{
/* BuyBoard logo is white — invert for light backgrounds */
filter:invert(1) brightness(.4);
}
.coop-logo-square{
max-height:60px;max-width:60px;
}
.coop-logo-text{
font-family:'Cinzel','EB Garamond',Georgia,serif;
font-size:28px;font-weight:700;letter-spacing:.05em;
color:var(--ink);
}
/* ============================================
TESTIMONIAL — Gregory-Portland ISD letter of rec
============================================ */
.testimonial-section{background:#f6f8fa}
.testimonial-card{
max-width:880px;margin:32px auto 0;
background:#fff;
border:1px solid var(--line-light);
border-left:4px solid var(--accent);
border-radius:8px;
padding:48px 52px 44px;
box-shadow:0 24px 60px -32px rgba(15,28,46,.18),0 4px 12px -8px rgba(15,28,46,.06);
}
.testimonial-meta{
display:flex;justify-content:space-between;align-items:flex-start;
gap:24px;flex-wrap:wrap;
padding-bottom:24px;margin-bottom:28px;
border-bottom:1px solid var(--line-light);
}
.testimonial-source strong{
display:block;
font-family:'EB Garamond',Georgia,serif;
font-size:18px;font-weight:700;color:var(--ink);
letter-spacing:.01em;
margin-bottom:2px;
}
.testimonial-source span{
font-family:'Inter',sans-serif;
font-size:12px;color:var(--muted-l);
letter-spacing:.05em;
}
.testimonial-date{
font-family:'Inter',sans-serif;
font-size:11px;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;
color:var(--muted-l);
}
.testimonial-pull{
font-family:'EB Garamond',Georgia,serif;
font-size:clamp(20px,2.2vw,26px);font-weight:500;font-style:italic;
line-height:1.45;color:var(--ink);
margin:0 0 32px;padding:0;
position:relative;padding-left:18px;
border-left:3px solid var(--accent);
}
.testimonial-body{
font-family:'Inter',sans-serif;
font-size:15px;line-height:1.7;color:var(--ink);
}
.testimonial-body p{margin:0 0 16px}
.testimonial-body p:last-child{margin-bottom:0}
.testimonial-body strong{color:var(--ink);font-weight:600}
.testimonial-signature{
margin-top:32px;padding-top:24px;
border-top:1px solid var(--line-light);
}
.testimonial-name{
font-family:'EB Garamond',Georgia,serif;
font-size:20px;font-weight:700;color:var(--ink);
letter-spacing:.01em;
}
.testimonial-role{
font-family:'Inter',sans-serif;
font-size:12.5px;color:var(--muted-l);
letter-spacing:.04em;margin-top:2px;
}
@media (max-width:760px){
.testimonial-card{padding:32px 24px 28px;border-radius:6px}
.testimonial-pull{font-size:18px;padding-left:14px}
.testimonial-body{font-size:14px}
.testimonial-meta{gap:12px}
}
/* ============================================
FINAL MOBILE HERO RESET — wins over all prior overrides
This block is intentionally last in the file so it beats
the accumulated overrides above. Clean, balanced spacing
for crown → KINGDOM → KONSTRUCTION → tagline → subtitle
→ CTAs → trust strip on phones.
============================================ */
@media (max-width:760px){
.hero{
min-height:100vh;
height:auto;
max-height:none;
padding:0;
}
.hero-content{
padding:96px 20px 32px !important;
justify-content:flex-start;
display:flex;flex-direction:column;align-items:center;
}
.hero-crown{
height:120px !important;
width:auto !important;
margin:0 auto 12px !important;
animation:floaty 6s ease-in-out infinite;
}
.hero-wordmark{
margin-top:0 !important;
margin-bottom:6px;
font-size:clamp(40px,11vw,56px) !important;
letter-spacing:.04em !important;
padding-left:.04em !important;
line-height:1;
}
.hero-wordmark-2{
margin-bottom:14px;
font-size:clamp(11px,2.6vw,13px) !important;
letter-spacing:.4em !important;
padding-left:.4em !important;
}
.hero-divider{margin:8px auto 14px;width:48px}
.hero-tagline{
font-size:15px !important;
margin-bottom:14px;
letter-spacing:.04em;
line-height:1.4;
}
.hero-sub{
font-size:14.5px !important;
line-height:1.6 !important;
margin-bottom:24px !important;
padding:0 4px !important;
max-width:100%;
}
.hero-actions{
margin-bottom:28px !important;
width:100%;max-width:340px;
}
.hero-trust{
padding-top:16px !important;
grid-template-columns:1fr 1fr !important;
gap:10px 14px !important;
max-width:100% !important;
text-align:center !important;
}
.hero-trust .trust-item{
font-size:11px !important;
justify-content:center !important;
text-align:center;
line-height:1.3;
}
.hero-trust .trust-item svg{width:14px;height:14px}
}
@media (max-width:480px){
.hero-content{
padding:84px 16px 28px !important;
}
.hero-crown{
height:100px !important;
margin-bottom:10px !important;
}
.hero-wordmark{
font-size:clamp(36px,10vw,46px) !important;
}
.hero-wordmark-2{
font-size:11px !important;
letter-spacing:.36em !important;
padding-left:.36em !important;
}
.hero-tagline{font-size:13px !important;margin-bottom:12px}
.hero-sub{font-size:13.5px !important;margin-bottom:20px !important}
.hero-actions{margin-bottom:22px !important}
.hero-trust{
grid-template-columns:1fr !important;
gap:8px !important;
}
.hero-trust .trust-item{font-size:10.5px !important}
}
/* ============================================
FINAL MOBILE COMPREHENSIVE RESET
Wins over all accumulated past overrides above.
Cleans up: stats, credibility band, division cards,
why section, founder cards, form, footer.
============================================ */
@media (max-width:760px){
/* === CREDIBILITY BAND === */
.cred-band{padding:48px 0 40px !important}
.cred-band .container{padding:0 18px}
.cred-band .stats-grid{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:28px 20px !important;
max-width:480px !important;
margin:0 auto !important;
padding:0 !important;
}
.cred-band .stat{
text-align:center;
padding:0 4px;
min-width:0;
}
.cred-band .stat::after{display:none !important}
.cred-band .stat-num{
font-size:clamp(28px,8.5vw,40px) !important;
line-height:1 !important;
margin-bottom:8px;
word-wrap:break-word;
overflow-wrap:break-word;
}
.cred-band .stat-label{
font-size:10.5px !important;
line-height:1.4 !important;
letter-spacing:.8px !important;
color:rgba(255,255,255,.7);
}
.cred-divider{
margin:32px auto 24px !important;
max-width:140px !important;
}
.aff-label{
font-size:9px !important;
letter-spacing:.18em !important;
margin-bottom:18px !important;
padding:0 16px;
line-height:1.5;
}
/* === DIVISION CARDS — image fills entire card, no black bars === */
.div-grid{gap:18px !important}
.div-card{
height:auto !important;
min-height:280px !important;
position:relative !important;
overflow:hidden !important;
}
/* Image MUST use absolute+inset to fill the card with object-fit:cover */
.div-card img{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
.div-card-body{padding:24px 20px;position:relative;z-index:2}
.div-card-title{font-size:24px;letter-spacing:.04em}
.div-card-desc{font-size:14px;line-height:1.55}
/* === SERVICE CARDS — image area sized to aspect ratio, not fixed pixels === */
.service-card{display:flex;flex-direction:column}
.service-img{
height:auto !important;
aspect-ratio:16/10 !important;
width:100%;
overflow:hidden;
position:relative;
}
.service-img img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
display:block;
}
.service-body{padding:22px 18px}
/* === COOPERATIVE CARDS === */
.coop-logo-wrap{
height:56px;
display:flex;align-items:center;justify-content:flex-start;
margin-bottom:14px;
}
.coop-logo{max-height:44px;max-width:160px}
.coop-logo-square{max-height:48px;max-width:48px}
.coop-card{padding:24px 22px}
.coop-title{font-size:24px}
/* === ABOUT SECTION === */
.section-head{padding:0 16px}
.section-head h2.serif{font-size:28px !important;line-height:1.2}
.section-sub{font-size:15px !important;line-height:1.65;padding:0 4px}
.about-grid{gap:24px !important;margin-top:24px !important}
.founder{border-radius:10px}
.founder-photo{aspect-ratio:1.4/1 !important}
.founder-initials{font-size:64px !important;letter-spacing:4px !important}
.founder-photo .crown-mark{width:72px !important}
.founder-body{padding:24px 20px !important}
.founder-name{font-size:24px !important}
.founder-bio{font-size:13.5px !important;line-height:1.7}
/* === WHY KINGDOM === */
.why-grid{gap:32px !important}
.why-img{
height:auto !important;
aspect-ratio:4/3 !important;
border-radius:10px !important;
}
.why-img-badge{
bottom:14px !important;left:14px !important;
padding:14px 18px !important;
}
.why-img-badge .num{font-size:24px !important}
.why-img-badge .txt{font-size:10px !important}
.why-features{gap:18px !important;margin-top:8px !important}
.feat{padding:0 !important}
.feat-text h4{font-size:15px !important;margin-bottom:4px}
.feat-text p{font-size:13.5px !important;line-height:1.6}
/* === CONTACT / BID FORM === */
.form-wrap{gap:32px !important}
.form-info{padding:0 4px}
.form-card{padding:24px 18px !important;border-radius:10px}
.form-control{font-size:16px !important;padding:12px 14px !important}
.form-group label{font-size:12px;margin-bottom:6px}
.form-direct{padding:18px;border-radius:8px;margin-top:24px}
.form-direct .val{font-size:20px}
.form-direct .em{font-size:13px;word-break:break-all}
.form-submit{width:100%}
/* === FOOTER === */
.footer{padding:48px 0 32px !important}
.footer .container{padding:0 20px}
.footer-grid{grid-template-columns:1fr !important;gap:32px !important}
.foot-brand{grid-column:auto !important}
.foot-brand img{height:60px}
.foot-tag{font-size:13px;margin-bottom:10px}
.foot-desc{font-size:13px;line-height:1.6}
.foot-cred{gap:8px}
.foot-cred span{font-size:10px;padding:5px 10px}
.footer h5{font-size:13px;letter-spacing:1.5px;margin-bottom:14px}
.footer ul li{margin-bottom:10px}
.footer ul li a{font-size:14px}
.foot-contact-item{font-size:14px;margin-bottom:10px}
.footer-bottom{
flex-direction:column !important;
align-items:flex-start !important;
gap:12px !important;
padding-top:24px;
margin-top:32px;
font-size:11px !important;
}
.foot-ids{font-size:10px;flex-wrap:wrap;gap:10px}
/* === SECTIONS GENERAL === */
.section{padding:48px 0 !important}
.container{padding:0 18px}
.eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:12px}
/* === MOBILE STICKY CTA BAR — make sure it doesn't cover content === */
.has-mcb{padding-bottom:80px !important}
.mcb{padding:10px 12px !important;gap:8px !important}
.mcb-btn{font-size:14px !important;padding:12px 14px !important;min-height:48px}
}
@media (max-width:480px){
.cred-band{padding:40px 0 32px !important}
.cred-band .stats-grid{gap:24px 16px !important}
.cred-band .stat-num{font-size:clamp(24px,7.5vw,32px) !important}
.cred-band .stat-label{font-size:10px !important}
.div-card-body{padding:20px 16px}
.div-card-title{font-size:22px}
.section-head h2.serif{font-size:24px !important}
.form-card{padding:20px 16px !important}
.form-direct .val{font-size:18px}
.footer .container{padding:0 16px}
}