/* ========================================================= Monolith Communications – Landing Page Background image is 1920 x 873 (~2.2:1 banner). The page maintains that ratio so the bg image fills exactly without zoom or distortion. ========================================================= */
:root{--beige:#e8dfd1;--navy:#1f3a5a;--navy-deep:#163152;--red:#d72d2d;--line:rgba(31,58,90,0.22);--input-line:rgba(31,58,90,0.85);--card-bg:rgba(255,255,255,0.18);--card-border:rgba(255,255,255,0.45);--font:'Montserrat',sans-serif;/* Design canvas reference (matches landingPgBg.png) */
 --canvas-w:1920;}
body{text-rendering:optimizeSpeed;line-height:1.5;}
body,h1,h2,h3,h4,h5,h6,p,ul,ul li{margin:0;padding:0;}
*,*::before,*::after{outline:none;box-sizing:border-box;scroll-behavior:smooth;}
*{margin:0;padding:0;}
input,button{-moz-appearance:none;-webkit-appearance:none;}
a:link,a:visited{text-decoration:none;border:none;outline:none;}
img,picture,svg{max-width:100%;display:block;}
img{border:none;outline:none;}
ul,ol{list-style:none;list-style-type:none;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
html,body{margin:0;padding:0;font-family:var(--font);}
body{color:var(--navy);background:var(--beige);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
/* ---------- Page (banner that mirrors design canvas) ---------- */
.page{position:relative;width:100%;/* aspect-ratio:var(--canvas-w) / var(--canvas-h);*/
 background:url('../images/landingPgBg.png') center/cover no-repeat,var(--beige);background-position:center;background-size:cover;min-height:100dvh;}
.page-inner{max-width:1779px;margin-inline:auto;width:90%;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:0;}
/* ---------- Left content ---------- */
.content{display:flex;align-items:center;justify-content:space-between;height:100%;gap:62px;}
.logo img{width:calc(290 / var(--canvas-w) * 100vw);min-width:180px;max-width:320px;height:auto;}
.eyebrow{color:var(--red);font-size:calc(13 / var(--canvas-w) * 100vw);font-weight:500;letter-spacing:0.28em;margin:0 0 calc(24 / var(--canvas-w) * 100vw);text-transform:uppercase;}
.headline{color:var(--navy);font-family:var(--font);font-size:calc(46 / var(--canvas-w) * 100vw);font-weight:500;line-height:1.18;letter-spacing:-0.005em;margin:0 0 calc(28 / var(--canvas-w) * 100vw);}
.lead{color:var(--red);font-size:calc(20 / var(--canvas-w) * 100vw);line-height:1.5;margin:0 0 calc(28 / var(--canvas-w) * 100vw);font-weight:400;max-width:42ch;}
.divider{display:block;width:calc(130 / var(--canvas-w) * 100vw);min-width:90px;height:3px;background:var(--red);}
p.addr{font-size:calc(13 / var(--canvas-w) * 100vw);color:#000000;line-height:1.846;}
.address p{margin:0;}
/* ---------- Right form ---------- */
.form-wrap{display:flex;justify-content:flex-end;align-items:flex-start;padding-top:calc(40 / var(--canvas-w) * 100vw);}
.form-card{width:100%;max-width:calc(852 / var(--canvas-w) * 100vw);padding-block:32px;background:var(--card-bg);backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%);border:1px solid var(--card-border);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);filter:drop-shadow(0 24px 40px rgba(15,30,60,0.18));color:var(--navy);}
.form-title,.enquiry-form,.form-footer{padding-inline:32px;}
.form-title{margin:0 0 calc(24 / var(--canvas-w) * 100vw);font-size:calc(15 / var(--canvas-w) * 100vw);font-weight:700;letter-spacing:0.22em;color:#000000;}
.enquiry-form{display:flex;flex-direction:column;gap:calc(22 / var(--canvas-w) * 100vw);}
.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(28 / var(--canvas-w) * 100vw);row-gap:calc(18 / var(--canvas-w) * 100vw);}
.field{display:flex;flex-direction:column;}
.field,.purpose{position:relative;}
.field label,.purpose .label{font-size:calc(11 / var(--canvas-w) * 100vw);font-weight:600;letter-spacing:0.18em;color:var(--navy);margin-bottom:calc(8 / var(--canvas-w) * 100vw);text-transform:uppercase;}
.field input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--input-line);padding:calc(6 / var(--canvas-w) * 100vw) 0;font-family:inherit;font-size:calc(13 / var(--canvas-w) * 100vw);color:var(--navy);outline:none;transition:border-color 0.2s ease;}
.field input::placeholder{color:#303030;font-weight:400;}
.field input:focus{border-bottom-color:var(--navy);}
/* ---------- Purpose chips (single row to match design) ---------- */
.purpose .label{display:block;margin-bottom:calc(10 / var(--canvas-w) * 100vw);}
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(8 / var(--canvas-w) * 100vw);}
.chip{background:transparent;border:1px solid var(--input-line);color:#000000;padding:calc(10 / var(--canvas-w) * 100vw) calc(10 / var(--canvas-w) * 100vw);font-size:calc(10 / var(--canvas-w) * 100vw);font-weight:600;letter-spacing:0.1em;transition:all 0.2s ease;text-transform:uppercase;text-align:center;font-family:inherit;cursor: pointer;}
.chip:hover{border-color:var(--navy);}
.chip.is-active{background:var(--navy);color:#fff;border-color:var(--navy);}
/* ---------- Actions ---------- */
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:calc(16 / var(--canvas-w) * 100vw);flex-wrap:wrap;}
.discretion{margin:0;color:#000000;font-weight:500;font-size:calc(12 / var(--canvas-w) * 100vw);opacity:0.85;}
.send-btn{background:var(--navy);color:#fff;border:none;padding:calc(14 / var(--canvas-w) * 100vw) calc(22 / var(--canvas-w) * 100vw) calc(14 / var(--canvas-w) * 100vw) calc(22 / var(--canvas-w) * 100vw);font-size:calc(11 / var(--canvas-w) * 100vw);font-weight:600;letter-spacing:0.22em;text-transform:uppercase;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);transition:background-color 0.2s ease,transform 0.2s ease;font-family:inherit;cursor: pointer;}
.send-btn:hover{background:var(--navy-deep);}
.send-btn:active{transform:translateY(1px);}
/* ---------- Form footer ---------- */
.form-footer{margin-top:calc(20 / var(--canvas-w) * 100vw);padding-top:calc(18 / var(--canvas-w) * 100vw);border-top:1px solid var(--line);display:flex;justify-content:space-between;}
.form-title{margin-bottom:calc(20 / var(--canvas-w) * 100vw);padding-bottom:calc(18 / var(--canvas-w) * 100vw);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.form-footer .email{color:#000000;text-decoration:none;font-size:calc(13 / var(--canvas-w) * 100vw);}
.form-footer .email:hover{text-decoration:underline;}

.thankMsg{color:green;}
.contact-error{color:red;font-size:calc(12 / var(--canvas-w) * 100vw);position:absolute;left: 0;top: 100%;}
/* ========================================================= RESPONSIVE - Above 900px:banner keeps the design aspect ratio - Below 900px:switch to stacked,padded layout (no bg image) ========================================================= */
/* Cap upscaling on huge monitors so the banner doesn't get too tall */
@media (min-width:1800px){.logo img{width:290px;}
.eyebrow{font-size:16px;margin-bottom:24px;}
.headline{font-size:50px;margin-bottom:28px;}
.lead{font-size:28px;margin-bottom:28px;}
.divider{width:130px;}
.address{font-size:13px;}
.form-wrap{padding-top:40px;}
.form-title{font-size:15px;margin-bottom:24px;}
.enquiry-form{gap:22px;}
.grid{column-gap:28px;row-gap:24px;}
.field label,.purpose .label{font-size:11px;margin-bottom:8px;color:#000000;}
.field input{font-size:15px;padding:6px 0;}
.chips{gap:8px;}
.chip{padding:10px;font-size:11px;}
.discretion{font-size:12px;}
.send-btn{font-size:11px;padding:14px 22px 14px 22px;}
.form-footer{margin-top:20px;padding-top:18px;}
.form-footer .email{font-size:14px;}
}
/* Tablet & below:stack everything */
@media (max-width:1024px){.content{flex-direction:column;}
.intro,.form-card{width:100%;max-width:100%;}
.content{gap:40px;margin-top:40px;}
.lead{max-width:100%;}
.headline{font-size:calc(77 / var(--canvas-w) * 100vw);}
.lead{font-size:calc(40 / var(--canvas-w) * 100vw);}
.form-title{font-size:calc(30 / var(--canvas-w) * 100vw);}
.field label,.purpose .label{font-size:calc(25 / var(--canvas-w) * 100vw);}
p.addr{font-size:calc(25 / var(--canvas-w) * 100vw);}
.contact-error{color:red;font-size:calc(25 / var(--canvas-w) * 100vw);}
}
@media (max-width:900px){.content{height:auto;}
.logo img{width:180px;min-width:0;}
.intro{max-width:100%;}
.eyebrow{font-size:12px;margin-bottom:18px;}
.headline{margin-bottom:20px;}
.lead{margin-bottom:22px;}
.divider{width:110px;}
.address{display:none;}
.form-wrap{padding-top:4px;}
.form-card{max-width:100%;background:rgba(255,255,255,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(31,58,90,0.12);margin-bottom: 2em;}
.form-title{margin-bottom:18px;}
.enquiry-form{gap:18px;}
.grid{column-gap:18px;row-gap:16px;}
.field label,.purpose .label{margin-bottom:6px;}
.field input{font-size:14px;padding:6px 0;}
.chips{grid-template-columns:1fr 1fr;gap:8px;}
.chip{padding:10px 12px;font-size:10.5px;}
.discretion{font-size:12px;}
.send-btn{font-size:12px;padding:14px 28px 14px 22px;}
.form-footer{gap:12px;margin-top:18px;padding-top:16px;}
.form-footer .email{font-size:13px;}
.form-footer{flex-direction:column;}
p.addr br{display:none;}
p.addr{font-size:calc(35 / var(--canvas-w) * 100vw);}
.field label,.purpose .label{font-size:calc(35 / var(--canvas-w) * 100vw)}
.headline{font-size:calc(100 / var(--canvas-w) * 100vw);}
.lead{font-size:calc(60 / var(--canvas-w) * 100vw);}
.contact-error{color:red;font-size:calc(35 / var(--canvas-w) * 100vw);}

}
/* Mobile */
@media (max-width:600px){.grid{grid-template-columns:1fr;}
.form-actions{flex-direction:column;align-items:stretch;}
.discretion{text-align:center;}
.send-btn{width:100%;padding:14px 18px;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);}
p.addr{font-size:calc(50 / var(--canvas-w) * 100vw);}
}
/* Very small phones */
@media (max-width:380px){.chips{grid-template-columns:1fr;}
.chip{font-size:10px;}
}