/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:"DM Sans", sans-serif;
  color:#3a3632;
  background:#fff;
  /* prevent horizontal scroll on ALL screens */
  overflow-x:hidden;
  width:100%;
}
img { display:block; width:100%; height:auto; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ─────────────────────────────────────────
   TOKENS
───────────────────────────────────────── */
:root {
  --or:   #e8590c;
  --or2:  rgba(232,89,12,.1);
  --dk:   #1c1917;
  --gy:   #6b6560;
  --mu:   #9c9691;
  --bd:   #e8e4de;
  --bg:   #f9f7f5;
  --wh:   #ffffff;
  --nh:   68px;   /* nav height */
}

/* ─────────────────────────────────────────
   TYPOGRAPHY HELPERS
───────────────────────────────────────── */
h1,h2,h3 {
  font-family:"Playfair Display", serif;
  color:var(--dk); line-height:1.15;
}
.eyebrow {
  font-family:"Space Grotesk", sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--or);
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
.eyebrow::before {
  content:""; display:block;
  width:22px; height:2px;
  background:var(--or); flex-shrink:0;
}
.sec-h {
  font-size:clamp(26px, 4vw, 44px);
  font-weight:700;
}
.sec-h em { font-style:italic; color:var(--or); }
.sec-p {
  font-size:15px; color:var(--gy);
  line-height:1.75; margin-top:12px;
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn {
  display:inline-block;
  padding:13px 26px;
  border-radius:3px;
  font-family:"Space Grotesk", sans-serif;
  font-size:13px; font-weight:600;
  letter-spacing:.3px;
  transition:all .2s;
  white-space:nowrap;
}
.btn-fill { background:var(--or); color:#fff; }
.btn-fill:hover { background:#c94d08; }
.btn-out  { border:1.5px solid var(--bd); color:var(--dk); }
.btn-out:hover { border-color:var(--or); color:var(--or); }

/* ─────────────────────────────────────────
   SECTION WRAPPER
───────────────────────────────────────── */
.sec { padding:80px 6%; }
.sec-lt { background:var(--bg); }
.sec-dk { background:var(--dk); }

/* ─────────────────────────────────────────
   NAVBAR  — mobile-first
───────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nh);
  background:rgba(255,255,255,.97);
  border-bottom:1px solid transparent;
  display:flex; align-items:center;
  justify-content:space-between;
  padding:0 6%;
  transition:border-color .3s, box-shadow .3s;
}
#nav.scrolled { border-color:var(--bd); box-shadow:0 2px 16px rgba(0,0,0,.07); }

/* Logo */
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo img {
  height:42px; width:auto;
  object-fit:contain;
  /* stop img from stretching nav */
  flex-shrink:0;
}
.nav-logo-txt { display:flex; flex-direction:column; }
.nav-logo-txt .b { font-family:"Space Grotesk",sans-serif; font-size:18px; font-weight:700; color:var(--dk); }
.nav-logo-txt .s { font-size:12px; color:var(--mu); letter-spacing:1.5px; text-transform:uppercase; }

/* Desktop links — hidden on mobile by default */
.nav-links {
  display:none;   /* shown via media query */
  align-items:center; gap:28px;
}
.nav-links a {
  font-family:"Space Grotesk",sans-serif;
  font-size:14px; font-weight:500; color:var(--gy);
  transition:color .2s;
}
.nav-links a:hover { color:var(--or); }
.nav-links .ncta {
  background:var(--or); color:#fff;
  padding:8px 18px; border-radius:3px;
  font-size:14px; font-weight:600;
}
.nav-links .ncta:hover { background:#c94d08; color:#fff; }

/* Hamburger */
.ham {
  display:flex; flex-direction:column; gap:5px;
  padding:6px; background:none; border:none;
  cursor:pointer;
}
.ham span {
  display:block; width:22px; height:2px;
  background:var(--dk); border-radius:2px;
  transition:all .3s;
}
.ham.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.ham.open span:nth-child(2) { opacity:0; }
.ham.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile drawer */
#mob {
  display:none; /* toggled via JS class */
  position:fixed; inset:0; top:var(--nh); z-index:800;
  background:#fff;
  flex-direction:column; align-items:center; justify-content:center;
  gap:30px;
}
#mob.open { display:flex; }
#mob a {
  font-family:"Space Grotesk",sans-serif;
  font-size:22px; font-weight:600; color:var(--dk);
}
#mob a:hover { color:var(--or); }
#mob .btn-fill { font-size:15px; padding:14px 36px; }

/* ─────────────────────────────────────────
   HERO
   Strategy: stack vertically on mobile,
   side-by-side on desktop — NO complex grids
───────────────────────────────────────── */
#hero { padding-top:var(--nh); background:var(--bg); }

/* Text block */
.hero-txt {
  padding:52px 6% 40px;
}
.hero-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--or2); border:1px solid rgba(232,89,12,.25);
  border-radius:30px; padding:5px 14px;
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--or);
  margin-bottom:20px;
}
.hero-pill::before {
  content:""; width:6px; height:6px;
  border-radius:50%; background:var(--or);
}
.hero-h1 {
  font-size:clamp(34px, 6vw, 62px);
  font-weight:700; line-height:1.1;
  margin-bottom:16px;
}
.hero-h1 em { font-style:italic; color:var(--or); }
.hero-sub {
  font-size:15px; color:var(--gy);
  line-height:1.75; margin-bottom:32px;
  max-width:480px;
}
.hero-btns {
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:36px;
}
.hero-chips {
  display:flex; flex-wrap:wrap; gap:16px;
}
.chip {
  display:flex; align-items:center; gap:7px;
  font-family:"Space Grotesk",sans-serif;
  font-size:12px; font-weight:500; color:var(--gy);
}
.chip::before {
  content:""; width:7px; height:7px;
  border-radius:50%; background:var(--or); flex-shrink:0;
}

/* Hero image — 56vw tall on mobile, controlled */
.hero-img-wrap {
  width:100%;
  /* Use padding-top trick for reliable aspect ratio */
  position:relative;
  padding-top:56%;   /* 56% of width = 16:9-ish */
  overflow:hidden;
}
.hero-img-wrap img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* Stats bar — 2 cols on mobile, 4 on desktop */
.hero-stats {
  background:var(--dk);
  border-top:3px solid var(--or);
  display:grid;
  grid-template-columns:1fr 1fr;   /* 2 col mobile */
}
.hst {
  padding:18px 12px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.hst:nth-child(2n) { border-right:none; }
.hst-n {
  font-family:"Playfair Display",serif;
  font-size:36px; font-weight:700; color:#fff;line-height: 1.4;margin: -15px 0 0 0;
}
.hst-n em { font-style:normal; color:var(--or); }
.hst-l {
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; font-weight:500; letter-spacing:1.5px;
  text-transform:uppercase; color:rgba(255,255,255,.5);
  margin-top:4px;
}

/* ─────────────────────────────────────────
   TRUST BAR — wraps naturally
───────────────────────────────────────── */
#trust {
  background:var(--wh);
  border-bottom:1px solid var(--bd);
  padding:14px 6%;
}
.trust-inner {
  display:flex; flex-wrap:wrap;
  align-items:center; gap:12px 24px;justify-content: center;
}
.trust-lbl {
  font-family:"Space Grotesk",sans-serif;
  font-size:9px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--mu); white-space:nowrap;
}
.trust-item {
  display:flex; align-items:center; gap:6px;
  font-family:"Space Grotesk",sans-serif;
  font-size:12px; font-weight:500; color:var(--dk);
  white-space:nowrap;
}
.trust-item::before {
  content:"✓"; color:var(--or);
  font-weight:700; font-size:13px;
}

/* ─────────────────────────────────────────
   ABOUT
   Mobile: single column stack
   Desktop: two columns
───────────────────────────────────────── */
.about-layout {
  display:flex; flex-direction:column; gap:40px;
}
/* Image block — uses padding-top ratio trick, no fixed px heights */
.about-main-img {
  width:100%; position:relative;
  padding-top:85%;   /* 3:2 ratio */
  overflow:hidden; border-radius:3px;
}
.about-main-img img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.about-row {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-top:12px;
}
.about-sm-img {
  width:100%; position:relative;
  padding-top:75%; overflow:hidden; border-radius:3px;
}

@media all and (min-width:1400px) {
  .about-main-img {
    padding-top:75%;
  }
  .about-sm-img {
    padding-top:70%;
  }
}
@media all and (min-width:1550px) {
  .about-main-img {
  padding-top:65%;
}
.about-sm-img {
  padding-top:60%;
}
}
@media all and (min-width:1700px) {
  .about-main-img {
    padding-top:50%;
  }
}
.about-sm-img img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.about-badge {
  background:var(--or); color:#fff;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; border-radius:3px;
  padding:16px;
}
.about-badge .n {
  font-family:"Playfair Display",serif;
  font-size:60px; font-weight:800; line-height:1;
}
.about-badge .t {
  font-family:"Space Grotesk",sans-serif;
  font-size:14px; letter-spacing:1.5px;
  text-transform:uppercase; opacity:.9; margin-top:4px;
}
.about-txt {}
.about-txt .sec-h { margin-bottom:24px; }
.about-txt > p { font-size:14px; color:var(--gy); line-height:1.95; margin-bottom:18px; }
.apt-list { display:flex; flex-direction:column; gap:14px; padding:20px 0; }
.apt { display:flex; gap:12px; align-items:flex-start; }
.apt-ic {
  width:40px; height:40px; flex-shrink:0;
  background:var(--or2); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1;
}
.apt h4 {
  font-family:"Space Grotesk",sans-serif;
  font-size:13px; font-weight:600; color:var(--dk); margin-bottom:3px;
}
.apt p { font-size:13px; color:var(--gy); line-height:1.6; }
.creds { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.cr {
  background:var(--bg); border:1px solid var(--bd);
  padding:5px 12px; border-radius:30px;
  font-family:"Space Grotesk",sans-serif;
  font-size:11px; font-weight:500; color:var(--dk);
}


@media all and (max-width:1360px) {
  .about-main-img {
    padding-top:90%;
  }
  .about-sm-img {
    padding-top:80%;
  }
  .about-txt > p {
    margin-bottom: 12px;line-height: 1.65;
  }
  .creds {margin-top: 0px;}
}
@media all and (min-width:961px) and (max-width:1200px) {
  .about-sm-img {
    padding-top:50%;
  }
  .about-row {grid-template-columns: 1fr;}
}
@media all and (max-width:1060px) {
  .about-sm-img {
    padding-top:70%;
  }
}

/* ─────────────────────────────────────────
   SERVICES — 1 col → 2 col → 3 col
───────────────────────────────────────── */
.split-head {
  display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-end;
  gap:16px; margin-bottom:40px;
}
.svcs {
  display:grid;
  grid-template-columns:1fr;  /* mobile: 1 col */
  gap:1px;
  background:var(--bd);
  border:1px solid var(--bd);
  border-radius:3px;
  overflow:hidden;
}
.svc {
  background:var(--wh); padding:28px 24px;
  position:relative; overflow:hidden;
  transition:background .25s;
}
.svc:hover { background:var(--bg); }
.svc::after {
  content:""; position:absolute;
  bottom:0; left:0; right:0; height:2px;
  background:var(--or);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s;
}
.svc:hover::after { transform:scaleX(1); }
.svc-n { font-family:"Space Grotesk",sans-serif; font-size:10px; font-weight:600; letter-spacing:2px; color:var(--mu); margin-bottom:12px; }
.svc-ic { font-size:28px; line-height:1; margin-bottom:12px; }
.svc-title {
  font-family:"Playfair Display",serif;
  font-size:17px; font-weight:600; color:var(--dk); margin-bottom:8px;
}
.svc-desc { font-size:13px; color:var(--gy); line-height:1.7; }
.svc-lk {
  display:inline-flex; align-items:center; gap:4px;
  margin-top:12px; font-family:"Space Grotesk",sans-serif;
  font-size:11px; font-weight:600; color:var(--or);
}

/* ─────────────────────────────────────────
   PROJECTS — 1 col → 2 col → 3 col
───────────────────────────────────────── */
.ptabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:28px; }
.ptab {
  padding:7px 16px; border-radius:30px;
  border:1.5px solid var(--bd);
  font-family:"Space Grotesk",sans-serif;
  font-size:12px; font-weight:500; color:var(--mu);
  transition:all .2s;
}
.ptab.on, .ptab:hover { background:var(--or); border-color:var(--or); color:#fff; }

.pcards {
  display:grid;
  grid-template-columns:1fr;  /* mobile: 1 col */
  gap:20px;
}
.pc {
  background:var(--wh);
  border:1px solid var(--bd); border-radius:3px;
  overflow:hidden;
  transition:box-shadow .3s, transform .3s;
}
.pc:hover { box-shadow:0 8px 32px rgba(0,0,0,.1); transform:translateY(-3px); }

/* Reliable ratio box for project photos */
.pc-img {
  width:100%; position:relative;
  padding-top:60%;   /* ~5:3 ratio */
  overflow:hidden; background:var(--bg);
}
.pc-img img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .5s;
}
.pc:hover .pc-img img { transform:scale(1.06); }
.pc-badge {
  position:absolute; top:10px; right:10px;
  padding:3px 10px; border-radius:30px;
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; font-weight:600;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(4px);
}
.pc-badge.done { color:#2a7a45; }
.pc-badge.wip  { color:var(--or); }
.pc-body { padding:16px 16px 18px; }
.pc-type {
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--or); margin-bottom:5px;
}
.pc-name {
  font-family:"Playfair Display",serif;
  font-size:16px; font-weight:600;
  color:var(--dk); line-height:1.3; margin-bottom:8px;
}
.pc-meta {
  display:flex; flex-wrap:wrap; gap:12px;
}
.pc-meta span {
  font-family:"Space Grotesk",sans-serif;
  font-size:11px; color:var(--mu);
}
.pc-client {
  font-family:"Space Grotesk",sans-serif;
  font-size:12px; color:var(--gy);
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--bd);
}
.pc-client strong { color:var(--dk); }

.pc-disc {font-family:"Space Grotesk",sans-serif;
  font-size:12px; color:var(--gy);
  margin-top:10px; padding-bottom:10px;}
.pc-disc span {font-weight: 600; color: var(--or);}

/* ─────────────────────────────────────────
   PROCESS — 1 col on mobile
───────────────────────────────────────── */
.proc {
  display:grid;
  grid-template-columns:1fr;  /* mobile: 1 col */
  gap:20px;
  margin-top:48px;
}
.ps {
  text-align:center; padding:0 8px;
}
.ps-ring {
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
  font-family:"Space Grotesk",sans-serif;
  font-size:18px; font-weight:700; color:#fff;
  transition:background .25s, border-color .25s;
}
.ps:hover .ps-ring { background:var(--or); border-color:var(--or); }
.ps h4 {
  font-family:"Space Grotesk",sans-serif;
  font-size:13px; font-weight:600; color:#fff;
  margin-bottom:6px;
}
.ps p { font-size:12px; color:rgba(255,255,255,.55); line-height:1.65; }

/* ─────────────────────────────────────────
   WHY US — 1 col → 2 col
───────────────────────────────────────── */
.why-layout {
  display:flex; flex-direction:column; gap:40px;
}
.why-list { display:flex; flex-direction:column; }
.wi {
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 0; border-bottom:1px solid var(--bd);
  transition:padding-left .2s;
}
.wi:first-child { border-top:1px solid var(--bd); }
.wi:hover { padding-left:6px; }
.wi-n {
  font-family:"Playfair Display",serif;
  font-size:28px; font-weight:700;
  color:var(--bd); line-height:1; min-width:44px;
  transition:color .2s;
}
.wi:hover .wi-n { color:var(--or); }
.wi h4 {
  font-family:"Space Grotesk",sans-serif;
  font-size:14px; font-weight:600; color:var(--dk); margin-bottom:4px;
}
.wi p { font-size:13px; color:var(--gy); line-height:1.65; }

/* Stats grid */
.why-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.ws {
  padding:24px 16px; border-radius:3px; text-align:center;
  border:1px solid var(--bd); background:var(--wh);
}
.ws.or { background:var(--or); border-color:var(--or); }
.ws-n {
  font-family:"Playfair Display",serif;
  font-size:38px; font-weight:700; color:var(--dk); line-height:1;
}
.ws.or .ws-n { color:#fff; }
.ws-l {
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--mu); margin-top:4px;
}
.ws.or .ws-l { color:rgba(255,255,255,.8); }
.why-q {
  grid-column:1/3;
  background:var(--dk); padding:24px;
  border-radius:3px; border-left:3px solid var(--or);
}
.why-q p {
  font-family:"Playfair Display",serif; font-style:italic;
  font-size:15px; color:rgba(255,255,255,.82); line-height:1.75;
}
.why-q span {
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--or); display:block; margin-top:10px;
}

/* ─────────────────────────────────────────
   CONTACT — 1 col → 2 col
───────────────────────────────────────── */
.contact-layout {
  display:flex; flex-direction:column; gap:40px;
}
.ci-list { display:flex; flex-direction:column; gap:18px; margin-top:28px; }
.ci {
  display:flex; gap:12px; align-items:flex-start;
}
.ci-ic {
  width:40px; height:40px; flex-shrink:0;
  background:var(--or2); border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1;
}
.ci-lbl {
  font-family:"Space Grotesk",sans-serif;
  font-size:9px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--mu);
  display:block; margin-bottom:3px;
}
.ci a, .ci p {
  font-family:"Space Grotesk",sans-serif;
  font-size:13px; color:var(--dk); display:block; line-height:1.5;
}
.ci a:hover { color:var(--or); }

/* Form */
.fbox {
  background:var(--wh); border:1px solid var(--bd);
  border-radius:3px; padding:32px 28px;
  box-shadow:0 4px 28px rgba(0,0,0,.07);
}
.fbox h3 { font-size:22px; margin-bottom:4px; }
.fbox > p { font-size:14px; color:var(--gy); margin-bottom:24px; }
.fg { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.fg label {
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--mu);
}
.fg input, .fg select, .fg textarea {
  background:var(--bg); border:1.5px solid var(--bd);
  color:var(--dk); padding:11px 13px;
  font-family:"DM Sans",sans-serif; font-size:14px;
  border-radius:3px; outline:none;
  width:100%; max-width:100%;
  transition:border-color .2s, background .2s;
  -webkit-appearance:none; appearance:none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color:var(--or); background:var(--wh);
}
.fg textarea { resize:vertical; min-height:80px; }
.fg select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239c9691' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:32px;
}
.fg select option { background:var(--wh); }
/* 2-col row for paired fields */
.frow { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fsub {
  width:100%; background:var(--or); color:#fff;
  padding:14px; border-radius:3px;
  font-family:"Space Grotesk",sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase;
  transition:background .2s;
}
.fsub:hover { background:#c94d08; }
.fnote {
  font-family:"Space Grotesk",sans-serif;
  font-size:11px; color:var(--mu);
  text-align:center; margin-top:10px;
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
footer {
  background:var(--dk);
  padding:56px 6% 24px;
}
.ft-grid {
  display:grid;
  grid-template-columns:1fr;  /* mobile: 1 col */
  gap:32px;
  margin-bottom:40px;
}
.fb img {
  height:34px; width:auto; object-fit:contain;
  filter:brightness(0) invert(1); opacity:.7;
  margin-bottom:12px;
}
.fb p {
  font-size:13px; color:rgba(255,255,255,.8);
  line-height:1.8; max-width:260px; margin-bottom:18px;
}
.fsocs { display:flex; gap:8px; }
.fsoc {
  width:34px; height:34px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:12px; font-weight:600;
  color:rgba(255,255,255,.4);
  transition:all .2s;
}
.fsoc:hover { background:var(--or); border-color:var(--or); color:#fff; }
.fc h5 {
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:rgba(255,255,255,.3);
  margin-bottom:14px;
}
.fc ul { display:flex; flex-direction:column; gap:9px;padding-left: 0;}
.fc a {
  font-size:13px; color:rgba(255,255,255,1);
  transition:color .2s;transition: all ease-in-out 0.3s;
}
.fc li a:hover {padding-left: 6px;}
.fc a:hover { color:var(--or); }
.ft-bottom {
  display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center;
  gap:12px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
}
.ft-copy {
  font-family:"Space Grotesk",sans-serif;
  font-size:11px; color:rgba(255,255,255,.25);
}
.ft-badges { display:flex; gap:6px; flex-wrap:wrap; }
.fb2 {
  border:1px solid rgba(255,255,255,.12);
  padding:3px 10px; border-radius:30px;
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:rgba(255,255,255,.25);
}

/* ─────────────────────────────────────────
   FLOATING ACTIONS
───────────────────────────────────────── */
.fl-wa {
  position:fixed; bottom:24px; right:24px; z-index:700;
  width:50px; height:50px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; text-decoration:none;
  box-shadow:0 4px 18px rgba(37,211,102,.4);
  transition:transform .2s;
}
.fl-wa:hover { transform:scale(1.1); }
.fl-cta {
  position:fixed; bottom:24px; left:24px; z-index:700;
  background:var(--or); color:#fff;
  padding:11px 18px; border-radius:30px;
  font-family:"Space Grotesk",sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.3px;
  box-shadow:0 4px 18px rgba(232,89,12,.4);
  transition:background .2s, transform .2s;
  white-space:nowrap;
}
.fl-cta:hover { background:#c94d08; transform:translateY(-2px); }

/* ─────────────────────────────────────────
   REVEAL ANIMATION
───────────────────────────────────────── */
.rv { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.rv.in { opacity:1; transform:none; }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }

/* ─────────────────────────────────────────
   RESPONSIVE — progressive enhancement
   We go mobile → tablet → desktop
───────────────────────────────────────── */

/* ── Tablet: 600px+ ── */
@media (min-width:600px) {
  .hero-stats  { grid-template-columns:repeat(4,1fr); }
  .hst:nth-child(2n)  { border-right:1px solid rgba(255,255,255,.1); }
  .hst:nth-child(4)   { border-right:none; }
  .hst { border-bottom:none; }

  .svcs { grid-template-columns:1fr 1fr; }
  .pcards { grid-template-columns:1fr 1fr; }
  .proc { grid-template-columns:1fr 1fr; }
  .ft-grid { grid-template-columns:1fr 1fr; }
}

/* ── Desktop nav: 768px+ ── */
@media (min-width:768px) {
  .nav-links { display:flex; }
  .ham { display:none; }
  #mob { display:none !important; }  /* always hide on desktop */

  .hero-img-wrap { padding-top:44%; }

  .fl-cta { display:flex; } /* show on desktop */
}

/* ── Wide: 960px+ ── */
@media (min-width:960px) {

  /* Hero: side by side */
  /* #hero { display:grid; grid-template-rows:1fr 1fr; } */
  .hero-top {
    display:grid; grid-template-columns:1fr 1fr;
    align-items:center;
    /* make hero fill viewport height minus stats bar */
    min-height:calc(100vh - var(--nh) - 78px);
  }
  .hero-txt { padding:60px 5% 60px 8%; }
  .hero-img-wrap {
    padding-top:0;       /* cancel ratio trick */
    height:100%;         /* fill grid cell */
    min-height:500px;    /* floor */
  }
  .hero-img-wrap img {
    position:absolute;   /* still works because parent has position:relative */
  }
  /* Keep position:relative on wrap */
  .hero-img-wrap { position:relative; }
  .hero-stats { grid-column:1/3; } /* span full width below both cols */

  /* About: side by side */
  .about-layout {
    display:grid; grid-template-columns:1fr 1fr;
    gap:60px; align-items:start;
  }

  /* Services: 3 col */
  .svcs { grid-template-columns:repeat(3,1fr); }

  /* Projects: 3 col */
  .pcards { grid-template-columns:repeat(3,1fr); }

  /* Process: 5 col */
  .proc {
    grid-template-columns:repeat(5,1fr);
    position:relative;
  }
  .proc::before {
    content:""; position:absolute;
    top:32px; left:calc(10% + 32px); right:calc(10% + 32px);
    height:1px; background:rgba(255,255,255,.15);
  }

  /* Why: side by side */
  .why-layout {
    display:grid; grid-template-columns:1fr 1fr;
    gap:64px; align-items:start;
  }

  /* Contact: side by side */
  .contact-layout {
    display:grid; grid-template-columns:1fr 1.1fr;
    gap:56px; align-items:start;
  }

  /* Footer: 4 col */
  .ft-grid { grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; }
}

/* ── Hide floating quote on very small screens ── */
@media (max-width:480px) {
  .fl-cta { display:none; }
  .frow { grid-template-columns:1fr; }
}
/* ═══════════════════════════════════════
   VALUE ADDITIONS SECTION
═══════════════════════════════════════ */

/* Section intro with two-col split */
.va-intro {
  display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:flex-end;
  gap:20px; margin-bottom:52px;
}
.va-intro-left { max-width:520px; }
.va-intro-right {
  max-width:500px;
  font-size:14px; color:var(--gy); line-height:1.75;
}

/* Feature strip — horizontal pill row */
.va-strip {
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:48px;
}
.va-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--or2); border:1px solid rgba(232,89,12,.25);
  border-radius:30px; padding:7px 16px;
  font-family:"Space Grotesk",sans-serif;
  font-size:12px; font-weight:600; color:var(--or);
  white-space:nowrap;
}
.va-pill::before {
  content:""; width:6px; height:6px;
  border-radius:50%; background:var(--or); flex-shrink:0;
}

/* Main cards grid */
.va-grid {
  display:grid;
  grid-template-columns:1fr;      /* mobile: 1 col */
  gap:2px;
  background:var(--bd);
  border:1px solid var(--bd);
  border-radius:4px;
  overflow:hidden;
  margin-bottom:2px;
}

/* Each specialised service card */
.va-card {
  background:var(--wh);
  padding:36px 32px;
  position:relative;
  overflow:hidden;
  transition:background .25s;
  display:flex; flex-direction:column; gap:0;
}
.va-card:hover { background:#fff9f7; }

/* Accent bar on left edge */
.va-card::before {
  content:""; position:absolute;
  left:0; top:0; bottom:0; width:3px;
  background:var(--or);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s;
}
.va-card:hover::before { transform:scaleY(1); }

/* Large background number */
.va-card-bg-num {
  position:absolute; right:20px; bottom:-10px;
  font-family:"Playfair Display",serif;
  font-size:96px; font-weight:700;
  color:rgba(232,89,12,.05);
  line-height:1; pointer-events:none;
  user-select:none;
}

.va-card-head {
  display:flex; align-items:flex-start; gap:18px;
  margin-bottom:16px;
}
.va-card-icon {
  width:52px; height:52px; flex-shrink:0;
  background:var(--or2);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1;
  transition:background .25s;
}
.va-card:hover .va-card-icon { background:var(--or); }
.va-card:hover .va-card-icon .ic-svg { filter:brightness(0) invert(1); }

.va-card-meta {}
.va-card-num {
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--mu); margin-bottom:4px;
}
.va-card-title {
  font-family:"Playfair Display",serif;
  font-size:20px; font-weight:600; color:var(--dk);
  line-height:1.2;
}

.va-card-desc {
  font-size:13px; color:var(--gy); line-height:1.75;
  margin-bottom:20px;
}

/* Sub-points inside card */
.va-points {
  display:flex; flex-direction:column; gap:7px;
  margin-bottom:20px;
}
.va-pt {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:var(--body);
  font-family:"Space Grotesk",sans-serif; font-weight:500;
}
.va-pt::before {
  content:"→"; color:var(--or);
  font-weight:700; flex-shrink:0; margin-top:1px;
}

.va-card-cta {
  display:inline-flex; align-items:center; gap:6px;
  margin-top:auto;
  font-family:"Space Grotesk",sans-serif;
  font-size:12px; font-weight:700; color:var(--or);
  letter-spacing:.3px;
  transition:gap .2s;
}
.va-card-cta:hover { gap:10px; }

/* PMC + Bid Management — wider "hero" cards spanning full row on desktop */
.va-card-wide {
  background:var(--dk);
  padding:40px 36px;
}
.va-card-wide:hover { background:#28231f; }
.va-card-wide .va-card-title { color:#fff; }
.va-card-wide .va-card-desc  { color:rgba(255,255,255,.6); }
.va-card-wide .va-pt         { color:rgba(255,255,255,.75); }
.va-card-wide .va-card-icon  { background:rgba(232,89,12,.2); }
.va-card-wide .va-card-num   { color:rgba(255,255,255,.3); }
.va-card-wide .va-card-bg-num{ color:rgba(255,255,255,.04); }
.va-card-wide::before        { background:var(--or); }
.va-card-wide .va-card-cta   { color:var(--or); }

/* Bottom CTA banner */
.va-cta-banner {
  background:var(--or);
  border-radius:4px;
  padding:36px 40px;
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap:20px;
  margin-top:2px;
}
.va-cta-banner h3 {
  font-family:"Playfair Display",serif;
  font-size:clamp(20px,2.5vw,28px);
  font-weight:700; color:#fff; line-height:1.2;
}
.va-cta-banner p {
  font-size:13px; color:rgba(255,255,255,.8);
  margin-top:6px; max-width:480px;
}
.va-cta-banner .btn-wh {
  background:#fff; color:var(--or);
  padding:13px 28px; border-radius:3px;
  font-family:"Space Grotesk",sans-serif;
  font-size:13px; font-weight:700;
  white-space:nowrap; flex-shrink:0;
  transition:background .2s, transform .2s;
}
.va-cta-banner .btn-wh:hover { background:#f5f5f5; transform:translateY(-2px); }
/* ── Project Modal ── */
.pmod-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10,10,14,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: pmodFadeIn 0.22s ease;
}
.pmod-overlay.open {
  display: flex;
}
@keyframes pmodFadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
.pmod-box {
  background: #fff;
  border-radius: 18px;
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,0.28);
  animation: pmodSlideUp 0.28s cubic-bezier(.22,.68,0,1.2);
}
@keyframes pmodSlideUp {
  from { opacity:0; transform: translateY(40px) scale(0.97); }
  to   { opacity:1; transform: translateY(0)   scale(1); }
}
.pmod-close {
  position: absolute;
  top: 16px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: #f2f2f5;
  color: #333;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s, transform .18s;
}
.pmod-close:hover { background: #e8590c; color: #fff; transform: scale(1.1); }
.pmod-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
}
.pmod-img-col {
  padding: 28px 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pmod-img-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #f0f0f0;
}
.pmod-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pmod-img-wrap .pc-badge {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 30px;
  font-weight: 600;
  letter-spacing: .02em;
}
.pmod-cta {
  display: block;
  text-align: center;
  width: 100%;
  border-radius: 10px;
  padding: 13px 20px;
  font-size: 14px;
}
.pmod-detail-col {
  padding: 36px 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 1px solid #f0f0f0;
}
.pmod-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: #111;
  line-height: 1.25;
  margin: 0;
}
.pmod-meta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f8f8fb;
  border-radius: 10px;
  padding: 14px 16px;
}
.pmod-meta-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
}
.pmod-meta-lbl {
  font-weight: 600;
  color: #888;
  min-width: 110px;
  max-width: 110px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pmod-desc {
  font-size: 14px;
  color: #444;
  line-height: 1.75;
  margin: 0;
}
.pmod-highlights-lbl {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: #e8590c;
  margin-bottom: -6px;
}
.pmod-highlights {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pmod-highlights li {
  font-size: 13.5px;
  color: #333;
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.pmod-highlights li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #e8590c;
  font-weight: 700;
  font-size: 12px;
}

/* Card hover lift */
.pc {
  transition: transform .22s ease, box-shadow .22s ease;
}
.pc:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.13);
}

/* Responsive modal */
@media (max-width: 700px) {
  .pmod-inner {
    grid-template-columns: 1fr;
  }
  .pmod-img-col {
    padding: 22px 20px 12px;
  }
  .pmod-detail-col {
    padding: 0 20px 24px;
    border-left: none;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
  }
  .pmod-box {
    max-height: 95vh;
    border-radius: 14px;
  }
}
/* ── Responsive upgrades ── */
@media (min-width:600px) {
  .va-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width:960px) {
  .va-grid { grid-template-columns:1fr 1fr 1fr; }
  /* Wide cards span all 3 cols */
  .va-card-wide { grid-column:1 / -1; flex-direction:row; gap:48px; }
  .va-card-wide .va-card-head { flex-direction:column; gap:12px; min-width:200px; }
  .va-card-wide .va-card-content { flex:1; }
}