/* =========================================================================
   NEXORA INDUSTRIAL SOLUTIONS — SITE STYLESHEET
   -------------------------------------------------------------------------
   One shared stylesheet for the whole site. Every page (index.html,
   services/*.html, projects/*.html, etc.) should link this same file:
     <link rel="stylesheet" href="/css/style.css">
   (adjust the path depth for pages in subfolders, e.g. "../../css/style.css")

   Design tokens (colors, fonts) are defined once in :root — change a value
   there and it updates everywhere. Section styles are grouped and commented
   below in the order they appear on the homepage; page-specific sections
   (e.g. a future Services listing page) can be appended at the bottom
   under their own "PAGE: ___" comment block.
   ========================================================================= */

:root{
  --ink:#0B0F14;
  --petrol:#00495B;
  --petrol-deep:#022C38;
  --bright:#00D6CF;
  --paper:#FFFFFF;
  --fog:#F4F6F7;
  --line:#E3E7E9;
  --line-dark:rgba(255,255,255,.14);
  --muted:#5C6A70;
  --muted-light:rgba(255,255,255,.62);
  --display:'Manrope', sans-serif;
  --body:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1280px; margin:0 auto; padding:0 32px; }
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:9px; color:var(--petrol);
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--bright); display:inline-block; }
.eyebrow--light{ color:var(--bright); }
.eyebrow--light::before{ background:var(--bright); }
.eyebrow--center{ justify-content:center; }
h1,h2,h3,h4{ font-family:var(--display); margin:0; color:var(--ink); }
section{ position:relative; }

/* photo frames: real <img> first, graceful fallback if the file 404s */
.frame{ position:relative; overflow:hidden; background:linear-gradient(160deg,var(--petrol-deep),var(--ink)); }
.frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame img.err{ display:none; }
img.err{ display:none !important; }

/* ---------- Ruler signature ---------- */
.ruler{ position:absolute; left:0; top:0; bottom:0; width:32px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; z-index:1; }
.ruler span{ display:block; width:10px; height:1px; background:var(--line-dark); }
.ruler--light span{ background:var(--line); }

/* ---------- Preloader ---------- */
html.is-loading, html.is-loading body{ overflow:hidden; height:100%; }
#preloader{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:#000000;
  opacity:1; visibility:visible;
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__spinner{
  position:relative; width:110px; height:110px;
  display:flex; align-items:center; justify-content:center;
}
.preloader__ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px dashed var(--bright);
  animation:preloader-spin 2.2s linear infinite;
}
.preloader__logo{ position:relative; width:52px; height:52px; object-fit:contain; }
@keyframes preloader-spin{ to{ transform:rotate(360deg); } }

/* ---------- Header ---------- */
header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(11,15,20,.03); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:.02em; color:var(--ink); text-decoration:none; }
.logo img{ height:50px; width:auto; }
.logo span{ color:var(--bright); }
.nav__links{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; height:100%; }
.nav__links > li{ position:relative; height:100%; display:flex; align-items:center; }
.nav__links > li > a, .nav__links > li > button.nav__top{
  font-family:var(--body); font-size:17px; font-weight:600; color:var(--ink); text-decoration:none;
  background:none; border:none; cursor:pointer; padding:10px 14px; display:flex; align-items:center; gap:6px;
  transition:color .2s;
}
.nav__links > li:hover > a, .nav__links > li:hover > button.nav__top,
.nav__links > li.open > button.nav__top{ color:var(--petrol); }
.nav__top .chev{ width:9px; height:9px; transition:transform .2s ease; }
.nav__links > li:hover .chev, .nav__links > li.open .chev{ transform:rotate(180deg); }

/* Dropdown panel */
.mega{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  background:#fff; border-radius:6px; box-shadow:0 24px 48px rgba(0,0,0,.28);
  padding:22px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:60;
}
.nav__links > li:hover .mega, .nav__links > li.open .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega--services{ width:760px; display:grid; grid-template-columns:1fr 260px; gap:22px; }
.mega--company{ width:280px; display:flex; flex-direction:column; gap:2px; }
.mega__links{ display:grid; grid-template-columns:1fr 1fr; gap:3px; align-content:start; }
.mega a.mega__item{
  display:flex; align-items:flex-start; gap:12px; padding:11px 12px; border-radius:5px;
  text-decoration:none; color:var(--ink); transition:background .15s;
}
.mega a.mega__item:hover{ background:var(--fog); }
.mega a.mega__item b{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3; }
.mega a.mega__item:hover b{ color:var(--petrol); }
.mega a.mega__item em{ display:block; font-style:normal; font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.4; }
.mega__icon{
  width:34px; height:34px; border-radius:8px; background:var(--fog); color:var(--petrol);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.mega__icon svg{ width:16px; height:16px; }
.mega a.mega__item:hover .mega__icon{ background:var(--ink); color:var(--bright); }
.mega__feature{
  background:var(--ink); border-radius:6px; padding:22px; display:flex; flex-direction:column;
}
.mega__feature h4{ color:#fff; font-size:16px; font-weight:700; margin-bottom:8px; line-height:1.35; }
.mega__feature p{ color:var(--muted-light); font-size:12.5px; line-height:1.6; margin:0; flex:1; }
.mega__feature .btn{ font-size:11px; padding:12px 16px; width:100%; justify-content:center; }
.mega__footer{ grid-column:1 / -1; border-top:1px solid var(--line); margin-top:14px; padding-top:14px; }
.mega__footer a{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--petrol); text-decoration:none; }

.nav__cta{ font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:var(--bright); padding:11px 20px; border-radius:2px; text-decoration:none; transition:background .2s; }
.nav__cta:hover{ background:#fff; }
.nav__toggle{ display:none; background:none; border:none; color:var(--ink); font-size:22px; cursor:pointer; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff; background-color:var(--ink);
  padding:150px 0 80px; min-height:640px; display:flex; align-items:center;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__tint{ position:absolute; inset:0; z-index:1; background:rgba(6,10,14,.58); pointer-events:none; }
.hero > .wrap{ position:relative; z-index:2; width:100%; }
.hero > .ruler{ z-index:2; }
.hero__inner{ max-width:640px; }
.hero__eyebrow{ margin-bottom:22px; }
.hero h1{ max-width: 100%; font-size:56px; line-height:1.08; font-weight:800; letter-spacing:-.01em; margin-bottom:22px; color:#fff; }
.hero h1 em {
  display: inline !important;
  font-style: normal;
  color: var(--bright);
}
.hero h1 .line {
  display: inline-block;
  white-space: nowrap;
}
.hero-line-1 {
  white-space: nowrap;
  display: inline-block;
}
.hero p.lead{ font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.78); max-width:480px; margin:0 0 34px; }
.hero__ctas{ display:flex; align-items:center; gap:28px; margin-bottom:56px; }
.btn{ font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:15px 26px; border-radius:2px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:transform .2s ease, background .2s ease; border:none; cursor:pointer; }
.btn--solid{ background:var(--petrol); color:#fff; }
.btn--solid:hover{ transform:translateY(-2px); background:var(--bright); color:var(--ink); }
.hero .btn--ghost{ color:#fff; border-bottom:1px solid rgba(255,255,255,.3); }
.hero .btn--ghost:hover{ border-color:var(--bright); color:var(--bright); }
.hero__stats{ display:grid; grid-template-columns:repeat(4,auto); gap:40px; border-top:1px solid rgba(255,255,255,.18); padding-top:28px; }
.hero__stat b{ display:block; font-family:var(--display); font-size:26px; font-weight:800; color:var(--bright); }
.hero__stat span{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.hero-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--focal, center 38%); opacity:0; transition:opacity 1s ease; }
/* Homepage hero media: fallback image remains underneath the video on every
   device. The video is allowed on desktop, tablet and mobile and uses cover
   cropping so the same hero composition fills each viewport responsively. */
.hero-video, .hero-video-fallback{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--focal, center 38%); display:block;
}
.hero-video-fallback{ z-index:0; }
.hero-video{ z-index:1; }
@media (prefers-reduced-motion:reduce){
  .hero-video{ display:none !important; }
}
.hero-slide.is-active{ opacity:1; }



/* Hero Image Wrapper Fixes */
.hero-image-wrapper {
  position: relative;
  display: inline-block;
  padding: 12px; /* Pulls the registration marks outside the image area */
}

.hero-image-card {
    position: relative;
    z-index: 2;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.hero-image-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* Container holding the image and marks */
.hero-image-container {
  position: relative;
  display: inline-block;
  margin: 15px; /* Creates space outside the image for the marks */
}
.reg-mark {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 10; /* Ensures marks sit above background, but outside image bounds */
}
/* Top-Left Registration Mark */
.reg-mark-tl {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #00acc1;
  border-left: 2px solid #00acc1;
  pointer-events: none;
}

/* Bottom-Right Registration Mark */
.reg-mark-br {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 12px;
  height: 12px;
  border-bottom: 2px solid #00acc1;
  border-right: 2px solid #00acc1;
  pointer-events: none;
}

/* Technical Corner Registration Marks */
.hero-reg-mark {
    position: absolute;
    z-index: 1;
    font-family: 'Space Mono', monospace, monospace;
    font-size: 11px;
    color: #008080;
    letter-spacing: 1px;
    text-transform: uppercase;
    user-select: none;
    pointer-events: none;
}
.reg-mark.top-left {
  top: 0;
  left: 0;
  border-top: 2.5px solid #00c4cc;
  border-left: 2.5px solid #00c4cc;
}
.hero-reg-mark.top-left {
    top: 0;
    left: 0;
    border-top: 2px solid #008080;
    border-left: 2px solid #008080;
    padding-top: 4px;
    padding-left: 4px;
}
.reg-mark.bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 2.5px solid #00c4cc;
  border-right: 2.5px solid #00c4cc;
}
.hero-image-box {
  position: relative;
  box-shadow: 18px 18px 0px 0px rgba(0, 196, 204, 0.15); /* Adjust shadow offset/color */
}
.hero-image-box img {
  display: block;
  max-width: 100%;
  height: auto;
}

.hero-reg-mark.bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #008080;
    border-right: 2px solid #008080;
    padding-bottom: 4px;
    padding-right: 4px;
}


/* Align Section with Main Container */
.what-we-do-section {
  padding: 80px 0;
  background-color: #fafbfc;
  width: 100%;
}

.what-we-do-section .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Header Typography */
.section-sub-title {
  font-size: 13px;
  font-weight: 700;
  color: #008080;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  color: #0f172a;
  margin: 10px 0;
}

.section-description {
  font-size: 15px;
  color: #64748b;
  max-width: 650px;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* Industry Filter Tabs */
.industry-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.tab-btn {
  padding: 10px 22px;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.tab-btn:hover,
.tab-btn.active {
  background-color: #003333;
  color: #ffffff;
  border-color: #003333;
}

@media (max-width:480px){
  .industry-tabs{ gap:8px; margin-bottom:24px; }
  .tab-btn{ padding:9px 16px; font-size:13px; }
}

/* On phones, a row of 6-8 pill filters wrapping into 3-4 ragged rows eats a
   lot of vertical space before any real content shows. A single
   horizontally-scrollable row (swipe to see more) is more compact and
   reads as a familiar, native-app-style filter bar. Scrollbar is hidden
   since the pills themselves make it obvious this scrolls. */
@media (max-width:640px){
  .industry-tabs{
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
    scrollbar-width: none;
  }
  .industry-tabs::-webkit-scrollbar{ display: none; }
  .tab-btn{ flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
}

/* Slider / Carousel Setup */
.services-slider-wrapper {
  position: relative;
  width: 100%;
  padding: 0 35px; /* Creates room on left/right for full arrow visibility */
  box-sizing: border-box;
}

#servicesCarousel {
  display: flex !important;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* Hide visible scrollbars */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#servicesCarousel::-webkit-scrollbar {
  display: none;
}

/* Cards */
.service-card-item {
  flex: 0 0 calc(33.333% - 14px); /* Displays 3 cards per view on desktop */
  min-width: 290px;
  scroll-snap-align: start;
}

.service-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.service-card-item.is-hidden {
  display: none;
}

.card-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  background-color: #e2e8f0;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-badge {
  font-size: 11px;
  font-weight: 700;
  color: #008080;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.card-body h3 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.card-tags span {
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

.card-body p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
}

.card-link {
  font-size: 12px;
  font-weight: 700;
  color: #003333;
  text-decoration: none;
  letter-spacing: 0.5px;
}

/* Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.slider-arrow:hover {
  background: #00acc1; /* Cyan primary accent */
  color: #ffffff;
  border-color: #00acc1;
}

/* Align left arrow cleanly inside left padding */
.prev-arrow {
  left: 5px;
}

/* Align right arrow cleanly inside right padding */
.next-arrow {
  right: 5px;
}

.view-all-wrapper {
  text-align: center;
  margin-top: 30px;
}

.view-all-btn {
  font-size: 13px;
  font-weight: 700;
  color: #003333;
  text-decoration: none;
  letter-spacing: 1px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .service-card-item { flex: 0 0 calc(33.333% - 14px); }
}
@media (max-width: 768px) {
  .service-card-item { flex: 0 0 calc(50% - 10px); }
  .prev-arrow { left: 0; }
  .next-arrow { right: 0; }
}
@media (max-width: 480px) {
  .service-card-item { flex: 0 0 100%; }
}
/* ---------- About ---------- */
.about{ padding:110px 0; background:var(--paper); }
.about__inner{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
.about__frame{ aspect-ratio:605/624; border-radius:2px; }
.about h2{ font-size:34px; font-weight:800; line-height:1.2; margin:16px 0 20px; }
.about h2 em{ font-style:normal; color:var(--bright); background:var(--ink); padding:0 8px; }
.about p.lead{ font-size:15.5px; line-height:1.75; color:var(--muted); max-width:480px; margin:0 0 32px; }
.about__accordion{ list-style:none; margin:0 0 36px; padding:0; border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; border:none; background:none; cursor:pointer; text-align:left;
  font-family:var(--body); font-size:14.5px; font-weight:500; color:var(--ink);
}
.acc__title{ transition:color .2s; }
.acc__item.is-open .acc__title, .acc__q:hover .acc__title{ color:var(--petrol); }
.acc__n{ font-family:var(--mono); font-size:11.5px; color:var(--muted); flex-shrink:0; margin-left:16px; position:relative; }
.acc__n::after{
  content:"+"; font-family:var(--mono); margin-left:8px; color:var(--petrol); font-size:13px; display:inline-block;
  transition:transform .2s ease;
}
.acc__item.is-open .acc__n::after{ content:"−"; }
.acc__a{
  max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease;
  padding:0 0 0 0;
}
.acc__item.is-open .acc__a{ max-height:160px; padding:0 0 20px; }
.acc__a p{ font-size:13.5px; line-height:1.7; color:var(--muted); margin:0 0 10px; max-width:420px; }
.acc__link{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--petrol); text-decoration:none;
}
.acc__link:hover{ color:var(--ink); }

/* ---------- Services (photo-led) ---------- */
.services{ padding:110px 0; background:#fff; }
.services__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.services h2{ color:var(--ink); font-size:34px; font-weight:800; max-width:620px; line-height:1.25; margin-top:14px; }
.services h2 em{ font-style:normal; color:var(--petrol); }
.services__head p{ font-size:14.5px; color:var(--muted); max-width:320px; margin:0; }
.services__slider{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.services__slider::-webkit-scrollbar{ display:none; height:0; }
.services__grid{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line); width:max-content; min-width:100%; }
.svc{ background:#fff; transition:background .25s, box-shadow .25s; scroll-snap-align:start; width:min(300px, calc(100vw - 80px)); flex-shrink:0; }
.svc:hover{ box-shadow:0 16px 32px rgba(11,15,20,.08); position:relative; z-index:1; }
.svc__frame{ aspect-ratio:4/3; }
.svc__body{ padding:22px 22px 26px; }
.svc__num{ font-family:var(--mono); font-size:11.5px; color:var(--petrol); margin-bottom:12px; display:block; }
.svc h3{ color:var(--ink); font-size:15.5px; font-weight:700; line-height:1.35; margin-bottom:14px; min-height:40px; }
.svc a{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--petrol); text-decoration:none; }

/* ---------- Partner logos strip ---------- */
.partners{ background:var(--fog); padding:44px 0; }
.partners__label{ text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:28px; }
.partners__slider{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.partners__slider::-webkit-scrollbar{ display:none; height:0; }
.partners__row{ display:flex; align-items:center; justify-content:center; gap:56px; width:max-content; min-width:100%; }
.partners__logo{ scroll-snap-align:start; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.partners__logo img{ height:34px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.6; transition:opacity .2s; }
.partners__logo img:hover{ opacity:1; }

/* ---------- Expertise ---------- */
.expertise{ padding:110px 0; background:var(--fog); }
.expertise__head{ max-width:640px; margin-bottom:56px; }
.expertise h2{ font-size:34px; font-weight:800; line-height:1.25; margin:16px 0 18px; }
.expertise h2 em{ font-style:normal; color:var(--bright); background:var(--ink); padding:0 8px; }
.expertise p.lead{ font-size:15px; line-height:1.7; color:var(--muted); }
.xslider{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.xslider::-webkit-scrollbar{ display:none; height:0; }
.xgrid{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line); width:max-content; min-width:100%; }
.xcard{ background:#fff; padding:32px; display:flex; flex-direction:column; scroll-snap-align:start; width:min(340px, calc(100vw - 80px)); flex-shrink:0; }
.xcard__icon{ width:38px; height:38px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.xcard__icon svg{ width:17px; height:17px; color:var(--bright); }
.xcard h3{ font-size:16.5px; font-weight:700; line-height:1.35; margin-bottom:10px; }
.xcard p{ font-size:13.5px; line-height:1.65; color:var(--muted); margin:0 0 20px; flex:1; }
.xcard a{ font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--petrol); text-decoration:none !important; display:inline-flex; align-items:center; gap:7px; width:fit-content; }

/* ---------- Why choose / capability ---------- */
.why{ padding:110px 0; background:#fff; }
.why__inner{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.why__frame{ aspect-ratio:857/578; border-radius:2px; }
.why h2{ font-size:32px; font-weight:800; line-height:1.25; margin:16px 0 18px; }
.why h2 em{ font-style:normal; color:var(--bright); background:var(--ink); padding:0 8px; }
.why p.lead{ font-size:14.5px; line-height:1.7; color:var(--muted); margin:0 0 32px; max-width:460px; }
.why__stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); max-width:460px; }
.why__stat{ background:#fff; padding:22px; }
.why__stat b{ display:block; font-family:var(--display); font-size:30px; font-weight:800; color:var(--petrol); }
.why__stat span{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }

.capability{ background:var(--petrol); color:#fff; padding:56px 0; margin-top:100px; }
.capability__row{ display:grid; grid-template-columns:repeat(4,1fr); }
.cap{ padding:0 32px; border-left:1px solid var(--line-dark); }
.cap:first-child{ border-left:none; padding-left:0; }
.cap b{ display:block; font-family:var(--display); font-size:36px; font-weight:800; color:var(--bright); line-height:1; margin-bottom:10px; }
.cap span{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-light); }

/* ---------- Leadership ---------- */
.leaders{ padding:110px 0; background:#fff; }
.leaders__head{ text-align:center; max-width:560px; margin:0 auto 56px; }
.leaders h2{ font-size:32px; font-weight:800; margin:16px 0 14px; }
.leaders h2 em{ font-style:normal; color:var(--bright); background:var(--ink); padding:0 8px; }
.leaders p{ font-size:14.5px; color:var(--muted); line-height:1.7; }
.lgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:900px; margin:0 auto; }
.lcard{ position:relative; border-radius:2px; overflow:hidden; aspect-ratio:3/3.6; }
.lcard__meta{ position:absolute; left:0; right:0; bottom:0; padding:22px; background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 80%); color:#fff; }
.lcard__meta h4{ font-size:16px; font-weight:700; margin-bottom:3px; }
.lcard__meta span{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--bright); }

/* ---------- Testimonials ---------- */
.testi{ padding:110px 0; background:var(--fog); }
.testi__head{ text-align:center; max-width:560px; margin:0 auto 56px; }
.testi h2{ font-size:32px; font-weight:800; margin:16px 0 0; }
.testi h2 em{ font-style:normal; color:var(--bright); background:var(--ink); padding:0 8px; }
.tslider{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tslider::-webkit-scrollbar{ display:none; height:0; }
.tgrid{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line); width:max-content; min-width:100%; }
.tcard{ background:#fff; padding:30px; display:flex; flex-direction:column; scroll-snap-align:start; width:min(360px, calc(100vw - 80px)); flex-shrink:0; }

/* ---------- Reusable card-slider controls (dots only) ---------- */
.cslider-controls{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:28px; }
.cslider-dots{ display:flex; align-items:center; gap:7px; }
.cslider-dots button{ width:7px; height:7px; border-radius:50%; border:none; background:var(--line); padding:0; cursor:pointer; transition:background .2s ease, width .2s ease; }
.cslider-dots button.is-active{ background:var(--petrol); width:20px; border-radius:4px; }
.cslider-dots--dark button{ background:var(--line-dark); }
.cslider-dots--dark button.is-active{ background:var(--bright); }
.tcard__stars{ color:var(--bright); font-size:13px; letter-spacing:2px; margin-bottom:16px; }
.tcard p{ font-size:14px; line-height:1.65; color:var(--ink); margin:0 0 24px; flex:1; }
.tcard__who{ display:flex; align-items:center; gap:12px; }
.tcard__avatar{ width:42px; height:42px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.tcard__who b{ display:block; font-size:13.5px; font-weight:700; }
.tcard__who span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }

/* ---------- Projects ---------- */
.projects{ padding:110px 0; background:#fff; }
.projects__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.projects h2{ font-size:32px; font-weight:800; margin:16px 0 0; max-width:520px; line-height:1.3; }
.projects h2 em{ font-style:normal; color:var(--bright); background:var(--ink); padding:0 8px; }
.pslider{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pslider::-webkit-scrollbar{ display:none; height:0; }
.pgrid{ display:flex; gap:28px; width:max-content; min-width:100%; }
.pcard{ text-decoration:none; color:var(--ink); scroll-snap-align:start; width:min(340px, calc(100vw - 80px)); flex-shrink:0; }
.pcard__frame{ aspect-ratio:4/3; border-radius:2px; margin-bottom:18px; }
.pcard__cat{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--petrol); margin-bottom:8px; display:block; }
.pcard h3{ font-size:16px; font-weight:700; line-height:1.4; }
.pcard__date{ display:block; margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--muted); }

/* ---------- FAQ ---------- */
.faq{ padding:110px 0; background:var(--fog); }
.faq__inner{ display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; }
.faq h2{ font-size:32px; font-weight:800; line-height:1.3; margin:16px 0 18px; }
.faq h2 em{ font-style:normal; color:var(--bright); background:var(--ink); padding:0 8px; }
.faq p.lead{ font-size:14.5px; color:var(--muted); line-height:1.7; margin:0; }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); padding:24px 0; }
.faq__q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:15.5px; font-weight:700; gap:20px; }
.faq__q span.sym{ font-family:var(--mono); color:var(--petrol); font-size:16px; flex-shrink:0; }
.faq__a{ font-size:14px; line-height:1.7; color:var(--muted); margin-top:14px; display:none; max-width:560px; }
.faq__item.open .faq__a{ display:block; }
.faq__item.open .faq__q span.sym{ color:var(--bright); }

/* ---------- CTA banner ---------- */
.cta{ background:var(--petrol); color:#fff; padding:80px 0; text-align:center; }
.cta .eyebrow{ color:var(--bright); }
.cta .eyebrow::before{ background:#fff; }
.cta h2{ color:#fff; font-size:34px; font-weight:800; max-width:640px; margin:16px auto 30px; line-height:1.3; }
.cta .btn--solid{ background:#fff; color:var(--ink); }
.cta .btn--solid:hover{ background:var(--bright); }

/* ---------- Footer ---------- */
footer{ background:var(--ink); color:var(--muted-light); padding:72px 0 28px; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:56px; border-bottom:1px solid var(--line-dark); }
.foot__brand .logo{ margin-bottom:16px; color:#fff; }
.foot__grid p{ font-size:13.5px; line-height:1.7; max-width:280px; margin:0; }
.foot h5{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:20px; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.foot ul a{ font-size:13.5px; text-decoration:none; color:var(--muted-light); transition:color .2s; }
.foot ul a:hover{ color:var(--bright); }
.foot__locations li{ font-size:13.5px; color:var(--muted-light); }
.foot__hq{ color:var(--bright); font-size:11.5px; margin-left:2px; }
.foot__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; flex-wrap:wrap; gap:12px; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .about__inner,.why__inner,.faq__inner{ grid-template-columns:1fr; }
  .services__grid,.xgrid{ }
  .capability__row{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .cap:nth-child(3){ border-left:none; padding-left:0; }
  .lgrid{ grid-template-columns:1fr; max-width:280px; margin:0 auto; }
  .foot__grid{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .ruler{ display:none; }
  .nav__links > li{ height:auto; width:100%; display:block; }
  .mega{ position:static; transform:none !important; width:100% !important; box-shadow:none; opacity:1; visibility:visible; max-height:0; overflow:hidden; padding:0; transition:max-height .25s ease, padding .25s ease; display:block; }
  .has-mega.open .mega{ max-height:600px; padding:10px 0 10px 14px; }
  .mega--services{ grid-template-columns:1fr; }
  .mega__links{ grid-template-columns:1fr; }
  .mega__feature{ margin-top:10px; }
  .nav__top{ width:100%; justify-content:space-between; }
  .logo img{ height:36px; }
  .hero{ min-height:520px; padding:120px 0 56px; }
  .hero h1{ font-size:42px; }
  .hero__stats{ grid-template-columns:repeat(2,1fr); row-gap:24px; }
}
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .hero{ padding:100px 0 44px; min-height:480px; }
  .hero h1{ font-size:32px; }
  .hero h1 .line{ white-space:normal; }
  .hero__stats{ grid-template-columns:repeat(2,1fr); row-gap:20px; }
  .hero__ctas{ flex-direction:column; align-items:flex-start; gap:18px; }
  .about,.services,.expertise,.leaders,.testi,.projects,.faq,.why{ padding:64px 0; }
  .services__grid,.xgrid{ }
  .capability__row{ grid-template-columns:1fr; row-gap:28px; }
  .cap{ border-left:none; padding-left:0; }
  .foot__grid{ grid-template-columns:1fr; }
  .why__stats{ grid-template-columns:1fr; }
}

/* =========================================================================
   PAGE: Services listing & Service detail pages
   ========================================================================= */

/* ---------- Shared inner-page hero ---------- */
.page-hero{
  --page-hero-img:none;
  --page-hero-overlay:linear-gradient(90deg, rgba(11,15,20,.94) 0%, rgba(11,15,20,.82) 36%, rgba(11,15,20,.46) 66%, rgba(11,15,20,.16) 100%);
  --page-hero-pos:center;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:500px;
  padding:120px 0 54px;
  color:#fff;
  background-color:var(--ink);
  background-image:var(--page-hero-overlay), var(--page-hero-img);
  /* Both layers must cover the hero. Using contain for the photo creates the
     large empty/dark area that appeared on narrow screens. */
  background-size:cover, cover;
  background-position:center, var(--page-hero-pos);
  background-repeat:no-repeat;
}
.page-hero > .wrap{ position:relative; z-index:2; width:100%; }
.page-hero > .ruler{ z-index:2; }
.page-hero .ruler span{ background:var(--line-dark); }
.page-hero__badge{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bright); background:rgba(0,214,207,.1);
  border:1px solid rgba(0,214,207,.3); padding:7px 14px; border-radius:999px; margin-bottom:20px;
}
.page-hero h1{ color:#fff; font-size:42px; font-weight:800; max-width:760px; line-height:1.15; margin:0 0 16px; }
.page-hero h1 em{ font-style:normal; color:var(--bright); }
.page-hero p.lead{ color:var(--muted-light); font-size:15.5px; max-width:600px; margin:0; line-height:1.7; }

@media (max-width:1024px){
  .page-hero{
    --page-hero-overlay:linear-gradient(180deg, rgba(11,15,20,.38) 0%, rgba(11,15,20,.58) 45%, rgba(11,15,20,.91) 100%);
    --page-hero-pos:center;
    min-height:430px;
    padding:108px 0 46px;
  }
}

/* ---------- Services listing page ---------- */
.svc-listing{ padding:80px 0 110px; background:#fff; }
.svc-listing__head{ text-align:center; max-width:640px; margin:0 auto 8px; }
.svc-listing__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
.svc-listing__grid .service-card-item{ width:auto; min-width:0; flex:none; }
.svc-listing__grid .service-card-item{
  border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#fff;
  transition:box-shadow .25s ease, transform .25s ease; display:flex; flex-direction:column;
}
.svc-listing__grid .service-card-item:hover{ box-shadow:0 20px 44px rgba(11,15,20,.1); transform:translateY(-4px); }
.svc-listing__grid .service-card-item.is-hidden{ display:none; }
.svc-listing__empty{ text-align:center; padding:60px 0; color:var(--muted); font-size:14.5px; display:none; }
.svc-listing__empty.show{ display:block; }

@media (max-width:1024px){ .svc-listing__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .svc-listing__grid{ grid-template-columns:1fr; } }

/* ---------- Service detail page ---------- */
.detail{ background:#fff; }
.detail__layout{ display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:start; padding:72px 0 110px; }
.detail__frame{ aspect-ratio:16/9; border-radius:4px; margin-bottom:44px; }
.detail__intro{ font-size:16.5px; line-height:1.8; color:var(--muted); margin:0 0 48px; max-width:680px; }
.detail__main h2{ font-size:24px; font-weight:800; margin-bottom:22px; }
.detail__main h2 em{ font-style:normal; color:var(--petrol); }

.checklist{ list-style:none; margin:0 0 52px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; }
.checklist li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink); line-height:1.55; }
.checklist li svg{ width:18px; height:18px; color:var(--petrol); flex-shrink:0; margin-top:2px; }

.process__list{ list-style:none; margin:0 0 52px; padding:0; counter-reset:step; }
.process__list li{ position:relative; padding:0 0 34px 54px; counter-increment:step; }
.process__list li::before{
  content:counter(step); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%;
  background:var(--ink); color:var(--bright); font-family:var(--mono); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.process__list li::after{ content:""; position:absolute; left:17px; top:36px; bottom:0; width:1px; background:var(--line); }
.process__list li:last-child{ padding-bottom:0; }
.process__list li:last-child::after{ display:none; }
.process__list h4{ font-size:15.5px; font-weight:700; margin:0 0 6px; color:var(--ink); }
.process__list p{ font-size:14px; color:var(--muted); line-height:1.65; margin:0; max-width:520px; }

.benefits{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:8px; }
.benefit{ background:#fff; padding:26px; }
.benefit b{ display:block; font-size:14.5px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.benefit span{ font-size:13px; color:var(--muted); line-height:1.6; }

.detail__sidebar{ position:sticky; top:100px; }
.sidebar-card{ background:var(--fog); border-radius:4px; padding:26px; margin-bottom:20px; }
.sidebar-card h5{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--petrol); margin:0 0 16px; }
.sidebar-nav{ list-style:none; margin:0; padding:0; }
.sidebar-nav li{ border-bottom:1px solid var(--line); }
.sidebar-nav li:last-child{ border-bottom:none; }
.sidebar-nav a{ display:block; padding:12px 0; font-size:13.5px; color:var(--muted); text-decoration:none; transition:color .2s, padding-left .2s; }
.sidebar-nav a:hover{ color:var(--petrol); padding-left:4px; }
.sidebar-nav li.is-current a{ color:var(--petrol); font-weight:700; }
.sidebar-cta{ background:var(--ink); color:#fff; border-radius:4px; padding:26px; }
.sidebar-cta h5{ color:#fff; font-family:var(--display); font-size:16px; font-weight:700; margin:0 0 10px; text-transform:none; letter-spacing:0; }
.sidebar-cta p{ font-size:13px; color:var(--muted-light); line-height:1.65; margin:0 0 18px; }
.sidebar-cta .btn{ width:100%; justify-content:center; }

.related{ padding:0 0 110px; background:#fff; }
.related__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.related h2{ font-size:26px; font-weight:800; margin:0; }
.related h2 em{ font-style:normal; color:var(--petrol); }
.related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.related__grid .service-card-item{
  border:1px solid var(--line); border-radius:4px; overflow:hidden; background:#fff; width:auto; min-width:0; flex:none;
  transition:box-shadow .25s ease, transform .25s ease; display:flex; flex-direction:column;
}
.related__grid .service-card-item:hover{ box-shadow:0 20px 44px rgba(11,15,20,.1); transform:translateY(-4px); }

@media (max-width:1024px){
  .detail__layout{ grid-template-columns:1fr; }
  .detail__sidebar{ position:static; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .related__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .page-hero{ min-height:360px; padding:96px 0 40px; }
  .page-hero h1{ font-size:34px; }
}
@media (max-width:640px){
  .page-hero{ min-height:330px; padding:88px 0 34px; }
  .page-hero h1{ font-size:30px; line-height:1.14; }
  .page-hero__badge{ margin-bottom:14px; }
  .page-hero p.lead{ font-size:14.5px; line-height:1.6; }
  .detail__layout{ padding:56px 0 72px; }
  .checklist{ grid-template-columns:1fr; }
  .benefits{ grid-template-columns:1fr; }
  .detail__sidebar{ grid-template-columns:1fr; }
  .related__grid{ grid-template-columns:1fr; }
}

/* ---------- Expertise page (static grid) ---------- */
.expertise-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:44px;
}
.expertise-grid .xcard{ width:auto; flex-shrink:0; padding:36px 32px; }
.expertise-grid .xcard ul{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:8px; }
.expertise-grid .xcard ul li{ font-size:13px; color:var(--muted); display:flex; align-items:flex-start; gap:8px; line-height:1.5; }
.expertise-grid .xcard ul li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--petrol); flex-shrink:0; margin-top:6px; }
@media (max-width:1024px){ .expertise-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .expertise-grid{ grid-template-columns:1fr; } }

.how-we-work{ padding:0 0 110px; background:#fff; }
.how-we-work__inner{ display:grid; grid-template-columns:.7fr 1.3fr; gap:64px; }
.how-we-work h2{ font-size:30px; font-weight:800; line-height:1.25; margin:16px 0 18px; }
.how-we-work h2 em{ font-style:normal; color:var(--bright); background:var(--ink); padding:0 8px; }
.how-we-work p.lead{ font-size:14.5px; color:var(--muted); line-height:1.7; margin:0; max-width:380px; }

.industries{ padding:0 0 110px; background:var(--fog); padding-top:80px; }
.industries__head{ text-align:center; max-width:560px; margin:0 auto 36px; }
.industries__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:900px; margin:0 auto; }
.industries__row span{
  font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.03em; color:var(--petrol);
  background:#fff; border:1px solid var(--line); padding:10px 20px; border-radius:999px;
}

/* =========================================================================
   PAGE: About / Expertise / Contact / FAQ / Team
   ========================================================================= */

/* ---------- About: mission & vision ---------- */
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:8px 0 64px; }
.mv-card{ background:#fff; padding:40px; min-width:0; }
@media (max-width:640px){
  .mv-grid{ grid-template-columns:1fr; }
  .mv-card{ padding:28px; }
}
.mv-card .icon-badge{ width:44px; height:44px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.mv-card .icon-badge svg{ width:19px; height:19px; color:var(--bright); }
.mv-card h3{ font-size:19px; font-weight:800; margin:0 0 12px; }
.mv-card p{ font-size:14.5px; line-height:1.75; color:var(--muted); margin:0; }

/* ---------- About: values grid (reuses .xcard visuals in a static grid) ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:8px 0 64px; }
.values-grid .xcard{ width:auto; flex-shrink:initial; }
@media (max-width:1024px){ .values-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .values-grid{ grid-template-columns:1fr; } }

.about-leaders__foot{ text-align:center; margin-top:36px; }

/* ---------- Expertise: alternating detail rows ---------- */
.expertise-detail{ padding:24px 0 20px; }
.expertise-row{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:56px 0; border-bottom:1px solid var(--line); scroll-margin-top:100px; }
.expertise-row:last-child{ border-bottom:none; }
.expertise-row--rev .expertise-row__media{ order:2; }
.expertise-row__media .frame{ aspect-ratio:4/3; border-radius:4px; }
.expertise-row__body .icon-badge{ width:44px; height:44px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.expertise-row__body .icon-badge svg{ width:19px; height:19px; color:var(--bright); }
.expertise-row__body h2{ font-size:26px; font-weight:800; margin:0 0 14px; line-height:1.25; }
.expertise-row__body p.lead{ font-size:15px; color:var(--muted); line-height:1.75; margin:0 0 22px; max-width:520px; }
.expertise-row__list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.expertise-row__list li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink); line-height:1.5; }
.expertise-row__list li svg{ width:17px; height:17px; color:var(--petrol); flex-shrink:0; margin-top:2px; }
@media (max-width:1024px){ .expertise-row{ grid-template-columns:1fr; gap:28px; } .expertise-row--rev .expertise-row__media{ order:0; } }

.industries-strip{ background:var(--fog); padding:56px 0; text-align:center; }
.industries-strip h2{ font-size:22px; font-weight:800; margin:0 0 24px; }
.industries-strip__row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.industry-pill{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--petrol); background:#fff; border:1px solid var(--line); padding:10px 18px; border-radius:999px;
}

/* ---------- Contact page ---------- */
.contact{ padding:16px 0 0; background:#fff; }
.contact-layout{ display:grid; grid-template-columns:1fr 400px; gap:56px; align-items:start; padding:56px 0 110px; }
.contact-form-card{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:40px; }
.contact-form-card h2{ font-size:22px; font-weight:800; margin:0 0 8px; }
.contact-form-card > p.form-lead{ font-size:14px; color:var(--muted); margin:0 0 30px; line-height:1.6; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.form-group{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.form-row .form-group{ margin-bottom:0; }
.form-group label{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.form-group label .req{ color:var(--petrol); }
.form-group input, .form-group select, .form-group textarea{
  font-family:var(--body); font-size:14.5px; color:var(--ink); padding:13px 14px; border:1px solid var(--line);
  border-radius:3px; background:var(--fog); outline:none; transition:border-color .2s, background .2s; width:100%;
  appearance:none;
}
.form-group select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6A70' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:14px; padding-right:36px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--petrol); background:#fff; }
.form-group textarea{ resize:vertical; min-height:130px; font-family:var(--body); }
.form-hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.form-submit{ display:flex; align-items:center; gap:18px; margin-top:6px; flex-wrap:wrap; }
.form-submit .btn{ border:none; }
.form-submit .btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }
.form-note{ font-size:12px; color:var(--muted); line-height:1.6; }
.form-status{ font-size:13.5px; padding:13px 16px; border-radius:4px; margin-top:20px; display:none; line-height:1.6; }
.form-status.show{ display:block; }
.form-status.success{ background:rgba(0,214,207,.12); color:var(--petrol-deep); border:1px solid rgba(0,214,207,.35); }
.form-status.error{ background:rgba(217,48,48,.08); color:#a32222; border:1px solid rgba(217,48,48,.25); }

.contact-info{ display:flex; flex-direction:column; gap:20px; }
.info-card{ background:var(--fog); border-radius:6px; padding:26px; }
.info-card h5{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--petrol); margin:0 0 16px; }
.info-row{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.info-row:last-child{ margin-bottom:0; }
.info-row .icon-dot{ width:32px; height:32px; border-radius:8px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-row .icon-dot svg{ width:16px; height:16px; color:var(--petrol); }
.info-row a, .info-row span{ font-size:13.5px; color:var(--ink); line-height:1.6; text-decoration:none; }
.info-row a:hover{ color:var(--petrol); }
.info-row small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.info-map{ border-radius:6px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; }
.info-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.15); }

@media (max-width:1024px){
  .contact-layout{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .contact-form-card{ padding:26px; }
  .form-row{ grid-template-columns:1fr; }
}

/* ---------- FAQ page ---------- */
.faq-page{ padding:24px 0 110px; background:#fff; }
.faq-page__tools{ max-width:760px; margin:0 auto 44px; display:flex; flex-direction:column; gap:20px; align-items:center; }
.faq-search{ position:relative; width:100%; max-width:480px; }
.faq-search input{
  width:100%; padding:14px 44px 14px 20px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--body); font-size:14px; background:var(--fog); outline:none; transition:border-color .2s, background .2s;
}
.faq-search input:focus{ border-color:var(--petrol); background:#fff; }
.faq-search svg{ position:absolute; right:17px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted); pointer-events:none; }
.faq-page__list{ max-width:820px; margin:0 auto; border-top:1px solid var(--line); }
.faq-page__list .faq__item.is-hidden{ display:none; }
.faq-page__list .faq__q{ padding:22px 0; }
.faq-page__cat{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--petrol);
  background:var(--fog); padding:3px 10px; border-radius:999px; flex-shrink:0; margin-right:14px;
}
.faq-page__q-inner{ display:flex; align-items:center; flex:1; gap:14px; }
.faq-page__empty{ text-align:center; padding:60px 0; color:var(--muted); font-size:14.5px; display:none; }
.faq-page__empty.show{ display:block; }

/* ---------- Team page ---------- */
.team-page{ padding:24px 0 110px; background:#fff; }
.dept-section{ margin-bottom:72px; }
.dept-section:last-child{ margin-bottom:0; }
.dept-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:32px; border-bottom:1px solid var(--line); padding-bottom:18px; flex-wrap:wrap; }
.dept-head h2{ font-size:22px; font-weight:800; margin:0; }
.dept-head span{ font-family:var(--mono); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.team-grid .lcard{ }
.lcard-empty{
  position:relative; border-radius:2px; overflow:hidden; aspect-ratio:3/3.6; background:var(--fog);
  border:2px dashed var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--muted); text-align:center; padding:20px;
}
.lcard-empty svg{ width:26px; height:26px; color:var(--muted); }
.lcard-empty b{ font-size:13px; color:var(--muted); font-weight:600; }
.lcard-empty span{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:1024px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .team-grid{ grid-template-columns:1fr; max-width:280px; margin:0 auto; } }

/* =========================================================================
   SIDE DOCK — social links + chat launcher, fixed to the right edge.
   Injected on every page by js/site-sidebar.js.
   ========================================================================= */
.side-dock{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:900; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.side-dock__social{
  display:flex; flex-direction:column; gap:8px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:16px; padding:10px;
  box-shadow:0 8px 24px rgba(2,44,56,.1);
}
.side-dock__icon{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; color:var(--petrol); text-decoration:none; transition:background .2s, color .2s, transform .2s;
}
.side-dock__icon svg{ width:17px; height:17px; }
.side-dock__icon:hover{ background:var(--petrol); color:#fff; transform:translateY(-2px); }
/* Mobile-only "follow us" toggle — fully hidden on desktop/tablet-wide
   screens, where the 5 social icons already show directly with no need
   to collapse them behind a button. (Sized/shown for real inside the
   max-width:1024px media query further down.) */
.side-dock__toggle{ display:none; width:0; height:0; overflow:hidden; border:0; padding:0; }
.side-dock__chat-btn{
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(160deg,var(--petrol),var(--petrol-deep)); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(2,44,56,.32); transition:transform .2s, box-shadow .2s;
  position:relative;
}
.side-dock__chat-btn:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 14px 30px rgba(2,44,56,.4); }
.side-dock__chat-btn svg{ width:22px; height:22px; position:absolute; transition:opacity .15s, transform .15s; }
.side-dock__chat-btn .ico-close{ opacity:0; transform:scale(.6) rotate(-45deg); }
.side-dock__chat-btn .ico-chat{ opacity:1; transform:scale(1) rotate(0); }
.side-dock__chat-btn.is-open .ico-chat{ opacity:0; transform:scale(.6) rotate(45deg); }
.side-dock__chat-btn.is-open .ico-close{ opacity:1; transform:scale(1) rotate(0); }
.side-dock__chat-btn::after{
  content:""; position:absolute; top:2px; right:2px; width:10px; height:10px; border-radius:50%;
  background:var(--bright); border:2px solid var(--paper);
}

/* On phones/tablets the dock used to sit vertically centered on the
   viewport (top:50%) with z-index:900 — well above the header (z-index:50)
   and mega dropdown (z-index:60), so it could float on top of the nav and
   block taps. Below this breakpoint we now:
     1. Anchor the dock to the bottom-right corner (out of the header/nav's
        way entirely, regardless of scroll position).
     2. Keep the dock hidden until the visitor scrolls past the hero, then
        fade it in — it never appears over the header/nav on page load.
     3. Collapse the 5 social icons behind a small "+" toggle button instead
        of showing them all the time, so they don't crowd the screen; a tap
        expands them, a tap elsewhere (or scrolling back above the hero)
        collapses them again. */
@media (max-width:1024px){
  .side-dock{
    top:auto; bottom:20px; right:14px; transform:none; gap:10px; z-index:40;
    flex-direction:column; align-items:flex-end;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
  }
  .side-dock.is-visible{ opacity:1; visibility:visible; pointer-events:auto; }

  .side-dock__social{
    flex-direction:column; align-items:center; gap:8px;
    max-height:0; overflow:hidden; opacity:0; padding:0; margin:0;
    border-width:0; box-shadow:none;
    transition:max-height .25s ease, opacity .2s ease, padding .25s ease;
  }
  .side-dock.is-expanded .side-dock__social{
    max-height:280px; opacity:1; padding:10px; border-width:1px; box-shadow:0 8px 24px rgba(2,44,56,.1);
  }

  .side-dock__toggle{
    width:44px; height:44px; border-radius:50%; cursor:pointer;
    background:#fff; color:var(--petrol); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    box-shadow:0 8px 22px rgba(2,44,56,.16); transition:transform .2s ease, background .2s, color .2s;
  }
  .side-dock__toggle svg{ width:18px; height:18px; transition:transform .2s ease; }
  .side-dock__toggle.is-open{ background:var(--ink); color:#fff; }
  .side-dock__toggle.is-open svg{ transform:rotate(45deg); }
}

/* ---------- Chat panel ---------- */
.chatbot{
  position:fixed; right:18px; bottom:24px; width:340px; max-width:calc(100vw - 36px);
  height:460px; max-height:calc(100vh - 48px);
  background:var(--paper); border-radius:18px; overflow:hidden;
  box-shadow:0 24px 60px rgba(2,44,56,.28); border:1px solid var(--line);
  display:flex; flex-direction:column;
  z-index:901;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.98);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.chatbot.is-open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.chatbot__head{
  background:linear-gradient(160deg,var(--petrol),var(--petrol-deep)); color:#fff;
  padding:16px 18px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.chatbot__head-text{ display:flex; flex-direction:column; gap:2px; }
.chatbot__head-text b{ font-family:var(--display); font-size:15px; }
.chatbot__head-text span{ font-size:11.5px; color:var(--muted-light); }
.chatbot__close{ background:none; border:none; color:#fff; cursor:pointer; opacity:.8; padding:4px; }
.chatbot__close:hover{ opacity:1; }
.chatbot__close svg{ width:18px; height:18px; display:block; }
.chatbot__body{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  background:var(--fog);
}
.chatbot__msg{ display:flex; flex-direction:column; max-width:86%; gap:6px; }
.chatbot__msg--bot{ align-self:flex-start; align-items:flex-start; }
.chatbot__msg--user{ align-self:flex-end; align-items:flex-end; }
.chatbot__bubble{
  font-size:13.5px; line-height:1.5; padding:10px 13px; border-radius:14px;
  background:#fff; color:var(--ink); border:1px solid var(--line);
}
.chatbot__msg--user .chatbot__bubble{ background:var(--petrol); color:#fff; border-color:var(--petrol); }
.chatbot__link{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.03em;
  color:var(--petrol); text-decoration:none; border-bottom:1px solid var(--bright); padding-bottom:1px;
}
.chatbot__link:hover{ color:var(--petrol-deep); }
.chatbot__quick{ display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; }
.chatbot__quick button{
  font-size:12px; font-family:var(--body); padding:7px 12px; border-radius:999px;
  border:1px solid var(--petrol); background:#fff; color:var(--petrol); cursor:pointer; transition:background .2s,color .2s;
}
.chatbot__quick button:hover{ background:var(--petrol); color:#fff; }
.chatbot__form{
  display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff; flex-shrink:0;
}
.chatbot__form input{
  flex:1; border:1px solid var(--line); border-radius:999px; padding:10px 15px; font-size:13px;
  font-family:var(--body); outline:none; background:var(--fog);
}
.chatbot__form input:focus{ border-color:var(--petrol); }
.chatbot__form button{
  width:38px; height:38px; border-radius:50%; border:none; background:var(--petrol); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .2s;
}
.chatbot__form button:hover{ background:var(--petrol-deep); }
.chatbot__form button svg{ width:16px; height:16px; }

@media (max-width:640px){
  .side-dock{ right:10px; gap:10px; }
  .side-dock__social{ padding:8px; gap:6px; }
  .side-dock__icon{ width:30px; height:30px; }
  .side-dock__chat-btn{ width:48px; height:48px; }
  .chatbot{ right:10px; left:10px; width:auto; bottom:14px; height:min(70vh,480px); }
}
/* =========================================================================
   PAGE: Careers — job listing cards, status pills, filter + accordion JD
   ========================================================================= */
.careers-page{ padding:24px 0 110px; background:#fff; }
.careers-page__tools{ margin-bottom:40px; }
.careers-page__note{ display:flex; align-items:center; gap:10px; background:var(--fog); border:1px solid var(--line); border-radius:6px; padding:14px 18px; margin-bottom:36px; font-size:13.5px; color:var(--muted); }
.careers-page__note svg{ width:18px; height:18px; color:var(--petrol); flex-shrink:0; }
.job-list{ display:flex; flex-direction:column; gap:18px; }
.job-card{ border:1px solid var(--line); border-radius:6px; background:#fff; transition:box-shadow .2s ease, border-color .2s ease; }
.job-card:hover{ box-shadow:0 14px 34px rgba(11,15,20,.07); }
.job-card.is-hidden{ display:none; }
.job-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:26px 28px; cursor:pointer; }
.job-card__main{ flex:1; min-width:0; }
.job-card__badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.job-dept{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--petrol); background:rgba(0,73,91,.08); padding:5px 10px; border-radius:20px; }
.job-status{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:6px; }
.job-status::before{ content:""; width:6px; height:6px; border-radius:50%; display:inline-block; }
.job-status--open{ color:#0a7a3d; background:rgba(10,122,61,.1); }
.job-status--open::before{ background:#0a7a3d; }
.job-status--closed{ color:#6b7280; background:rgba(107,114,128,.12); }
.job-status--closed::before{ background:#6b7280; }
.job-status--hold{ color:#9a6a00; background:rgba(184,131,0,.12); }
.job-status--hold::before{ background:#b88300; }
.job-card__main h3{ font-size:18px; font-weight:800; color:var(--ink); margin:0 0 10px; line-height:1.35; }
.job-card__meta{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
.job-card__meta span{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.job-card__meta svg{ width:14px; height:14px; color:var(--petrol); flex-shrink:0; }
.job-card__summary{ font-size:14px; line-height:1.65; color:var(--muted); margin:0; max-width:640px; }
.job-card__toggle{ flex-shrink:0; display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--petrol); background:none; border:1px solid var(--line); border-radius:20px; padding:10px 16px; cursor:pointer; transition:background .2s, color .2s; white-space:nowrap; }
.job-card__toggle:hover{ background:var(--fog); }
.job-card__toggle svg{ width:12px; height:12px; transition:transform .2s ease; }
.job-card.open .job-card__toggle svg{ transform:rotate(180deg); }
.job-card.open .job-card__toggle{ background:var(--ink); color:#fff; border-color:var(--ink); }
.job-card__full{ display:none; border-top:1px solid var(--line); padding:28px; }
.job-card.open .job-card__full{ display:block; }
.job-card__full h4{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); margin:0 0 12px; }
.job-card__full h4:not(:first-child){ margin-top:26px; }
.job-jd-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.job-jd-list li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--muted); line-height:1.6; }
.job-jd-list li svg{ width:15px; height:15px; color:var(--petrol); flex-shrink:0; margin-top:3px; }
.job-card__full p.job-jd-intro{ font-size:14px; line-height:1.7; color:var(--muted); margin:0 0 22px; max-width:680px; }
.job-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.job-card__foot-note{ font-size:12.5px; color:var(--muted); margin:0; }
.job-card__closed-note{ font-size:13px; color:var(--muted); background:var(--fog); border-radius:6px; padding:12px 16px; margin:0; }
.careers-page__empty{ text-align:center; padding:60px 0; color:var(--muted); font-size:14.5px; display:none; }
.careers-page__empty.show{ display:block; }
@media (max-width:640px){
  .job-card__top{ flex-direction:column; align-items:stretch; padding:22px 20px; }
  .job-card__toggle{ align-self:flex-start; }
  .job-card__full{ padding:22px 20px; }
  .job-card__foot{ flex-direction:column; align-items:stretch; }
}

/* =========================================================================
   PAGE: Recent Projects listing — reuses .service-card-item card styling
   ========================================================================= */
.proj-listing{ padding:80px 0 110px; background:#fff; }
.proj-listing__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
.proj-listing__grid .service-card-item{ width:auto; min-width:0; flex:none; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 1px 0 rgba(11,15,20,.02); }
.proj-listing__grid .service-card-item:hover{ box-shadow:0 20px 44px rgba(11,15,20,.1); transform:translateY(-4px); }
.proj-listing__grid .service-card-item.is-hidden{ display:none; }
.proj-meta{ list-style:none; margin:14px 0 18px; padding:14px 0 0; border-top:1px solid var(--line); display:grid; gap:8px; }
.proj-meta li{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--muted); }
.proj-meta li b{ font-weight:600; color:var(--ink); }
.proj-listing__empty{ text-align:center; padding:60px 0; color:var(--muted); font-size:14.5px; display:none; }
.proj-listing__empty.show{ display:block; }

/* =========================================================================
   PAGE: Team — Leadership founder/director profile cards (bio + expertise)
   ========================================================================= */
.lprofile-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.lprofile-card{ border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.lprofile-card__img{ aspect-ratio:4/3; }
.lprofile-card__body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.lprofile-card__body h4{ font-size:17px; font-weight:800; color:var(--ink); margin:0 0 4px; }
.lprofile-card__role{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--petrol); margin-bottom:16px; }
.lprofile-card__bio{ font-size:13.5px; line-height:1.7; color:var(--muted); margin:0 0 18px; flex:1; }
.lprofile-card__exp{ display:flex; align-items:baseline; gap:8px; padding:14px 0; border-top:1px solid var(--line); margin-bottom:16px; }
.lprofile-card__exp b{ font-family:var(--display); font-size:15px; font-weight:800; color:var(--petrol); white-space:nowrap; }
.lprofile-card__exp span{ font-size:12px; color:var(--muted); line-height:1.4; }
.lprofile-card__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.lprofile-card__tags span{ background:var(--fog); color:var(--muted); font-size:11px; padding:5px 10px; border-radius:20px; }
.team-page__foot-link{ text-align:center; margin-top:30px; }
@media (max-width:900px){
  .lprofile-grid{ grid-template-columns:1fr; }
  .proj-listing__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .proj-listing__grid{ grid-template-columns:1fr; }
}

/* =========================================================================
   PAGE: Careers — Apply Now modal (job application form + resume upload)
   ========================================================================= */
.apply-modal-overlay{ position:fixed; inset:0; background:rgba(11,15,20,.6); z-index:200; display:none; align-items:flex-start; justify-content:center; padding:60px 20px; overflow-y:auto; }
.apply-modal-overlay.is-open{ display:flex; }
.apply-modal{ background:#fff; border-radius:8px; width:100%; max-width:640px; padding:36px; position:relative; }
.apply-modal__close{ position:absolute; top:18px; right:18px; background:var(--fog); border:none; border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); }
.apply-modal__close:hover{ color:var(--ink); background:var(--line); }
.apply-modal__close svg{ width:16px; height:16px; }
.apply-modal h2{ font-size:22px; font-weight:800; margin:0 0 4px; padding-right:40px; }
.apply-modal__position{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--petrol); background:rgba(0,73,91,.08); padding:5px 12px; border-radius:20px; margin-bottom:24px; }
.apply-modal .form-group{ margin-bottom:16px; }
.apply-modal .form-row{ margin-bottom:0; }
.file-upload{ position:relative; }
.file-upload input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.file-upload__box{ border:1.5px dashed var(--line); border-radius:6px; padding:18px; display:flex; align-items:center; gap:12px; background:var(--fog); transition:border-color .2s; }
.file-upload__box svg{ width:20px; height:20px; color:var(--petrol); flex-shrink:0; }
.file-upload__box b{ font-size:13.5px; color:var(--ink); display:block; }
.file-upload__box span{ font-size:12px; color:var(--muted); }
.file-upload.has-file .file-upload__box{ border-color:var(--petrol); border-style:solid; }
.apply-modal .form-submit{ margin-top:20px; }
@media (max-width:640px){
  .apply-modal{ padding:26px 22px; }
}

/* =========================================================================
   Utility: hover zoom-in effect for selected images
   Usage: wrap the image in a container with class "img-zoom" (the container
   needs overflow:hidden, which this class already provides — don't add
   overflow:hidden anywhere else on that wrapper or the zoom will spill out).
   Works on a plain <img>, or on an <img> inside a ".frame" card.
   Example:
     <div class="img-zoom">
       <img src="images/services/service-1.jpg" alt="...">
     </div>
   Or on an existing frame card, just add the class alongside "frame":
     <div class="frame pcard__frame img-zoom"> ... </div>
   ========================================================================= */
.img-zoom{ overflow:hidden; display:block; }
.img-zoom img{ transition:transform .5s ease; will-change:transform; }
.img-zoom:hover img{ transform:scale(1.08); }

/* Respect users who've asked their OS/browser to reduce motion */
@media (prefers-reduced-motion:reduce){
  .img-zoom img{ transition:none; }
  .img-zoom:hover img{ transform:none; }
}

/* =========================================================================
   MOBILE VISUAL RHYTHM FIX
   Prevents long, continuous photo blocks on phones/tablets.
   - Homepage hero photograph/video is limited to the upper hero zone.
   - Hero statistics continue on a solid dark background.
   - Large introductory content photos directly below heroes are hidden on
     mobile because the same page already has a strong hero visual.
   ========================================================================= */
@media (max-width:768px){
  /* Homepage: stop the hero image from running behind the entire tall mobile hero. */
  .hero{
    background:var(--ink);
  }
  .hero__bg,
  .hero__tint{
    top:0;
    right:0;
    left:0;
    bottom:auto !important;
    height:500px;
  }
  .hero__bg{
    background:var(--ink);
  }
  .hero-video,
  .hero-video-fallback{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
  .hero-video{
    display:block !important;
  }
  .hero__stats{
    position:relative;
    margin-top:12px;
    padding-top:28px;
    background:var(--ink);
  }

  /* Homepage: avoid a second full-screen photo immediately after the hero. */
  .about__frame{
    display:none;
  }
  .about__inner{
    grid-template-columns:1fr;
    gap:0;
  }

  /* Service detail pages: hero already provides the page visual, so remove the
     large duplicate image that otherwise creates back-to-back photo sections. */
  .detail__frame{
    display:none;
  }
  .detail__intro{
    margin-top:0;
  }
}

@media (max-width:640px){
  .hero__bg,
  .hero__tint{
    height:470px;
  }
}