/* ============================================================
   LIGHTHOUSE · SHARED STYLESHEET
   style.css — applies to all pages
   ============================================================ */

/* ── GOOGLE FONTS (loaded via <link> in each HTML file) ──
   Cormorant Garamond: headings / display
   Barlow: body text
   Barlow Condensed: labels, nav, UI elements
   ── */

/* ────────────────────────────────────────
   1. CSS VARIABLES (design tokens)
   ──────────────────────────────────────── */
:root {
  /* Colours */
  --navy:        #080f1e;
  --navy-2:      #0c1830;
  --navy-3:      #112040;
  --gold:        #c9a84c;
  --gold-bright: #e8c46a;
  --gold-dim:    rgba(201, 168, 76, 0.12);
  --gold-line:   rgba(201, 168, 76, 0.22);
  --white:       #f0f2f5;
  --silver:      #b8c5d4;
  --muted:       #637080;
  --divider:     rgba(255, 255, 255, 0.06);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Barlow', sans-serif;
  --font-ui:      'Barlow Condensed', sans-serif;
}

/* ────────────────────────────────────────
   2. RESET & BASE
   ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
}

/* Subtle grain texture over entire page */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ────────────────────────────────────────
   3. NAVBAR
   ──────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.1rem 0;
  background:var(--navy);
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, padding 0.3s;
}

.navbar.scrolled {
  background: rgba(8, 15, 30, 0.96);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--gold-line);
  padding: 0.7rem 0;
}

.navbar-brand img {
  height: 40px;
  width: auto;
  transition: height 0.3s;
}

.navbar.scrolled .navbar-brand img {
  height: 32px;
}

.navbar-nav .nav-link {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(240, 242, 245, 0.7) !important;
  padding: 0.4rem 1rem !important;
  transition: color 0.2s;
}

.navbar-nav .nav-link:hover {
  color: var(--gold-bright) !important;
}

.dropdown-menu {
  background: var(--navy-2);
  border: 1px solid var(--gold-line);
  border-radius: 3px;
  padding: 0.5rem 0;
  min-width: 240px;
}

.dropdown-item {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--silver);
  padding: 0.7rem 1.25rem;
  transition: background 0.15s, color 0.15s;
}

.dropdown-item:hover {
  background: var(--gold-dim);
  color: var(--gold-bright);
}

/* Contact CTA button in nav */
.nav-cta {
  border: 1px solid var(--gold-line) !important;
  color: var(--gold) !important;
  border-radius: 2px;
  padding: 0.4rem 1.2rem !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}

.nav-cta:hover {
  background: var(--gold) !important;
  color: var(--navy) !important;
  border-color: var(--gold) !important;
}

/* Mobile hamburger */
.navbar-toggler {
  border: 1px solid var(--gold-line);
  padding: 0.3rem 0.6rem;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(201,168,76,0.8)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ────────────────────────────────────────
   3. HERO
   ──────────────────────────────────────── */
   
    .page-hero{min-height:72vh;position:relative;display:flex;align-items:flex-end;padding-bottom:80px;overflow:hidden;background:var(--navy)}

    .ph-glow{position:absolute;top:-30%;right:-10%;width:70vw;height:130%;background:radial-gradient(ellipse at 70% 30%,rgba(201,168,76,.07) 0%,transparent 65%);pointer-events:none}

    .ph-beam{position:absolute;inset:0;background:conic-gradient(from 210deg at 95% 0%,rgba(201,168,76,.1) 0deg,transparent 14deg);pointer-events:none;animation:beam 12s ease-in-out infinite alternate}

    .ph-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,var(--divider) 1px,transparent 1px),linear-gradient(0deg,var(--divider) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse at 30% 60%,black 10%,transparent 70%);opacity:.3}

    .ph-content{position:relative;z-index:2;padding-top:120px}

    .breadcrumb-nav{display:flex;align-items:center;gap:8px;margin-bottom:2.5rem;opacity:0;animation:fadeUp .7s ease forwards .2s}

    .breadcrumb-nav a{font-family:var(--font-ui);font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s}

    .breadcrumb-nav a:hover{color:var(--gold)}

    .bc-sep{color:var(--muted);font-size:.7rem}

    .bc-cur{font-family:var(--font-ui);font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}

    .ph-logo{margin-bottom:2rem;opacity:0;animation:fadeUp .8s ease forwards .35s}

    .ph-logo img{height:68px;width:auto;border-radius:5px}

    .ph-title{font-family:var(--font-display);font-size:clamp(2.6rem,6.5vw,5.5rem);font-weight:700;line-height:.97;letter-spacing:-1.5px;color:var(--white);opacity:0;animation:fadeUp 1s ease forwards .5s}

    .ph-title .accent{font-style:italic;font-weight:700;color:var(--gold);display:block}

    .ph-rule{width:48px;height:1px;background:var(--gold);margin:2rem 0;opacity:0;animation:fadeIn .8s ease forwards .8s}

    .ph-desc{
		font-size:clamp(1rem,1.5vw,1.12rem);
		font-weight:300;
		color:var(--silver);
		line-height:1.8;
		max-width:560px;
		opacity:0;
		animation:fadeUp .9s ease forwards .9s
	}

    .ph-actions{margin-top:2.5rem;display:flex;gap:1.25rem;flex-wrap:wrap;opacity:0;animation:fadeUp .9s ease forwards 1.05s} 

    /* PHILOSOPHY */

    .philosophy{padding:100px 0;background:var(--navy-2);border-top:1px solid var(--divider)}

    .phil-quote{font-family:var(--font-display);font-size:clamp(1.55rem,2.8vw,2.3rem);font-weight:300;font-style:italic;color:var(--white);line-height:1.4;padding-left:2rem;border-left:2px solid var(--gold);margin-bottom:2.5rem}

    .phil-quote strong{font-style:normal;font-weight:700;color:var(--gold)}

    .pillar-list{display:flex;flex-direction:column;gap:1px;background:var(--divider);border:1px solid var(--divider);border-radius:4px;overflow:hidden}

    .pillar-item{background:var(--navy);padding:1.5rem 2rem;display:flex;align-items:flex-start;gap:1.5rem;transition:background .25s}

    .pillar-item:hover{background:var(--navy-3)}

    .p-num{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--gold);opacity:.3;line-height:1;flex-shrink:0;width:2.5rem;transition:opacity .25s}

    .pillar-item:hover .p-num{opacity:.65}

    .p-title{font-family:var(--font-ui);font-size:.82rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--white);margin-bottom:.4rem}

    .p-text{font-size:.88rem;font-weight:300;color:var(--silver);line-height:1.7}

/* SERVICES */
    .services{padding:100px 0;background:var(--navy);border-top:1px solid var(--divider)}

    .svc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--divider);border:1px solid var(--divider);border-radius:4px;overflow:hidden;margin-top:3rem}

    .svc-card{background:var(--navy-2);padding:2.25rem 2rem;position:relative;transition:background .3s}

    .svc-card:hover{background:var(--navy-3)}

    .svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}

    .svc-card:hover::before{transform:scaleX(1)}

    .svc-num{font-family:var(--font-display);font-size:.72rem;color:var(--gold);font-weight:600;letter-spacing:1px;display:block;margin-bottom:.75rem}

    .svc-icon{width:32px;height:32px;border:1px solid var(--gold-line);border-radius:2px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}
    .svc-title{font-family:var(--font-ui);font-size:.88rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--white);margin-bottom:.75rem;line-height:1.3}
    .svc-desc{font-size:.83rem;font-weight:300;color:var(--silver);line-height:1.75}
    .svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:1.25rem}
    .svc-tag{font-family:var(--font-ui);font-size:.55rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);border:1px solid rgba(255,255,255,.07);padding:.2rem .6rem;border-radius:2px}

    /* WHY */
    .why{padding:100px 0;background:var(--navy-2);border-top:1px solid var(--divider)}
    .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
    .why-card{background:var(--navy);border:1px solid var(--divider);border-radius:4px;padding:2rem;display:flex;gap:1.25rem;transition:border-color .3s,background .3s}
    .why-card:hover{border-color:var(--gold-line);background:var(--navy-3)}
    .why-icon{width:40px;height:40px;border:1px solid var(--gold-line);border-radius:2px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
    .why-title{font-family:var(--font-ui);font-size:.82rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--white);margin-bottom:.5rem}
    .why-desc{font-size:.85rem;font-weight:300;color:var(--silver);line-height:1.7}

    /* PROCESS */
    .process{padding:100px 0;background:var(--navy);border-top:1px solid var(--divider)}

    .proc-steps{
		display:grid;
		grid-template-columns:repeat(4,1fr);
		margin-top:3.5rem;
		position:relative}

    .proc-steps::before{content:'';position:absolute;top:28px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line) 20%,var(--gold-line) 80%,transparent)}
    .proc-step{text-align:center;padding:0 1.5rem}
    .proc-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--gold);background:var(--navy);margin:0 auto 1.5rem;position:relative;z-index:1;transition:background .3s}
    .proc-step:hover .proc-dot{background:var(--gold)}
    .proc-num{font-family:var(--font-display);font-size:.68rem;color:var(--gold);font-weight:600;letter-spacing:2px;display:block;margin-bottom:.5rem}
    .proc-title{font-family:var(--font-ui);font-size:.82rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--white);margin-bottom:.5rem}
    .proc-desc{font-size:.8rem;font-weight:300;color:var(--silver);line-height:1.65}

    /* CONTACT */
    .c-section{padding:100px 0;background:var(--navy-2);border-top:1px solid var(--divider)}
    .form-wrap{background:var(--navy);border:1px solid var(--divider);border-radius:4px;padding:3rem}
    .f-label{font-family:var(--font-ui);font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;display:block}
    .f-input{width:100%;background:var(--navy-2);border:1px solid var(--divider);border-radius:2px;padding:.85rem 1rem;color:var(--white);font-family:var(--font-body);font-size:.9rem;font-weight:300;transition:border-color .2s,background .2s;outline:none}
    .f-input:focus{border-color:var(--gold-line);background:var(--navy-3)}
    .f-input::placeholder{color:var(--muted);font-size:.85rem}
    select.f-input option{background:var(--navy-2);color:var(--white)}
    .f-field{margin-bottom:1.5rem}
    .f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
    .f-divider{height:1px;background:var(--divider);margin:2rem 0}
    .f-footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
    .f-note{font-size:.78rem;font-weight:300;color:var(--muted);font-style:italic}
    .form-success{display:none;background:rgba(201,168,76,.08);border:1px solid var(--gold-line);border-radius:3px;padding:2rem;text-align:center}
    .form-success.show{display:block}
    .form-success p{font-family:var(--font-display);font-size:1.2rem;font-style:italic;color:var(--gold)}
    .wa-alt{display:flex;align-items:center;gap:1.25rem;padding:1.75rem 2rem;background:rgba(37,211,102,.06);border:1px solid rgba(37,211,102,.15);border-radius:4px;margin-top:1.5rem}
    .wa-text{font-size:.85rem;font-weight:300;color:var(--silver);line-height:1.5}
    .wa-text strong{color:var(--white);font-weight:500}
    .wa-text a{color:#25D366;font-size:.82rem;text-decoration:none}

    /* RESPONSIVE */
    @media(max-width:991px){.svc-grid{grid-template-columns:1fr 1fr}.why-grid{grid-template-columns:1fr}.proc-steps{grid-template-columns:1fr 1fr;gap:2.5rem}.proc-steps::before{display:none}.f-row{grid-template-columns:1fr}.form-wrap{padding:2rem}}
    @media(max-width:767px){.svc-grid{grid-template-columns:1fr}.proc-steps{grid-template-columns:1fr}.f-footer{flex-direction:column;align-items:flex-start}}
    @media(max-width:575px){.ph-title{letter-spacing:-.5px}.ph-actions{flex-direction:column;align-items:flex-start}}    

    /* ── TECHNOLOGY BRIDGE ── */
    .tech-bridge {
      padding: 90px 0;
      background: var(--navy);
      border-top: 1px solid var(--divider);
    }
    .tech-bridge-card {
      background: var(--navy-2);
      border: 1px solid var(--divider);
      border-radius: 4px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .tech-intro {
      padding: 3.5rem;
      border-right: 1px solid var(--divider);
    }
    .tech-cards { display: grid; grid-template-rows: 1fr 1fr; }
    .tech-card {
      padding: 2.5rem;
      text-decoration: none;
      border-bottom: 1px solid var(--divider);
      display: block;
      position: relative;
      transition: background 0.25s;
    }
    .tech-card:last-child { border-bottom: none; }
    .tech-card:hover { background: var(--navy-3); }
    .tech-card-lbl {
      font-family: var(--font-ui);
      font-size: 0.58rem;
      letter-spacing: 3.5px;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.6rem;
      display: block;
    }
    .tech-card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--white); margin-bottom: 0.45rem; }
    .tech-card-desc { font-size: 0.82rem; font-weight: 300; color: var(--silver); line-height: 1.65; }
    .tech-card-arrow {
      position: absolute;
      bottom: 1.75rem; right: 2rem;
      font-size: 1.1rem;
      color: var(--gold);
      opacity: 0;
      transition: opacity 0.2s, transform 0.2s;
    }
    .tech-card:hover .tech-card-arrow { opacity: 1; transform: translateX(4px); }

    /* ── RESPONSIVE (page-specific) ── */
    @media (max-width: 991px) {
      .hero-lh-mark { display: none; }
      .service-grid { grid-template-columns: 1fr; }
      .tech-bridge-card { grid-template-columns: 1fr; }
      .tech-intro { border-right: none; border-bottom: 1px solid var(--divider); padding: 2.5rem; }
      .stat-row { flex-direction: column; gap: 1.5rem; }
      .stat-item { border-left: none; border-top: 1px solid var(--divider); padding: 1.5rem 0 0; }
      .stat-item:first-child { border-top: none; padding-top: 0; }
      .consulting-cta { flex-direction: column; align-items: flex-start; }
      .consulting-logo-area { flex-direction: column; align-items: flex-start; gap: 1rem; }
      .logo-vline { width: 36px; height: 1px; }
    }
    @media (max-width: 575px) {
      .hero-title { letter-spacing: -1px; }
      .hero-actions { flex-direction: column; align-items: flex-start; }
    } 

/* ────────────────────────────────────────
   4. SHARED SECTION TYPOGRAPHY
   ──────────────────────────────────────── */
.section-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
}

.section-rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 1.25rem 0;
}

.section-rule.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.body-text {
  font-size: 0.96rem;
  font-weight: 300;
  color: var(--silver);
  line-height: 1.85;
}

/* ────────────────────────────────────────
   5. SHARED BUTTONS
   ──────────────────────────────────────── */
.btn-gold {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: 1rem 2.2rem;
  border-radius: 2px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-gold:hover {
  background: var(--gold-bright);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 35px rgba(201, 168, 76, 0.28);
}

.btn-outline-gold {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-line);
  padding: 1rem 2.2rem;
  border-radius: 2px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.btn-outline-gold:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: translateY(-2px);
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1a9e4a;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border-radius: 2px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 2rem;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  width: fit-content;
}

.btn-whatsapp:hover {
  background: #22c05a;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(26, 158, 74, 0.28);
}

/* Ghost text link */
.link-ghost {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s, gap 0.2s;
}

.link-ghost:hover { color: var(--silver); gap: 12px; }
.link-ghost::after { content: '↓'; }

/* ────────────────────────────────────────
   6. CONTACT COMPONENTS
   (shared across index and future pages)
   ──────────────────────────────────────── */
.contact-section {
  padding: 100px 0;
  background: var(--navy-2);
  border-top: 1px solid var(--divider);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.contact-icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-detail a,
.contact-detail span {
  font-size: 0.93rem;
  font-weight: 300;
  color: var(--silver);
  text-decoration: none;
  transition: color 0.2s;
}

.contact-detail a:hover { color: var(--gold); }

.contact-note {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 300;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.contact-note strong {
  font-style: normal;
  color: var(--white);
  font-weight: 600;
}

/* ────────────────────────────────────────
   7. FOOTER
   ──────────────────────────────────────── */
footer {
  background: #040810;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
  padding: 2.5rem 0;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.footer-nav a {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover { color: var(--gold); }

.footer-copy {
  font-size: 0.7rem;
  color: var(--muted);
}

/* ────────────────────────────────────────
   8. ANIMATIONS & SCROLL REVEAL
   ──────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0);  opacity: 0.4; }
  50%       { transform: translateY(8px); opacity: 1; }
}

@keyframes beam {
  from { opacity: 0.8; transform: rotate(-2deg); }
  to   { opacity: 1;   transform: rotate(2deg); }
}

/* Reveal on scroll — add .visible via JS IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.22s; }
.reveal-d3 { transition-delay: 0.34s; }
.reveal-d4 { transition-delay: 0.46s; }

/* ────────────────────────────────────────
   9. SECTOR PILLS  (shared tag component)
   ──────────────────────────────────────── */
.sector-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 1rem;
}

.sector-pill {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--silver);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.9rem;
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.sector-pill:hover,
.sector-pill.hi {
  border-color: var(--gold-line);
  color: var(--gold);
  background: var(--gold-dim);
}

/* ────────────────────────────────────────
   10. LANGUAGE TOGGLE
   ──────────────────────────────────────── */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gold-line);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 0.75rem;
}

.lang-toggle a {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  transition: background 0.2s, color 0.2s;
  border-right: 1px solid var(--gold-line);
}

.lang-toggle a:last-child { border-right: none; }

.lang-toggle a:hover { color: var(--gold); }

.lang-toggle a.active {
  background: var(--gold-dim);
  color: var(--gold);
}

/* ────────────────────────────────────────
   11. CONTACT FORM (consulting pages)
   ──────────────────────────────────────── */
.inquiry-form {
  background: var(--navy-3);
  border: 1px solid var(--divider);
  border-radius: 4px;
  padding: 2.5rem;
}

.form-label {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  display: block;
}

.form-control {
  background: var(--navy-2) !important;
  border: 1px solid var(--divider) !important;
  border-radius: 2px !important;
  color: var(--white) !important;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  border-color: var(--gold-line) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.08) !important;
  outline: none;
}

.form-control::placeholder { color: var(--muted); }

textarea.form-control { resize: vertical; min-height: 130px; }

.form-select {
  background-color: var(--navy-2) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba(201,168,76,0.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  border: 1px solid var(--divider) !important;
  border-radius: 2px !important;
  color: var(--white) !important;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  padding: 0.75rem 1rem;
}

.form-select:focus {
  border-color: var(--gold-line) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.08) !important;
}

.form-select option { background: var(--navy-2); color: var(--white); }

.form-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--divider);
}

/* ────────────────────────────────────────
   12. RESPONSIVE — SHARED BREAKPOINTS
   ──────────────────────────────────────── */
@media (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 575px) {
  .btn-gold,
  .btn-outline-gold {
    width: 100%;
    text-align: center;
  }
}