/* ============================================================
   ECG · Per-page section styles + SPA panel switching
   Loaded after styles.css to preserve the original cascade order.
   ============================================================ */
/* ===== home ===== */
/* ===================== HOME · HERO STAGE ===================== */
.hero-stage { position: relative; background: linear-gradient(155deg, #0B2719 0%, #0F3321 42%, #1C5739 100%); color:#fff; overflow: hidden; }
.hero-stage .glow { z-index:0; }
.hero-variant { display: none; }
[data-hero="a"] .hv-a, [data-hero="b"] .hv-b, [data-hero="c"] .hv-c { display: block; }

/* shared hero bits */
.hero-stat-row { display:flex; gap:40px; flex-wrap:wrap; margin-top:44px; }
.hero-stat .n { font-family:var(--font-display); font-weight:800; font-size:34px; line-height:1; color:var(--lime-500); letter-spacing:-0.02em; }
.hero-stat .l { font-size:13.5px; color:rgba(255,255,255,0.78); margin-top:8px; max-width:150px; }
.hero-stat-row .hero-stat + .hero-stat { padding-left:40px; border-left:1px solid rgba(255,255,255,0.14); }

/* ---- Variant A: node network ---- */
.hv-a .inner { position:relative; z-index:2; display:block; padding-top: 116px; padding-bottom: 104px; }
.hv-a .net { position:relative; height:440px; }
.hv-a .net svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.node { fill:#0F3321; stroke:rgba(255,255,255,0.4); stroke-width:1.5; }
.node-lbl { font-family:var(--font-label); font-size:10px; font-weight:900; letter-spacing:0.12em; fill:rgba(255,255,255,0.8); text-transform:uppercase; }
.node-core { fill:var(--lime-500); }
.pulse { animation: pulse 3s ease-in-out infinite; transform-origin:center; }
@keyframes pulse { 0%,100%{ opacity:0.35; } 50%{ opacity:1; } }
html[data-motion="minimal"] .pulse { animation:none; opacity:0.8; }

/* ---- Variant B: statement ---- */
.hv-b .inner { position:relative; z-index:2; text-align:center; padding: 120px 0 128px; max-width:1000px; margin:0 auto; }
.hv-b .display { margin:0 auto; }
.hv-b .sweep { width:min(680px,86%); height:2px; margin:40px auto 0; background:linear-gradient(90deg,transparent,var(--teal-400),var(--lime-500),transparent); position:relative; overflow:hidden; }
.hv-b .sweep::after { content:""; position:absolute; top:0; left:-40%; width:40%; height:100%; background:linear-gradient(90deg,transparent,#fff,transparent); animation:sweep 3.4s var(--ease) infinite; }
@keyframes sweep { 0%{ left:-40%; } 100%{ left:120%; } }
html[data-motion="minimal"] .hv-b .sweep::after { animation:none; }
.hv-b .lead { margin:36px auto 0; max-width:640px; }
.hv-b .actions { justify-content:center; }
.hv-b .gridlines { position:absolute; inset:0; z-index:0; opacity:0.5; background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 75%); }

/* ---- Variant C: split ---- */
.hv-c .inner { position:relative; z-index:2; display:grid; grid-template-columns: 1fr 0.82fr; gap:0; align-items:stretch; }
.hv-c .left { padding: 104px 56px 104px 0; align-self:center; }
.hv-c .right { position:relative; background:linear-gradient(180deg, rgba(200,226,38,0.10), rgba(76,187,187,0.05)); border-left:1px solid rgba(255,255,255,0.12); padding:64px 0 64px 56px; display:flex; flex-direction:column; justify-content:center; gap:28px; }
.flowbars { display:flex; align-items:flex-end; gap:10px; height:150px; }
.flowbars span { flex:1; background:linear-gradient(180deg,var(--lime-500),var(--teal-500)); border-radius:5px 5px 0 0; opacity:0.85; animation:flow 2.6s var(--ease) infinite; }
.flowbars span:nth-child(2){ animation-delay:.2s } .flowbars span:nth-child(3){ animation-delay:.4s }
.flowbars span:nth-child(4){ animation-delay:.6s } .flowbars span:nth-child(5){ animation-delay:.8s } .flowbars span:nth-child(6){ animation-delay:1s }
@keyframes flow { 0%,100%{ transform:scaleY(0.45);} 50%{ transform:scaleY(1);} }
.flowbars span { transform-origin:bottom; }
html[data-motion="minimal"] .flowbars span { animation:none; transform:scaleY(0.8); }
.float-card { background:rgba(11,39,25,0.6); border:1px solid rgba(255,255,255,0.14); border-radius:var(--r-lg); padding:24px 26px; backdrop-filter:blur(8px); }
.float-card .n { font-family:var(--font-display); font-weight:800; font-size:40px; color:var(--lime-500); line-height:1; letter-spacing:-0.02em; }
.float-card .l { font-size:14px; color:rgba(255,255,255,0.7); margin-top:8px; }

/* ===================== CHALLENGE · highlight stat boxes ===================== */
.challenge-layout { display:grid; grid-template-columns:0.92fr 1.08fr; gap:56px; align-items:center; }
.challenge-layout .section-head { margin-bottom:0; max-width:none; }
.challenge-boxes { display:flex; flex-direction:column; gap:16px; }
.cbox { position:relative; overflow:hidden; border-radius:var(--r-xl); padding:24px 30px; display:flex; flex-direction:row; align-items:center; gap:26px; box-shadow:var(--sh-md); transition:transform 0.28s var(--ease), box-shadow 0.28s var(--ease); }
.cbox:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.cbox .cb-tag { font-family:var(--font-label); font-weight:900; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; opacity:0.85; }
.cbox .cb-num { font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; line-height:0.92; font-size:clamp(44px,4.4vw,62px); flex-shrink:0; min-width:130px; }
.cbox .cb-label { font-size:14.5px; line-height:1.5; margin-top:6px; }
.cbox .cb-deco { position:absolute; right:-26px; bottom:-26px; width:150px; height:150px; opacity:0.14; }
.cbox .cb-deco--center { top:50%; bottom:auto; transform:translateY(-50%); }
.cbox .cb-deco--cloud { transform:translateY(-38%); }
.cbox--green { background:radial-gradient(130% 130% at 0% 0%, #1C5739, #0B2719); color:#fff; }
.cbox--green .cb-num { color:var(--lime-500); }
.cbox--green .cb-label { color:rgba(255,255,255,0.82); }
.cbox--green .cb-tag { color:var(--lime-500); }
.cbox--lime { background:linear-gradient(150deg, var(--lime-400), var(--lime-500)); color:var(--green-900); }
.cbox--lime .cb-num, .cbox--lime .cb-tag { color:var(--green-900); }
.cbox--lime .cb-label { color:rgba(11,39,25,0.78); }
.cbox--teal { background:linear-gradient(150deg, var(--teal-400), var(--teal-500)); color:var(--green-900); }
.cbox--teal .cb-num, .cbox--teal .cb-tag { color:var(--green-900); }
.cbox--teal .cb-label { color:rgba(11,39,25,0.78); }
@media (max-width: 900px){ .challenge-layout { grid-template-columns:1fr; gap:36px; } }
@media (max-width: 480px){ .cbox { flex-direction:column; align-items:flex-start; gap:10px; } .cbox .cb-num { min-width:0; } }

/* ===================== WHAT WE DO · numbered editorial rows ===================== */
.wd-list { border-top:1px solid rgba(255,255,255,0.14); }
.wd-row { position:relative; display:grid; grid-template-columns:132px 1fr auto; align-items:center; gap:40px;
  padding:38px 28px 38px 20px; border-bottom:1px solid rgba(255,255,255,0.14); border-radius:var(--r-lg);
  transition:background 0.3s var(--ease), padding 0.3s var(--ease); }
.wd-row::before { content:""; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:3px;
  background:linear-gradient(var(--lime-500),var(--teal-400)); transform:scaleY(0); transform-origin:center; transition:transform 0.35s var(--ease); }
.wd-row:hover { background:rgba(255,255,255,0.04); padding-left:34px; }
.wd-row:hover::before { transform:scaleY(1); }
.wd-idx { font-family:var(--font-display); font-weight:800; font-size:clamp(54px,5.6vw,82px); line-height:0.9; letter-spacing:-0.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(200,226,38,0.55); transition:color 0.3s var(--ease), -webkit-text-stroke-color 0.3s; }
.wd-row:hover .wd-idx { color:var(--lime-500); -webkit-text-stroke-color:var(--lime-500); }
.wd-main { display:flex; flex-direction:column; gap:10px; }
.wd-head { display:flex; align-items:center; gap:16px; }
.wd-head .ic { width:46px; height:46px; border-radius:12px; flex-shrink:0; display:grid; place-items:center;
  background:rgba(200,226,38,0.12); color:var(--lime-500); transition:background 0.3s, color 0.3s; }
.wd-row:hover .wd-head .ic { background:var(--lime-500); color:var(--green-900); }
.wd-head .ic svg { width:24px; height:24px; }
.wd-main h3 { font-size:clamp(22px,2.2vw,28px); color:#fff; }
.wd-main p { font-size:15.5px; color:rgba(255,255,255,0.74); max-width:560px; }
.wd-go { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:14.5px;
  color:var(--lime-500); white-space:nowrap; }
.wd-go .arrow { width:46px; height:46px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.28); display:grid; place-items:center;
  transition:border-color 0.3s, background 0.3s, transform 0.3s var(--ease); }
.wd-go .arrow svg { width:18px; height:18px; transition:transform 0.3s var(--ease); }
.wd-row:hover .wd-go .arrow { border-color:var(--lime-500); background:var(--lime-500); }
.wd-row:hover .wd-go .arrow svg { stroke:var(--green-900); transform:translateX(3px); }
@media (max-width: 860px){
  .wd-row { grid-template-columns:84px 1fr; gap:22px 20px; padding:30px 16px; }
  .wd-idx { font-size:46px; }
  .wd-go { grid-column:2; justify-content:flex-start; }
  .wd-go .arrow { width:40px; height:40px; }
}
@media (max-width: 520px){
  .wd-row { grid-template-columns:1fr; gap:14px; }
  .wd-idx { font-size:40px; }
}

/* ===================== THE ECG MODEL · vertical timeline + ring graphic ===================== */
.model3 { display:grid; grid-template-columns:0.82fr 1.18fr; gap:60px; align-items:center; }
.model3-aside { position:relative; }
.model3-aside .lead { margin-top:18px; }
.model3-cta { display:inline-flex; align-items:center; gap:16px; margin-top:34px; padding:9px 10px 9px 28px; border-radius:var(--r-full);
  background:var(--green-850); color:#fff; font-family:var(--font-display); font-weight:600; font-size:16px;
  transition:background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.model3-cta .arrow { width:46px; height:46px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--lime-500); color:var(--green-900); transition:transform 0.25s var(--ease); }
.model3-cta .arrow svg { width:19px; height:19px; }
.model3-cta:hover { background:var(--green-800); transform:translateY(-2px); box-shadow:0 12px 30px rgba(28,87,57,0.18); }
.model3-cta:hover .arrow { transform:translateX(4px); }
/* animated concentric ring graphic */
.ringfx { position:relative; width:200px; height:200px; margin-top:44px; }
.ringfx .r { position:absolute; border-radius:50%; }
.ringfx .r1 { inset:0; background:conic-gradient(from 0deg, var(--lime-500), var(--teal-500), var(--green-700), var(--lime-500));
  -webkit-mask:radial-gradient(transparent 58%, #000 59%); mask:radial-gradient(transparent 58%, #000 59%);
  animation:m3spin 13s linear infinite; }
.ringfx .r2 { inset:30px; border:1.5px dashed rgba(34,132,98,0.4); animation:m3spin 30s linear infinite reverse; }
.ringfx .core { position:absolute; inset:52px; border-radius:50%; background:radial-gradient(120% 120% at 30% 20%, #1C5739, #0B2719);
  color:#fff; display:grid; place-items:center; text-align:center; box-shadow:var(--sh-md), inset 0 1px 0 rgba(255,255,255,0.1); }
.ringfx .core .big { font-family:var(--font-display); font-weight:800; font-size:36px; line-height:1; color:var(--lime-500); }
.ringfx .core .lbl { font-family:var(--font-label); font-weight:900; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(255,255,255,0.82); margin-top:5px; }
@keyframes m3spin { to { transform:rotate(360deg); } }
html[data-motion="minimal"] .ringfx .r1, html[data-motion="minimal"] .ringfx .r2 { animation:none; }
@media (prefers-reduced-motion: reduce){ .ringfx .r1, .ringfx .r2 { animation:none !important; } }
/* vertical timeline of steps */
.model3-steps { position:relative; list-style:none; display:flex; flex-direction:column; gap:16px; padding:0; margin:0; }
.model3-steps::before { content:""; position:absolute; left:32px; top:26px; bottom:26px; width:2px; z-index:0;
  background:linear-gradient(var(--green-700), var(--teal-500)); opacity:0.4; }
.m3step { position:relative; z-index:1; display:grid; grid-template-columns:64px 1fr; gap:24px; align-items:center; }
.m3node { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:#fff; border:2px solid var(--green-800); color:var(--green-800); box-shadow:0 0 0 7px var(--bg-soft);
  font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-0.02em;
  transition:background 0.3s var(--ease), color 0.3s, transform 0.3s var(--ease); }
.m3step:hover .m3node { background:var(--green-800); color:var(--lime-500); transform:scale(1.06); }
.m3card { position:relative; overflow:hidden; display:flex; align-items:center; gap:18px;
  background:#fff; border:1px solid var(--gray-100); border-radius:var(--r-lg); padding:20px 26px; box-shadow:var(--sh-sm);
  transition:transform 0.28s var(--ease), box-shadow 0.28s var(--ease); }
.m3card::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; transform:scaleY(0); transform-origin:top;
  background:linear-gradient(var(--lime-500), var(--teal-400)); transition:transform 0.35s var(--ease); }
.m3step:hover .m3card { transform:translateX(7px); box-shadow:var(--sh-md); }
.m3step:hover .m3card::after { transform:scaleY(1); }
.m3ic { width:50px; height:50px; border-radius:13px; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--green-800), var(--green-700)); color:var(--lime-500); }
.m3ic svg { width:25px; height:25px; }
.m3body h3 { font-size:20px; color:var(--green-850); }
.m3body p { font-size:14.5px; color:var(--ink-soft); margin-top:4px; }
@media (max-width: 900px){
  .model3 { grid-template-columns:1fr; gap:40px; }
  .ringfx { display:none; }
}
@media (max-width: 480px){
  .m3step { grid-template-columns:50px 1fr; gap:16px; }
  .model3-steps::before { left:25px; }
  .m3node { width:50px; height:50px; font-size:18px; }
  .m3card { padding:16px 18px; gap:14px; }
}



@media (max-width: 820px){
  .hv-a .inner { grid-template-columns:1fr; gap:8px; padding-top:72px; padding-bottom:80px; }
  .hv-a .net { display:none; }
  .hv-c .inner { grid-template-columns:1fr; }
  .hv-c .left { padding:80px 0 32px; }
  .hv-c .right { border-left:none; border-top:1px solid rgba(255,255,255,0.12); padding:48px 0; }
}

/* ===== about ===== */
/* ============================================================
   ABOUT · fancy, distinct sections (echo Home design language)
   ============================================================ */

/* --- Our Story · elevated cards with big ghost numerals --- */
.ab-story { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ab-scard { position:relative; overflow:hidden; background:#fff; border:1px solid var(--gray-100);
  border-radius:var(--r-xl); padding:36px 32px 34px; box-shadow:var(--sh-sm);
  transition:transform 0.28s var(--ease), box-shadow 0.28s var(--ease); }
.ab-scard::after { content:""; position:absolute; left:0; right:0; top:0; height:3px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--lime-500),var(--teal-400)); transition:transform 0.35s var(--ease); }
.ab-scard:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.ab-scard:hover::after { transform:scaleX(1); }
.ab-scard .ghost { position:absolute; top:6px; right:22px; z-index:0; font-family:var(--font-display); font-weight:800;
  font-size:104px; line-height:1; color:transparent; -webkit-text-stroke:1.5px rgba(28,87,57,0.10); }
.ab-scard .body { position:relative; z-index:1; }
.ab-scard .dot { width:34px; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--lime-500),var(--teal-400)); }
.ab-scard h3 { font-size:21px; margin-top:22px; color:var(--green-850); }
.ab-scard p { font-size:15.5px; color:var(--ink-soft); margin-top:12px; }

/* --- Vision / Mission · glass panels on dark --- */
.ab-vm { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.ab-panel { position:relative; overflow:hidden; border-radius:var(--r-xl); padding:44px;
  background:linear-gradient(165deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.14); backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.12);
  transition:transform 0.3s var(--ease), border-color 0.3s; }
.ab-panel:hover { transform:translateY(-5px); border-color:rgba(200,226,38,0.4); }
.ab-panel .ic { position:relative; z-index:2; width:56px; height:56px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--green-700),var(--green-600)); color:var(--lime-500); margin-bottom:24px; }
.ab-panel .ic svg { width:28px; height:28px; }
.ab-panel .ring { position:absolute; right:-72px; top:-72px; width:230px; height:230px; border-radius:50%;
  border:1px solid rgba(200,226,38,0.22); pointer-events:none; }
.ab-panel .ring::after { content:""; position:absolute; inset:36px; border-radius:50%; border:1px solid rgba(76,187,187,0.22); }
.ab-panel .eyebrow, .ab-panel h2, .ab-panel p { position:relative; z-index:2; }

/* --- Values · colourful gradient tiles --- */
.ab-values { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ab-val { position:relative; overflow:hidden; border-radius:var(--r-lg);
  padding:34px 30px 32px; box-shadow:var(--sh-md);
  transition:transform 0.28s var(--ease), box-shadow 0.28s var(--ease); }
.ab-val::after { content:""; position:absolute; right:-44px; bottom:-44px; width:158px; height:158px;
  border-radius:50%; background:rgba(255,255,255,0.10); pointer-events:none; }
.ab-val::before { content:""; position:absolute; left:30px; top:0; width:42px; height:5px; border-radius:0 0 5px 5px;
  background:rgba(255,255,255,0.55); transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease); }
.ab-val:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.ab-val:hover::before { transform:scaleX(1); }
.ab-val .vi { position:relative; z-index:1; width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  margin-bottom:18px; transition:transform 0.3s var(--ease); }
.ab-val:hover .vi { transform:scale(1.07) rotate(-3deg); }
.ab-val .vi svg { width:26px; height:26px; }
.ab-val h3 { position:relative; z-index:1; font-size:19px; }
.ab-val p { position:relative; z-index:1; font-size:14.5px; margin-top:10px; }
/* colour themes */
.ab-val.v-green { background:radial-gradient(135% 135% at 0% 0%, #1C5739, #0B2719); color:#fff; }
.ab-val.v-green h3 { color:#fff; } .ab-val.v-green p { color:rgba(255,255,255,0.82); }
.ab-val.v-green .vi { background:rgba(200,226,38,0.16); color:var(--lime-500); }
.ab-val.v-lime { background:linear-gradient(150deg, var(--lime-400) 0%, #AEC516 100%); color:var(--green-900); }
.ab-val.v-lime h3 { color:var(--green-900); } .ab-val.v-lime p { color:rgba(11,39,25,0.80); }
.ab-val.v-lime .vi { background:rgba(11,39,25,0.13); color:var(--green-850); }
.ab-val.v-lime::before, .ab-val.v-teal::before { background:rgba(11,39,25,0.45); }
.ab-val.v-lime::after, .ab-val.v-teal::after { background:rgba(11,39,25,0.08); }
.ab-val.v-teal { background:linear-gradient(150deg, var(--teal-400) 0%, var(--teal-500) 100%); color:var(--green-900); }
.ab-val.v-teal h3 { color:var(--green-900); } .ab-val.v-teal p { color:rgba(11,39,25,0.80); }
.ab-val.v-teal .vi { background:rgba(11,39,25,0.13); color:var(--green-850); }

/* --- Leadership · dark premium portrait wall + 06 Liquid Mesh --- */
.ab-lead-dark { position:relative; overflow:hidden; background:#0B2719; }
.ab-lead-dark .mesh { position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, #228462 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, #4CBBBB 0%, transparent 42%),
    radial-gradient(circle at 60% 85%, #C8E226 0%, transparent 40%),
    radial-gradient(circle at 15% 80%, #0F3321 0%, transparent 50%),
    #0B2719;
  background-size:160% 160%,150% 150%,170% 170%,150% 150%,100% 100%;
  animation:meshMove 22s ease-in-out infinite; }
.ab-lead-dark .mesh::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,17,11,0.34) 0%, rgba(6,17,11,0.20) 45%, rgba(6,17,11,0.58) 100%); }
@keyframes meshMove {
  0%,100% { background-position:0% 0%,100% 0%,50% 100%,0% 100%,0 0; }
  33%     { background-position:30% 20%,70% 30%,40% 70%,20% 80%,0 0; }
  66%     { background-position:10% 40%,90% 10%,60% 90%,10% 60%,0 0; }
}
html[data-motion="minimal"] .ab-lead-dark .mesh { animation:none; }
@media (prefers-reduced-motion: reduce){ .ab-lead-dark .mesh { animation:none; } }
.ab-lead-dark .wrap { position:relative; z-index:2; }
.ab-lead-dark .lead { color:rgba(255,255,255,0.74); }
/* heading block spans the full photo-grid width */
.ab-lead-dark .section-head { max-width:none; }
/* lime halo behind portrait on hover */
.ab-member::before { content:""; position:absolute; left:50%; top:98px; transform:translate(-50%,-50%);
  width:248px; height:248px; border-radius:50%; z-index:0; pointer-events:none; opacity:0; filter:blur(16px);
  background:radial-gradient(circle, rgba(200,226,38,0.55) 0%, rgba(200,226,38,0.20) 45%, transparent 70%);
  transition:opacity 0.4s var(--ease); }
.ab-member:hover::before { opacity:1; }
.ab-portrait { z-index:1; }
.ab-group + .ab-group { margin-top:64px; }
.ab-group-label { display:flex; align-items:center; gap:18px; margin-bottom:38px;
  font-family:var(--font-label); font-weight:900; font-size:13px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--lime-500); }
.ab-group-label::after { content:""; flex:1; height:1px; background:rgba(255,255,255,0.12); }
.ab-team { display:grid; grid-template-columns:repeat(3,1fr); gap:42px 24px; }
.ab-member { position:relative; text-align:center; }
.ab-portrait { position:relative; width:196px; aspect-ratio:1; margin:0 auto 22px; border-radius:50%; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 16%, #f7f8f2 0%, #e6e9df 80%);
  box-shadow:0 18px 42px rgba(0,0,0,0.38);
  transition:transform 0.32s var(--ease), box-shadow 0.32s var(--ease); }
.ab-portrait::after { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:2;
  border:1.5px solid rgba(200,226,38,0.30); transition:border-color 0.3s var(--ease); }
.ab-portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ab-member:hover .ab-portrait { transform:translateY(-7px); box-shadow:0 28px 56px rgba(0,0,0,0.5); }
.ab-member:hover .ab-portrait::after { border-color:var(--lime-500); }
.ab-member h3 { font-size:18.5px; color:#fff; }
.ab-member .role { display:inline-block; margin-top:8px; font-family:var(--font-label); font-weight:900; font-size:10.5px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--teal-300); }

@media (max-width:900px){
  .ab-story { grid-template-columns:1fr; }
  .ab-vm { grid-template-columns:1fr; }
  .ab-values { grid-template-columns:1fr 1fr; }
  .ab-team { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .ab-values, .ab-team { grid-template-columns:1fr; }
}

/* ===== solutions ===== */
/* sector chips in hero */
.sector-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; }
.sector-chip { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,0.86); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); padding:9px 15px; border-radius:var(--r-full); }
.sector-chip svg { width:16px; height:16px; color:var(--lime-500); }

/* solution blocks */
.sol { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--gray-100); border-radius:var(--r-xl); overflow:hidden; background:#fff; box-shadow:var(--sh-sm); }
.sol + .sol { margin-top:32px; }
.sol.flip .sol-visual { order:2; }
.sol-visual { position:relative; min-height:400px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:36px; }
.sol-visual .netbg { z-index:0; }
.sol-visual .sol-img { position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.sol-visual .sol-scrim { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,18,12,0.30) 0%, rgba(6,18,12,0.04) 38%, rgba(6,18,12,0.60) 100%); }
.sol-visual .sv-icon { position:relative; z-index:2; width:62px; height:62px; border-radius:16px; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.2); display:grid; place-items:center; color:var(--lime-500); }
.sol-visual .sv-icon svg { width:30px; height:30px; }
.sol-visual .sv-tag { position:relative; z-index:2; }
.sol-visual .sv-abbr { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; z-index:2; font-family:var(--font-display); font-weight:800; font-size:92px; line-height:0.9; letter-spacing:-0.04em; color:rgba(255,255,255,0.16); }
.sol-body { padding:46px 46px; display:flex; flex-direction:column; }
.sol-body .kicker { font-family:var(--font-label); font-weight:900; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--green-700); }
.sol-body h2 { font-size:clamp(25px,2.5vw,32px); margin-top:12px; }
.sol-body .desc { font-size:16px; color:var(--ink-soft); line-height:1.6; margin-top:16px; }
.sol-feat { list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.sol-feat li { display:flex; gap:12px; font-size:15px; color:var(--ink-soft); line-height:1.5; }
.sol-feat svg { width:18px; height:18px; color:var(--green-600); flex-shrink:0; margin-top:2px; }
.sol-metrics { display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin-top:auto; padding-top:28px; border-top:1px solid var(--gray-100); }
.sol-metric .v { font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-0.02em; color:var(--green-800); line-height:1; }
.sol-metric .k { font-size:13px; color:var(--ink-soft); margin-top:7px; }

/* how-it-works steps */
.step-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.12); border-radius:var(--r-lg); overflow:hidden; }
.step { background:var(--green-850); padding:30px 26px; }
.step .sn { font-family:var(--font-label); font-weight:900; font-size:11px; letter-spacing:0.14em; color:var(--lime-500); }
.step h4 { color:#fff; font-size:17px; margin-top:12px; }
.step p { color:rgba(255,255,255,0.74); font-size:13.5px; margin-top:9px; line-height:1.5; }

/* industries · fancy cards */
.ind-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ind { position:relative; overflow:hidden; padding:40px 32px 34px; border-radius:var(--r-xl);
  background:#fff; border:1px solid var(--gray-100); box-shadow:var(--sh-md);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease); }
.ind::before { content:""; position:absolute; left:0; right:0; top:0; height:5px; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease); }
.ind.i-green::before { background:linear-gradient(90deg,var(--green-700),var(--green-600)); }
.ind.i-teal::before { background:linear-gradient(90deg,var(--teal-500),var(--teal-400)); }
.ind.i-lime::before { background:linear-gradient(90deg,#AEC516,var(--lime-500)); }
.ind:hover { transform:translateY(-8px); box-shadow:var(--sh-lg); }
.ind:hover::before { transform:scaleX(1); }
.ind .ghost { position:absolute; right:-26px; bottom:-32px; width:170px; height:170px; opacity:0.05; z-index:0; color:var(--green-900); }
.ind .ghost svg { width:100%; height:100%; }
.ind .ind-num { position:absolute; top:30px; right:30px; z-index:1; font-family:var(--font-display); font-weight:800;
  font-size:46px; line-height:1; letter-spacing:-0.04em; color:transparent; -webkit-text-stroke:1.5px rgba(28,87,57,0.16); }
.ind .ii { position:relative; z-index:1; width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  margin-bottom:22px; box-shadow:0 12px 26px rgba(11,39,25,0.16); transition:transform .32s var(--ease); }
.ind:hover .ii { transform:scale(1.08) rotate(-3deg); }
.ind.i-green .ii { background:linear-gradient(140deg,var(--green-800),var(--green-900)); color:var(--lime-500); }
.ind.i-teal .ii { background:linear-gradient(140deg,var(--teal-500),var(--green-600)); color:#06231a; }
.ind.i-lime .ii { background:linear-gradient(140deg,var(--lime-400),#AEC516); color:var(--green-900); }
.ind .ii svg { width:27px; height:27px; }
.ind h3 { position:relative; z-index:1; font-size:21px; color:var(--green-850); }
.ind p { position:relative; z-index:1; font-size:14.5px; color:var(--ink-soft); margin-top:10px; }
.ind .ind-tags { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.ind .ind-tags span { font-family:var(--font-label); font-size:11.5px; font-weight:700; letter-spacing:0.06em;
  color:var(--green-700); background:rgba(34,132,98,0.09); padding:6px 12px; border-radius:var(--r-full);
  border:1px solid rgba(34,132,98,0.13); transition:background .2s; }
.ind:hover .ind-tags span { background:rgba(34,132,98,0.14); }

@media (max-width:880px){
  .sol { grid-template-columns:1fr; }
  .sol.flip .sol-visual { order:0; }
  .sol-visual { min-height:240px; }
  .step-grid { grid-template-columns:1fr 1fr; }
  .ind-grid { grid-template-columns:1fr; }
}
@media (max-width:560px){
  .sol-metrics { grid-template-columns:1fr 1fr; }
  .sol-body { padding:34px 26px; }
  .step-grid { grid-template-columns:1fr; }
  .sol-visual .sv-abbr { font-size:68px; }
}

/* ===== global presence map (projects) ===== */
.gp-panel { position:relative; background:linear-gradient(150deg, var(--green-850) 0%, var(--green-900) 100%); border-radius:var(--r-xl); padding:36px 32px; box-shadow:var(--sh-lg); overflow:hidden; }
.gp-grid { display:grid; grid-template-columns:1.22fr 0.78fr; gap:72px; align-items:center; }
.gp-copy { order:2; }
.gp-panel { order:1; }
.gp-copy .lead { margin-top:18px; max-width:440px; }
.gp-list { list-style:none; margin-top:36px; border-top:1px solid rgba(28,87,57,0.12); }
.gp-list li { display:flex; align-items:center; gap:14px; padding:15px 2px; border-bottom:1px solid rgba(28,87,57,0.12); }
.gp-list .gp-dot { width:9px; height:9px; border-radius:50%; background:var(--teal-400); box-shadow:0 0 0 4px rgba(76,187,187,0.14); flex-shrink:0; }
.gp-list li.hq .gp-dot { background:var(--lime-500); box-shadow:0 0 0 4px rgba(200,226,38,0.16); }
.gp-list .gp-name { font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--ink); }
.gp-list .gp-meta { margin-left:auto; font-size:13.5px; color:var(--ink-faint); }
.gp-map { position:relative; }
.gp-map::before { content:""; position:absolute; inset:-10%; background:radial-gradient(58% 52% at 50% 46%, rgba(34,132,98,0.30), transparent 70%); pointer-events:none; }
.gp-map svg { position:relative; display:block; width:100%; height:auto; z-index:1; }
.gp-map .gp-arcs path { fill:none; stroke:rgba(110,206,206,0.42); stroke-width:1.3; stroke-dasharray:2 9; stroke-linecap:round; animation:gpDash 26s linear infinite; }
@keyframes gpDash { to { stroke-dashoffset:-220; } }
.gp-marker { position:absolute; width:0; height:0; z-index:2; }
.gp-marker .pin { position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; background:var(--teal-400); box-shadow:0 0 0 3px rgba(11,39,25,0.9), 0 0 16px rgba(76,187,187,0.6); }
.gp-marker .ring { position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; border:1.5px solid rgba(110,206,206,0.75); animation:gpPulse 3.4s var(--ease) infinite; }
.gp-marker.hq .pin { left:-6.5px; top:-6.5px; width:13px; height:13px; background:var(--lime-500); box-shadow:0 0 0 3px rgba(11,39,25,0.9), 0 0 20px rgba(200,226,38,0.65); }
.gp-marker.hq .ring { left:-6.5px; top:-6.5px; width:13px; height:13px; border-color:rgba(200,226,38,0.8); }
.gp-marker .lbl { position:absolute; left:15px; top:-10px; white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:13.5px; letter-spacing:0.01em; color:#fff; text-shadow:0 1px 10px rgba(11,39,25,0.95); }
.gp-marker .lbl em { font-style:normal; font-family:var(--font-label); font-weight:900; font-size:9.5px; letter-spacing:0.09em; color:var(--green-900); background:var(--lime-500); padding:2.5px 7px; border-radius:var(--r-full); margin-left:7px; vertical-align:2px; }
.gp-marker.lbl-left .lbl { left:auto; right:15px; }
.gp-marker.d2 .ring { animation-delay:0.9s; }
.gp-marker.d3 .ring { animation-delay:1.7s; }
.gp-marker.d4 .ring { animation-delay:2.5s; }
@keyframes gpPulse { 0% { transform:scale(1); opacity:0.9; } 70% { transform:scale(3.1); opacity:0; } 100% { transform:scale(3.1); opacity:0; } }
html[data-motion="minimal"] .gp-marker .ring, html[data-motion="minimal"] .gp-map .gp-arcs path { animation:none; }
@media (prefers-reduced-motion: reduce) { .gp-marker .ring, .gp-map .gp-arcs path { animation:none; } }
@media (max-width: 940px) {
  .gp-grid { grid-template-columns:1fr; gap:48px; }
  .gp-copy { order:1; }
  .gp-panel { order:2; }
  .gp-panel { padding:22px 16px; }
  .gp-copy .lead { max-width:560px; }
  .gp-marker .lbl { font-size:12px; }
}

/* ===== projects ===== */
.proj { display:grid; grid-template-columns:1.05fr 1fr; gap:0; border:1px solid var(--gray-100); border-radius:var(--r-xl); overflow:hidden; background:#fff; box-shadow:var(--sh-sm); }
.proj.flip .visual { order:2; }
.proj .visual { position:relative; min-height:380px; overflow:hidden; display:flex; align-items:flex-end; padding:28px; }
.proj .visual .tag { position:relative; z-index:2; }
.proj .visual .bigmw { position:absolute; right:30px; top:26px; z-index:2; font-family:var(--font-display); font-weight:800; font-size:54px; color:#fff; letter-spacing:-0.03em; line-height:0.9; text-align:right; }
.proj .visual .bigmw small { display:block; font-family:var(--font-label); font-weight:900; font-size:12px; letter-spacing:0.14em; color:var(--lime-500); margin-top:6px; }
.proj .body { padding:44px 44px; display:flex; flex-direction:column; }
.proj .body h2 { font-size:clamp(24px,2.4vw,30px); }
.proj .loc { display:flex; align-items:center; gap:7px; color:var(--green-700); font-weight:600; font-size:14.5px; margin-top:8px; }
.proj .loc svg { width:16px; height:16px; }
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin:26px 0; padding:24px 0; border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100); }
.spec .k { font-family:var(--font-label); font-weight:900; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gray-400); }
.spec .v { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); margin-top:3px; }
.feat-list { list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.feat-list li { display:flex; gap:11px; font-size:14.5px; color:var(--ink-soft); line-height:1.45; }
.feat-list svg { width:17px; height:17px; color:var(--green-600); flex-shrink:0; margin-top:2px; }
.phase-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.12); border-radius:var(--r-lg); overflow:hidden; }
.phase { background:var(--green-850); padding:26px 24px; }
.phase .pn { font-family:var(--font-label); font-weight:900; font-size:11px; letter-spacing:0.14em; color:var(--lime-500); }
.phase h4 { color:#fff; font-size:16px; margin-top:10px; } .phase p { color:rgba(255,255,255,0.74); font-size:13px; margin-top:8px; }
@media (max-width:880px){ .proj{ grid-template-columns:1fr; } .proj.flip .visual{ order:0; } .proj .visual{ min-height:240px; } .phase-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .spec-grid{ grid-template-columns:1fr 1fr; } .phase-grid{ grid-template-columns:1fr; } .proj .body{ padding:32px 24px; } }

/* ============================================================
   EXECUTIVE SUMMARY BLOCKS (digital + energy infrastructure)
   ============================================================ */
.exec { display:grid; grid-template-columns:1.02fr 0.98fr; gap:60px; align-items:center; }
.exec.flip .exec-visual { order:-1; }
.exec-copy .lead { margin-top:18px; max-width:520px; }
.exec-stats { display:flex; flex-wrap:wrap; gap:30px 46px; margin-top:38px; }
.exec-stat { position:relative; padding-top:16px; }
.exec-stat::before { content:""; position:absolute; top:0; left:0; width:34px; height:4px; border-radius:4px;
  background:linear-gradient(90deg,var(--lime-500),var(--teal-400)); }
.exec-stat .n { font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em; line-height:1;
  font-size:clamp(36px,3.8vw,54px); color:var(--green-800); display:inline-flex; align-items:baseline; }
.exec-stat .n .u { font-size:0.46em; color:var(--green-600); font-weight:700; letter-spacing:0; margin-left:2px; }
.exec-stat.text .n { font-size:clamp(22px,2.1vw,28px); line-height:1.1; max-width:200px; }
.exec-stat .k { font-family:var(--font-label); font-weight:900; font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--gray-400); margin-top:12px; }
.exec-visual { position:relative; display:flex; align-items:center; min-height:420px; overflow:visible; }
.exec:not(.flip) .exec-visual { justify-content:flex-end; }
.exec.flip .exec-visual { justify-content:flex-start; }
.exec-glow { position:absolute; width:150%; height:132%; top:-12%; pointer-events:none; z-index:0;
  background:radial-gradient(46% 46% at 50% 50%, rgba(34,132,98,0.32), transparent 64%),
             radial-gradient(34% 34% at 62% 62%, rgba(200,226,38,0.18), transparent 60%); }
.exec:not(.flip) .exec-glow { right:-34%; left:auto; }
.exec.flip .exec-glow { left:-34%; right:auto; }
.exec-floor { position:absolute; z-index:1; bottom:7%; transform:translateX(-50%); width:60%; height:36px;
  border-radius:50%; background:radial-gradient(closest-side, rgba(11,39,25,0.30), transparent 78%); filter:blur(2px); }
.exec:not(.flip) .exec-floor { left:62%; }
.exec.flip .exec-floor { left:38%; }
.exec-img { position:relative; z-index:2; width:126%; max-width:none; height:auto;
  filter:drop-shadow(0 42px 60px rgba(11,39,25,0.44)); animation:execFloat 7.5s ease-in-out infinite; }
.exec:not(.flip) .exec-img { margin-right:-28%; }
.exec.flip .exec-img { margin-left:-28%; }
@keyframes execFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
html[data-motion="minimal"] .exec-img { animation:none; }
@media (prefers-reduced-motion: reduce){ .exec-img { animation:none; } }
@media (max-width:920px){
  .exec { grid-template-columns:1fr; gap:34px; }
  .exec.flip .exec-visual { order:0; }
  .exec-visual, .exec:not(.flip) .exec-visual, .exec.flip .exec-visual { min-height:300px; justify-content:center; }
  .exec-img, .exec:not(.flip) .exec-img, .exec.flip .exec-img { width:100%; max-width:460px; margin:0; }
  .exec:not(.flip) .exec-glow, .exec.flip .exec-glow { left:-9%; right:auto; width:120%; }
  .exec:not(.flip) .exec-floor, .exec.flip .exec-floor { left:50%; }
}

/* ============================================================
   C&I REFERENCE LOGO MARQUEE
   ============================================================ */
.logo-marquee { position:relative; overflow:hidden; padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.logo-track { display:flex; gap:22px; width:max-content; animation:logoMarquee 64s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state:paused; }
@keyframes logoMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
html[data-motion="minimal"] .logo-track { animation:none; }
@media (prefers-reduced-motion: reduce){ .logo-track { animation:none; } }
.logo-plate { flex:0 0 auto; width:206px; height:108px; border-radius:var(--r-lg); overflow:hidden;
  background:#fff; border:1px solid var(--gray-100); box-shadow:var(--sh-sm);
  display:flex; align-items:center; justify-content:center; padding:18px 24px; transition:box-shadow 0.25s var(--ease), transform 0.25s var(--ease); }
.logo-plate:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }
.logo-plate img { width:100%; height:100%; object-fit:contain; object-position:center; }
@media (max-width:560px){ .logo-plate { width:172px; height:96px; padding:14px 18px; } }

/* ===== who we work with · audience duo (dark cards) ===== */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.duo-card { position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--green-850); color:#fff; border-radius:var(--r-xl); padding:48px 44px;
  box-shadow:var(--sh-md); transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.duo-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.duo-card .glow { width:300px; height:300px; right:-110px; top:-120px; background:rgba(76,187,187,0.22); }
.duo-card .eyebrow { position:relative; z-index:2; color:var(--lime-500); }
.duo-card .eyebrow::before { background:var(--teal-400); }
.duo-card .duo-lead { position:relative; z-index:2; font-family:var(--font-display); font-weight:700;
  letter-spacing:-0.02em; font-size:clamp(23px,2.2vw,28px); line-height:1.22; color:#fff; margin-top:22px; max-width:30ch; }
.duo-card .duo-cta { position:relative; z-index:2; display:inline-flex; align-items:center; gap:12px;
  margin-top:auto; padding-top:34px; font-family:var(--font-display); font-weight:600; font-size:16px;
  color:var(--lime-500); transition:gap 0.22s var(--ease); }
.duo-card .duo-cta svg { width:20px; height:20px; }
.duo-card .duo-cta:hover { gap:18px; }
@media (max-width:820px){ .duo { grid-template-columns:1fr; } }

/* ===== contact ===== */
.contact-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start; }
.info-card { background:var(--green-850); color:#fff; border-radius:var(--r-xl); padding:40px 36px; position:relative; overflow:hidden; }
.info-card .glow { width:340px; height:340px; right:-120px; top:-120px; background:rgba(76,187,187,0.22); }
.info-card .row { display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-top:1px solid rgba(255,255,255,0.12); position:relative; z-index:2; }
.info-card .row:first-of-type { border-top:none; }
.info-card .ri { width:42px; height:42px; border-radius:11px; background:rgba(200,226,38,0.14); color:var(--lime-500); display:grid; place-items:center; flex-shrink:0; } .info-card .ri svg{ width:20px;height:20px; }
.info-card .rk { font-family:var(--font-label); font-weight:900; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--lime-500); }
.info-card .rv { font-size:15.5px; color:#fff; margin-top:4px; } .info-card .rv span{ color:rgba(255,255,255,0.74); display:block; font-size:14px; }
.form-card { background:#fff; border:1px solid var(--gray-100); border-radius:var(--r-xl); padding:44px 40px; box-shadow:var(--sh-md); }
.field { margin-bottom:20px; } .row2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:20px; } .row2 .field { margin-bottom:0; }
label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.inp { width:100%; padding:13px 15px; border:1.5px solid var(--gray-200); border-radius:var(--r-md); font-family:var(--font-body); font-size:15px; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; background:#fff; }
.inp:focus { border-color:var(--green-700); box-shadow:0 0 0 3px rgba(34,132,98,0.12); }
textarea.inp { resize:vertical; min-height:120px; }
.inp.err { border-color:var(--color-error,#D94F4F); }
.errmsg { color:#C23B3B; font-size:12.5px; margin-top:5px; display:none; } .field.invalid .errmsg{ display:block; }
.form-err { display:none; margin:0 0 18px; padding:12px 16px; border-radius:var(--r-md); background:#FBEAEA; border:1px solid #F0C9C9; color:#B3352F; font-size:13.5px; line-height:1.5; }
.form-err.show { display:block; }
.form-success { display:none; text-align:center; padding:30px 10px; }
.form-success.show { display:block; }
.form-success .ok { width:64px; height:64px; border-radius:50%; background:#E4F5EC; color:var(--green-700); display:grid; place-items:center; margin:0 auto 20px; } .form-success .ok svg{ width:32px;height:32px; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; gap:32px; } }
@media (max-width:520px){ .row2{ grid-template-columns:1fr; } }

/* ===== multi-page panels (SPA tab-style switching) ===== */
/* Each page is its own panel; only the active one shows (tab-style, not one
   continuous scroll). Navigation is driven by the site's own top nav. */
.page-stack { position: relative; }
.site-page { display: none; }
.site-page.active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="minimal"]) .site-page.active { animation: pageFadeIn 0.4s var(--ease) both; }
}