/* =========================================================
   QAS THEME STYLES
   Design language: architectural / technical-drawing.
   Signature element: mullion-grid dividers + crop-mark
   corner brackets, echoing aluminium glazing bar geometry.
   ========================================================= */

:root{
	--ink: #250D14;
	--ink-2: #38131C;
	--steel: #712331;
	--steel-light: #9C4C5A;
	--silver: #F6F1EC;
	--silver-2: #ECE0D9;
	--line: #E2D4CC;
	--accent: #C9972B;
	--accent-dark: #A97C1E;
	--white: #FFFFFF;
	--text: #2C2226;
	--text-light: #6C5B5F;
	--radius: 6px;
	--shadow: 0 12px 32px rgba(37,13,20,.12);
	--maxw: 1200px;
	--font-head: 'Space Grotesk', Arial, sans-serif;
	--font-body: 'Inter', Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

body{
	margin:0; font-family: var(--font-body); color: var(--text); background: var(--white);
	font-size: 16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-head); color: var(--ink); line-height:1.15; margin:0 0 .5em; font-weight:700; }
p{ margin:0 0 1em; }
a{ color: var(--steel); text-decoration:none; }
a:hover{ color: var(--accent); }
img{ max-width:100%; display:block; height:auto; }
ul{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }
:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }

.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; gap:8px; font-family: var(--font-head); font-weight:600;
	font-size:15px; padding: 13px 26px; border-radius: var(--radius); border: 2px solid transparent;
	cursor:pointer; transition:.18s ease;
}
.btn-accent{ background: var(--steel); color: var(--white); }
.btn-accent:hover{ background: var(--ink); color:var(--white); }
.btn-outline{ background:transparent; border-color: rgba(255,255,255,.5); color: var(--white); }
.btn-outline:hover{ border-color: var(--accent); color: var(--accent); }
.btn-outline-ink{ background:transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline-ink:hover{ border-color: var(--accent); color: var(--accent); }
.btn-block{ width:100%; justify-content:center; }

/* ---------- Topbar ---------- */
.topbar{ background: var(--ink); color:#B9C9D3; font-size:13.5px; }
.topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding:9px 24px; gap:16px; flex-wrap:wrap; }
.eyebrow-dot{ display:inline-block; width:6px; height:6px; background:var(--accent); border-radius:50%; margin-right:6px; }
.topbar-right a{ color:#DCE6EB; margin-left:18px; }
.topbar-right a:hover{ color: var(--accent); }
.topbar-left{ opacity:.85; }

/* ---------- Header ---------- */
.site-header{ background: var(--steel); border-bottom:3px solid var(--accent); position: sticky; top:0; z-index:50; }
.site-header-inner{ display:flex; align-items:center; gap:28px; padding:10px 24px; }
.site-logo{ display:block; flex-shrink:0; }
.site-logo img{ height:60px; width:auto; display:block; }
.main-nav{ flex:1; }
.nav-menu{ display:flex; align-items:center; gap:6px; }
.nav-menu > li{ position:relative; }
.nav-menu > li > a{
	display:block; padding: 12px 14px; font-family: var(--font-head); font-weight:600; font-size:15px; color: var(--white);
	border-radius: var(--radius);
}
.nav-menu > li > a:hover{ color: var(--accent); background: rgba(255,255,255,.08); }
.nav-menu .sub-menu{
	display:none; position:absolute; top:100%; left:0; background: var(--white); min-width:220px;
	box-shadow: var(--shadow); border-radius: var(--radius); border:1px solid var(--line); padding:6px; z-index:60;
}
.nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu{ display:block; }
.nav-menu .sub-menu a{ display:block; padding:10px 12px; font-size:14.5px; color: var(--text); border-radius:4px; }
.nav-menu .sub-menu a:hover{ background: var(--silver); color: var(--steel); }
.header-cta{ flex-shrink:0; background: var(--white); color: var(--steel); }
.header-cta:hover{ background: var(--accent); color: var(--white); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background: var(--white); display:block; }

/* ---------- Hero ---------- */
.hero{ position:relative; background: var(--ink); color: var(--white); overflow:hidden; }
.hero::before{
	content:""; position:absolute; inset:0;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 64px 64px; pointer-events:none;
}
.hero-inner{ position:relative; display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:center; padding: 88px 24px; max-width: var(--maxw); margin:0 auto; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-head); font-weight:600; font-size:13.5px; letter-spacing:1.5px; text-transform:uppercase; color: var(--accent); margin-bottom:18px; }
.hero-eyebrow::before{ content:""; width:26px; height:2px; background: var(--accent); display:inline-block; }
.hero h1{ color: var(--white); font-size: clamp(32px, 4.2vw, 50px); margin-bottom:20px; }
.hero p.lede{ color:#C3D2DA; font-size:18px; max-width:52ch; margin-bottom:32px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
.hero-stats{ display:flex; gap:34px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family: var(--font-head); font-size:26px; color: var(--white); }
.hero-stat span{ font-size:13px; color:#9FB4C4; text-transform:uppercase; letter-spacing:.6px; }

.hero-frame{ position:relative; border:2px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 18px; }
.hero-frame::before, .hero-frame::after,
.hero-frame .cm-tl, .hero-frame .cm-br{ content:""; position:absolute; width:22px; height:22px; border: 2px solid var(--accent); }
.hero-frame::before{ top:-2px; left:-2px; border-right:0; border-bottom:0; }
.hero-frame::after{ bottom:-2px; right:-2px; border-left:0; border-top:0; }
.hero-frame img{ border-radius:3px; }

/* ---------- Sections ---------- */
.section{ padding: 88px 0; }
.section-tight{ padding: 56px 0; }
.section-alt{ background: var(--silver); }
.section-head{ max-width: 680px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-head); font-weight:700; font-size:12.5px; letter-spacing:1.6px; text-transform:uppercase; color: var(--steel); margin-bottom:12px; }
.eyebrow::before{ content:""; width:22px; height:2px; background: var(--accent); display:inline-block; }
.section-head h2{ font-size: clamp(26px, 3vw, 36px); }
.section-head p{ color: var(--text-light); font-size:17px; }

/* ---------- Grid dividers (signature) ---------- */
.mullion-divider{ display:flex; align-items:center; gap:14px; margin: 64px 0; opacity:.6; }
.mullion-divider span{ flex:1; height:1px; background: var(--line); }
.mullion-divider i{ width:8px; height:8px; border:1.5px solid var(--steel-light); transform:rotate(45deg); display:block; }

/* ---------- Services grid ---------- */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.service-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; transition:.2s; }
.service-card:hover{ border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.service-thumb{ aspect-ratio: 16/10; overflow:hidden; background: var(--silver); }
.service-thumb img{ width:100%; height:100%; object-fit:cover; }
.service-card .service-body{ padding:22px 22px 24px; }
.service-icon{ width:36px; height:36px; color: var(--accent); margin-bottom:12px; }
.service-icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; }
.service-card h3{ font-size:18px; margin-bottom:8px; }
.service-card p{ color: var(--text-light); font-size:14.5px; margin-bottom:14px; }
.service-card a.more{ font-family: var(--font-head); font-weight:600; font-size:13.5px; color: var(--ink); }
.service-card a.more:hover{ color: var(--steel); }

/* ---------- Projects grid ---------- */
.projects-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; }
.project-card{ background: var(--white); border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); transition:.2s; }
.project-card:hover{ box-shadow: var(--shadow); transform: translateY(-3px); }
.project-thumb{ aspect-ratio: 4/3; overflow:hidden; background: var(--silver); }
.project-thumb img{ width:100%; height:100%; object-fit:cover; }
.project-body{ padding:20px 22px 22px; }
.project-tag{ font-family: var(--font-head); font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color: var(--steel); margin-bottom:8px; display:block; }
.project-card h3{ font-size:19px; margin-bottom:8px; }
.project-card p{ color: var(--text-light); font-size:14.5px; margin-bottom:0; }
.project-loc{ display:flex; align-items:center; gap:6px; font-size:13px; color: var(--text-light); margin-top:12px; }

/* ---------- Stat / accreditation strip ---------- */
.strip{ background: var(--ink-2); color:var(--white); padding: 44px 0; }
.strip .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px; }
.strip-stat b{ display:block; font-family: var(--font-head); font-size:30px; }
.strip-stat span{ font-size:13px; color:#9FB4C4; text-transform:uppercase; letter-spacing:.6px; }

.accreditation-strip{ padding: 34px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.accreditation-list{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; align-items:center; }
.accreditation-badge{
	display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border:1px solid var(--line); border-radius: 8px;
	background: var(--white);
}
.accreditation-badge img{ height:38px; width:auto; max-width:120px; object-fit:contain; display:block; }

/* ---------- Testimonials ---------- */
.testimonials-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.testimonial-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding:26px 24px; position:relative; }
.testimonial-card .quote-mark{ font-family: var(--font-head); font-size:44px; color: var(--accent); line-height:1; opacity:.4; display:block; margin-bottom:6px; }
.testimonial-card p.quote{ font-size:15.5px; color: var(--text); margin-bottom:16px; }
.testimonial-author b{ display:block; font-family: var(--font-head); font-size:14.5px; color: var(--ink); }
.testimonial-author span{ font-size:13px; color: var(--text-light); }

/* ---------- CTA banner ---------- */
.cta-banner{ background: var(--steel); color: var(--white); text-align:center; padding: 64px 24px; position:relative; overflow:hidden; border-top:3px solid var(--accent); border-bottom:3px solid var(--accent); }
.cta-banner h2{ color: var(--white); font-size: clamp(24px,3vw,34px); margin-bottom:14px; }
.cta-banner p{ color: rgba(255,255,255,.88); max-width:56ch; margin:0 auto 28px; font-size:16.5px; }
.cta-banner .btn-outline{ border-color: rgba(255,255,255,.6); }
.cta-banner .btn-outline:hover{ border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,.1); }

/* ---------- Page header (interior pages) ---------- */
.page-header{ background: var(--ink); color: var(--white); padding: 56px 0; position:relative; overflow:hidden; }
.page-header::before{
	content:""; position:absolute; inset:0;
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 56px 56px;
}
.page-header .wrap{ position:relative; }
.page-header h1{ color: var(--white); margin-bottom:10px; font-size: clamp(26px,3.4vw,38px); }
.breadcrumb{ font-size:13.5px; color:#9FB4C4; }
.breadcrumb a{ color:#C3D2DA; }
.breadcrumb a:hover{ color: var(--accent); }

/* ---------- Single project/service ---------- */
.single-wrap{ display:grid; grid-template-columns: 2fr 1fr; gap:48px; padding: 64px 0; }
.single-content .featured{ border-radius: var(--radius); overflow:hidden; margin-bottom:28px; border:1px solid var(--line); }
.single-content h1{ font-size: clamp(26px,3.4vw,36px); }
.entry-content p{ font-size:16.5px; color: var(--text); }
.sidebar-box{ background: var(--silver); border-radius: var(--radius); padding:26px; margin-bottom:22px; }
.sidebar-box h3{ font-size:16px; margin-bottom:14px; }
.sidebar-box ul li{ padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.sidebar-box ul li:last-child{ border-bottom:0; }
.sidebar-cta{ background: var(--ink); color: var(--white); border-radius: var(--radius); padding:26px; }
.sidebar-cta h3{ color: var(--white); }
.sidebar-cta p{ color:#B9C9D3; font-size:14.5px; }

/* ---------- Contact page ---------- */
.contact-wrap{ display:grid; grid-template-columns: .9fr 1.1fr; gap:52px; padding: 72px 0; align-items:start; }
.contact-info h2{ font-size:24px; }
.contact-detail{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.contact-detail:last-child{ border-bottom:0; }
.contact-detail .ci-icon{ width:38px; height:38px; flex-shrink:0; border-radius:50%; background: var(--silver); display:flex; align-items:center; justify-content:center; color: var(--accent); }
.contact-detail .ci-icon svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.contact-detail b{ display:block; font-family: var(--font-head); font-size:14.5px; color: var(--ink); }
.contact-detail span, .contact-detail a{ font-size:14.5px; color: var(--text-light); }

.form-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-family: var(--font-head); font-weight:600; font-size:13.5px; color: var(--ink); margin-bottom:6px; }
.form-group input, .form-group textarea{
	width:100%; padding: 12px 14px; border:1px solid var(--line); border-radius:4px; font-family: var(--font-body); font-size:15px; background: var(--silver);
}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color: var(--accent); background: var(--white); }
.form-group textarea{ resize:vertical; min-height:130px; }
.form-notice{ padding:14px 16px; border-radius:4px; margin-bottom:18px; font-size:14.5px; }
.form-notice.success{ background:#E3F3E6; color:#1E6B33; border:1px solid #BFE3C6; }
.form-notice.error{ background:#FBEAE7; color:#A3341C; border:1px solid #F0C6BD; }
.hp-field{ position:absolute; left:-9999px; }
.map-embed{ margin-top:28px; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:320px; border:0; display:block; }

/* ---------- Filter chips (project/service archives) ---------- */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-chip{ padding:9px 18px; border:1px solid var(--line); border-radius:999px; font-family: var(--font-head); font-weight:600; font-size:13.5px; color: var(--text); }
.filter-chip.active, .filter-chip:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- 404 ---------- */
.error-404{ text-align:center; padding: 120px 24px; }
.error-404 .code{ font-family: var(--font-head); font-size:96px; color: var(--silver-2); font-weight:700; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color:#AFC1CC; }
.footer-top{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap:36px; padding: 64px 24px 40px; }
.footer-col h3{ color: var(--white); font-size:14.5px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ color:#AFC1CC; font-size:14.5px; }
.footer-col a:hover{ color: var(--accent); }
.footer-brand p{ font-size:14px; margin:16px 0 18px; color:#9FB4C4; }
.accreditation-row{ display:flex; gap:8px; flex-wrap:wrap; }
.accreditation-row .accreditation-badge{ background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.12); padding:7px 12px; }
.accreditation-row .accreditation-badge img{ height:26px; max-width:90px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; padding: 20px 24px; font-size:13px; flex-wrap:wrap; gap:8px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
	.hero-inner{ grid-template-columns:1fr; padding: 56px 24px; }
	.services-grid{ grid-template-columns: repeat(2,1fr); }
	.projects-grid{ grid-template-columns: repeat(2,1fr); }
	.testimonials-grid{ grid-template-columns: repeat(2,1fr); }
	.single-wrap{ grid-template-columns:1fr; }
	.contact-wrap{ grid-template-columns:1fr; }
	.footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px){
	.topbar-left{ display:none; }
	.main-nav{ position:fixed; inset: 0 0 0 30%; background: var(--white); transform: translateX(100%); transition:.25s; padding: 90px 24px 24px; overflow-y:auto; box-shadow: var(--shadow); }
	.main-nav.open{ transform: translateX(0); }
	.nav-menu{ flex-direction:column; align-items:stretch; gap:2px; }
	.nav-menu > li > a{ color: var(--ink); }
	.nav-menu > li > a:hover{ color: var(--steel); background: var(--silver); }
	.nav-menu .sub-menu{ display:block; position:static; box-shadow:none; border:0; padding-left:14px; }
	.nav-toggle{ display:flex; }
	.nav-toggle span{ background: var(--white); }
	.header-cta{ display:none; }
	.services-grid{ grid-template-columns: 1fr 1fr; }
	.projects-grid, .testimonials-grid{ grid-template-columns: 1fr; }
	.footer-top{ grid-template-columns: 1fr; }
	.form-row{ grid-template-columns: 1fr; }
	.strip .wrap{ justify-content:flex-start; gap:32px 44px; }
}
@media (max-width: 520px){
	.services-grid{ grid-template-columns: 1fr; }
}