/* Base */
:root{
  --bg: #fff7ee;
  --bg-2:#f9efe3;
  --text:#171717;
  --muted:#6b6b6b;
  --brand:#f5a524;
  --brand-600:#d58405;
  --dark:#141414;
  --glass:#232323;
  --card:#1b1b1b;
  --ring: rgba(245,165,36,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block}

/* Containers and utilities */
.container{width:min(1120px,92vw);margin-inline:auto}
.h1{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.05;margin:0 0 .6rem}
.section-title{
  font-size:clamp(1.8rem,3.2vw,2.6rem);
  line-height:1.1; margin:0 0 1.25rem;
}
.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--brand-600);font-weight:700}
.subhead{max-width:58ch;color:#2b2b2b}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 1.1rem;border:1px solid #e7e0d6;border-radius:.9rem;
  font-weight:600;text-decoration:none;color:var(--text);background:#fff;
  transition:all .2s ease; box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--brand);border-color:var(--brand);color:#19160f}
.btn--sm{padding:.55rem .8rem;border-radius:.6rem;font-size:.92rem}

.link{color:#f5c26a;text-decoration:none;font-weight:600}
.link:hover{opacity:.9}

.muted{color:var(--muted)}
.grid-3{display:grid;gap:2rem;grid-template-columns:1.15fr .9fr 1fr;align-items:start}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);
  backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid #eee;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 0}
.logo{font-weight:900;font-size:1.25rem;letter-spacing:.3px;color:#111;text-decoration:none}
.logo span{color:var(--brand)}
.logo--light{color:#fff}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:#222;text-decoration:none;padding:.5rem .6rem;border-radius:.6rem}
.nav a:hover{background:#f1eadf}
.burger{display:none;background:none;border:0;padding:.2rem .3rem}
.burger span{display:block;width:24px;height:2px;background:#111;margin:6px 0;border-radius:2px}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#1e1e1e, #0f0f0f)}
.hero__media{
  position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65)),
  url('images/Globe_homepage.jpg') center/cover no-repeat;
  opacity:.9;
}

.hero__content{position:relative;padding:7.5rem 0 9rem;color:#fff}
.hero h1{font-size:clamp(2.3rem,5vw,4.2rem);margin:.4rem 0 1rem}
.hero .subhead{color:#eaeaea;max-width:62ch}
.curve{display:none;width:100%;height:80px;color:var(--bg);fill:var(--bg)}

/* Intro */
.intro{background:var(--bg);margin-top:-1px;padding:2.5rem 0 2rem}
.intro__text p{max-width:52ch}
.intro__image{position:relative;border-radius:1.2rem;overflow:hidden}
.card--media img{height:100%;width:100%;object-fit:cover}
.media-grad{position:absolute;inset:0;background:linear-gradient(180deg,#f7a41a, #121212);opacity:.9}
.intro__bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.25rem}
.bullet{display:grid;grid-template-columns:56px 1fr;align-items:start;gap:1rem;padding:1rem;border-radius:1rem;background:#fff;border:1px solid #eee}
.bullet h3{margin:.1rem 0 .2rem}

/* Icon system */
.i{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#ffe9c4;border:1px solid #f1d59f}
.i:before{content:"";display:block;width:22px;height:22px;background:conic-gradient(from 0,#111,#111)}
.i-helmet:before{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a8 8 0 0 0-8 8v3h2v-2a6 6 0 1 1 12 0v2h2v-3a8 8 0 0 0-8-8Zm-7 14h14a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3Z"/></svg>') center/contain no-repeat}
.i-map:before{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20.5 3.5 15 6l-6-2.5L3.5 5v15L9 17l6 2.5L20.5 19v-15ZM9 6.75l6 2.5v8l-6-2.5v-8Z"/></svg>') center/contain no-repeat}
.i-ai:before{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 7h6v10H9V7Zm-4 4h2v2H5v-2Zm12 0h2v2h-2v-2ZM11 3h2v2h-2V3Zm0 16h2v2h-2v-2Z"/></svg>') center/contain no-repeat}
.i-radar:before{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a10 10 0 1 0 10 10h-2A8 8 0 1 1 12 4v2a6 6 0 1 0 6 6h-2a4 4 0 1 1-4-4V2Z"/></svg>') center/contain no-repeat}
.i-target:before{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M11 2h2v3a7 7 0 1 1-7 7H3v-2h3a7 7 0 0 1 5-5V2Zm1 7a3 3 0 1 0 0 6a3 3 0 0 0 0-6Z"/></svg>') center/contain no-repeat}

/* Cards */
.cards{background:linear-gradient(180deg,#151515 0%, #0f0f0f 100%);padding:3rem 0}
.cards .section-title{color:#fff;margin-bottom:1.4rem}
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.card{border-radius:1.2rem;padding:1.2rem;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));color:#eaeaea;position:relative}
.card--glass{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 30px rgba(0,0,0,.25)}
.card--accent{outline:2px solid var(--brand);outline-offset:-2px}
.card__icon{margin-bottom:.6rem}
.card h3{margin:.2rem 0 .3rem}
.card p{color:#d6d6d6}
.card .link{display:inline-block;margin-top:.6rem}

/* Split section */
.split{display:grid;grid-template-columns:1.2fr 1fr;min-height:540px}
.split__media{position:relative;background:var(--bg-2)}
.split__media img{height:100%;width:100%;object-fit:cover}
.split__content{padding:3rem;display:flex;flex-direction:column;gap:1rem;background:var(--bg)}
.accordion{border:1px solid #eee;border-radius:1rem;overflow:hidden;background:#fff}
.acc-btn{
  width:100%;text-align:left;padding:1rem 1.1rem;border:0;background:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;cursor:pointer
}
.acc-panel{padding:0 1.1rem 1rem;display:none;color:#444}
.acc-panel--open{display:block}
.acc-icon{font-weight:900}
.pill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
.pill{display:flex;align-items:center;gap:.6rem;border:1px solid #eee;background:#fff;border-radius:.9rem;padding:.75rem 1rem}
.pill--accent{background:rgba(245,165,36,.15);border-color:#f8d89c}

/* Trust */
.trust{background:var(--bg);padding:3rem 0}
.trust-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
.trust-card{background:#fff;border:1px solid #eee;border-radius:1.2rem;padding:1.1rem}
.trust-card h3{margin:.2rem 0 .4rem}
.trust-card p{color:#414141;max-width:62ch}
.trust-card img{margin-top:1rem;border-radius:.8rem}
.cta-row{margin-top:1.2rem}

/* Footer */
.site-footer{
  background:radial-gradient(1200px 300px at 50% -50%,rgba(245,165,36,.25),transparent 60%), #0f0f0f;
  color:#d6d6d6;margin-top:2rem
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.2rem;padding:2rem 0}
.site-footer h4{margin:.2rem 0 .6rem;color:#fff}
.list{list-style:none;margin:0;padding:0}
.list li{margin:.25rem 0}
.list a{color:#f5c26a;text-decoration:none}
.copy{border-top:1px solid rgba(255,255,255,.08);padding:1rem 0;text-align:center;color:#a9a9a9}

/* Responsive */
@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:block}
}
@media (max-width: 560px){
  .card-grid{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
}

/* Mobile menu */
.nav.open{display:flex;flex-direction:column;position:absolute;inset:60px 0 auto 0;background:#fff;border-bottom:1px solid #eee;padding:1rem;gap:.4rem}
.nav.open a{padding:.8rem;border-radius:.7rem}


/* --- Services page layout --- */
.hero--flat .curve{display:none} /* hide the wavy divider on services */

.svc-wrap{background:var(--bg)}
.svc{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items:center;
  padding: 2.5rem 0;
}
.svc + .svc{border-top:1px solid #eee}
.svc__media img{
  width:100%;height:100%;object-fit:cover;border-radius:1rem;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.svc__content h2{margin:.25rem 0 .6rem}
.svc__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0 1.1rem;
}
.check{list-style:none;padding-left:0;margin:.5rem 0}
.check li{padding-left:1.2rem;position:relative;margin:.25rem 0}
.check li::before{
  content:"✔"; position:absolute; left:0; top:.05rem; font-weight:800; color:var(--brand-600);
}

/* reverse */
.svc--rev{grid-template-columns:1fr 1.1fr}
.svc--rev .svc__media{order:2}
.svc--rev .svc__content{order:1}

/* services quick nav */
.svc-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.svc-nav .pill{background:#fff}

/* responsive */
@media (max-width: 980px){
  .svc, .svc--rev{grid-template-columns:1fr}
  .svc__media{order:1}
  .svc__content{order:2}
  .svc__grid{grid-template-columns:1fr}
}

/* Quick Nav (services) */
.svc-nav-wrap {
  background: var(--bg);
  padding: 1.5rem 0;
  border-bottom: 1px solid #eee;
}
.svc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  color: #222;
  font-weight: 600;
  text-decoration: none;
  padding: .8rem 1.2rem;
  border-radius: 999px;
  border: 1px solid #e7e0d6;
  transition: all .2s ease;
}
.pill-link .i {
  background: #ffe9c4;
  border: 1px solid #f1d59f;
}
.pill-link:hover {
  background: var(--brand);
  color: #19160f;
  border-color: var(--brand);
}
.pill-link:hover .i {
  background: #fff2db;
}

/* Smooth scroll + anchor offset so content isn't hidden behind the sticky header */
html { scroll-behavior: smooth; }
:root { --header-h: 72px; }           /* adjust if your header height changes */
.svc[id], section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

/* Projects */
.projects{padding:2.2rem 0}
.proj-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.proj-card{
  background:#fff;border:1px solid #eee;border-radius:1.1rem;overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.proj-card img{width:100%;height:220px;object-fit:cover}
.proj-body{padding:1rem}
.proj-body h3{margin:.2rem 0 .35rem}
.tags{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:.6rem 0 0;padding:0}
.tags li{font-size:.85rem;background:#f7f3ec;border:1px solid #eee;border-radius:.6rem;padding:.25rem .5rem}

/* project quick nav uses same pills */
.proj-nav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* Anchor offset for case-studies */
#survey, #eo, #ml, #gis, section[id^="cs-"]{scroll-margin-top:80px}

@media (max-width:980px){
  .proj-grid{grid-template-columns:1fr}
  .proj-card img{height:200px}
}

/* Why Us */
.why { padding: 2.2rem 0; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1rem;
}
.why-card {
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem;
}
.why-card h3 { margin:.3rem 0 .4rem; }

/* Process steps */
.why-steps { background: var(--bg-2); padding: 2.2rem 0; }
.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; }
.steps li { background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem; text-align:center; }
.step-dot { width:38px; height:38px; border-radius:999px; display:inline-grid; place-items:center; font-weight:800; background:#ffe9c4; border:1px solid #f1d59f; margin-bottom:.4rem; }

/* Proof points */
.proof { padding: 1.8rem 0; }
.proof-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.proof-item { background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem; text-align:center; }
.proof-item strong { font-size:1.6rem; display:block; }

/* Testimonials */
.testimonials { background: var(--bg); padding: 2.2rem 0; }
.t-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.t-card { background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem; margin:0; }
.t-card p { margin:.2rem 0 .6rem; }
.t-card footer { color: var(--muted); font-size:.95rem; }

/* FAQ container spacing */
.faq { padding: 2.2rem 0; }

/* Responsive */
@media (max-width:980px){
  .why-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .proof-grid{ grid-template-columns:1fr 1fr; }
  .t-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .why-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .proof-grid{ grid-template-columns:1fr; }
}

/* Contact page */
.contact-cards{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem; padding:1.6rem 0;
}
.contact-card{
  display:grid; grid-template-columns:56px 1fr; gap:.8rem;
  align-items:center; background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem;
}
.card-like{background:#fff; border:1px solid #eee; border-radius:1rem; padding:1.1rem}
.contact-wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; padding:1rem 0}

/* Form */
.field{display:flex; flex-direction:column; gap:.35rem}
.field input, .field textarea, .field select{
  width:100%; padding:.8rem .9rem; border:1px solid #e6e1d7; border-radius:.8rem; background:#fff;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring);
}
.field .field-error{color:#b40000; font-size:.9rem; min-height:1.1em}
.field .invalid{border-color:#b40000}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.radios{display:flex; gap:1rem; flex-wrap:wrap}
.checkline{display:flex; align-items:center; gap:.5rem; margin:.4rem 0 1rem}
.form-actions{display:flex; align-items:center; gap:.8rem; margin-top:.6rem}
.form-msg{color:var(--muted)}
.small{font-size:.95rem}

/* Aside */
.contact-aside{display:flex; flex-direction:column; gap:1rem}
.aside-card{background:#fff; border:1px solid #eee; border-radius:1rem; padding:1rem}
.map-card img{width:100%; height:260px; object-fit:cover; border-radius:1rem}

/* Extra icons */
.i-mail:before{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z"/></svg>') center/contain no-repeat}
.i-phone:before{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a2 2 0 0 1-2 2C9.6 22 2 14.4 2 5a2 2 0 0 1 2-2h3.5a1 1 0 0 1 1 1c0 1.3.2 2.5.57 3.6a1 1 0 0 1-.25 1L6.6 10.8Z"/></svg>') center/contain no-repeat}
.i-pin:before{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"/></svg>') center/contain no-repeat}
.i-clock:before{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5h-2v6l5 3 .9-1.45-3.9-2.3V7Z"/></svg>') center/contain no-repeat}
.i-send:before{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M2 21 23 12 2 3v7l15 2-15 2v7Z"/></svg>') center/contain no-repeat}

/* Responsive */
@media (max-width:980px){
  .contact-cards{grid-template-columns:1fr 1fr}
  .contact-wrap{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .contact-cards{grid-template-columns:1fr}
}

/* Contact form tweaks */
.contact-form .btn{
  padding: .65rem 1rem;      /* smaller button */
  font-size: .95rem;
  border-radius: .6rem;
}

/* Radios: text on the right, neat chips */
.radios{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
}
.radios label{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; border:1px solid #e7e0d6; border-radius:999px;
  padding:.45rem .75rem; cursor:pointer;
}
.radios input{ margin:0; }

/* Optional: highlight selected (supported in modern browsers) */
.radios label:has(input:checked){
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}

/* --- Radio chips: keep text on one line and widen slightly --- */
.radios {
  gap: .7rem;
}

.radios label{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem 1rem;     /* a bit wider */
  border: 1px solid #e7e0d6;
  border-radius: 999px;
  background: #fff;
  white-space: nowrap;      /* <-- prevents "1 month" from breaking */
  line-height: 1.1;         /* keeps height tidy */
}

/* Optional: if you want guaranteed equal width chips, uncomment:
.radios label { min-width: 8.5rem; justify-content: center; }
*/
/* Header logo with image */
.logo{
  display: inline-flex;
  align-items: center;
  gap: .55rem;              /* space between logo and text */
}
.logo img{
  width: 28px;              /* adjust if you want bigger/smaller */
  height: 28px;
  object-fit: contain;
  display: block;
}

/* Footer logo image sizing + make it white on the dark footer */
.logo--light {
  color: #fff;
}
.logo--light img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* use if your logo is colored */
}

/* Header sizing for consistency (already added, shown here for reference) */
.logo{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.logo img{ width:28px; height:28px; object-fit:contain; display:block; }

/* Intro: 2-column version when the image is removed */
.intro--twocol{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items:start;
}

/* Make the bullets look a touch more “card-like” in this layout */
.intro--twocol .intro__bullets .bullet{
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

@media (max-width:980px){
  .intro--twocol{ grid-template-columns:1fr; }
}

/* ==== New Intro / Services Section ==== */
.intro--services{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: start;
  padding: 3rem 0;
}

.intro__left{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.intro__left p{
  max-width: 52ch;
  font-size: 1.05rem;
  color: #333;
}
.intro__left .btn{
  margin-top: .6rem;
}

.intro__right{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.svc-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 1rem;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.svc-card h3{
  margin: 0;
  font-size: 1.25rem;
}
.svc-card p{
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
}

/* Responsive tweaks */
@media (max-width: 980px){
  .intro--services{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .intro__right{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px){
  .intro__right{
    grid-template-columns: 1fr;
  }
}


/* ==== Balanced Intro Section ==== */
.intro--grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  padding: 4rem 2rem;          /* padding from site edges */
  max-width: 1280px;           /* keeps layout centered */
  margin: 0 auto;              /* center on wide screens */
}

.intro__left{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.intro__left p{
  max-width: 52ch;
  font-size: 1.05rem;
  color: #333;
}
.intro__left .btn{
  margin-top: .6rem;
  width: fit-content;
}

.intro__right{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.svc-card{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 1rem;
  padding: 1.4rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.svc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.svc-card h3{
  margin: .3rem 0;
  font-size: 1.2rem;
}
.svc-card p{
  color: var(--muted);
  font-size: .95rem;
  margin: 0;
}

/* Responsive */
@media (max-width: 980px){
  .intro--grid{
    grid-template-columns: 1fr;
    padding: 2.5rem 1.2rem;
  }
  .intro__right{
    grid-template-columns: 1fr;
  }
}

/* Match the tall image from your first screenshot */
.svc__media{
  width:100%;
  height: 500px;              /* desktop height (tall like your original) */
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.12);  /* soft, wide shadow like the original */
}

.svc__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 1rem;
}

/* Responsive heights to keep proportions as screen shrinks */
@media (min-width: 1600px){
  .svc__media{ height: 560px; }          /* very wide screens */
}
@media (max-width: 1200px){
  .svc__media{ height: 420px; }
}
@media (max-width: 980px){
  .svc__media{ height: 320px; }
}
@media (max-width: 560px){
  .svc__media{ height: 230px; }
}

/* === Responsive Footer === */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;   /* desktop: 3 columns */
  gap: 1.5rem;
  padding: 2rem 0;
  align-items: start;
}

.site-footer h4 {
  margin: .2rem 0 .6rem;
  color: #fff;
}

.site-footer .list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .list li {
  margin: .35rem 0;
  line-height: 1.5;
  word-break: break-word;  /* prevents email/URL overflow */
}

.copy {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1rem 0;
  text-align: center;
  color: #a9a9a9;
  font-size: .95rem;
}

/* Tablet */
@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;    /* 2 columns */
    gap: 1.25rem;
  }
}

/* Phone */
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;        /* stack to 1 column */
    gap: 1rem;
  }
}

/* === Service Pills: equal width + neat icon alignment === */
@media (max-width: 980px) {
  .svc-nav {
    flex-direction: column;      /* stack pills vertically */
    align-items: stretch;        /* each pill same width */
    gap: 0.8rem;
  }

  .svc-nav .pill-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;                /* space between icon and text */
    width: 100%;                 /* full width */
    padding: 1rem 1.2rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;            /* text aligned nicely */
    justify-content: flex-start; /* icon + text aligned left */
  }

  .svc-nav .pill-link .i {
    flex: 0 0 36px;              /* fixed icon size */
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
  }
}

/* === Services: always show image first on mobile === */
@media (max-width: 980px) {
  .svc,
  .svc--rev {
    grid-template-columns: 1fr !important;  /* collapse into one column */
  }

  .svc__media {
    order: 1 !important;   /* image always first */
  }

  .svc__content {
    order: 2 !important;   /* text always after */
  }
}

/* === Projects quick-nav pills (mobile/tablet) === */
@media (max-width: 980px){
  .proj-nav{
    display: flex;              /* ensure it's flex even if overridden */
    flex-direction: column;     /* stack vertically */
    align-items: stretch;       /* make each pill equal width */
    gap: .8rem;
  }
  .proj-nav .pill-link{
    display: flex;
    align-items: center;
    justify-content: flex-start;/* icon + text aligned neatly */
    gap: .75rem;
    width: 100%;
    padding: 1rem 1.2rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
  }
  .proj-nav .pill-link .i{
    flex: 0 0 36px;             /* uniform icon size */
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
  }
}

/* Optional: center the text+icon inside each pill instead of left-aligning
@media (max-width:980px){
  .proj-nav .pill-link{ justify-content: center; text-align:center; }
}
*/

/* Let grid items shrink so text can wrap */
.contact-card { min-width: 0; }

/* Wrap long emails/URLs inside contact cards */
.contact-card a,
.contact-card p {
  overflow-wrap: anywhere;   /* allows breaks at any point if needed */
  word-break: break-word;    /* older-browser fallback */
}

/* Optional: slightly smaller email text on narrow screens */
@media (max-width: 640px){
  .contact-card a { font-size: .98rem; }
}


/* LinkedIn icon to match your .i-* style */
/* Proper LinkedIn logo icon */
/* LinkedIn icon - black "in" inside beige circle */
.i-linkedin:before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  background:#000; /* black logo */
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19ZM8.339 17V10.339H6.169V17H8.339ZM7.259 9.358C8.002 9.358 8.602 8.758 8.602 8.016C8.602 7.273 8.002 6.673 7.259 6.673C6.517 6.673 5.917 7.273 5.917 8.016C5.917 8.758 6.517 9.358 7.259 9.358ZM18.083 17V13.42C18.083 11.408 16.958 10.358 15.352 10.358C14.244 10.358 13.544 11.002 13.269 11.565H13.239V10.52H11.169V17H13.339V13.765C13.339 12.823 13.489 11.912 14.594 11.912C15.683 11.912 15.698 12.923 15.698 13.823V17H18.083Z"/></svg>') center/contain no-repeat;
}


.contact-card .i.i-linkedin {
  /* background: #0077b5;       LinkedIn brand blue */
  border: none;              /* cleaner look */
}

/* Clock icon for Hours */
.i-clock:before{
  content:"";
  display:block;
  width:22px;
  height:22px;
  background:#000; /* black icon inside beige circle */
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5h-2v6l5 3 .9-1.45-3.9-2.3V7Z"/></svg>') center/contain no-repeat;
}

/* Force the Hours icon to be a clock (not a dot) */
.i.i-clock::before{
  width: 22px;
  height: 22px;
  background: #000;  /* black glyph */
  /* apply mask for all engines */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5h-2v6l5 3 .9-1.45-3.9-2.3V7Z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 5h-2v6l5 3 .9-1.45-3.9-2.3V7Z"/></svg>') center / contain no-repeat;
  /* make sure this beats the base `.i:before` rule */
  content: "";
}