:root{
	--bg:#ffffff;
	--ink:#0c0f14;
	--muted:#5b6677;
	--line:#e7ebf2;
  
	--red:#d60f1a;
	--redDeep:#b80c15;
	--lime:#7cc242;       /* brand green-ish from deck */
	--limeDeep:#5aa52a;
	--gold:#a7a04a;       /* for the “highlight bars” vibe */
	--shadow: 0 18px 45px rgba(10,18,32,.12);
  
	--radius:16px;
	--radius2:22px;
  
	--container: 1160px;
  }
  
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color:var(--ink);
	background:var(--bg);
	line-height:1.55;
  }
  
  img{ max-width:100%; display:block; }
  
  .container{
	width:min(var(--container), calc(100% - 40px));
	margin-inline:auto;
  }
  
  .sr-only{
	position:absolute; width:1px; height:1px;
	padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
	white-space:nowrap; border:0;
  }
  
  /* Topbar */
  .topbar{
	background:#0b0f16;
	color:#cbd5e1;
	font-size:13px;
  }
  .topbar__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:10px 0;
  }
  .topbar__left{ display:flex; align-items:center; gap:10px; }
  .topbar__right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
  .topbar__link{ color:#cbd5e1; text-decoration:none; }
  .topbar__link:hover{ color:#fff; }
  .dot{ opacity:.6; }
  .muted{ color:var(--muted); }
  
  /* Header */
  .header{
	position:sticky;
	top:0;
	z-index:50;
	background:rgba(255,255,255,.92);
	backdrop-filter: blur(10px);
	border-bottom:1px solid var(--line);
  }
  .header__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:14px 0;
	gap:16px;
  }
  .brand{
	display:flex;
	align-items:center;
	gap:12px;
	text-decoration:none;
  }
  .brand__logo{
	height:44px;
	width:auto;
  }
  
  .nav__menu{
	list-style:none;
	display:flex;
	gap:18px;
	align-items:center;
	padding:0;
	margin:0;
  }
  .nav__menu a{
	text-decoration:none;
	color:#121826;
	font-weight:600;
	font-size:14px;
	padding:8px 10px;
	border-radius:12px;
  }
  .nav__menu a:hover{ background:#f2f5fb; }
  
  .nav__toggle{
	display:none;
	border:0;
	background:transparent;
	padding:10px;
	border-radius:12px;
  }
  .nav__toggle:hover{ background:#f2f5fb; }
  .nav__toggleBars{
	display:block;
	width:26px;
	height:2px;
	background:#111827;
	position:relative;
  }
  .nav__toggleBars::before,
  .nav__toggleBars::after{
	content:"";
	position:absolute;
	left:0;
	width:26px;
	height:2px;
	background:#111827;
  }
  .nav__toggleBars::before{ top:-8px; }
  .nav__toggleBars::after{ top:8px; }
  
  /* Buttons + chips */
  .btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:11px 16px;
	border-radius:14px;
	font-weight:700;
	font-size:14px;
	text-decoration:none;
	border:1px solid transparent;
	cursor:pointer;
	transition:.18s ease;
  }
  .btn--primary{
	background:linear-gradient(180deg, var(--red), var(--redDeep));
	color:#fff;
	box-shadow: 0 14px 30px rgba(214,15,26,.22);
  }
  .btn--primary:hover{ transform: translateY(-1px); filter:saturate(1.05); }
  .btn--outline{
	background:#fff;
	color:#111827;
	border-color:#d7deea;
  }
  .btn--outline:hover{ background:#f7f9fe; }
  .btn--full{ width:100%; }
  
  .chip{
	display:inline-flex;
	align-items:center;
	padding:6px 10px;
	border-radius:999px;
	background:#f2f5fb;
	color:#1f2937;
	font-size:12px;
	font-weight:700;
	border:1px solid #e3e8f3;
  }
  .chip--ghost{
	background:rgba(255,255,255,.08);
	border-color:rgba(255,255,255,.16);
	color:#e5e7eb;
  }
  
  /* Hero */
  .hero{
	position:relative;
	min-height: 84vh;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	overflow:hidden;
  }
  .hero__media{
	position:absolute;
	inset:0;
	background:
	  linear-gradient(0deg, rgba(0,0,0,.52), rgba(0,0,0,.18)),
	  url("../img/hero-collage.png");
	background-size:cover;
	background-position:center;
	transform:scale(1.02);
  }
  .hero__overlay{
	position:absolute;
	inset:0;
	background:
	  radial-gradient(900px 500px at 20% 30%, rgba(214,15,26,.25), transparent 60%),
	  radial-gradient(900px 500px at 80% 40%, rgba(124,194,67,.18), transparent 60%);
	pointer-events:none;
  }
  
  .hero__content{
	position:relative;
	padding: 42px 0 24px;
  }
  
  .heroCard{
	width:min(720px, 100%);
	background: rgba(255,255,255,.92);
	border:1px solid rgba(255,255,255,.35);
	backdrop-filter: blur(12px);
	border-radius: var(--radius2);
	box-shadow: var(--shadow);
	padding: 24px;
  }
  
  .heroCard__tag{
	display:inline-block;
	font-weight:800;
	letter-spacing:.18em;
	color:#fff;
	background:linear-gradient(180deg, var(--red), var(--redDeep));
	padding:10px 14px;
	border-radius:14px;
	margin-bottom:14px;
  }
  
  .heroCard__title{
	margin:0 0 10px;
	font-size: clamp(30px, 4vw, 48px);
	line-height:1.12;
	letter-spacing:-.02em;
  }
  .heroCard__titleLine{
	display:block;
	position:relative;
	width:fit-content;
	padding:2px 6px;
	margin-top:6px;
	background: linear-gradient(90deg, rgba(167,160,74,.55), rgba(167,160,74,.20));
	border-left:4px solid var(--lime);
	border-radius:10px;
  }
  
  .heroCard__sub{
	margin: 12px 0 18px;
	color:#1f2937;
	max-width: 64ch;
  }
  .heroCard__cta{ display:flex; gap:12px; flex-wrap:wrap; }
  .heroCard__meta{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
  
  .hero__brandBand{
	position:relative;
	background: linear-gradient(90deg, var(--red), #c81019 40%, #111827 100%);
	border-top: 6px solid var(--lime);
  }
  .hero__brandBandInner{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:18px;
	padding: 18px 0;
	color:#fff;
  }
  .brandBand__big{
	font-weight:900;
	letter-spacing:.06em;
	font-size: clamp(20px, 2.6vw, 30px);
  }
  .brandBand__small{
	color:#e5e7eb;
	font-weight:600;
  }
  
  /* Sections */
  .section{ padding: 72px 0; }
  .section--tint{ background: #f7f9fe; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .section--red{ background: linear-gradient(180deg, var(--red), var(--redDeep)); color:#fff; }
  
  .sectionHead{
	margin-bottom: 22px;
  }
  .sectionHead h2{
	margin:0 0 8px;
	font-size: clamp(26px, 2.7vw, 36px);
	letter-spacing:-.02em;
  }
  .sectionHead p{
	margin:0;
	max-width: 70ch;
	color:var(--muted);
  }
  .sectionHead--center{ text-align:center; }
  .sectionHead--center p{ margin-inline:auto; }
  
  .badgeTitle{
	display:inline-block;
	font-weight:900;
	letter-spacing:.18em;
	text-transform:uppercase;
	font-size:12px;
	color: var(--limeDeep);
	background: rgba(124,194,67,.14);
	border:1px solid rgba(124,194,67,.25);
	padding:10px 12px;
	border-radius:999px;
	margin-bottom:12px;
  }
  .badgeTitle--light{
	color:#fff;
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.28);
  }
  
  .light{ color:#fff; }
  .section--red .muted{ color: rgba(255,255,255,.82); }
  
  /* Layout grids */
  .grid{ display:grid; gap:18px; }
  .grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  
  .card{
	background:#fff;
	border:1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: 0 10px 24px rgba(10,18,32,.06);
  }
  .card h3{ margin:0 0 8px; font-size:18px; }
  .card p{ margin:0; color:var(--muted); }
  
  .card--soft{
	background: linear-gradient(180deg, #ffffff, #f8fbff);
  }
  
  .card--split{
	border-top: 6px solid var(--lime);
  }
  .card--split:nth-child(1){ border-top-color: var(--red); }
  
  /* Lists */
  .list{ margin:12px 0 0; padding-left:18px; color:var(--muted); }
  .list li{ margin:8px 0; }
  .list li strong{ color:#111827; }
  .list--light{ color: rgba(255,255,255,.88); }
  .list--light li strong{ color:#fff; }
  
  /* Steps */
  .steps{
	margin:12px 0 0;
	padding:0;
	list-style:none;
	display:grid;
	gap:10px;
  }
  .steps li{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 12px;
	border:1px dashed #dbe4f4;
	border-radius:14px;
	background:#fff;
  }
  .steps li span{
	width:28px;
	height:28px;
	border-radius:10px;
	display:grid;
	place-items:center;
	font-weight:900;
	background: rgba(124,194,67,.16);
	color: var(--limeDeep);
	border:1px solid rgba(124,194,67,.25);
  }
  
  /* Stats */
  .stats{
	margin-top:18px;
	display:grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap:14px;
  }
  .stat{
	background:#fff;
	border:1px solid var(--line);
	border-radius: var(--radius);
	padding:14px;
	text-align:center;
  }
  .stat__num{
	font-size:28px;
	font-weight:900;
	color:#111827;
  }
  .stat__label{
	color:var(--muted);
	font-weight:700;
	font-size:13px;
  }
  
  /* Icons */
  .iconGrid{
	margin-top:16px;
	display:grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap:14px;
  }
  .iconCard{
	border:1px solid var(--line);
	border-radius: var(--radius);
	padding:16px 10px;
	text-align:center;
	background:#fff;
  }
  .iconCard__icon{
	font-size:28px;
	margin-bottom:10px;
  }
  .iconCard__title{
	font-weight:800;
	font-size:13px;
	color:#111827;
  }
  
  /* Reach */
 /* Left smaller, right bigger */
.reach{
	display:grid;
	grid-template-columns: .9fr 1.4fr; /* <-- makes right side wider */
	gap: 18px;
	align-items: stretch;
  }
  /* Reach section: red/green/white vibe */
#reach.section--red{
	background:
	  radial-gradient(900px 520px at 18% 32%, rgba(124,194,67,.28), transparent 62%),
	  radial-gradient(900px 520px at 78% 40%, rgba(255,255,255,.16), transparent 60%),
	  radial-gradient(900px 520px at 55% 85%, rgba(214,15,26,.35), transparent 65%),
	  linear-gradient(180deg, var(--red), var(--redDeep));
	color: var(--white);
  }

 
  
     /* commercial office white */



  .reach__content{
	padding:18px;
	border-radius: var(--radius);
	border: 1px solid rgba(255,255,255,.22);
	background: rgba(255,255,255,.10);
  }
  .reach__media{
	border-radius: var(--radius);
	overflow:hidden;
	border:1px solid rgba(255,255,255,.18);
	background: rgba(0,0,0,.12);
  }
  .reach__media img{
	width:100%;
	height:100%;
	object-fit:cover;
  }
  
  .reachBoxes{
	margin-top:14px;
	display:grid;
	gap:12px;
  }
  .reachBox{
	background: rgba(255,255,255,.10);
	border:1px solid rgba(255,255,255,.18);
	border-radius: 16px;
	padding:12px;
  }
  .reachBox__title{
	font-weight:900;
	letter-spacing:.08em;
	text-transform:uppercase;
	font-size:12px;
	color:#fff;
	margin-bottom:4px;
  }
  .reachBox__text{
	color: rgba(255,255,255,.90);
	font-weight:600;
  }
  
  /* Categories */
  .categories{
	margin-top:18px;
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap:14px;
  }
  .category{
	background:#fff;
	border:1px solid var(--line);
	border-radius: var(--radius);
	padding:16px;
	box-shadow: 0 10px 24px rgba(10,18,32,.06);
	border-top:6px solid var(--lime);
  }
  .category h3{
	margin:0 0 8px;
	font-size:16px;
  }
  .category ul{
	margin:0;
	padding-left:18px;
	color:var(--muted);
  }
  .category li{ margin:6px 0; }
  
  /* Contact */
  .section--contact{
	background:
	  radial-gradient(900px 500px at 20% 30%, rgba(124,194,67,.25), transparent 60%),
	  radial-gradient(900px 500px at 80% 40%, rgba(214,15,26,.22), transparent 60%),
	  #0b0f16;
	color:#fff;
  }
  .contact{
	display:grid;
	grid-template-columns: 1.05fr .95fr;
	gap:18px;
	align-items:start;
  }
  .contact__details{
	margin-top:14px;
	display:grid;
	gap:10px;
  }
  .contactRow{
	display:grid;
	grid-template-columns: 120px 1fr;
	gap:12px;
	padding:12px;
	border-radius: var(--radius);
	background: rgba(255,255,255,.07);
	border:1px solid rgba(255,255,255,.14);
  }
  .contactRow__label{
	font-weight:900;
	letter-spacing:.12em;
	text-transform:uppercase;
	font-size:12px;
	color: rgba(255,255,255,.85);
  }
  .contactRow__value a{ color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.35); }
  .contactRow__value a:hover{ border-bottom-color: rgba(255,255,255,.75); }
  
  .contact__form{
	background: rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);
	border-radius: var(--radius2);
	padding:18px;
  }
  .contact__form h3{ margin:0 0 12px; }
  
  .field{ display:grid; gap:6px; margin-bottom:12px; }
  label{ font-weight:700; font-size:13px; color: rgba(255,255,255,.88); }
  input, textarea{
	width:100%;
	padding:12px 12px;
	border-radius:14px;
	border:1px solid rgba(255,255,255,.18);
	background: rgba(10,15,22,.45);
	color:#fff;
	outline:none;
  }
  input:focus, textarea:focus{
	border-color: rgba(124,194,67,.8);
	box-shadow: 0 0 0 4px rgba(124,194,67,.18);
  }
  .formNote{
	margin:10px 0 0;
	color: rgba(255,255,255,.88);
	font-weight:600;
	min-height: 1.4em;
  }
  
  /* Footer */
  .footer{
	background:#070a0f;
	color:#cbd5e1;
	border-top:1px solid rgba(255,255,255,.08);
  }
  .footer__inner{
	padding: 22px 0;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:14px;
	align-items:center;
  }
  .footer__brand img{ height:34px; width:auto; }
  .footer__links{
	display:flex;
	gap:12px;
	justify-content:center;
	flex-wrap:wrap;
  }
  .footer__links a{
	color:#cbd5e1;
	text-decoration:none;
	font-weight:700;
	font-size:13px;
	padding:8px 10px;
	border-radius:12px;
  }
  .footer__links a:hover{ background: rgba(255,255,255,.06); }
  .footer__copy{ text-align:right; font-size:13px; color: rgba(203,213,225,.88); }
  
  /* Back to top */
  .backToTop{
	position:fixed;
	right:16px;
	bottom:16px;
	width:46px;
	height:46px;
	border-radius:16px;
	display:grid;
	place-items:center;
	text-decoration:none;
	background: linear-gradient(180deg, var(--red), var(--redDeep));
	color:#fff;
	box-shadow: 0 14px 30px rgba(214,15,26,.22);
	opacity:0;
	pointer-events:none;
	transform: translateY(8px);
	transition: .2s ease;
  }
  .backToTop.is-visible{
	opacity:1;
	pointer-events:auto;
	transform: translateY(0);
  }

  /* --- Real map container --- */

  :root{
	--red:#d60f1a;
	--redDeep:#b80c15;
  
	--green:#7cc242;
	--greenDeep:#5aa52a;
  
	--white:#ffffff;
  }
.reachMap{
	width: 100%;
	height: 520px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.18);
	background: rgba(0,0,0,.12);
  }
  
  @media (max-width: 980px){
	.reachMap{ height: 460px; }
  }
  
  /* Legend block */
  .reachLegend{
	margin-top: 14px;
	display: grid;
	gap: 14px;
  }
  
  .legendItem{
	display:flex;
	gap: 12px;
	align-items:flex-start;
	padding: 12px;
	border-radius: 16px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.18);
  }
  
  .legendTitle{
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 12px;
	color: #fff;
	margin-bottom: 4px;
  }
  .legendText{
	color: rgba(255,255,255,.90);
	font-weight: 600;
  }
  
  /* Legend markers */
  .legendIcon{
	width: 22px;
	height: 22px;
	border-radius: 8px;
	display:inline-block;
	border: 2px solid rgba(255,255,255,.85);
	box-shadow: 0 10px 24px rgba(0,0,0,.25);
	
  }
  .legendIcon--hub{ background:#9CA3AF; }     /* gray */
  .legendIcon--head{ background:#FBBF24; }    /* yellow */
  .legendIcon--office{ background:#FCA5A5; }  /* salmon */
  
  /* MapLibre tweaks: hide attribution if you want (optional) */
  .maplibregl-ctrl-attrib{ font-size: 11px; opacity:.85; }
  .maplibregl-popup-content{
	border-radius: 14px !important;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 18px 45px rgba(10,18,32,.18);
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  .mapPopupTitle{
	font-weight: 900;
	margin: 0 0 4px;
  }
  .mapPopupMeta{
	margin: 0;
	color: #4b5563;
	font-weight: 600;
	font-size: 12px;
  }
  
  /* Responsive */
  @media (max-width: 980px){
	.grid--3{ grid-template-columns: 1fr; }
	.grid--2{ grid-template-columns: 1fr; }
	.stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
	.iconGrid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
	.reach{ grid-template-columns: 1fr; }
	.contact{ grid-template-columns: 1fr; }
	.footer__inner{ grid-template-columns: 1fr; text-align:center; }
	.footer__copy{ text-align:center; }
  }
  
  @media (max-width: 860px){
	.nav__toggle{ display:inline-flex; align-items:center; }
	.nav__menu{
	  position:absolute;
	  right: calc((100vw - min(var(--container), calc(100% - 40px))) / 2);
	  top: 68px;
	  flex-direction:column;
	  align-items:stretch;
	  gap:6px;
	  background:#fff;
	  border:1px solid var(--line);
	  border-radius: 18px;
	  box-shadow: var(--shadow);
	  padding:10px;
	  width: min(360px, calc(100vw - 40px));
	  display:none;
	}
	.nav__menu.is-open{ display:flex; }
	.nav__menu a{ padding:10px 12px; }
  }
  
  @media (prefers-reduced-motion: reduce){
	*{ transition:none !important; scroll-behavior:auto !important; }
  }