:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:rgba(17,24,39,.10);

  --brand:#f4c21c;
  --brand2:#ffd24a;

  --hero:#1f323b;
  --surface:#ffffff;
  --surface2:#f6f7f9;

  --shadow: 0 18px 50px rgba(17,24,39,.10);
  --shadow2: 0 28px 80px rgba(17,24,39,.22);
  --radius: 18px;
  --max: 1120px;

  --field:#ffffff;
  --fieldLine: rgba(17,24,39,.14);
  --fieldFocus: rgba(244,194,28,.75);

  /* Push hero copy in from the left (your red line) */
  --heroPadL: 56px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans";
  background: var(--bg);
  color: var(--text);
  line-height:1.55;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
p{color:rgba(17,24,39,.72); margin:0 0 12px}
small{color:var(--muted)}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:78px 0}
.section.tight{padding:46px 0}

.h1{font-size:52px; line-height:1.05; margin:10px 0 14px; letter-spacing:-.02em}
.h2{font-size:34px; margin:0 0 10px; letter-spacing:-.01em}
.h3{font-size:18px; margin:0 0 8px}
.kicker{color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:12px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.16);
  background:#fff;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  font: inherit;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 16px 34px rgba(17,24,39,.12)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: rgba(244,194,28,.65);
  color:#111827;
  font-weight:700;
}
.btn.outline-dark{
  background:transparent;
  border-color: rgba(255,255,255,.30);
  color:#fff;
}
.btn:focus-visible{
  outline: 3px solid rgba(244,194,28,.35);
  outline-offset: 2px;
}

/* =========================
   HEADER / NAV
========================= */
.header{
  position:sticky; top:0; z-index:1000;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; gap:16px;
}

.logo{display:none !important;}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 220px;
}

.brand-logo{
  height: 28px;
  width:auto;
  object-fit:contain;
  display:block;
}

.brand-text strong{
  display:block;
  letter-spacing:.02em;
  font-size:15px;
  line-height:1.1;
}
.brand-text small{
  display:block;
  margin-top:2px;
  font-size:12px;
  color: var(--muted);
}

.nav{display:flex; gap:8px; align-items:center}
.nav a{
  padding:9px 12px;
  border-radius:12px;
  color: rgba(17,24,39,.70);
  font-size:14px;
}
.nav a:hover{background:rgba(17,24,39,.04)}
.nav a.active{
  background: rgba(244,194,28,.20);
  border:1px solid rgba(244,194,28,.38);
  color: rgba(17,24,39,.90);
}

.menu-btn{display:none}

/* =========================
   HERO (SPLIT LIKE YOUR DESIGN)
========================= */
.hero{padding:0}
.hero-wrap{background:#fff}

/* Remove side padding so hero is flush full-width */
.hero .container{max-width:none; padding:0}

/* full-width split */
.hero-row{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 520px;
  width:100%;
}

/* left dark panel */
.hero-left{
  background: var(--hero);
  display:flex;
  align-items:center;
  padding: 52px 0;
}

/* align left content with site container + push away from edge */
.hero-left-inner{
  width:100%;
  max-width: var(--max);
  margin:0 auto;
  padding: 0 18px 0 var(--heroPadL);
}

.hero-left .h1{color:#fff}
.hero-left p{color: rgba(255,255,255,.78)}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.90);
  font-weight:600;
  margin-bottom:10px;
}

.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}

/* right image full height & flush */
.hero-right{
  position:relative;
  overflow:hidden;
  background:#dfe6ec;
  min-height:520px;
}
.hero-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* utility for other sections */
.hero-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   SECTIONS
========================= */
.surface{background: var(--surface)}
.surface2{background: var(--surface2)}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items:center;
}

.photo-grid{
  display:grid; gap:14px;
  grid-template-columns: 1.1fr .9fr;
}
.photo-big{
  min-height: 320px;
  border-radius: 30px;
  background:#e9edf2;
  overflow:hidden;
  display:flex;
}
.photo-small-col{display:grid; gap:14px}
.photo-small{
  min-height: 153px;
  border-radius: 24px;
  background:#e9edf2;
  overflow:hidden;
  display:flex;
}

/* bullets */
.list{margin:18px 0 0; padding:0; list-style:none; display:grid; gap:12px}
.list li{display:flex; gap:10px; align-items:flex-start}
.tick{
  width:18px; height:18px; border-radius:999px;
  background: rgba(244,194,28,.22);
  border:1px solid rgba(244,194,28,.55);
  margin-top:3px;
  position:relative;
  flex:0 0 auto;
}
.tick:after{
  content:"";
  position:absolute; left:5px; top:4px;
  width:6px; height:9px;
  border-right:2px solid rgba(17,24,39,.80);
  border-bottom:2px solid rgba(17,24,39,.80);
  transform: rotate(40deg);
}

/* services cards */
.center{ text-align:center; max-width:720px; margin:0 auto 22px }
.cards{display:grid; gap:18px; grid-template-columns: repeat(3, 1fr)}
.service-card{
  background:#fff;
  border-radius: 18px;
  border:1px solid rgba(17,24,39,.08);
  box-shadow: 0 18px 45px rgba(17,24,39,.10);
  padding:18px;
}
.service-card.featured{
  box-shadow: 0 25px 60px rgba(17,24,39,.16);
  border:1px solid rgba(244,194,28,.55);
  transform: translateY(-6px);
}
.icon{
  width:34px; height:34px;
  border-radius: 12px;
  background: rgba(244,194,28,.22);
  border:1px solid rgba(244,194,28,.55);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
  font-weight:800;
  color: rgba(17,24,39,.85);
}
.card-footer{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(17,24,39,.08);
  display:flex;
  justify-content:flex-start;
}

/* =========================
   GENERIC GRIDS (used on Services + other pages)
========================= */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.card{background:#fff; border:1px solid rgba(17,24,39,.08); border-radius:18px; box-shadow:0 12px 34px rgba(17,24,39,.06);}
.pad{padding:18px;}
.item{min-width:0;}

/* placeholder */
.placeholder{
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.08);
  background: linear-gradient(180deg, rgba(246,247,249,.9), #fff);
  box-shadow: 0 12px 34px rgba(17,24,39,.06);
  min-height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  color: rgba(17,24,39,.60);
  font-size: 13px;
}

/* footer */
.footer{
  padding:40px 0;
  background:#fff;
  border-top:1px solid rgba(17,24,39,.08);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
}
hr.sep{border:none; border-top:1px solid rgba(17,24,39,.08); margin:18px 0}

/* =========================
   MODAL (Quote)
========================= */
.modal{
  position:fixed;
  inset:0;
  z-index:3000;
  display:none;
}
.modal.is-open{display:block;}

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(17,24,39,.60);
  backdrop-filter: blur(2px);
}

.modal__panel{
  position:relative;
  width: min(720px, calc(100% - 28px));
  margin: 8vh auto;
  background:#fff;
  border-radius: 18px;
  box-shadow: var(--shadow2);
  border:1px solid rgba(17,24,39,.10);
  overflow:hidden;
}

.modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px 12px;
  border-bottom:1px solid rgba(17,24,39,.08);
}
.modal__head h3{
  margin:0;
  font-size:22px;
  letter-spacing:-.01em;
}
.modal__x{
  height:40px; width:40px;
  border-radius: 12px;
  border:1px solid rgba(17,24,39,.12);
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.modal__x:hover{background: rgba(17,24,39,.04);}

.modal__form{
  padding:16px 18px 18px;
}

.modal__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}

.modal input,
.modal textarea{
  width:100%;
  border-radius: 12px;
  border:1px solid var(--fieldLine);
  background: var(--field);
  padding:12px 12px;
  font: inherit;
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.modal textarea{
  min-height: 120px;
  resize: vertical;
}

.modal input:focus,
.modal textarea:focus{
  outline:none;
  border-color: var(--fieldFocus);
  box-shadow: 0 0 0 4px rgba(244,194,28,.22);
}

.modal__actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   ABOUT PAGE
========================= */
.about-banner{
  background:#fff;
  padding: 18px 0 0;
}
.about-banner img{
  width:100%;
  max-width: var(--max);
  margin: 0 auto;
  display:block;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 14px 40px rgba(17,24,39,.08);
}

.about-section{padding-top: 32px;}

.about-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items:start;
}

.about-h1{
  margin: 6px 0 10px;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.about-lead{
  margin: 0 0 14px;
  color: rgba(17,24,39,.76);
  max-width: 65ch;
}

.about-meta{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.meta-card{
  background:#fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(17,24,39,.06);
}
.meta-label{
  display:block;
  font-size: 11px;
  color: rgba(17,24,39,.55);
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-bottom: 4px;
}
.meta-value{
  display:block;
  font-weight: 800;
  font-size: 13px;
  color: rgba(17,24,39,.92);
}

/* Vision/Mission cards */
.vm-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.vm-card{
  background:#fff;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 16px;
  padding: 12px 12px 10px;
  box-shadow: 0 12px 34px rgba(17,24,39,.08);
}
.vm-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  background: rgba(244,194,28,.16);
  border: 1px solid rgba(244,194,28,.35);
  color: rgba(17,24,39,.85);
  margin-bottom: 8px;
}
.vm-card p{margin: 0; color: rgba(17,24,39,.80);}
.vm-card b{font-weight:800;}

/* What clients can expect */
.expect-card{
  background:#fff;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 34px rgba(17,24,39,.08);
}
.expect-title{
  font-weight: 900;
  margin-bottom: 8px;
  color: rgba(17,24,39,.92);
}
.expect-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(17,24,39,.76);
}
.expect-list li{margin:6px 0;}

/* Values section */
.values-section{
  background: var(--surface2);
  border-top: 1px solid rgba(17,24,39,.06);
}
.values-h2{
  margin: 6px 0 6px;
  font-size: 28px;
  letter-spacing: -.01em;
}
.values-sub{
  margin: 0 0 16px;
  color: rgba(17,24,39,.72);
  max-width: 75ch;
}
.values-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.value-card{
  background:#fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 34px rgba(17,24,39,.08);
}
.value-title{font-weight: 900; margin-bottom: 6px;}
.value-card p{margin: 0; color: rgba(17,24,39,.72);}

.values-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================
   CONTACT PAGE (MATCH YOUR SCREENSHOT)
========================= */
.contact-page{background:#fff;}

/* Banner */
.contact-banner{padding:18px 0 0;}
.contact-banner-img{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 12px 34px rgba(17,24,39,.08);
  background:#e9edf2;
}
.contact-banner-img img{
  width:100%;
  height:170px;
  object-fit:cover;
  display:block;
}

/* Quick actions row */
.contact-quick{padding:14px 0 8px;}
.contact-quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.qa-card{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:14px;
  padding:14px;
  box-shadow:0 10px 30px rgba(17,24,39,.06);
}
.qa-kicker{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:rgba(17,24,39,.55);
  margin-bottom:6px;
}
.qa-title{
  font-weight:900;
  color:rgba(17,24,39,.92);
  margin-bottom:4px;
}
.qa-sub{
  color:rgba(17,24,39,.68);
  font-size:13px;
  margin-bottom:10px;
}
.qa-actions{display:flex; gap:10px; flex-wrap:wrap;}

/* Main grid */
.contact-main{padding:14px 0 78px;}
.contact-main-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:start;
}

/* Form card */
.contact-card{
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 34px rgba(17,24,39,.08);
}
.contact-card-head{
  padding-bottom:12px;
  border-bottom:1px solid rgba(17,24,39,.08);
  margin-bottom:14px;
}
.contact-h1{
  margin:6px 0 6px;
  font-size:36px;
  letter-spacing:-.02em;
  line-height:1.12;
}
.contact-lead{margin:0; color:rgba(17,24,39,.72);}

/* Form */
.contact-form .field{margin-bottom:12px;}
.contact-form label{
  display:block;
  font-weight:800;
  font-size:13px;
  margin-bottom:6px;
  color:rgba(17,24,39,.86);
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(17,24,39,.12);
  background:#fff;
  padding:12px 12px;
  font:inherit;
  color:var(--text);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.contact-form textarea{min-height:160px; resize:vertical;}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--fieldFocus);
  box-shadow:0 0 0 4px rgba(244,194,28,.18);
}

.contact-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.contact-form-actions{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

/* Right text column (clean, no boxes) */
.contact-info{padding-top:26px;}
.contact-info-title{
  margin:0 0 12px;
  font-size:24px;
  letter-spacing:-.01em;
}
.info-block{margin-bottom:12px;}
.info-label{font-weight:900; margin-bottom:4px;}
.info-value{color:rgba(17,24,39,.72); line-height:1.6;}

/* =========================
   SERVICES PAGE (2-COLUMN GRID)
========================= */
.services-page .services-title{
  font-size: 38px;
  margin-top: 8px;
}
.services-page .services-sub{max-width: 85ch;}

.services-layout{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  margin-top: 18px;
  align-items:start;
}
.services-left{display:grid; gap: 16px;}
.services-right{position: sticky; top: 96px; display:grid; gap: 12px;}

.services-block{
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(17,24,39,.06);
  padding: 16px;
}

/* Light internal card style (less “blocky”) */
.cardish{
  background: rgba(246,247,249,.70);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 16px;
  padding: 12px;
}

/* Right column actions */
.services-actions{
  background:#fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(17,24,39,.06);
  padding: 14px;
}
.services-actions-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.action-card{
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(246,247,249,.70);
  padding: 12px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.action-card:hover{transform: translateY(-1px); box-shadow: 0 14px 32px rgba(17,24,39,.10);}

.action-k{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgba(17,24,39,.55);
  margin-bottom: 6px;
}
.action-v{
  font-weight: 900;
  color: rgba(17,24,39,.92);
}
.action-cta{
  background: linear-gradient(135deg, rgba(244,194,28,.18), rgba(255,210,74,.10));
  border-color: rgba(244,194,28,.35);
}
.services-note{margin-top: 10px; color: rgba(17,24,39,.62);}
.services-cta-row{margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .split{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .h1{font-size:42px}

  .about-grid{grid-template-columns:1fr; gap:14px;}
  .about-meta{grid-template-columns:1fr;}
  .vm-row{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:1fr;}
  .about-h1{font-size:34px;}

  .contact-quick-grid{grid-template-columns:1fr;}
  .contact-main-grid{grid-template-columns:1fr;}
  .contact-form-grid{grid-template-columns:1fr;}
  .contact-info{padding-top:0;}

  .services-layout{grid-template-columns: 1fr;}
  .services-right{position: static; top:auto;}
  .grid-2{grid-template-columns: 1fr;}
  .services-actions-grid{grid-template-columns: 1fr;}
}

/* only stack hero on smaller screens */
@media (max-width: 820px){
  .hero-row{grid-template-columns:1fr}
  .hero-right{min-height:320px}
  .hero-left{padding:42px 0}
}

@media (max-width: 720px){
  .nav{display:none}
  .menu-btn{display:inline-flex}

  .brand{min-width:auto}
  .brand-logo{height:24px}
  .brand-text strong{font-size:14px}
  .brand-text small{font-size:11px}

  .nav.open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:absolute;
    left:18px; right:18px;
    top:64px;
    background:#fff;
    border:1px solid rgba(17,24,39,.10);
    border-radius:16px;
    padding:10px;
    box-shadow:0 20px 60px rgba(17,24,39,.12);
  }

  .modal__grid{grid-template-columns:1fr;}
  .modal__panel{margin:6vh auto;}

  .about-banner img{border-radius:14px;}

  /* Don’t over-indent hero copy on mobile */
  :root{ --heroPadL: 18px; }
}

@media (min-width: 1280px){
  :root{ --heroPadL: 64px; }
}