/* ===================================================================
   CC POWER ELECTRONIC SDN BHD — custom styling
   Palette: steel navy + warm amber (hardware / construction trade)
=================================================================== */

:root{
  --cc-navy:        #161616;
  --cc-navy-deep:   #0b0b0b;
  --cc-steel:       #4a4a4a;
  --cc-amber:       #d6a403;
  --cc-amber-soft:  #ecc94b;
  --cc-gold-ink:    #8a6a00;
  --cc-paper:       #f6f3ec;
  --cc-ink:         #1a1a1a;
  --cc-line:        rgba(22,22,22,0.12);
  --cc-radius:      2px;
  --cc-font-head:   'Noto Serif', 'Noto Serif SC', serif;
  --cc-font-body:   'Inter', 'Noto Sans SC', sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--cc-font-body);
  color: var(--cc-ink);
  background: var(--cc-paper);
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: var(--cc-font-head);
  letter-spacing: 0.02em;
}

a{ color: var(--cc-navy); }

/* -------------------------------------------------- texture backdrop */
.grain-bg{
  position: relative;
}
.grain-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events:none;
  opacity:.5;
}

/* -------------------------------------------------- topbar strip */
.cc-topbar{
  background: var(--cc-navy-deep);
  color: #d8d8d8;
  font-size: .78rem;
  letter-spacing: .03em;
}
.cc-topbar a{ color:#d8d8d8; text-decoration:none; }
.cc-topbar a:hover{ color: var(--cc-amber-soft); }

/* -------------------------------------------------- navbar */
.cc-navbar{
  background: var(--cc-paper);
  border-bottom: 1px solid var(--cc-line);
  padding-top: .9rem;
  padding-bottom: .9rem;
}
.cc-navbar .navbar-brand{ padding:0; }
.cc-navbar .nav-link{
  font-size: .92rem;
  font-weight: 500;
  color: var(--cc-ink);
  margin: 0 .55rem;
  position: relative;
  padding-bottom: 4px !important;
}
.cc-navbar .nav-link::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:2px;
  background: var(--cc-amber);
  transition: width .25s ease;
}
.cc-navbar .nav-link:hover::after,
.cc-navbar .nav-link.active::after{ width:100%; }
.cc-navbar .nav-link.active{ color: var(--cc-navy); font-weight:700; }

.lang-switch{
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius);
  overflow:hidden;
}
.lang-switch button{
  background: transparent;
  border: 0;
  padding: .35rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--cc-steel);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.lang-switch button.is-active{
  background: var(--cc-navy);
  color: #fff;
}

/* -------------------------------------------------- hero */
.cc-hero{
  position: relative;
  background: linear-gradient(155deg, var(--cc-navy) 0%, var(--cc-navy-deep) 65%);
  color: #f1f1f1;
  padding: 7rem 0 6rem;
  overflow: hidden;
}
.cc-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 78% 30%, #000 0%, transparent 55%);
  mask-image: radial-gradient(circle at 78% 30%, #000 0%, transparent 55%);
  opacity:.6;
}
.cc-hero::after{
  content:"";
  position:absolute; left:-10%; bottom:-40%;
  width:60%; height:140%;
  background: linear-gradient(100deg, rgba(214,164,3,0.07), transparent 60%);
  transform: rotate(-8deg);
}
.cc-hero .ring{
  position:absolute;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius:50%;
}
.cc-hero .ring.r1{ width:520px; height:520px; right:-160px; top:-120px; animation: ccspin 60s linear infinite; }
.cc-hero .ring.r2{ width:340px; height:340px; right:-40px; top:120px; border-color: rgba(214,164,3,0.25); animation: ccspin 40s linear infinite reverse; }
.cc-hero .ring.r3{ width:210px; height:210px; right:30px; top:210px; border: 1px dashed rgba(214,164,3,0.3); }
@keyframes ccspin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

/* hero side visual: animated vector construction scene */
.hero-visual{
  position:relative;
  height: 320px;
  width: 100%;
}
.hero-visual::before{
  content:"";
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:360px; height:280px;
  background: radial-gradient(ellipse, rgba(214,164,3,0.16) 0%, transparent 70%);
  filter: blur(2px);
}
.hero-scene{ position:relative; width:100%; height:100%; overflow:visible; }

.hero-scene .ground{ stroke: rgba(255,255,255,0.2); stroke-width:1.5; }

.hero-scene .draw{
  fill:none;
  stroke: rgba(235,235,235,0.55);
  stroke-width: 1.6;
  stroke-dasharray: 1px;
  stroke-dashoffset: 1px;
  animation: ccdraw 1.3s ease forwards;
}
.hero-scene .draw.amber{ stroke: var(--cc-amber-soft); }
.hero-scene .building-fill{ fill: rgba(255,255,255,0.05); }
@keyframes ccdraw{ to{ stroke-dashoffset:0; } }

.hero-scene .crane-group{
  transform-origin: 231px 66px;
  transform-box: fill-box;
  animation: ccsway 5s ease-in-out infinite;
  animation-delay: 1.3s;
}
@keyframes ccsway{
  0%, 100%{ transform: rotate(-2.5deg); }
  50%{ transform: rotate(2.5deg); }
}
.hero-scene .hook{
  transform-box: fill-box;
  transform-origin: center;
  animation: cchook 5s ease-in-out infinite;
  animation-delay: 1.3s;
}
@keyframes cchook{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(5px); }
}

.hero-scene .crate{
  opacity:0;
  fill: rgba(214,164,3,0.22);
  stroke: rgba(214,164,3,0.65);
  stroke-width:1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: ccpop .5s ease forwards;
}
.hero-scene .crate1{ animation-delay:1.5s; }
.hero-scene .crate2{ animation-delay:1.7s; }
.hero-scene .crate3{ animation-delay:1.9s; }
@keyframes ccpop{
  from{ opacity:0; transform: translateY(8px) scale(.85); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.hero-scene .truck-group{
  animation: ccdrive 11s linear infinite;
  animation-delay: 2.2s;
}
.hero-scene .wheel{
  fill: rgba(11,11,11,0.9);
  stroke: rgba(214,164,3,0.6);
  stroke-width:1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: ccwheel .7s linear infinite;
}
@keyframes ccdrive{
  0%{ transform: translateX(-90px); opacity:0; }
  6%{ opacity:1; }
  46%{ transform: translateX(26px); }
  60%{ transform: translateX(26px); }
  96%{ opacity:1; }
  100%{ transform: translateX(430px); opacity:0; }
}
@keyframes ccwheel{ to{ transform: rotate(360deg); } }

@media (max-width: 991.98px){ .hero-visual{ display:none; } }
.cc-hero .eyebrow{
  color: var(--cc-amber-soft);
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 600;
}
.cc-hero h1{
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 700;
  margin: .6rem 0 1.2rem;
  /* max-width: 11ch; */
}
.cc-hero p.lead{
  color: #cbcbcb;
  max-width: 540px;
  font-size: 1.05rem;
}
.cc-hero .reg-pill{
  display:inline-flex; gap:.5rem; align-items:center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .78rem;
  color: #cbcbcb;
  margin-top: 1.8rem;
}
.cc-hero .reg-pill b{ color:#fff; font-weight:600; }

.scroll-cue{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
  color: rgba(255,255,255,0.5);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.scroll-cue .bar{
  width:1px; height:28px; background: rgba(255,255,255,0.35);
  overflow:hidden; position:relative;
}
.scroll-cue .bar::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--cc-amber);
  animation: ccscroll 1.8s infinite ease-in-out;
}
@keyframes ccscroll{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* -------------------------------------------------- section helpers */
.cc-section{ padding: 5rem 0; }
.cc-section.alt{ background:#fff; }
.cc-kicker{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--cc-gold-ink); font-weight:700;
}
.cc-title{
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--cc-navy);
  margin-top:.4rem;
}
.cc-rule{
  width:46px; height:3px; background:var(--cc-amber); margin: 1.1rem 0 1.4rem;
}

/* -------------------------------------------------- pillar flip cards */
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:991.98px){ .pillar-grid{ grid-template-columns:1fr; } }

.pillar-card{
  perspective: 1400px;
  height: 260px;
}
.pillar-card .inner{
  position:relative; width:100%; height:100%;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}
.pillar-card.flipped .inner{ transform: rotateY(180deg); }
.pillar-card .face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius: var(--cc-radius);
  padding: 1.6rem;
  display:flex; flex-direction:column;
}
.pillar-card .front{
  background:#fff;
  border:1px solid var(--cc-line);
  border-top: 3px solid var(--cc-amber);
  justify-content:space-between;
  cursor:pointer;
}
.pillar-card .back{
  background: var(--cc-navy);
  color:#e2e2e2;
  transform: rotateY(180deg);
  font-size:.92rem;
  line-height:1.55;
  justify-content:center;
  cursor:pointer;
}
.pillar-card .num{
  font-family: var(--cc-font-head);
  font-size:2.1rem; color: var(--cc-line); font-weight:700;
}
.pillar-card .front h3{ font-size:1.08rem; color:var(--cc-navy); margin-bottom:.4rem;}
.pillar-card .tap-hint{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#a6a6a6;
}
.pillar-card .back .tap-hint{ color: var(--cc-amber-soft); }

/* -------------------------------------------------- stats counters */
.stat-strip{
  background: var(--cc-navy-deep);
  color:#fff;
}
.stat-item{ text-align:center; padding: 2.4rem 1rem; }
.stat-num{
  font-family: var(--cc-font-head);
  font-size: 2.4rem; font-weight:700; color: var(--cc-amber-soft);
}
.stat-label{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:#b5b5b5;
  margin-top:.3rem;
}

/* -------------------------------------------------- tabbed capability explorer */
.cap-tabs{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2.2rem; }
.cap-tab-btn{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--cc-line);
  background:#fff;
  padding:.6rem 1.2rem;
  font-size:.86rem; font-weight:600; color:var(--cc-steel);
  border-radius:999px;
  cursor:pointer;
  transition: all .25s ease;
}
.cap-tab-btn i{ font-size:1rem; color: var(--cc-amber); transition: color .25s ease; }
.cap-tab-btn:hover{
  border-color: rgba(214,164,3,0.5);
  transform: translateY(-1px);
}
.cap-tab-btn.is-active{
  background: var(--cc-navy); color:#fff; border-color:var(--cc-navy);
  box-shadow: 0 10px 22px rgba(22,22,22,0.22);
}
.cap-tab-btn.is-active i{ color: var(--cc-amber-soft); }

.cap-panel{ display:none; }
.cap-panel.is-active{ display:block; animation: ccfade .4s ease; }
@keyframes ccfade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.cap-card{
  display:flex; gap:1.6rem; align-items:flex-start;
  background:#fff;
  border:1px solid var(--cc-line);
  border-left: 4px solid var(--cc-amber);
  border-radius: 2px;
  padding: 2rem;
  box-shadow: 0 16px 36px rgba(22,22,22,0.06);
}
.cap-card-icon{
  flex-shrink:0;
  width:64px; height:64px;
  border-radius:50%;
  background: linear-gradient(155deg, var(--cc-navy), var(--cc-navy-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 6px rgba(214,164,3,0.08);
}
.cap-card-icon i{ font-size:1.6rem; color: var(--cc-amber-soft); }
.cap-card-body h4{ color:var(--cc-navy); margin-bottom:.6rem; }
.tag-list{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.1rem; }
.tag-pill{
  font-size:.78rem; font-weight:600; color: var(--cc-steel);
  background: var(--cc-paper);
  border: 1px solid var(--cc-line);
  border-radius:999px;
  padding:.4rem .85rem;
  display:inline-flex; align-items:center;
  transition: border-color .2s ease, color .2s ease;
}
.tag-pill:hover{ border-color: rgba(214,164,3,0.5); color: var(--cc-navy); }

@media (max-width: 575.98px){
  .cap-card{ flex-direction:column; padding:1.4rem; gap:1rem; }
}

/* -------------------------------------------------- accordion override */
.accordion-item{ border:1px solid var(--cc-line); border-radius:0 !important; margin-bottom:.6rem; }
.accordion-button{
  font-weight:600; color:var(--cc-navy); background:#fff;
  border-radius:0 !important;
}
.accordion-button:not(.collapsed){ background: var(--cc-paper); color:var(--cc-navy); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; }

/* -------------------------------------------------- timeline */
.cc-timeline{ position:relative; margin-left: 1rem; padding-left:2rem; border-left:2px solid var(--cc-line); }
.cc-timeline .tl-item{ position:relative; padding-bottom:2.2rem; }
.cc-timeline .tl-item:last-child{ padding-bottom:0; }
.cc-timeline .tl-dot{
  position:absolute; left:-2.52rem; top:.15rem;
  width:14px; height:14px; border-radius:50%;
  background: var(--cc-amber); border:3px solid var(--cc-paper);
}
.cc-timeline .tl-year{ font-weight:700; color:var(--cc-navy); font-family:var(--cc-font-head); }

/* -------------------------------------------------- info / reg card */
.reg-table{ width:100%; font-size:.94rem; }
.reg-table tr{ border-bottom:1px solid var(--cc-line); }
.reg-table td{ padding:.7rem .3rem; vertical-align:top; }
.reg-table td:first-child{ width:38%; color:var(--cc-steel); font-weight:600; }

/* -------------------------------------------------- map / contact */
.contact-card{
  background:#fff; border:1px solid var(--cc-line); border-top:3px solid var(--cc-amber);
  padding:1.8rem;
}
.contact-card .icon{
  width:42px; height:42px; border-radius:50%;
  background: var(--cc-navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.9rem;
}
.map-frame{ border:1px solid var(--cc-line); filter: grayscale(.15) contrast(1.05); width:100%; height:100%; min-height:380px; }

.form-control, .form-select{ border-radius:0; border-color:var(--cc-line); }
.form-control:focus, .form-select:focus{ border-color:var(--cc-amber); box-shadow:0 0 0 2px rgba(214,164,3,0.15); }
.form-label{ font-size:.82rem; font-weight:600; color:var(--cc-steel); text-transform:uppercase; letter-spacing:.04em; }

.btn-cc{
  background: var(--cc-navy); color:#fff; border:1px solid var(--cc-navy);
  border-radius:0; padding:.65rem 1.6rem; font-weight:600; letter-spacing:.03em; font-size:.9rem;
  transition: all .2s;
}
.btn-cc:hover{ background:transparent; color:var(--cc-navy); }

/* -------------------------------------------------- footer */
.cc-footer{ background: var(--cc-navy-deep); color:#b5b5b5; padding:3.2rem 0 1.6rem; font-size:.9rem; }
.cc-footer h6{ color:#fff; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; margin-bottom:1rem; }
.cc-footer a{ color:#b5b5b5; text-decoration:none; }
.cc-footer a:hover{ color: var(--cc-amber-soft); }
.cc-footer hr{ border-color: rgba(255,255,255,0.08); margin:2rem 0 1.2rem; }
.cc-footer .fine{ font-size:.78rem; color:#8c8c8c; overflow-wrap:anywhere; }

/* -------------------------------------------------- reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* -------------------------------------------------- page hero (sub pages) */
.sub-hero{
  background: linear-gradient(150deg, var(--cc-navy) 0%, var(--cc-navy-deep) 75%);
  color:#f1f1f1; padding: 4.6rem 0 3.6rem;
  position:relative; overflow:hidden;
}
.sub-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(115deg, #000 0%, #000 30%, transparent 62%);
  mask-image: linear-gradient(115deg, #000 0%, #000 30%, transparent 62%);
  opacity:.55;
}
.sub-hero::after{
  content:"";
  position:absolute; right:-70px; bottom:-120px;
  width:260px; height:260px;
  background: linear-gradient(135deg, rgba(214,164,3,0.22), transparent 70%);
  border-radius:50%;
}
.sub-hero .ring{ position:absolute; border:1px solid rgba(255,255,255,0.08); border-radius:50%; width:380px; height:380px; right:-120px; top:-140px; }
.sub-hero .ring2{ position:absolute; border:1px solid rgba(214,164,3,0.3); border-radius:50%; width:200px; height:200px; right:40px; top:40px; }
.sub-hero .bevel{
  position:absolute; left:0; top:0; bottom:0; width:6px;
  background: linear-gradient(180deg, var(--cc-amber), var(--cc-amber-soft));
}
.sub-hero .crumb{ position:relative; font-size:.78rem; letter-spacing:.08em; color:#a6a6a6; text-transform:uppercase; }
.sub-hero h1{ position:relative; font-size:clamp(1.9rem,3.2vw,2.6rem); margin-top:.5rem; }

/* language visibility handled via JS toggling [data-en]/[data-zh] display */
[lang-zh]{ display:none; }
html[data-lang="zh"] [lang-en]{ display:none; }
html[data-lang="zh"] [lang-zh]{ display:revert; }

@media (max-width: 575.98px){
  .cc-hero{ padding: 5rem 0 4.5rem; }
  .stat-item{ padding: 1.6rem .5rem; }
}

/* ================================================== ABOUT PAGE */
.ab-intro{ padding: 5.5rem 0 4.5rem; background: var(--cc-paper); overflow:hidden; }
.ab-visual{ position:relative; margin:0; }
.ab-visual::before{
  content:""; position:absolute; inset: 18px -18px -18px 18px;
  border: 2px solid var(--cc-amber); border-radius:4px;
}
.ab-visual img{
  position:relative; display:block; width:100%; height:auto;
  border-radius:4px;
  box-shadow: 0 28px 56px rgba(22,22,22,0.22);
}
@media (max-width: 575.98px){ .ab-visual::before{ inset: 10px -10px -10px 10px; } }
.ab-statement{
  font-family: var(--cc-font-head);
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  line-height:1.35;
  color: var(--cc-navy);
  margin: .6rem 0 0;
}
.ab-statement em{ font-style:normal; color: var(--cc-gold-ink); }

/* drag compare */
.ab-compare{
  position:relative;
  height: 380px;
  overflow:hidden;
  border-radius: 2px;
  box-shadow: 0 24px 50px rgba(22,22,22,0.12);
  user-select:none;
}
.ab-side{
  position:absolute; inset:0;
  display:flex; align-items:center;
}
.ab-side-trade{
  background: linear-gradient(150deg, var(--cc-navy), var(--cc-navy-deep));
  color:#e2e2e2;
  justify-content:flex-start;
}
.ab-side-trade::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 22px 22px; opacity:.5;
}
.ab-side-build{
  background: linear-gradient(150deg, #ecc94b, #d6a403);
  color:#1a1400;
  justify-content:flex-end;
  clip-path: inset(0 0 0 var(--pos));
}
.ab-side-build::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 14px);
}
.ab-side-inner{ position:relative; max-width: 380px; padding: 2.4rem; }
.ab-side-build .ab-side-inner{ text-align:right; }
.ab-side-inner > i{ font-size:2rem; display:block; margin-bottom:.9rem; }
.ab-side-trade .ab-side-inner > i{ color: var(--cc-amber-soft); }
.ab-side-tag{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; opacity:.75; }
.ab-side-inner h3{ font-size:1.45rem; margin:.4rem 0 .7rem; }
.ab-side-trade h3{ color:#fff; }
.ab-side-inner p{ font-size:.95rem; line-height:1.6; margin:0; }
.ab-handle{
  position:absolute; top:0; bottom:0; left: var(--pos);
  width:2px; background:#fff;
  transform: translateX(-1px);
  pointer-events:none;
}
.ab-handle i{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:#fff; color: var(--cc-navy);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
.ab-range{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor: ew-resize; margin:0;
  -webkit-appearance:none; appearance:none;
}
.ab-compare:focus-within .ab-handle i{ outline: 2px solid var(--cc-amber); outline-offset:3px; }

/* numbered principle rows */
.ab-row{
  display:grid;
  grid-template-columns: 80px 1fr 48px;
  gap: 1.4rem;
  align-items:start;
  padding: 1.8rem 0;
  border-top: 1px solid var(--cc-line);
  transition: padding-left .3s ease;
}
.ab-row:last-child{ border-bottom: 1px solid var(--cc-line); }
.ab-row-num{
  font-family: var(--cc-font-head); font-weight:700;
  font-size: 2.4rem; line-height:1;
  color: transparent; -webkit-text-stroke: 1.5px var(--cc-amber);
  transition: color .3s ease;
}
.ab-row h3{ font-size:1.25rem; color: var(--cc-navy); margin-bottom:.4rem; }
.ab-row p{ color:#666666; margin:0; }
.ab-row-icon{ font-size:1.6rem; color: var(--cc-line); transition: color .3s ease, transform .3s ease; justify-self:end; }
.ab-row:hover{ padding-left:.8rem; }
.ab-row:hover .ab-row-num{ color: var(--cc-amber); }
.ab-row:hover .ab-row-icon{ color: var(--cc-amber); transform: rotate(-8deg) scale(1.1); }

/* horizontal journey */
.ab-journey{
  background: linear-gradient(155deg, var(--cc-navy), var(--cc-navy-deep));
  color:#cbcbcb;
  padding: 5rem 0 5.5rem;
  position:relative; overflow:hidden;
}


@media (max-width: 767.98px){
  .ab-compare{ height:auto; }
  .ab-side{ position:relative; }
  .ab-side-build{ clip-path:none; justify-content:flex-start; }
  .ab-side-build .ab-side-inner{ text-align:left; }
  .ab-side-inner{ max-width:none; padding: 1.8rem 1.4rem; }
  .ab-side-inner h3{ font-size:1.2rem; }
  .ab-handle, .ab-range, .ab-drag-hint{ display:none; }
  .ab-row{ grid-template-columns: 56px 1fr; }
  .ab-row-icon{ display:none; }
  .ab-row-num{ font-size:1.9rem; }
}

/* ================================================== SERVICES: working-with-us stepper */
.wk-section{
  position:relative; overflow:hidden;
  padding: 5.5rem 0 6rem;
  color:#cbcbcb;
  background-color: var(--cc-navy-deep);
  background-image:
    linear-gradient(rgba(236,201,75,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,201,75,0.07) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
.wk-section::after{
  content:""; position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(214,164,3,0.18), transparent 65%);
  pointer-events:none;
}
.wk-hint{ font-size:.9rem; color:#9f9f9f; margin:0; }

.wk-stepper{ position:relative; padding-top:84px; }
.wk-track{
  position:absolute; left:12.5%; right:12.5%; top: calc(84px + 32px);
  height:3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 8px, transparent 8px 16px);
}
.wk-track-fill{
  position:absolute; left:0; top:0; bottom:0;
  width: calc(var(--step) / 3 * 100%);
  background: linear-gradient(90deg, var(--cc-amber), var(--cc-amber-soft));
  box-shadow: 0 0 12px rgba(214,164,3,0.6);
  transition: width .8s cubic-bezier(.65,0,.35,1);
}
.wk-truck{
  position:absolute; top:-76px; z-index:2;
  left: calc(var(--step) / 3 * 100%);
  width:58px;
  transform: translateX(-50%);
  transition: left .8s cubic-bezier(.65,0,.35,1);
  animation: wkbump .5s ease-in-out infinite alternate;
}
.wk-truck svg{ display:block; width:100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)); }
@keyframes wkbump{ to{ margin-top:-2px; } }

.wk-nodes{ position:relative; display:grid; grid-template-columns: repeat(4, 1fr); }
.wk-node{
  background:none; border:0; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  color:#9f9f9f;
}
.wk-node-dot{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--cc-navy-deep);
  border: 2px solid rgba(255,255,255,0.2);
  font-size:1.4rem; color:#9f9f9f;
  transition: all .35s ease;
  position:relative;
}
.wk-node:hover .wk-node-dot{ border-color: rgba(236,201,75,0.7); color: var(--cc-amber-soft); }
.wk-node.is-done .wk-node-dot{ border-color: var(--cc-amber); color: var(--cc-amber-soft); }
.wk-node.is-active .wk-node-dot{
  background: var(--cc-amber); border-color: var(--cc-amber); color: var(--cc-navy-deep);
  transform: scale(1.08);
  box-shadow: 0 0 0 8px rgba(214,164,3,0.15), 0 12px 28px rgba(214,164,3,0.35);
}
.wk-node-label{ font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; transition: color .3s ease; }
.wk-node.is-active .wk-node-label, .wk-node.is-done .wk-node-label{ color:#fff; }
.wk-node:focus-visible{ outline:none; }
.wk-node:focus-visible .wk-node-dot{ outline: 2px solid var(--cc-amber-soft); outline-offset:4px; }

.wk-panels{ display:grid; margin-top: 3rem; }
.wk-panel{
  grid-area: 1 / 1;
  display:flex; gap: 2rem; align-items:center;
  padding: 2.2rem 2.4rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--cc-amber);
  backdrop-filter: blur(4px);
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.wk-panel.is-active{ opacity:1; visibility:visible; transform:none; }
.wk-ghost{
  font-family: var(--cc-font-head); font-weight:700;
  font-size: 4.5rem; line-height:1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(236,201,75,0.7);
  flex-shrink:0;
}
.wk-panel h3{ color:#fff; font-size:1.4rem; margin-bottom:.5rem; }
.wk-panel p{ margin:0; font-size:.98rem; line-height:1.65; max-width:60ch; }

@media (max-width: 575.98px){
  .wk-node-dot{ width:50px; height:50px; font-size:1.15rem; }
  .wk-stepper{ padding-top:66px; }
  .wk-track{ top: calc(66px + 25px); }
  .wk-truck{ width:44px; top:-58px; }
  .wk-node-label{ font-size:.62rem; letter-spacing:.06em; text-align:center; }
  .wk-panel{ flex-direction:column; align-items:flex-start; gap:.6rem; padding:1.6rem 1.4rem; }
  .wk-ghost{ font-size:3rem; }
  .wk-panel h3{ font-size:1.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .wk-truck{ animation:none; }
  .wk-track-fill, .wk-truck, .wk-panel{ transition:none; }
}

/* about: journey cards */
.jr-glow{
  position:absolute; left:-160px; bottom:-200px; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(214,164,3,0.16), transparent 65%);
  pointer-events:none;
}
.ab-journey::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
  pointer-events:none;
}
.jr-lead{ color:#aeaeae; font-size:1rem; margin-bottom:1.4rem; }

.jr-track{
  position:relative;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.4rem;
  padding-top: 2.6rem;
}
.jr-track.reveal{ opacity:1; transform:none; }
.jr-line{
  position:absolute; left:8px; right:8px; top:8px; height:2px;
  background: rgba(255,255,255,0.12);
}
.jr-line-fill{
  position:absolute; inset:0;
  background: linear-gradient(90deg, var(--cc-amber), var(--cc-amber-soft) 70%, rgba(236,201,75,0.25));
  transform-origin:left; transform: scaleX(0);
  transition: transform 1.6s cubic-bezier(.65,0,.35,1);
}
.jr-track.in .jr-line-fill{ transform: scaleX(1); }

.jr-card{
  position:relative;
  opacity:0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(.25s + var(--i) * .3s);
}
.jr-track.in .jr-card{ opacity:1; transform:none; }
.jr-dot{
  position:absolute; top:-2.6rem; left:0;
  width:18px; height:18px; border-radius:50%;
  background: var(--cc-navy-deep); border: 3px solid var(--cc-amber);
  transform: scale(0);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(.35s + var(--i) * .3s);
}
.jr-track.in .jr-dot{ transform: scale(1); }
.jr-card.is-next .jr-dot{ border-style:dashed; border-color: rgba(236,201,75,0.6); }
.jr-card:nth-child(4) .jr-dot{ background: var(--cc-amber); box-shadow: 0 0 0 6px rgba(214,164,3,0.2); }

.jr-year{
  font-family: var(--cc-font-head); font-weight:700;
  font-size: 2rem; line-height:1;
  color:#fff; margin-bottom:1rem;
}
.jr-card.is-next .jr-year{ color: transparent; -webkit-text-stroke: 1.2px rgba(236,201,75,0.8); }
.jr-body{
  position:relative;
  height: calc(100% - 3rem);
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-top: 2px solid var(--cc-amber);
  padding: 1.5rem 1.4rem 1.6rem;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.jr-card.is-next .jr-body{ border-style: dashed; border-top: 2px dashed rgba(236,201,75,0.6); background: transparent; }
.jr-card:hover .jr-body{
  transform: translateY(-6px);
  background: linear-gradient(160deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03));
  border-color: rgba(236,201,75,0.45);
}
.jr-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background: rgba(214,164,3,0.14);
  color: var(--cc-amber-soft); font-size:1.2rem;
  margin-bottom:1rem;
}
.jr-body h3{ color:#fff; font-size:1.15rem; margin-bottom:.5rem; }
.jr-body p{ font-size:.9rem; line-height:1.6; color:#bfbfbf; margin:0; }
.jr-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.jr-tags > span{
  font-size:.72rem; font-weight:600; color: var(--cc-amber-soft);
  border: 1px solid rgba(236,201,75,0.35); border-radius:999px;
  padding:.25rem .65rem;
}

@media (max-width: 991.98px){
  .jr-track{ grid-template-columns: 1fr 1fr; row-gap: 2.6rem; }
  .jr-line{ display:none; }
  .jr-dot{ display:none; }
  .jr-track{ padding-top:0; }
}
@media (max-width: 575.98px){
  .jr-track{ grid-template-columns: 1fr; padding-left: 2rem; row-gap: 2rem; }
  .jr-line{ display:block; left:8px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .jr-line-fill{ transform-origin:top; transform: scaleY(0);
    background: linear-gradient(180deg, var(--cc-amber), var(--cc-amber-soft) 70%, rgba(236,201,75,0.25)); }
  .jr-track.in .jr-line-fill{ transform: scaleY(1); }
  .jr-dot{ display:block; top:.35rem; left:-2rem; }
  .jr-body{ height:auto; }
}
@media (prefers-reduced-motion: reduce){
  .jr-card, .jr-dot, .jr-line-fill{ transition:none; }
}

/* ================================================== SERVICES: business lines */
.sv-section{ padding: 5rem 0 3rem; background:#fff; }
.sv-jump{ display:flex; flex-wrap:wrap; gap:.7rem; margin: .4rem 0 3.5rem; }
.sv-jump a{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1.15rem;
  border:1px solid var(--cc-line); border-radius:999px;
  background: var(--cc-paper);
  color: var(--cc-navy); text-decoration:none;
  font-size:.86rem; font-weight:600;
  transition: all .25s ease;
}
.sv-jump a i{ color: var(--cc-amber); }
.sv-jump a:hover{ background: var(--cc-navy); color:#fff; border-color: var(--cc-navy); transform: translateY(-2px); }
.sv-jump a:hover i{ color: var(--cc-amber-soft); }

.sv-block{
  display:grid; grid-template-columns: 1.05fr 1fr;
  gap: 4rem; align-items:center;
  padding: 3rem 0;
  scroll-margin-top: 110px;
}
.sv-block + .sv-block{ border-top: 1px dashed var(--cc-line); }
.sv-block.is-flip .sv-visual{ order:2; }

.sv-visual{
  position:relative;
  aspect-ratio: 4 / 3;
  background-color: var(--cc-navy);
  background-image:
    linear-gradient(rgba(236,201,75,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,201,75,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  border-radius: 2px;
  overflow:hidden;
  box-shadow: 0 26px 50px rgba(22,22,22,0.18);
}
.sv-visual::after{
  content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(214,164,3,0.22), transparent 65%);
}
.sv-block.is-flip .sv-visual::after{ right:auto; left:-80px; }
.sv-ghost{
  position:absolute; left:1.4rem; top:.6rem;
  font-family: var(--cc-font-head); font-weight:700; font-size:5rem; line-height:1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.18);
}
.sv-art{ position:absolute; inset:8% 6% 6%; width:88%; height:86%; overflow:visible; }
.sv-art .sv-ground{ stroke: rgba(255,255,255,0.25); stroke-width:1.5; }
.sv-art .ln{
  fill:none; stroke: rgba(235,235,235,0.75); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.sv-art .ln.amber{ stroke: var(--cc-amber-soft); }
.sv-block.in .sv-art .ln{ animation: svdraw 1.2s ease forwards; animation-delay: calc(.3s + var(--d)); }
@keyframes svdraw{ to{ stroke-dashoffset:0; } }
.sv-art .sv-fill{ fill: rgba(214,164,3,0.35); opacity:0; }
.sv-block.in .sv-art .sv-fill{ animation: svfill .5s ease forwards; animation-delay: var(--d); }
@keyframes svfill{ to{ opacity:1; } }
.sv-art .sv-float{ animation: svfloat 4s ease-in-out infinite; }
.sv-art .sv-float-2{ animation-delay: -2s; }
@keyframes svfloat{ 50%{ transform: translateY(-6px); } }
.sv-art .sv-sway{ transform-origin: 244px 200px; animation: svsway 6s ease-in-out infinite; }
@keyframes svsway{ 0%,100%{ transform: rotate(-1.5deg); } 50%{ transform: rotate(1.5deg); } }

.sv-chip{
  position:absolute; right:1.2rem; bottom:1.2rem;
  display:inline-flex; align-items:center; gap:.45rem;
  background: rgba(255,255,255,0.95); color: var(--cc-navy);
  font-size:.76rem; font-weight:700;
  padding:.45rem .85rem; border-radius:999px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.3);
}
.sv-chip i{ color: var(--cc-amber); }

.sv-num{
  font-family: var(--cc-font-head); font-weight:700; font-size:.95rem;
  color: var(--cc-gold-ink); letter-spacing:.1em;
  display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem;
}
.sv-num::after{ content:""; width:40px; height:2px; background: var(--cc-amber); }
.sv-text h3{ font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--cc-navy); margin-bottom:.4rem; }
.sv-lead{ font-family: var(--cc-font-head); font-size:1.15rem; color: var(--cc-gold-ink); margin-bottom:1rem; }
.sv-text > p:not(.sv-lead){ color:#666666; line-height:1.7; }
.sv-meta{
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color: var(--cc-steel); margin: 1.4rem 0 .6rem;
}
.sv-tags{ display:flex; flex-wrap:wrap; gap:.45rem; }
.sv-tags > span{
  font-size:.8rem; font-weight:600; color: var(--cc-navy);
  background: var(--cc-paper); border:1px solid var(--cc-line);
  border-radius:999px; padding:.35rem .8rem;
  transition: border-color .2s ease, background .2s ease;
}
.sv-tags > span:hover{ border-color: var(--cc-amber); background:#fff; }
.sv-for{
  display:flex; align-items:center; gap:.6rem;
  margin-top:1.4rem; padding-top:1.1rem;
  border-top:1px solid var(--cc-line);
  font-size:.88rem; color: var(--cc-steel); font-weight:500;
}
.sv-for i{ color: var(--cc-amber); font-size:1.1rem; }

@media (max-width: 991.98px){
  .sv-block{ grid-template-columns: 1fr; gap: 2rem; }
  .sv-block.is-flip .sv-visual{ order:0; }
}
@media (max-width: 575.98px){
  .sv-ghost{ font-size:3.4rem; }
  .sv-chip{ right:.8rem; bottom:.8rem; font-size:.7rem; }
}
@media (prefers-reduced-motion: reduce){
  .sv-art .ln{ stroke-dashoffset:0; animation:none !important; }
  .sv-art .sv-fill{ opacity:1; animation:none !important; }
  .sv-art .sv-float, .sv-art .sv-sway{ animation:none; }
}

/* gold text on dark sections stays bright */
.cc-hero .cc-kicker, .sub-hero .cc-kicker, .wk-section .cc-kicker, .ab-journey .cc-kicker{ color: var(--cc-amber); }

/* logo */
.brand-logo{ display:block; height:40px; width:auto; }
.footer-logo{ display:block; height:34px; width:auto; margin-bottom:1rem; }
@media (max-width: 575.98px){ .brand-logo{ height:32px; } }