/* Corporate light redesign inspired by the user's Data Sarana layout reference. */
:root {
  --header-h: 96px;
  --teal: #0b8f98;
  --pale: #eef7f8;
  --navy: #062b4a;
  --navy-2: #0a3554;
  --ink: #0a2c49;
  --copper: #c68449;
  --paper: #ffffff;
  --sand: #f5f8f9;
  --muted: #526978;
  --line: rgba(6, 43, 74, .12);
}

body { background: #fff; color: var(--ink); }

.topbar {
  height: 38px;
  background: linear-gradient(90deg, #032744, #061d35);
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
}

.topbar-inner {
  width: min(1280px, 92vw);
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.topbar-inner > div { display: flex; align-items: center; gap: 1rem; }
.topbar-inner a { color: inherit; text-decoration: none; }
.topbar-inner p { margin: 0; }
.topbar-inner span { width: 1px; height: 15px; background: rgba(255, 255, 255, .32); }

.site-header {
  position: sticky;
  top: 0;
  color: var(--navy);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 var(--line);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 28px rgba(6, 43, 74, .1);
}

.nav-shell { width: min(1280px, 92vw); padding: 0; }
.brand { gap: .95rem; }
.brand-mark { width: 66px; height: 66px; }
.brand-copy { color: var(--navy); line-height: 1; white-space: nowrap; }
.brand-copy strong { font-size: 20px; font-weight: 750; letter-spacing: .025em; }
.site-nav { gap: 2.1rem; }
.site-nav a { color: var(--navy); font-size: 14px; font-weight: 600; position: relative; }
.site-nav a:not(.nav-contact)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -.55rem;
  height: 2px;
  background: var(--teal);
  transition: right .2s ease;
}
.site-nav a:hover, .site-nav a:focus { color: var(--teal); }
.site-nav a:hover::after, .site-nav a:focus::after { right: 0; }
.site-nav .nav-contact { border: 1px solid var(--navy); padding: .78rem 1.15rem; }

.hero {
  height: auto;
  min-height: clamp(500px, 66vh, 590px);
  padding: 2.25rem 0;
  color: var(--navy);
  background: #eaf3f5;
  align-items: center;
}

.hero-image { object-fit: cover; object-position: 58% center; }
.hero-overlay {
  width: 66%;
  right: auto;
  background: linear-gradient(90deg, #fff 0%, #fff 62%, rgba(255,255,255,.97) 76%, rgba(255,255,255,.45) 100%);
  clip-path: ellipse(89% 105% at 0 50%);
}

.hero-inner {
  width: min(1280px, 92vw);
  margin: 0 auto;
  padding: 0;
}

.hero-inner > * { max-width: 600px; }
.eyebrow, .section-kicker { color: var(--teal); margin-bottom: 1.1rem; font-size: 14px; font-weight: 800; letter-spacing: .15em; }
.hero h1 {
  max-width: 690px;
  font-size: clamp(2.7rem, 3.6vw, 3.6rem);
  line-height: 1.04;
  color: var(--navy);
}
.hero h1 em { color: var(--navy); font-family: var(--display); font-style: normal; font-weight: 700; }
.hero-lead { max-width: 580px; margin: 1.35rem 0 1.5rem; color: #4e6473; font-size: 1rem; line-height: 1.55; }
.hero-actions { max-width: 580px; }
.button { min-width: 190px; padding: .9rem 1.25rem; }
.button-primary { background: var(--teal); color: #fff; box-shadow: 0 10px 24px rgba(11, 143, 152, .2); }
.button-primary:hover { background: #087c85; }
.button-ghost { color: var(--navy); border-color: var(--navy); background: rgba(255,255,255,.6); }

.hero-status {
  max-width: 620px;
  margin-top: 1.8rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.hero-status p {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  padding-right: .9rem;
  border-right: 1px solid var(--line);
}
.hero-status p:last-child { border: 0; padding-left: .9rem; }
.hero-status p:nth-child(2) { padding-left: .9rem; }
.hero-status b {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--teal);
  background: #e6f3f4;
}
.hero-status p > span { display: grid; }
.hero-status strong { color: var(--navy); font-size: 13px; letter-spacing: 0; text-transform: none; }
.hero-status small { color: #667b88; font-size: 11px; white-space: nowrap; }
.concept-note { right: 2.5rem; bottom: 1rem; padding: .25rem .55rem; background: rgba(3, 26, 45, .68); color: #fff; }

.section {
  min-height: 0;
  display: block;
  padding: clamp(2rem, 2.8vw, 3.25rem) max(5vw, calc((100vw - 1240px)/2));
  scroll-margin-top: var(--header-h);
}

.intro { background: #fff; }
.intro-grid { gap: 7vw; }
.intro h2, .section-heading h2, .terminal h2, .commitment h2, .profile h2, .contact h2 {
  color: var(--navy);
  font-size: clamp(2.3rem, 3.5vw, 3.65rem);
}
.intro-copy p, .terminal-copy > p, .commitment-head p { color: var(--muted); }
.text-link { color: var(--teal); border-color: var(--teal); }

.business { background: #f5f9fa; color: var(--navy); }
.section-heading { margin-bottom: 1.5rem; }
.section-heading p { color: var(--muted); }
.section-kicker.light { color: var(--teal); }
.business-grid { border: 0; gap: 1.15rem; }
.business-card {
  min-height: 270px;
  padding: 1.55rem;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 28px rgba(6, 43, 74, .06);
}
.business-card:last-child { border: 1px solid var(--line); }
.business-card:hover { background: #fff; transform: translateY(-4px); box-shadow: 0 16px 38px rgba(6, 43, 74, .1); }
.business-card.featured { background: var(--navy); color: #fff; border-color: var(--navy); }
.business-card p { color: var(--muted); }
.business-card.featured p { color: rgba(255,255,255,.7); }
.card-icon { color: var(--teal); background: #e8f4f5; border-radius: 50%; padding: .6rem; margin: 1.35rem 0 1rem; }
.featured .card-icon { color: var(--copper-light); background: rgba(255,255,255,.1); }
.card-label { color: var(--teal); }
.featured .card-label { color: var(--copper-light); }

.terminal {
  padding-top: clamp(1.75rem, 2.4vw, 2.75rem);
  background: #fff;
}
.terminal-grid { align-items: center; gap: 5vw; }
.project-badge { color: #fff; background: var(--teal); }
.terminal-copy .disclosure { color: #65727b; }
.terminal-copy > p { margin: .75rem 0; line-height: 1.55; }
.terminal h2 { font-size: clamp(2.25rem, 3.25vw, 3.35rem); }
.terminal-visual {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 10;
  background: var(--navy);
  border-radius: 0 72px 0 72px;
  box-shadow: 0 22px 48px rgba(6, 43, 74, .16);
}
.terminal-visual > img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.terminal-caption {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 3;
  display: grid;
  padding: .7rem .9rem;
  background: rgba(3, 35, 59, .88);
  color: #fff;
}
.terminal-caption span { color: #92d9dd; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.terminal-caption strong { font-size: 13px; }

.commitment { background: #eef7f8; }
.principles { margin-top: 2.5rem; gap: 1rem; }
.principles article { padding: 1.45rem; background: #fff; border: 1px solid var(--line); }
.principles h3 { margin: 1rem 0 .45rem; color: var(--navy); }
.principles span { color: var(--teal); }

.profile { background: var(--navy); }
.profile h2 { color: #fff; }
.profile .section-kicker { color: #7dd7dc; }
.profile dt { color: #7dd7dc; }

.contact { background: #fff; }
.contact h2 { color: var(--navy); }
.contact h2 em { color: var(--teal); }
.contact .section-kicker { color: var(--teal); }
.contact-actions { border-color: var(--line); }
.contact-actions a { border-color: var(--line); color: var(--navy); }
.contact-actions b { color: var(--teal); }

footer { background: #031d32; }

@media (max-width: 1100px) {
  .site-nav { gap: 1.25rem; }
  .hero-overlay { width: 76%; }
  .hero-inner > * { max-width: 54%; }
  .hero h1 { font-size: 3rem; }
  .hero-status { max-width: 58%; }
  .brand-copy strong { font-size: 16px; }
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }
  .topbar { display: none; }
  .site-header, .site-header.scrolled { color: var(--navy); background: #fff; }
  .brand-mark { width: 56px; height: 56px; }
  .menu-button span:not(.sr-only) { background: var(--navy); }
  .site-nav { background: #fff; box-shadow: 0 15px 28px rgba(6,43,74,.12); }
  .site-nav a { color: var(--navy); }
  .hero { height: auto; min-height: 700px; align-items: flex-start; padding-top: 4rem; padding-bottom: 18rem; }
  .hero-overlay { width: 100%; height: 68%; clip-path: none; background: linear-gradient(180deg,#fff 0%,#fff 84%,rgba(255,255,255,0) 100%); }
  .hero-image { top: auto; height: 40%; object-position: 62% center; }
  .hero-inner > *, .hero h1, .hero-status { max-width: 100%; }
  .terminal-visual { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  .brand-copy { display: grid; }
  .brand-copy strong { font-size: 12px; letter-spacing: .01em; }
  .hero { min-height: 730px; padding-top: 3rem; }
  .hero h1 { font-size: 2.7rem; }
  .hero-status { grid-template-columns: 1fr; gap: .65rem; }
  .hero-status p, .hero-status p:nth-child(2), .hero-status p:last-child { border: 0; padding: 0; }
  .business-card { min-height: 260px; }
  .terminal-visual { border-radius: 0 40px 0 40px; }
}