/* ============================================================
   VEYA ICT — MICROSITE THEME
   Loaded *after* css/style.css on Veya pages only.

   How this works
   --------------
   Every component on the Veya pages is the same component used on
   the Shamrock pages — .site-nav, .btn, .section, .site-footer and
   so on. This file does not re-implement any of them. It re-points
   the design tokens inside body.theme-veya, so the shared shell
   picks up Veya's colours and display face automatically. That is
   what keeps the microsite feeling like a branded extension of the
   parent site rather than a separate website.

   Anything genuinely new to Veya is prefixed .v- and lives in the
   second half of this file.
   ============================================================ */

body.theme-veya{
  /* --- Veya source colours (from the supplied logo) --- */
  --v-navy:      #152C38;
  --v-navy-deep: #0D1F29;
  --v-navy-2:    #1E3B4A;
  --v-red:       #DE1F26;
  --v-orange:    #F07A23;
  --v-amber:     #FBAE26;
  --v-ice:       #F3F8FA;
  --v-mist:      #E4EEF2;

  /* --- shared tokens, re-pointed ---
     Interactive colour is the red (5.4:1 on white); the orange and
     amber carry the gradient work, where contrast rules don't bind. */
  --brand:      #D01B22;
  --brand-2:    var(--v-amber);
  --brand-deep: #A81217;
  --brand-mid:  var(--v-orange);

  --obsidian:   var(--v-navy);
  --obsidian-2: var(--v-navy-deep);
  --ink:        #12222C;
  --bone:       #F3F8FA;
  --cream:      #F6FAFB;
  --sand:       var(--v-mist);
  --sand-2:     #D5E3E9;

  --line:       rgba(251,174,38,0.24);
  --line-dark:  rgba(21,44,56,0.16);
  --brand-tint:      rgba(208,27,34,0.08);
  --brand-tint-soft: rgba(251,174,38,0.16);

  /* Shamrock leads with a condensed industrial face; Veya leads with a
     geometric one. Body and utility faces stay shared — that is the
     family resemblance between the two sites. */
  --display: 'Space Grotesk', sans-serif;

  --v-grad: linear-gradient(90deg, var(--v-red) 0%, var(--v-orange) 45%, var(--v-amber) 100%);

  background:var(--v-navy);
}

/* Space Grotesk is wider than Big Shoulders, so headings need less scale */
.theme-veya h1,
.theme-veya h2,
.theme-veya h3,
.theme-veya h4{ letter-spacing:-0.015em; }
.theme-veya .section-head h2{ font-size:clamp(30px,3.6vw,48px); font-weight:700; line-height:1.06; }
.theme-veya .inner-hero h1{ font-size:clamp(34px,5vw,58px); font-weight:700; }

/* --- the header stack: group bar + nav travel together --- */
.theme-veya .site-header-stack{ position:fixed; top:0; left:0; right:0; z-index:100; }
.theme-veya .site-nav{ position:static; }
.theme-veya .site-nav{ background:rgba(255,255,255,0.90); border-bottom-color:rgba(21,44,56,0.12); }
.theme-veya .site-nav.scrolled{ background:rgba(255,255,255,0.98); box-shadow:0 6px 26px rgba(13,31,41,0.16); }
.theme-veya .nav-links{ background:#fff; }
.theme-veya .site-nav::after{ background:var(--v-grad); }

/* --- footer keeps Shamrock's structure, wears Veya's colours --- */
.theme-veya .site-footer{ border-top:3px solid transparent; border-image:var(--v-grad) 1; }
.theme-veya .footer-logo{ background:#fff; padding:12px 16px; }

/* ============================================================
   THE VEYA MARK — signature motif
   Four leaning bars lifted straight off the logo's chevron. Used as
   a section marker, a card edge and a list bullet, so the same shape
   carries the eye through the whole microsite.
   ============================================================ */
.v-mark{
  display:block; width:58px; height:24px; flex:none;
  background:linear-gradient(90deg,
    var(--v-red)    0    16%, transparent 16% 24%,
    var(--v-orange) 24%  40%, transparent 40% 48%,
    var(--v-amber)  48%  64%, transparent 64% 72%,
    var(--v-amber)  72%  88%, transparent 88%);
  transform:skewX(-18deg);
}
.v-mark-sm{ width:38px; height:16px; }

/* ============================================================
   HERO
   ============================================================ */
.v-hero{
  position:relative; overflow:hidden;
  background:var(--v-navy-deep);
  color:var(--bone);
  padding:calc(var(--nav-h) + 92px) var(--edge) 0;
}
/* ambient arcs — the profile's circuitry, reduced to light rather than clipart */
.v-hero::before{
  content:""; position:absolute; top:-30%; right:-14%; width:78vmax; height:78vmax;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(251,174,38,0.16) 0 2px, transparent 2px 26px),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(240,122,35,0.13) 0 4px, transparent 4px 62px);
  -webkit-mask-image:radial-gradient(closest-side, #000 35%, transparent 78%);
  mask-image:radial-gradient(closest-side, #000 35%, transparent 78%);
  pointer-events:none;
}
.v-hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(to top, var(--v-navy-deep), transparent);
  pointer-events:none;
}
.v-hero-inner{ position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding-bottom:80px; }
.v-hero-eyebrow{
  display:flex; align-items:flex-start; gap:14px; margin-bottom:26px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--v-amber);
}
.v-hero h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(38px,6.4vw,80px); line-height:1.02; letter-spacing:-0.025em;
  max-width:17ch;
}
.v-hero h1 span{
  background:var(--v-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.v-hero-sub{ margin-top:24px; max-width:60ch; font-size:17px; color:rgba(243,248,250,0.82); }
.v-hero-actions{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.v-hero-tagline{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(251,174,38,0.24);
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(243,248,250,0.6);
}
.v-hero-tagline strong{ color:var(--v-amber); font-weight:500; }
@media (max-width:760px){
  .v-hero{ padding-top:calc(var(--nav-h) + 56px); }
  .v-hero-inner{ padding-bottom:56px; }
  .v-hero-sub{ font-size:15.5px; }
}

/* --- stat strip under the hero --- */
.v-stats{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(251,174,38,0.2);
  background:var(--v-navy);
}
.v-stat{ padding:24px var(--edge); border-right:1px solid rgba(251,174,38,0.14); }
.v-stat:last-child{ border-right:none; }
.v-stat .num{ font-family:var(--display); font-size:clamp(26px,3vw,40px); font-weight:700; color:var(--v-amber); line-height:1; }
.v-stat .label{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:rgba(243,248,250,0.6); margin-top:8px; }
@media (max-width:760px){
  .v-stats{ grid-template-columns:repeat(2,1fr); }
  .v-stat:nth-child(2){ border-right:none; }
  .v-stat:nth-child(-n+2){ border-bottom:1px solid rgba(251,174,38,0.14); }
}

/* ============================================================
   PILLARS — vision / mission / values
   ============================================================ */
.v-pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.v-pillar{
  background:#fff; border:1px solid rgba(21,44,56,0.12); border-radius:12px;
  padding:34px 30px; position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.v-pillar::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--v-grad); }
.v-pillar:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(13,31,41,0.13); }
.v-pillar h3{
  margin-top:20px; font-family:var(--mono); font-size:13px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--brand); font-weight:600;
}
.v-pillar p{ margin-top:14px; font-size:15.5px; color:var(--ink); opacity:0.78; }
.v-pillar ul{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.v-pillar li{
  font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  border:1px solid rgba(21,44,56,0.18); border-radius:20px; padding:7px 13px; color:var(--ink); opacity:0.8;
}
@media (max-width:900px){ .v-pillars{ grid-template-columns:1fr; } }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.v-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:56px;
  background:rgba(251,174,38,0.18); border:1px solid rgba(251,174,38,0.18); }
.v-service{
  background:var(--v-navy); padding:34px 30px;
  transition:background .3s ease;
}
.v-service:hover{ background:var(--v-navy-2); }
.v-service h3{ margin-top:20px; font-size:21px; font-weight:600; color:var(--bone); }
.v-service p{ margin-top:12px; font-size:14.5px; color:rgba(243,248,250,0.72); }
@media (max-width:900px){ .v-services{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .v-services{ grid-template-columns:1fr; } }

/* ============================================================
   BUSINESS UNITS — long-form service detail
   ============================================================ */
.v-unit{ padding:52px 0; border-top:1px solid rgba(21,44,56,0.14); }
.v-unit:first-of-type{ border-top:none; padding-top:0; }
.v-unit-head{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.v-unit-head h3{ font-size:clamp(24px,3vw,34px); font-weight:700; color:var(--ink); }
.v-unit-body{ margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.v-unit-body p{ font-size:15.5px; color:var(--ink); opacity:0.8; }
.v-unit-body p + p{ margin-top:16px; }
@media (max-width:860px){ .v-unit-body{ grid-template-columns:1fr; gap:16px; } }

/* --- chevron-bulleted list, reusing the mark as a marker --- */
.v-list li{ position:relative; padding-left:30px; font-size:15px; color:var(--ink); opacity:0.85; }
.v-list li + li{ margin-top:12px; }
.v-list li::before{
  content:""; position:absolute; left:0; top:8px; width:16px; height:9px;
  background:linear-gradient(90deg, var(--v-red) 0 30%, transparent 30% 42%, var(--v-orange) 42% 72%, transparent 72% 84%, var(--v-amber) 84%);
  transform:skewX(-18deg);
}
.section-dark .v-list li{ color:var(--bone); }

/* ============================================================
   PARTNERSHIPS
   ============================================================ */
.v-partners{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  margin-top:40px; background:rgba(21,44,56,0.14); border:1px solid rgba(21,44,56,0.14); }
.v-partner{
  background:#fff; padding:26px 18px; text-align:center;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink); opacity:0.72; transition:opacity .25s ease, color .25s ease;
}
.v-partner:hover{ opacity:1; color:var(--brand); }

/* ============================================================
   OFFICES
   ============================================================ */
.v-offices{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; }
.v-office{
  border:1px solid rgba(251,174,38,0.22); padding:30px 26px; background:rgba(251,174,38,0.04);
  transition:border-color .3s ease, background .3s ease;
}
.v-office:hover{ border-color:var(--v-amber); background:rgba(251,174,38,0.09); }
.v-office .role{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--v-amber); }
.v-office h3{ font-size:25px; margin-top:12px; font-weight:600; }
.v-office p{ margin-top:14px; font-size:14.5px; color:rgba(243,248,250,0.75); }
.v-office .tel{ margin-top:16px; display:inline-block; font-family:var(--mono); font-size:13px; color:var(--v-amber); border-bottom:1px solid transparent; }
.v-office .tel:hover{ border-bottom-color:var(--v-amber); }
@media (max-width:900px){ .v-offices{ grid-template-columns:1fr; } }

/* ============================================================
   DIFFERENTIATOR
   ============================================================ */
.v-diff{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px; }
.v-diff-item{ padding-top:22px; border-top:3px solid transparent; border-image:var(--v-grad) 1; }
.v-diff-item h4{ font-size:18px; font-weight:600; color:var(--bone); }
.v-diff-item p{ margin-top:10px; font-size:14.5px; color:rgba(243,248,250,0.72); }
@media (max-width:900px){ .v-diff{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .v-diff{ grid-template-columns:1fr; } }

/* ============================================================
   TRACK RECORD TABLE
   ============================================================ */
.v-table-wrap{ margin-top:48px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.v-table{ width:100%; border-collapse:collapse; min-width:620px; }
.v-table caption{
  text-align:left; padding-bottom:16px; font-family:var(--mono); font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); opacity:0.55;
}
.v-table th{
  text-align:left; padding:14px 18px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:#fff; background:var(--v-navy);
  font-weight:500;
}
.v-table td{ padding:15px 18px; font-size:14.5px; color:var(--ink); border-bottom:1px solid rgba(21,44,56,0.12); vertical-align:top; }
.v-table tbody tr:nth-child(odd) td{ background:rgba(21,44,56,0.03); }
.v-table tbody tr:hover td{ background:var(--brand-tint); }
.v-table td:first-child{ font-weight:600; white-space:nowrap; }
.v-table td ul li{ position:relative; padding-left:14px; }
.v-table td ul li::before{ content:"–"; position:absolute; left:0; color:var(--brand); }

/* ============================================================
   MANAGEMENT TEAM
   ============================================================ */
.v-team{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:52px; }
.v-person{
  background:#fff; border:1px solid rgba(21,44,56,0.12); border-radius:12px; padding:32px 30px;
  display:flex; flex-direction:column;
}
.v-person-head{ display:flex; align-items:flex-start; gap:16px; }
.v-person-initials{
  flex:none; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:18px; font-weight:700; color:#fff;
  background:linear-gradient(140deg, var(--v-red), var(--v-orange) 60%, var(--v-amber));
}
.v-person h3{ font-size:21px; font-weight:600; color:var(--ink); line-height:1.2; }
.v-person .role{
  margin-top:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--brand);
}
.v-person p{ margin-top:18px; font-size:14.5px; color:var(--ink); opacity:0.78; }
.v-person p + p{ margin-top:12px; }
@media (max-width:860px){ .v-team{ grid-template-columns:1fr; } }

/* ============================================================
   CTA BAND
   ============================================================ */
.v-cta{
  background:var(--v-navy-deep); color:var(--bone);
  padding:80px 0; position:relative; overflow:hidden;
}
.v-cta::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--v-grad);
}
.v-cta .container{ text-align:center; }
.v-cta h2{ font-size:clamp(28px,3.6vw,44px); font-weight:700; margin-top:18px; }
.v-cta p{ margin:18px auto 0; max-width:56ch; font-size:16px; color:rgba(243,248,250,0.8); }
.v-cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

/* ============================================================
   CONTACT DETAILS
   ============================================================ */
.v-contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:52px;
  background:rgba(251,174,38,0.2); border:1px solid rgba(251,174,38,0.2); }
.v-contact div{ background:var(--v-navy); padding:30px 26px; }
.v-contact .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--v-amber); }
.v-contact .v{ margin-top:10px; font-size:16px; color:var(--bone); }
.v-contact a{ border-bottom:1px solid rgba(251,174,38,0.4); }
.v-contact a:hover{ border-bottom-color:var(--v-amber); color:var(--v-amber); }
@media (max-width:800px){ .v-contact{ grid-template-columns:1fr; } }

/* the inner hero's overlay is tuned to Shamrock's charcoal — retint for navy */
.theme-veya .inner-hero::before{
  background:linear-gradient(180deg, rgba(13,31,41,0.35) 0%, rgba(13,31,41,0.45) 40%, rgba(13,31,41,0.92) 100%);
}
.theme-veya .inner-hero{ padding-top:var(--nav-h); }