/* ============================================================
   DEHAKA GROUP — design tokens
   Type scale: Tailwind default steps only
   Spacing:    approved token table only
   ============================================================ */
:root{
  /* spacing tokens */
  --s-0:0; --s-25:2px; --s-50:4px; --s-75:8px; --s-100:12px;
  --s-200:16px; --s-300:24px; --s-400:32px; --s-500:40px;
  --s-600:48px; --s-700:64px; --s-800:80px; --s-900:96px;

  /* brand palette, taken from the DEHAKA card system */
  --navy-900:#0B2145;
  --navy-800:#12305F;
  --navy-700:#1B4079;
  --blue-500:#2E7CD6;
  --blue-300:#7FB6EA;
  --blue-100:#D6E8F9;
  --gold-500:#DDA63A;
  --gold-300:#F0CE7E;
  --wa:#25D366;
  --paper:#FFFFFF;
  --paper-2:#F5F8FC;
  --paper-3:#E9F0F8;
  --ink:#0B1A2E;
  --ink-2:#42536B;
  --ink-3:#7A8798;
  --rule:#DCE5F0;

  /* motion */
  --ease:cubic-bezier(0.32,0.72,0,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;line-height:24px;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto is load bearing: every <img> carries width/height attributes for
   layout stability, and without it a constrained width leaves the attribute
   height in force and the picture is stretched. Rules that set an explicit
   height (object-fit crops, fixed height logos) are more specific and win. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px;border-radius:4px}

/* ---------- type scale (Tailwind steps) ---------- */
.t-xs{font-size:12px;line-height:16px}
.t-sm{font-size:14px;line-height:20px}
.t-base{font-size:16px;line-height:24px}
.t-lg{font-size:18px;line-height:28px}
.t-xl{font-size:20px;line-height:28px}
.t-2xl{font-size:24px;line-height:32px}
.t-3xl{font-size:30px;line-height:36px}
.t-4xl{font-size:36px;line-height:40px}
.t-5xl{font-size:48px;line-height:1}
.t-6xl{font-size:60px;line-height:1}
.t-7xl{font-size:72px;line-height:1}

h1,h2,h3,h4{font-weight:600;letter-spacing:-0.02em;text-wrap:balance}
p{text-wrap:pretty}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:var(--s-300);padding-right:var(--s-300)}
.measure{max-width:680px}

.eyebrow{
  font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--blue-500);
  display:flex;align-items:center;gap:var(--s-100);
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold-500);flex:none}
.eyebrow.center{justify-content:center}
.hero .eyebrow,.cta .eyebrow{color:var(--gold-500)}
.hero .eyebrow::before,.cta .eyebrow::before{background:var(--gold-500)}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:var(--s-200);top:-64px;z-index:200;
  background:var(--navy-800);color:#fff;padding:var(--s-100) var(--s-200);
  border-radius:8px;font-size:14px;line-height:20px;font-weight:600;
  transition:top 300ms var(--ease);
}
.skip:focus{top:var(--s-200)}

/* ============================================================
   FLUID ISLAND NAV
   ============================================================ */
.nav-shell{position:fixed;top:0;left:0;right:0;z-index:100;pointer-events:none}
.island{
  pointer-events:auto;
  margin:var(--s-300) auto 0;width:max-content;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:var(--s-300);
  padding:var(--s-75) var(--s-75) var(--s-75) var(--s-300);
  border-radius:9999px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(18,48,95,0.10);
  box-shadow:0 8px 32px rgba(11,33,69,0.10);
  transition:all 700ms var(--ease);
}
.nav-shell.scrolled .island{
  background:rgba(255,255,255,0.92);
  box-shadow:0 12px 40px rgba(11,33,69,0.16);
}
.island-logo{display:flex;align-items:center;flex:none}
/* the supplied lockup already carries the wordmark, so the mark is the
   whole logo rather than a glyph sitting next to typed text */
.island-logo img{height:28px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:var(--s-25)}
.nav-links a{
  font-size:14px;line-height:20px;font-weight:500;color:var(--ink-2);
  text-decoration:none;padding:var(--s-75) var(--s-100);border-radius:9999px;
  transition:all 400ms var(--ease);
}
.nav-links a:hover{color:var(--navy-800);background:rgba(46,124,214,0.08)}
.nav-links a[aria-current="true"],
.nav-links a[aria-current="page"]{color:var(--navy-800);background:rgba(46,124,214,0.10)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-75);
  font-family:inherit;font-weight:600;border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:all 400ms var(--ease);
}
.btn:active{transform:scale(0.98)}
.btn-primary{
  background:var(--gold-500);color:var(--navy-900);
  font-size:16px;line-height:24px;
  padding:var(--s-75) var(--s-100);border-radius:9999px;
}
.btn-primary:hover{background:var(--gold-300);transform:translateY(-1px)}
.btn-primary:active{transform:scale(0.98) translateY(0)}
.btn-sm{font-size:14px;line-height:20px;padding:var(--s-75) var(--s-200)}
.btn-gold{background:var(--gold-500);color:var(--navy-900)}
.btn-navy{
  background:var(--navy-800);color:#fff;
  font-size:16px;line-height:24px;padding:var(--s-75) var(--s-100);border-radius:9999px;
}
.btn-navy:hover{background:var(--navy-700);transform:translateY(-1px)}
.btn-gold:hover{background:var(--gold-300)}
.btn-ghost{
  background:rgba(11,33,69,0.42);color:#fff;border-color:rgba(255,255,255,0.44);
  font-size:16px;line-height:24px;padding:var(--s-75) var(--s-100);border-radius:9999px;
}
.btn-ghost:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.56)}

/* hamburger */
.burger{
  display:none;position:relative;width:40px;height:40px;flex:none;
  border-radius:9999px;border:1px solid rgba(18,48,95,0.12);
  background:#fff;cursor:pointer;transition:all 400ms var(--ease);
}
.burger:hover{background:var(--paper-2)}
.burger span{
  position:absolute;left:11px;width:18px;height:2px;border-radius:2px;
  background:var(--navy-800);
  transition:all 700ms var(--ease);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:23px}
body.menu-open .burger span:nth-child(1){top:19px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){top:19px;transform:rotate(-45deg)}

/* full screen overlay */
.overlay{
  position:fixed;inset:0;z-index:99;
  background:rgba(11,33,69,0.86);
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--s-700) var(--s-400);
  opacity:0;visibility:hidden;
  transition:opacity 700ms var(--ease),visibility 700ms var(--ease);
}
body.menu-open .overlay{opacity:1;visibility:visible}
.overlay a{
  display:block;color:#fff;text-decoration:none;
  font-size:30px;line-height:36px;font-weight:600;letter-spacing:-0.02em;
  padding:var(--s-100) 0;
  opacity:0;transform:translateY(48px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease),color 300ms var(--ease);
}
.overlay a:hover{color:var(--gold-300)}
body.menu-open .overlay a{opacity:1;transform:translateY(0)}
body.menu-open .overlay a:nth-child(1){transition-delay:100ms}
body.menu-open .overlay a:nth-child(2){transition-delay:150ms}
body.menu-open .overlay a:nth-child(3){transition-delay:200ms}
body.menu-open .overlay a:nth-child(4){transition-delay:250ms}
body.menu-open .overlay a:nth-child(5){transition-delay:300ms}
body.menu-open .overlay a:nth-child(6){transition-delay:350ms}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{
  opacity:0;transform:translateY(64px);filter:blur(12px);
  transition:opacity 900ms var(--ease),transform 900ms var(--ease),filter 900ms var(--ease);
}
.reveal.in{opacity:1;transform:translateY(0);filter:blur(0)}
.reveal.d1{transition-delay:100ms}
.reveal.d2{transition-delay:200ms}
.reveal.d3{transition-delay:300ms}
/* fail safe: content must never depend on JS to be visible */
.no-js .reveal,
.reveal.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms !important;animation-duration:1ms !important}
  .reveal{opacity:1;transform:none;filter:none}
  .hero h1 .wi{transform:none}
  .hero .lift{opacity:1;transform:none}
  .hero-rule{transform:scaleX(1)}
  .lines svg,.cue i::after{animation:none}
  .belt-track{animation:none !important;flex-wrap:wrap;width:auto}
  .belt{-webkit-mask-image:none;mask-image:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:var(--navy-900);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--s-900) + var(--s-700)) 0 var(--s-800);
}
.hero-geo{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* photographic backdrop: sector context, never captioned as a DEHAKA asset */
.hero-photo{
  position:absolute;inset:-4%;z-index:0;   /* slack so it can drift without edges showing */
  background:var(--navy-900) center/cover no-repeat;
  opacity:0;transition:opacity 1400ms var(--ease),transform 1200ms var(--ease);
  will-change:transform;
}
.hero-photo.on{opacity:0.92}
/* the shard geometry was built for a flat field; over a photograph it only
   adds noise, so it steps aside and the lines stay as a faint texture */
.hero-photo.on ~ .hero-geo .layer{opacity:0;transition:opacity 1200ms var(--ease)}
.hero-photo.on ~ .hero-geo .lines{opacity:0}
.hero-photo.on ~ .hero-grid{opacity:0}
/* flat scrims keep the headline readable over the photo (no colour gradients:
   these are hard stop overlays, one flat wash per element) */
.hero-scrim{position:absolute;inset:0;z-index:1;background:var(--navy-900);opacity:0.20}
.hero-scrim-left{
  position:absolute;inset:0;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 70%);
  mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 70%);
  background:#050D1C;opacity:0.72;
}
.hero .hero-geo,.hero .hero-grid{z-index:2}
.hero-inner{z-index:3}

/* parallax shard layers */
.layer{
  position:absolute;inset:-10%;
  will-change:transform;
  transition:transform 1200ms var(--ease);
}
.layer svg{position:absolute;right:-6%;top:-4%;width:74%;height:auto}
.layer-2 svg{right:2%;top:6%;width:58%}
.layer-3 svg{right:14%;top:22%;width:34%}

/* seismic contour lines: drift slowly, evokes a survey read out */
.lines{position:absolute;left:0;right:0;bottom:0;height:52%;opacity:0.5}
.lines svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
.lines svg path{fill:none;stroke:var(--blue-300);stroke-opacity:0.26;stroke-width:1.5}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.lines svg{animation:drift 46s linear infinite}
.lines svg.slow{animation-duration:74s;opacity:0.6}

/* gold rule that draws itself */
.hero-rule{
  width:64px;height:3px;background:var(--gold-500);
  margin-top:var(--s-400);margin-bottom:var(--s-300);
  transform:scaleX(0);transform-origin:left;
  transition:transform 900ms var(--ease) 200ms;
}
.hero.ready .hero-rule{transform:scaleX(1)}

/* headline: per word mask reveal */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:0.08em}
.hero h1 .wi{
  display:inline-block;transform:translateY(110%);
  transition:transform 1000ms var(--ease);
}
.hero.ready h1 .wi{transform:translateY(0)}

/* everything else fades up once the words are moving */
.hero .lift{
  opacity:0;transform:translateY(24px);
  transition:opacity 900ms var(--ease),transform 900ms var(--ease);
}
.hero.ready .lift{opacity:1;transform:translateY(0)}
.hero.ready .lift.l1{transition-delay:620ms}
.hero.ready .lift.l2{transition-delay:760ms}
.hero.ready .lift.l3{transition-delay:900ms}

/* scroll cue */
/* Centred with auto margins, not translateX(-50%): this element also carries
   .lift, and `.hero.ready .lift{transform:translateY(0)}` is the more specific
   rule, so a transform based centring is silently overwritten and the tick
   drifts half its own width off axis. */
.cue{
  position:absolute;left:0;right:0;margin-inline:auto;width:max-content;
  bottom:var(--s-400);
  display:flex;flex-direction:column;align-items:center;gap:var(--s-75);
  font-size:12px;line-height:16px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(214,232,249,0.44);text-decoration:none;z-index:4;
  transition:color 400ms var(--ease);
}
.cue:hover{color:#fff}
.cue i{
  width:1px;height:40px;background:rgba(127,182,234,0.32);position:relative;overflow:hidden;
}
.cue i::after{
  content:"";position:absolute;left:0;top:-40px;width:1px;height:40px;background:var(--gold-500);
  animation:cueRun 2.4s var(--ease) infinite;
}
@keyframes cueRun{0%{top:-40px}60%,100%{top:40px}}
.hero-grid{position:absolute;inset:0;opacity:0.30;
  /* flat SVG rule grid, no gradient */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M80 0H0v80' fill='none' stroke='%237FB6EA' stroke-opacity='0.28' stroke-width='1'/%3E%3C/svg%3E");
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 80% 60% at 20% 40%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 20% 40%,#000 20%,transparent 75%);
}
.hero-inner{position:relative;z-index:2}
.hero h1{
  max-width:680px;
  font-size:48px;line-height:1.06;font-weight:600;letter-spacing:-0.035em;
  margin-top:var(--s-300);
  /* solid white is the safe default; the gradient is applied per word only
     once JS has measured it, because background-clip:text cannot paint
     through a transformed descendant. */
  color:#FFFFFF;
}
.hero.painted h1 .wi{
  background-image:linear-gradient(90deg,#FFFFFF 0%,#9B9B9B 100%);
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.hero .sub{
  max-width:680px;margin-top:var(--s-300);
  font-size:18px;line-height:28px;color:rgba(214,232,249,0.82);font-weight:300;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s-100);margin-top:var(--s-500)}
.hero-proof{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-100) var(--s-300);
  margin-top:var(--s-700);padding-top:var(--s-300);
  border-top:1px solid rgba(127,182,234,0.20);max-width:680px;
}
.hero-proof span{
  font-size:14px;line-height:20px;color:rgba(214,232,249,0.72);
  display:flex;align-items:center;gap:var(--s-75);
}
.hero-proof svg{width:16px;height:16px;color:var(--gold-500);flex:none;margin-top:2px}
/* the address wraps, so the pin aligns to the first line rather than to the
   vertical centre of a two line block */
.hero-proof span{align-items:flex-start}
/* .addr is a span too, so it inherits the flex row above; force it back to a
   block or the label sits beside the address instead of above it */
.hero-proof .addr{display:block}
/* keeps the postcode from being orphaned on its own last line */
.nb{white-space:nowrap}
.hero-proof .addr b{
  display:block;color:var(--gold-500);
  font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;margin-bottom:var(--s-25);
}

/* ============================================================
   BUSINESS PILLARS
   ============================================================ */
.section{padding:var(--s-900) 0}
.section-head{max-width:680px;margin-bottom:var(--s-700)}
.section-head h2{font-size:36px;line-height:40px;margin-top:var(--s-200)}
.section-head p{font-size:18px;line-height:28px;color:var(--ink-2);margin-top:var(--s-200);font-weight:300}

/* Photo forward dark cards on the light section: the image carries the card
   and the round badge straddles the seam between photo and body. */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-200)}
.pillar{
  position:relative;overflow:hidden;
  background:var(--navy-900);
  border:1px solid rgba(127,182,234,0.16);
  border-radius:16px;
  display:flex;flex-direction:column;
  transition:transform 700ms var(--ease),box-shadow 700ms var(--ease),border-color 700ms var(--ease);
}
.pillar:hover{
  transform:translateY(-4px);border-color:rgba(127,182,234,0.34);
  box-shadow:0 20px 48px rgba(11,33,69,0.22);   /* tinted to the navy, not black */
}
/* .pillar-media does not clip, so the badge can hang past the photo. The inner
   .pillar-shot does the clipping for the image that scales on hover. */
.pillar-media{position:relative}
.pillar-shot{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--navy-800);
}
.pillar-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1200ms var(--ease);
}
.pillar:hover .pillar-shot img{transform:scale(1.04)}
/* darkens the foot of the photo so the badge never lands on a bright pixel */
.pillar-shot::after{
  content:"";position:absolute;inset:auto 0 0;height:44%;
  background:linear-gradient(to bottom,rgba(11,33,69,0) 0%,rgba(11,33,69,0.72) 100%);
}
.pillar-icon{
  position:absolute;left:var(--s-300);bottom:0;z-index:2;
  transform:translateY(50%);
  width:56px;height:56px;border-radius:9999px;
  background:var(--paper);color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(3,12,28,0.34);
}
.pillar-icon svg{width:26px;height:26px}
/* top padding clears the half of the badge that hangs into the body */
.pillar-body{padding:var(--s-500) var(--s-300) var(--s-400);display:flex;flex-direction:column;flex:1}
.pillar h3{font-size:20px;line-height:28px;color:#fff}
.pillar .legal{
  font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--gold-500);margin-top:var(--s-50);
}
.pillar p{font-size:14px;line-height:20px;color:rgba(214,232,249,0.72);margin-top:var(--s-200)}
/* capabilities read as one quiet line so the three cards stay compact.
   margin-top:auto pins it to the foot of every card, so the rules line up
   across the row even though the descriptions run to different lengths. */
.pillar .caps{
  margin-top:auto;padding-top:var(--s-200);
  border-top:1px solid rgba(127,182,234,0.16);
  font-size:12px;line-height:16px;color:rgba(214,232,249,0.52);
}
/* the gap above the rule comes from the description, since margin-top on the
   caps itself has to stay `auto` for the row to line up */
.pillar p:not(.legal):not(.caps){margin-bottom:var(--s-300)}

/* ============================================================
   TAGLINE REVEAL
   ============================================================ */
.tagline{background:var(--navy-900);padding:var(--s-900) 0;position:relative;overflow:hidden}
.tagline .wrap{position:relative;z-index:2}
.tagline #taglineText{
  font-size:48px;line-height:1.12;font-weight:600;letter-spacing:-0.03em;
  text-wrap:balance;
}
.tagline .word{
  color:rgba(255,255,255,0.28);
  transition:color 700ms var(--ease);
}
.tagline .word.lit{color:#FFFFFF}
.tagline .word.gold.lit{color:var(--gold-500)}
/* the real group emblem carries the watermark now; it is a colour gradient
   rather than a flat mark, so it sits lower and quieter than the old SVG */
.tagline-mark{position:absolute;left:-9%;bottom:-34%;width:34%;opacity:0.10;pointer-events:none}
.tagline-grid{display:grid;grid-template-columns:1.25fr 0.75fr;gap:var(--s-700);align-items:center}
.tagline-brands .brands-grid{grid-template-columns:1fr;gap:var(--s-200);margin-top:var(--s-300)}
.tagline-brands .brand-chip{height:96px}



/* ============================================================
   STRATEGIC PARTNERSHIPS — slow running belt
   Logo files live in img/partners/. If a file is missing the slot
   falls back to the wordmark, so the belt never shows a broken image.
   ============================================================ */
.partners{background:var(--navy-800);padding:var(--s-500) 0;overflow:hidden}
.partners .wrap{display:flex;align-items:center;gap:var(--s-500)}
.partners-label{
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gold-500);flex:none;
}
.belt{
  position:relative;flex:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.belt-track{
  display:flex;align-items:center;width:max-content;
  animation:belt 46s linear infinite;
  will-change:transform;
}
.belt:hover .belt-track{animation-play-state:paused}
@keyframes belt{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Wide gaps: with only three marks a tight belt shows the loop repeating
   twice inside one viewport, which reads as padding rather than a roster. */
.belt-set{display:flex;align-items:center;gap:120px;padding-right:120px;flex:none}
.partner{
  display:flex;align-items:center;flex:none;height:36px;
  color:rgba(255,255,255,0.88);
  transition:color 500ms var(--ease),opacity 500ms var(--ease);
  opacity:0.82;
}
.partner:hover{opacity:1;color:#fff}
/* Each mark is optically balanced, not box balanced: a lockup carrying a
   tagline needs more height to match the cap height of a bare wordmark. */
.partner img{
  height:var(--lh,32px);width:auto;max-width:200px;object-fit:contain;
  filter:brightness(0) invert(1);
}
.partner .wordmark{
  font-size:18px;line-height:28px;font-weight:600;letter-spacing:0.08em;white-space:nowrap;
}

/* ============================================================
   SUB BRAND STRIP
   ============================================================ */
.brands{background:var(--navy-900);padding:var(--s-700) 0}
.brands-label{
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gold-500);
}
.brands-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s-300);margin-top:var(--s-400);
}
/* Each member logo sits on its own white card rather than being reversed to
   white: the DHK Energi emblem is dark navy and would vanish on this band,
   and the Consulting gold would drop below a readable contrast. */
.brand-chip{
  background:#fff;border-radius:12px;height:144px;
  display:flex;align-items:center;justify-content:center;padding:var(--s-300);
  transition:transform 700ms var(--ease),box-shadow 700ms var(--ease);
}
.brand-chip:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(3,12,28,0.36)}
/* Height is set per mark: a stacked lockup needs more of the card than a
   single line wordmark to match it optically. The min() caps it at the card's
   content box, so a shorter card on mobile shrinks the mark instead of
   letting it eat the padding. */
.brand-chip img{height:min(var(--ch,28px),100%);width:auto;max-width:100%;display:block}

/* ============================================================
   VISION + MISSION
   ============================================================ */
.vm{background:var(--navy-800);position:relative;overflow:hidden;padding:var(--s-900) 0}
.vm::before{
  content:"";position:absolute;left:50%;top:12%;bottom:12%;width:1px;
  transform:translateX(-50%);   /* centre the rule on the axis, not its left edge */
  background:rgba(221,166,58,0.34);
}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-900)}
.vm-col{text-align:center;padding:0 var(--s-300)}
.vm-icon{
  width:64px;height:64px;margin:0 auto var(--s-300);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(221,166,58,0.44);border-radius:9999px;
  color:var(--gold-500);
}
.vm-icon svg{width:28px;height:28px}
.vm h3{
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.20em;
  text-transform:uppercase;color:var(--gold-500);margin-bottom:var(--s-200);
}
.vm p{
  font-size:20px;line-height:28px;font-weight:300;color:#fff;
  max-width:420px;margin:0 auto;text-wrap:pretty;
}

/* ============================================================
   CORE VALUES
   ============================================================ */
.values{background:var(--paper-2);padding:var(--s-900) 0}
.values-head{text-align:center;max-width:680px;margin:0 auto var(--s-700)}
.values-head h2{font-size:36px;line-height:40px;margin-top:var(--s-200)}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-300)}
.value{
  text-align:center;padding:var(--s-400) var(--s-300);
  border:1px solid var(--rule);border-radius:16px;background:var(--paper);
  transition:all 700ms var(--ease);
}
.value:hover{border-color:var(--gold-500);transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,33,69,0.08)}
.value-icon{
  width:56px;height:56px;margin:0 auto var(--s-300);
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;background:var(--navy-800);color:var(--gold-500);
}
.value-icon svg{width:26px;height:26px}
.value h3{font-size:18px;line-height:28px}
.value p{font-size:14px;line-height:20px;color:var(--ink-2);margin-top:var(--s-100)}

/* ============================================================
   WIDE SECTOR BAND
   ============================================================ */
.band{position:relative;overflow:hidden;background:var(--navy-900);min-height:520px;
  display:flex;align-items:flex-end}
.band img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0.92;
}
.band-scrim{position:absolute;inset:0;background:#050D1C;opacity:0.26}
.band-scrim-left{
  position:absolute;inset:0;background:#050D1C;opacity:0.74;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 68%);
  mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 68%);
}
.band .wrap{position:relative;z-index:2;padding-top:var(--s-800);padding-bottom:var(--s-600)}
.band h2{
  font-size:36px;line-height:40px;max-width:680px;color:#fff;
}
.band p{
  font-size:16px;line-height:24px;color:rgba(214,232,249,0.78);
  max-width:560px;margin-top:var(--s-200);font-weight:300;
}
.band .note{
  position:absolute;right:var(--s-300);bottom:var(--s-200);z-index:2;
  font-size:12px;line-height:16px;color:rgba(255,255,255,0.62);
  background:rgba(11,33,69,0.62);padding:var(--s-50) var(--s-75);border-radius:4px;
}

/* ============================================================
   BENEFITS
   ============================================================ */
.benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-300)}
.benefit:hover{background:var(--paper-2);border-color:var(--blue-300)}
.benefit h3{font-size:20px;line-height:28px;margin-top:var(--s-200)}
.benefit p{font-size:14px;line-height:20px;color:var(--ink-2);margin-top:var(--s-100)}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-300);counter-reset:step}
.step{position:relative;padding-top:var(--s-300);border-top:2px solid var(--rule);transition:border-color 700ms var(--ease)}
.step:hover{border-top-color:var(--gold-500)}
.step .num{
  font-size:48px;line-height:1;font-weight:600;letter-spacing:-0.04em;
  color:var(--paper-3);
}
.step h3{font-size:20px;line-height:28px;margin-top:var(--s-200)}
.step p{font-size:14px;line-height:20px;color:var(--ink-2);margin-top:var(--s-100)}

/* ============================================================
   LEADERSHIP
   ============================================================ */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-300)}
.person{
  border:1px solid var(--rule);border-radius:16px;padding:var(--s-300);
  background:var(--paper);transition:all 700ms var(--ease);
}
.person:hover{border-color:var(--blue-300);transform:translateY(-4px)}
.portrait{
  width:100%;aspect-ratio:4/5;border-radius:8px;
  background:var(--paper-3);
  position:relative;overflow:hidden;
}
.portrait img{
  width:100%;height:100%;object-fit:cover;object-position:center 12%;
  transition:transform 1200ms var(--ease);
}
.person:hover .portrait img{transform:scale(1.04)}
.person h3{font-size:16px;line-height:24px;margin-top:var(--s-200)}
.person .role{font-size:12px;line-height:16px;color:var(--blue-500);font-weight:500;margin-top:var(--s-25)}
.person .cn{font-size:12px;line-height:16px;color:var(--ink-3);margin-top:var(--s-25)}

/* ============================================================
   ENTITIES + OFFICES
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-700)}
.entity-list{list-style:none;display:grid;gap:var(--s-25);margin-top:var(--s-300)}
.entity-list li{
  display:flex;align-items:center;gap:var(--s-200);
  padding:var(--s-200) 0;border-bottom:1px solid var(--rule);
  font-size:16px;line-height:24px;font-weight:500;
}
.entity-list li span{
  font-size:12px;line-height:16px;color:var(--ink-3);font-weight:400;margin-left:auto;text-align:right;
}
.office{
  border:1px solid var(--rule);border-radius:16px;padding:var(--s-300);
  background:var(--paper-2);
}
.office + .office{margin-top:var(--s-200)}
.office .tag{
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--blue-500);
}
.office p{font-size:14px;line-height:20px;color:var(--ink-2);margin-top:var(--s-75)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:800px;margin:0 auto}
details{border-bottom:1px solid var(--rule)}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--blue-500)}
details[open] summary .chev{transform:rotate(45deg)}
details .ans{padding:0 0 var(--s-300);max-width:680px}
details .ans p{font-size:16px;line-height:24px;color:var(--ink-2)}

/* ============================================================
   FINAL CTA + FORM
   ============================================================ */
.cta{background:var(--navy-900);position:relative;overflow:hidden;padding:var(--s-900) 0}
.cta .wrap{position:relative;z-index:2}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-700);align-items:start}
.cta h2{
  font-size:48px;line-height:1.06;max-width:680px;
  background:linear-gradient(90deg,#FFFFFF 0%,#9B9B9B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cta .sub{font-size:18px;line-height:28px;color:rgba(214,232,249,0.78);margin-top:var(--s-300);font-weight:300}
.direct{margin-top:var(--s-500);display:grid;gap:var(--s-200)}
.direct a{
  display:flex;align-items:flex-start;gap:var(--s-100);text-decoration:none;
  font-size:16px;line-height:24px;color:#fff;
  transition:color 300ms var(--ease);
}
.direct a:hover{color:var(--gold-300)}
.direct svg{width:20px;height:20px;color:var(--gold-500);flex:none;margin-top:2px}

form{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(127,182,234,0.20);
  border-radius:16px;padding:var(--s-400);
}
.field{margin-bottom:var(--s-300)}
label{
  display:block;font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:0.10em;text-transform:uppercase;color:rgba(214,232,249,0.72);
  margin-bottom:var(--s-75);
}
input,textarea,select{
  width:100%;font-family:inherit;font-size:16px;line-height:24px;
  background:rgba(11,33,69,0.50);color:#fff;
  border:1px solid rgba(127,182,234,0.24);
  border-radius:8px; /* nested: 16 outer − 32 padding, gap ≥32 so own step */
  padding:var(--s-100);
  transition:all 400ms var(--ease);
}
textarea{min-height:104px;resize:vertical}
input::placeholder,textarea::placeholder{color:rgba(214,232,249,0.40)}
input:hover,textarea:hover,select:hover{border-color:rgba(127,182,234,0.44)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(46,124,214,0.24);
}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#E8705A}
.err{
  display:none;font-size:12px;line-height:16px;color:#F0A091;margin-top:var(--s-50);
}
.err.show{display:block}
.send-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-100)}
form button{width:100%;padding:var(--s-100) var(--s-200);border-radius:9999px;font-size:16px;line-height:24px}
form button[disabled]{opacity:0.6;cursor:not-allowed}
.btn-wa{background:var(--wa);color:#08182F}
.btn-wa:hover{background:#4BE083;transform:translateY(-1px)}
.btn-wa svg{width:20px;height:20px;flex:none}
.btn-gold svg{width:18px;height:18px;flex:none}

/* trust strip */
.trust{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2)}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-300);padding:var(--s-500) 0}
.trust-item{display:flex;gap:var(--s-200);align-items:flex-start}
.trust-item svg{width:24px;height:24px;color:var(--blue-500);flex:none;margin-top:2px}
.trust-item h3{font-size:14px;line-height:20px;font-weight:600}
.trust-item p{font-size:12px;line-height:16px;color:var(--ink-2);margin-top:var(--s-25)}

/* floating whatsapp */
.wa-float{
  position:fixed;right:var(--s-300);bottom:var(--s-300);z-index:98;
  display:flex;align-items:center;gap:var(--s-100);
  background:var(--wa);color:#08182F;text-decoration:none;
  font-size:14px;line-height:20px;font-weight:600;
  padding:var(--s-100) var(--s-200);border-radius:9999px;
  box-shadow:0 8px 32px rgba(37,211,102,0.36);
  transition:all 700ms var(--ease);
}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(37,211,102,0.48)}
.wa-float:active{transform:scale(0.98)}
.wa-float svg{width:22px;height:22px;flex:none}
@media (max-width:560px){.wa-float span{display:none}.wa-float{padding:var(--s-100)}}
.form-note{font-size:12px;line-height:16px;color:rgba(214,232,249,0.56);margin-top:var(--s-200)}
.form-ok{
  display:none;border:1px solid rgba(221,166,58,0.40);background:rgba(221,166,58,0.10);
  border-radius:8px;padding:var(--s-200);margin-bottom:var(--s-300);
}
.form-ok.show{display:block}
.form-ok p{font-size:14px;line-height:20px;color:var(--gold-300)}

/* ============================================================
   FOOTER
   ============================================================ */
/* the bottom padding clears the fixed WhatsApp button, which otherwise
   sits on top of the Terms link once the page is scrolled to the end */
footer{background:#08182F;padding:var(--s-800) 0 var(--s-900)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s-700)}
.foot-logo{display:flex;align-items:center}
/* the reversed lockup: emblem left in its own colour, wordmark in white */
.foot-logo img{height:38px;width:auto;display:block}
footer .tag{font-size:14px;line-height:20px;color:rgba(214,232,249,0.56);margin-top:var(--s-200);max-width:320px}
footer h4{
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold-500);margin-bottom:var(--s-200);
}
footer ul{list-style:none;display:grid;gap:var(--s-100)}
footer ul a{
  font-size:14px;line-height:20px;color:rgba(214,232,249,0.72);text-decoration:none;
  transition:color 300ms var(--ease);
}
footer ul a:hover{color:#fff}
.foot-bottom{
  margin-top:var(--s-700);padding-top:var(--s-300);
  border-top:1px solid rgba(127,182,234,0.16);
  display:flex;flex-wrap:wrap;gap:var(--s-200) var(--s-300);
  align-items:center;justify-content:space-between;
}
.foot-bottom p,.foot-bottom a{font-size:12px;line-height:16px;color:rgba(214,232,249,0.48);text-decoration:none}
.foot-bottom a:hover{color:#fff}
.foot-legal{display:flex;gap:var(--s-300)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .people{grid-template-columns:repeat(2,1fr)}
  /* four cards drop to a 2x2 before going single file, so the stack on a
     tablet is not four full width photos deep */
  .pillars{grid-template-columns:repeat(2,1fr);gap:var(--s-300)}
  .split,.cta-grid{grid-template-columns:1fr;gap:var(--s-500)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s-500)}
}
@media (max-width:820px){
  .nav-links,.island .btn{display:none}
  .burger{display:block}
  .island{padding:var(--s-75);padding-left:var(--s-300);gap:var(--s-200)}
  .hero{padding:calc(var(--s-900) + var(--s-500)) 0 var(--s-800)}
  /* let balance choose the breaks once the column is narrow */
  .hero h1 br,.cta h2 br{display:none}
  .hero h1{font-size:36px;line-height:40px}
  .hero .sub{font-size:16px;line-height:24px}
  .section{padding:var(--s-800) 0}
  .section-head h2{font-size:30px;line-height:36px}
  .tagline p{font-size:30px;line-height:1.2}
  .cta h2{font-size:36px;line-height:40px}
  .benefits,.steps{grid-template-columns:1fr}
  .send-row{grid-template-columns:1fr}
  .band{min-height:320px}
  .vm-grid{grid-template-columns:1fr;gap:var(--s-700)}
  .tagline-grid{grid-template-columns:1fr;gap:var(--s-600)}
  .vm::before{display:none}
  .values-grid{grid-template-columns:1fr}
  .values-head h2{font-size:30px;line-height:36px}
  .brands-grid{grid-template-columns:1fr;gap:var(--s-200)}
  .brand-chip{height:128px}
  /* the label eats too much of a narrow row, so it sits above the belt and
     the gap tightens: at 120px only one mark would be on screen at a time */
  .partners .wrap{flex-direction:column;align-items:flex-start;gap:var(--s-300)}
  .partners-label br{display:none}
  .belt{width:100%}
  .belt-set{gap:56px;padding-right:56px}
  .band h2{font-size:30px;line-height:36px}
  /* a wider crop on a narrow column, and the height comes from the ratio so
     it can never disagree with the box the photo actually fills */
  .pillars{grid-template-columns:1fr}
  .pillar-shot{aspect-ratio:16/10}
  /* the address runs to three lines on a narrow column and collides with the
     centred scroll cue, which a touch device does not need anyway */
  .cue{display:none}
  /* keep the sunset visible but hold the headline contrast */
  .hero-photo.on{opacity:0.88}
  .hero-scrim-left{-webkit-mask-image:none;mask-image:none;opacity:0.58}
  .hero-scrim{opacity:0.16}
  .hero-geo svg{right:-30%;top:auto;bottom:-10%;width:120%;opacity:0.5}
}
@media (max-width:560px){
  .people{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero h1{font-size:30px;line-height:36px}
  .overlay a{font-size:24px;line-height:32px}
}

/* ============================================================
   PROFILE PAGES
   Components added for about / capabilities / products / track record.
   Everything below reuses the tokens above: Tailwind type steps, the
   approved spacing table, the navy and gold palette, 16px card radius.
   ============================================================ */

/* ---------- compact page hero ---------- */
.page-hero{
  position:relative;overflow:hidden;background:var(--navy-900);
  padding:calc(var(--s-900) + var(--s-700)) 0 var(--s-800);
}
.page-hero-photo{
  position:absolute;inset:0;z-index:0;
  background:var(--navy-900) center/cover no-repeat;opacity:0.34;
}
.page-hero-scrim{position:absolute;inset:0;z-index:1;background:#050D1C;opacity:0.52}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{
  font-size:48px;line-height:1.06;font-weight:600;letter-spacing:-0.035em;
  color:#fff;max-width:800px;margin-top:var(--s-300);
}
.page-hero .sub{
  max-width:680px;margin-top:var(--s-300);
  font-size:18px;line-height:28px;color:rgba(214,232,249,0.82);font-weight:300;
}
.page-hero .hero-rule{transform:scaleX(1)}

/* breadcrumb */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-75);
  font-size:12px;line-height:16px;color:rgba(214,232,249,0.56);
  margin-bottom:var(--s-300);
}
.crumbs a{text-decoration:none;color:rgba(214,232,249,0.72);transition:color 300ms var(--ease)}
.crumbs a:hover{color:var(--gold-300)}
.crumbs span[aria-current]{color:var(--gold-500)}

/* ---------- prose ---------- */
.lede{font-size:20px;line-height:28px;font-weight:300;color:var(--ink-2);max-width:680px}
.prose{max-width:680px}
.prose p{font-size:16px;line-height:24px;color:var(--ink-2);margin-top:var(--s-200)}
.prose p:first-child{margin-top:0}
.prose strong{color:var(--ink);font-weight:600}

/* ---------- alternating text + image feature ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-700);align-items:center}
.feature + .feature{margin-top:var(--s-900)}
.feature.flip .feature-media{order:-1}
.feature-media{
  border-radius:16px;overflow:hidden;background:var(--paper-3);
  border:1px solid var(--rule);
}
.feature-media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.feature-media.tall img{aspect-ratio:1/1}
.feature-media.wide img{aspect-ratio:16/7}
.feature h2{font-size:36px;line-height:40px;margin-top:var(--s-200)}
.feature h3{font-size:24px;line-height:32px;margin-top:var(--s-200)}
.feature p{font-size:16px;line-height:24px;color:var(--ink-2);margin-top:var(--s-200)}

/* ---------- numbered spec cards ---------- */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-300)}
.specs.two{grid-template-columns:repeat(2,1fr)}
.spec{
  padding:var(--s-300);border:1px solid var(--rule);border-radius:16px;
  background:var(--paper);display:flex;flex-direction:column;
  transition:all 700ms var(--ease);
}
.spec:hover{border-color:var(--blue-300);transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,33,69,0.08)}
.spec .num{
  font-size:12px;line-height:16px;font-weight:700;letter-spacing:0.20em;
  color:var(--gold-500);
}
.spec h3{font-size:20px;line-height:28px;margin-top:var(--s-100)}
.spec p{font-size:14px;line-height:20px;color:var(--ink-2);margin-top:var(--s-100)}
.spec .vp{
  margin-top:auto;padding-top:var(--s-200);
  border-top:1px solid var(--rule);
  font-size:14px;line-height:20px;color:var(--ink-2);
}
.spec .vp b{display:block;color:var(--blue-500);font-size:12px;line-height:16px;
  letter-spacing:0.12em;text-transform:uppercase;margin-bottom:var(--s-50)}
/* reversed variant for dark sections */
.spec.on-dark{background:rgba(255,255,255,0.04);border-color:rgba(127,182,234,0.20)}
.spec.on-dark:hover{border-color:rgba(127,182,234,0.40);box-shadow:0 20px 48px rgba(3,12,28,0.34)}
.spec.on-dark h3{color:#fff}
.spec.on-dark p,.spec.on-dark .vp{color:rgba(214,232,249,0.72)}
.spec.on-dark .vp{border-top-color:rgba(127,182,234,0.20)}

/* ---------- checklist ---------- */
.checklist{list-style:none;display:grid;gap:var(--s-200);margin-top:var(--s-300)}
.checklist li{
  display:grid;grid-template-columns:20px 1fr;gap:var(--s-100);align-items:start;
  font-size:14px;line-height:20px;color:var(--ink-2);
}
.checklist li svg{width:20px;height:20px;color:var(--gold-500);flex:none;margin-top:1px}
.checklist li b{display:block;color:var(--ink);font-size:16px;line-height:24px;font-weight:600;margin-bottom:var(--s-25)}
.on-dark .checklist li,.checklist.on-dark li{color:rgba(214,232,249,0.72)}
.on-dark .checklist li b,.checklist.on-dark li b{color:#fff}

/* ---------- product cards ---------- */
.products{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-400)}
.product{
  border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column;
  transition:all 700ms var(--ease);
}
.product:hover{border-color:var(--blue-300);transform:translateY(-4px);box-shadow:0 20px 48px rgba(11,33,69,0.10)}
.product-shot{position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:16/11}
.product-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease)}
.product:hover .product-shot img{transform:scale(1.03)}
/* A long thin tool cannot fill a 16/11 box. It is shown whole on a field
   sampled from its own backdrop, so the card does not read as a gap. */
.product-shot.contain{background:#CDDCE4}
.product-shot.contain img{object-fit:contain;padding:var(--s-200)}
.product-body{padding:var(--s-400) var(--s-300);display:flex;flex-direction:column;flex:1}
.product .kicker{
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--blue-500);
}
.product h3{font-size:24px;line-height:32px;margin-top:var(--s-75)}
.product p{font-size:14px;line-height:20px;color:var(--ink-2);margin-top:var(--s-200)}
.product .facts{
  list-style:none;margin-top:auto;padding-top:var(--s-300);
  display:grid;gap:var(--s-75);
}
.product .facts li{
  display:flex;justify-content:space-between;gap:var(--s-200);
  padding:var(--s-75) 0;border-top:1px solid var(--rule);
  font-size:14px;line-height:20px;color:var(--ink-2);
}
.product .facts li b{color:var(--navy-800);font-weight:600;text-align:right}

/* ---------- metric row ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-300)}
.metrics.three{grid-template-columns:repeat(3,1fr)}
.metric{padding-top:var(--s-300);border-top:2px solid var(--rule)}
.metric .fig{
  font-size:48px;line-height:1;font-weight:600;letter-spacing:-0.04em;color:var(--navy-800);
}
.metric .lbl{font-size:14px;line-height:20px;color:var(--ink-2);margin-top:var(--s-100)}
.metric .note{font-size:12px;line-height:16px;color:var(--ink-3);margin-top:var(--s-50)}
.on-dark .metric{border-top-color:rgba(127,182,234,0.24)}
.on-dark .metric .fig{color:var(--gold-500)}
.on-dark .metric .lbl{color:rgba(214,232,249,0.82)}
.on-dark .metric .note{color:rgba(214,232,249,0.52)}

/* ---------- field results table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:16px;background:var(--paper)}
table.data{width:100%;border-collapse:collapse;min-width:640px}
table.data caption{
  caption-side:top;text-align:left;padding:var(--s-300) var(--s-300) 0;
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--blue-500);
}
table.data th,table.data td{
  text-align:left;padding:var(--s-200) var(--s-300);
  font-size:14px;line-height:20px;border-bottom:1px solid var(--rule);
}
table.data thead th{
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.10em;
  text-transform:uppercase;color:var(--ink-3);
}
table.data tbody th{font-weight:600;color:var(--ink)}
table.data td{color:var(--ink-2)}
table.data td.fig{font-weight:600;color:var(--navy-800);white-space:nowrap}
table.data tbody tr:last-child th,table.data tbody tr:last-child td{border-bottom:0}

/* ---------- certificate wall ---------- */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-300)}
.cert{
  background:var(--paper);border:1px solid var(--rule);border-radius:16px;
  padding:var(--s-200);transition:all 700ms var(--ease);
}
.cert:hover{border-color:var(--gold-500);transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,33,69,0.10)}
.cert-shot{
  border-radius:8px;overflow:hidden;background:var(--paper-3);aspect-ratio:3/4;
}
.cert-shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.cert h3{font-size:14px;line-height:20px;margin-top:var(--s-200)}
.cert p{font-size:12px;line-height:16px;color:var(--ink-3);margin-top:var(--s-25)}

.cert-wall{
  border-radius:16px;overflow:hidden;border:1px solid var(--rule);background:var(--paper);
}
.cert-wall img{width:100%;height:auto;display:block}
/* The register is a tall portrait sheet and the copy beside it is short. Give
   the sheet the narrower column and pin the copy, so the full wall stays
   readable without leaving a column of dead space next to it. */
.cert-split{grid-template-columns:1.15fr 0.85fr;align-items:center}
@media (max-width:1024px){
  .cert-split{grid-template-columns:1fr}
  .cert-wall{max-width:520px}
}
.cert-wall-note{
  font-size:12px;line-height:16px;color:var(--ink-3);margin-top:var(--s-100);
}

/* ---------- client / partner logo wall ---------- */
.client-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-200)}
.client-mark{
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  height:112px;display:flex;align-items:center;justify-content:center;padding:var(--s-300);
  transition:all 700ms var(--ease);
}
.client-mark img{
  height:56px;width:auto;max-width:100%;object-fit:contain;
  filter:grayscale(1) opacity(0.62);
  transition:filter 500ms var(--ease);
}
.client-mark:hover{border-color:var(--blue-300);transform:translateY(-2px)}
.client-mark:hover img{filter:grayscale(1) opacity(1)}
.client-names{
  margin-top:var(--s-300);font-size:14px;line-height:20px;color:var(--ink-2);
  max-width:800px;
}
.client-names b{color:var(--ink);font-weight:600}

/* ---------- callout strip ---------- */
.callout{
  border-left:3px solid var(--gold-500);padding:var(--s-100) 0 var(--s-100) var(--s-300);
  max-width:800px;
}
.callout p{font-size:20px;line-height:28px;font-weight:300;color:var(--ink)}
.on-dark .callout p{color:#fff}

/* ---------- entity cards ---------- */
.entities{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-300)}
.entity{
  border:1px solid var(--rule);border-radius:16px;padding:var(--s-400) var(--s-300);
  background:var(--paper);transition:all 700ms var(--ease);
}
.entity:hover{border-color:var(--blue-300);transform:translateY(-4px)}
.entity .flag{
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold-500);
}
.entity h3{font-size:20px;line-height:28px;margin-top:var(--s-75)}
.entity p{font-size:14px;line-height:20px;color:var(--ink-2);margin-top:var(--s-200)}
.entity dl{display:grid;gap:var(--s-75);margin-top:var(--s-300)}
.entity dl div{
  display:flex;justify-content:space-between;gap:var(--s-200);
  padding-top:var(--s-75);border-top:1px solid var(--rule);
  font-size:14px;line-height:20px;
}
.entity dt{color:var(--ink-3)}
.entity dd{color:var(--ink);font-weight:500;text-align:right}
.entity dd a{text-decoration:none;color:var(--blue-500)}
.entity dd a:hover{text-decoration:underline}

/* ---------- page to page navigation ---------- */
.pagenav{border-top:1px solid var(--rule);background:var(--paper-2);padding:var(--s-600) 0}
.pagenav-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-300)}
.pagenav a{
  display:block;text-decoration:none;padding:var(--s-300);
  border:1px solid var(--rule);border-radius:16px;background:var(--paper);
  transition:all 700ms var(--ease);
}
.pagenav a:hover{border-color:var(--blue-300);transform:translateY(-3px);box-shadow:0 16px 40px rgba(11,33,69,0.08)}
.pagenav .dir{
  display:block;
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--blue-500);
}
.pagenav .ttl{display:block;font-size:20px;line-height:28px;font-weight:600;color:var(--ink);margin-top:var(--s-50)}
.pagenav a.next{text-align:right}

/* ---------- simple CTA band ---------- */
.cta-band{background:var(--navy-900);padding:var(--s-800) 0}
.cta-band-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s-600);align-items:center}
.cta-band h2{font-size:36px;line-height:40px;color:#fff}
.cta-band p{font-size:16px;line-height:24px;color:rgba(214,232,249,0.78);margin-top:var(--s-200);font-weight:300}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:var(--s-100);justify-content:flex-end}

/* ---------- section on navy ---------- */
.section.on-dark{background:var(--navy-900)}
.section.on-dark h2,.section.on-dark h3{color:#fff}
.section.on-dark .section-head p{color:rgba(214,232,249,0.78)}
.section.on-dark .lede{color:rgba(214,232,249,0.82)}
.section.on-dark .prose p{color:rgba(214,232,249,0.78)}
.section.on-dark .feature p{color:rgba(214,232,249,0.78)}
.section.on-dark .feature-media{border-color:rgba(127,182,234,0.20);background:var(--navy-800)}

/* ---------- profile page responsive ---------- */
@media (max-width:1024px){
  .specs{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .certs{grid-template-columns:repeat(2,1fr)}
  .client-wall{grid-template-columns:repeat(4,1fr)}
  .cta-band-grid{grid-template-columns:1fr;gap:var(--s-400)}
  .cta-band .acts{justify-content:flex-start}
}
@media (max-width:820px){
  .page-hero{padding:calc(var(--s-900) + var(--s-500)) 0 var(--s-700)}
  .page-hero h1{font-size:36px;line-height:40px}
  .page-hero .sub{font-size:16px;line-height:24px}
  .feature,.products,.entities,.specs,.specs.two,.pagenav-grid{grid-template-columns:1fr}
  .feature{gap:var(--s-400)}
  .feature + .feature{margin-top:var(--s-700)}
  .feature.flip .feature-media{order:0}
  .feature h2{font-size:30px;line-height:36px}
  .metrics,.metrics.three{grid-template-columns:repeat(2,1fr)}
  .client-wall{grid-template-columns:repeat(3,1fr)}
  .cta-band h2{font-size:30px;line-height:36px}
  .pagenav a.next{text-align:left}
  .lede{font-size:18px;line-height:28px}
}
@media (max-width:560px){
  .certs{grid-template-columns:1fr}
  .client-wall{grid-template-columns:repeat(2,1fr)}
  .metrics,.metrics.three{grid-template-columns:1fr}
  .page-hero h1{font-size:30px;line-height:36px}
}

/* ---------- footer offices ----------
   The Indonesian addresses carried on every page: the Jakarta headquarters and
   the Bekasi yard. Columns are capped rather than stretched to 1fr so two
   entries keep the same readable measure the three-up row had, left-aligned
   under the rule instead of drifting apart across the full footer width. */
.foot-offices{
  margin-top:var(--s-600);padding-top:var(--s-500);
  border-top:1px solid rgba(127,182,234,0.16);
  /* two offices: the tracks are narrower than the footer, so centre the pair
     rather than letting it hang off the left edge, and centre what is in them */
  display:grid;grid-template-columns:repeat(2,minmax(0,400px));
  gap:var(--s-400) var(--s-700);
  justify-content:center;text-align:center;
}
.foot-office .flag{
  font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold-500);
}
.foot-office h5{
  font-size:14px;line-height:20px;font-weight:600;color:#fff;
  margin-top:var(--s-75);letter-spacing:-0.01em;
}
.foot-office address{
  font-style:normal;font-size:12px;line-height:16px;
  color:rgba(214,232,249,0.56);margin-top:var(--s-75);
}
/* named .ways, not .lines: the hero already owns .lines for the seismic
   contours and that rule is absolutely positioned */
.foot-office .ways{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-75) var(--s-200);margin-top:var(--s-100);
}
.foot-office .ways a{
  display:inline-flex;align-items:center;gap:var(--s-50);
  font-size:12px;line-height:16px;color:rgba(214,232,249,0.72);text-decoration:none;
  transition:color 300ms var(--ease);
}
.foot-office .ways a:hover{color:#fff}
.foot-office .ways svg{width:14px;height:14px;color:var(--gold-500);flex:none}
@media (max-width:820px){
  .foot-offices{grid-template-columns:1fr;gap:var(--s-400)}
}