/* TBEC styles
   1. Design tokens and base
   2. Navigation and buttons
   3. Home page sections
   4. Interior pages and contact form
   5. Footer
   6. Responsive layouts and accessibility
   All pages use the same container, font scale and spacing. */

/* 1. Design tokens and base */
:root {
  --color-background: #04111b;
  --color-surface: #071722;
  --color-panel: #081925;
  --color-border: rgb(255 255 255 / 14%);
  --color-text: #f5f7f8;
  --color-muted: #b8c0c7;
  --color-accent: #f5b400;
  --color-surface-strong: #05131e;
  --color-surface-alternate: #081823;
  --color-input: #0a1b27;
  --color-footer: #030c12;
  --color-text-soft: #d6dce0;
  --color-text-panel: #d1d8dd;
  --content-width: 1150px;
  --page-gutter: 26px;
  --header-height: 76px;
  --section-space: 48px;
  --font-small: .875rem;
  --font-body: 1rem;
  --font-title: clamp(2.35rem, 3.5vw, 3.05rem);
  --font-heading: clamp(1.75rem, 2.6vw, 2.45rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: var(--font-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { font-size: var(--font-title); line-height: 1.08; letter-spacing: -.045em; }
h2 { font-size: var(--font-heading); line-height: 1.12; letter-spacing: -.035em; }
h3 { font-size: 1.0625rem; line-height: 1.3; }
.container { width: min(var(--content-width), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
.kicker { display: inline-block; color: var(--color-accent); font-size: var(--font-small); font-weight: 750; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }

/* 2. Navigation and buttons */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-height); border-bottom: 1px solid var(--color-border); background: rgb(4 17 27 / 96%); backdrop-filter: blur(12px); }
.nav-shell { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { flex: 0 0 auto; }
.brand-logo { width: 175px; }
.brand-logo img { width: 100%; height: auto; }
.nav-links { display: flex; align-items: center; gap: 18px; font-size: var(--font-small); font-weight: 600; white-space: nowrap; }
.nav-links > a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 10px 0; transition: color .2s; }
.nav-links > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s; pointer-events: none; }
.nav-links > a:hover, .nav-links > a.nav-link--active { color: var(--color-accent); }
.nav-links > a:hover::after, .nav-links > a.nav-link--active::after { transform: scaleX(1); }
.nav-links > .nav-cta { padding: 10px 16px; border: 1px solid var(--color-accent); color: var(--color-accent); }
.nav-links > .nav-cta::after { content: none; }
.nav-links > .nav-cta:hover { background: var(--color-accent); color: var(--color-background); }
.menu-toggle { display: none; background: none; border: 0; padding: 10px; min-width: 44px; min-height: 44px; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: var(--color-text); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button, .button--dark { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--color-accent); font-size: var(--font-small); font-weight: 700; line-height: 1.4; text-align: center; background: transparent; color: var(--color-text); transition: background .2s, box-shadow .2s; }
.button--primary { background: var(--color-accent); color: var(--color-background); }
.button--dark { background: var(--color-background); }
.button:hover, .button--dark:hover { box-shadow: 0 4px 20px rgb(245 180 0 / 20%); }
.button:disabled { cursor: default; opacity: .65; box-shadow: none; }

/* 3. Home page sections */
.hero { position: relative; min-height: 468px; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.hero-bg, .hero-overlay, .pillar-bg, .pillar-shade, .cta-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg { left: 17%; background: url('hero-team.webp') right center / 82.8% auto no-repeat; }
.hero-overlay { background: linear-gradient(90deg, #04111b 0%, rgb(4 17 27 / 98%) 18%, rgb(4 17 27 / 84%) 29%, rgb(4 17 27 / 48%) 42%, rgb(4 17 27 / 16%) 56%, rgb(4 17 27 / 12%) 100%); }
.hero-inner { position: relative; min-height: 468px; display: flex; align-items: center; }
.hero-copy { width: 36%; max-width: 390px; padding-block: 32px; }
.hero h1 { margin: 12px 0 16px; }
.hero-copy p { margin: 0 0 10px; }
.hero-type { font-weight: 600; }
.hero-location { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: var(--font-small); color: var(--color-text-soft); }
.hero-location i { width: 2px; height: 28px; background: var(--color-accent); flex-shrink: 0; }
.hero-note { position: absolute; right: 0; top: 24px; display: flex; flex-direction: column; gap: 6px; width: 210px; font-size: var(--font-small); letter-spacing: .08em; line-height: 1.55; color: var(--color-text); }
.hero-note i, .company-rail i { width: 28px; height: 3px; background: var(--color-accent); margin-bottom: 12px; }
.hero-note-line { display: block; white-space: nowrap; }
.company { padding-block: var(--section-space); border-bottom: 1px solid var(--color-border); background: var(--color-surface-strong); }
.company-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 150px; gap: 28px; align-items: start; margin-bottom: 28px; }
.company-left h2 { margin: 8px 0 12px; }
.company-left p, .company-main p { margin: 0; }
.company-main { display: flex; gap: 18px; padding-top: 30px; color: var(--color-muted); }
.company-main i { width: 2px; min-height: 80px; background: var(--color-accent); flex-shrink: 0; }
.company-rail { display: flex; flex-direction: column; padding-top: 18px; font-size: var(--font-small); color: var(--color-muted); letter-spacing: .06em; }
.sectors-head { margin-bottom: 16px; font-size: var(--font-small); color: var(--color-accent); font-weight: 750; letter-spacing: .06em; }
.sectors-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sector-card { padding: 24px 18px; text-align: center; border: 1px solid var(--color-border); background: linear-gradient(#071b29, #081925); }
.sector-icon { width: 52px; height: 52px; margin: 0 auto 16px; }
.sector-icon svg, .pillar-content > svg, .benefit-icon svg { width: 100%; height: 100%; fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.step-icon img { display: block; width: 22px; height: 22px; }
.sector-card h3 { margin: 0 0 10px; min-height: 2.6em; }
.sector-card p { margin: 0; color: var(--color-muted); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--color-border); }
.pillar { position: relative; overflow: hidden; border-right: 1px solid var(--color-accent); background: var(--color-surface); }
.pillar:last-child { border-right: 0; }
.pillar--talent .pillar-bg { background: url('pillar-talent.webp') right center / cover no-repeat; }
.pillar--team .pillar-bg { background: url('pillar-team.webp') 58% center / cover; }
.pillar--delivery .pillar-bg { background: url('pillar-delivery.webp') 72% center / cover; }
.pillar-shade { background: linear-gradient(90deg, rgb(4 17 27 / 95%), rgb(4 17 27 / 83%) 43%, rgb(4 17 27 / 57%) 72%, rgb(4 17 27 / 25%)); }
.pillar-content { position: relative; max-width: 330px; padding: 44px 28px 32px; }
.pillar-marker { display: flex; align-items: center; gap: 22px; min-height: 48px; margin-bottom: 22px; }
.pillar-number { color: rgb(245 247 248 / 48%); font-size: 3rem; font-weight: 600; line-height: 1; flex-shrink: 0; }
.pillar-icon { display: block; width: 44px; height: 44px; flex-shrink: 0; }
.pillar-heading { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.pillar-heading i { width: 2px; height: 30px; background: var(--color-accent); }
.pillar-heading h2 { margin: 0; font-size: 1.25rem; letter-spacing: 0; }
.pillar-content p { margin: 12px 0 20px; color: var(--color-text-panel); }
.pillar-content a { font-size: var(--font-small); color: var(--color-accent); font-weight: 700; }
.pillar-quote { position: relative; margin: 0 28px 24px; font-size: var(--font-small); font-style: italic; color: #dbe2e6; white-space: nowrap; }
.process { padding-block: var(--section-space); background: var(--color-surface); }
.process-head { display: grid; grid-template-columns: 1fr 1.2fr 120px; gap: 28px; margin-bottom: 28px; align-items: center; }
.process-head h2 { margin: 8px 0 0; }
.process-head > p { margin: 0; color: var(--color-muted); }
.process-note { border-left: 2px solid var(--color-accent); padding-left: 12px; color: var(--color-muted); font-size: var(--font-small); }
.process .engagement-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.process .engagement-steps article { display: grid; grid-template-columns: 56px 52px minmax(0, 1fr); gap: 10px 16px; align-items: center; }
.step-number { grid-row: 1 / 4; align-self: start; color: rgb(245 247 248 / 48%); font-size: 3rem; font-weight: 600; line-height: 1; }
.step-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--color-accent); border-radius: 50%; }
.step-track { height: 2px; background: linear-gradient(90deg, var(--color-accent), transparent); }
.process .engagement-steps h3, .process .engagement-steps p { grid-column: 2 / 4; margin: 0; }
.process .engagement-steps p { color: var(--color-muted); }
.cambodia { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.2fr); background: #eef1f3; color: #17222b; }
.cambodia-image { position: relative; min-height: 300px; }
.cambodia-image img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.cambodia-copy { padding: 32px 28px; border-right: 1px solid #cdd3d8; }
.cambodia-copy .kicker { color: #785600; }
.cambodia-copy h2 { margin: 10px 0 14px; font-size: 1.85rem; }
.cambodia-copy > p { color: #4d5962; margin: 0 0 20px; }
.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benefits > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; align-content: center; padding: 20px 16px; border: 1px solid #d1d7db; }
.benefit-icon { width: 40px; height: 40px; padding: 9px; background: #09151f; border: 2px solid var(--color-accent); border-radius: 50%; }
.benefits strong { align-self: center; font-size: var(--font-small); }
.benefits p { grid-column: 1 / -1; margin: 0; font-size: var(--font-small); color: #4d5962; }
.cta { position: relative; background: var(--color-surface); }
.cta-bg { background: linear-gradient(90deg, rgb(4 17 27 / 95%), rgb(4 17 27 / 82%)); }
.cta-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; gap: 28px; align-items: center; padding-block: 32px; }
.cta h2 { margin: 8px 0 0; font-size: 1.85rem; }
.cta-note { border-left: 2px solid var(--color-accent); padding-left: 14px; font-size: var(--font-small); color: var(--color-muted); }

/* 4. Interior pages and contact form */
.page-hero { padding: var(--section-space) 0 36px; border-bottom: 1px solid var(--color-border); background: linear-gradient(120deg, #06141f 66%, #0b2331 66%); }
.page-hero h1 { margin: 8px 0 16px; }
.page-hero p, .intro { max-width: 690px; margin: 0; color: var(--color-muted); }
.section { padding-block: var(--section-space); }
.section--alternate { background: var(--color-surface-alternate); }
.section h2 { margin: 8px 0 18px; }
.cards, .feature-grid, .stat-grid, .engagement-steps { display: grid; gap: 16px; }
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; }
.feature-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section .engagement-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; }
.content-card, .feature-card, .stat-card, .engagement-step { padding: 24px; background: var(--color-panel); border: 1px solid var(--color-border); }
.content-card h3, .feature-card h3, .engagement-step h3 { margin: 0 0 10px; }
.content-card p, .feature-card p, .engagement-step p { margin: 0; color: var(--color-muted); }
.split-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }
.stat-card strong { display: block; margin-bottom: 8px; color: var(--color-accent); }
.stat-card span { color: var(--color-muted); }
.intro + .feature-card { margin-top: 24px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-full { grid-column: 1 / -1; }
.form-field { display: flex; flex-direction: column; gap: 8px; font-size: var(--font-small); }
.form input, .form textarea, .form select { width: 100%; min-width: 0; padding: 12px; background: var(--color-input); border: 1px solid var(--color-border); color: var(--color-text); font-size: var(--font-body); }
.form textarea { min-height: 140px; resize: vertical; }
.form-status { margin: 0; color: var(--color-muted); font-size: var(--font-small); }

/* 5. Footer */
.footer { padding: 40px 0 20px; border-top: 1px solid var(--color-border); background: var(--color-footer); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-brand img { width: 185px; height: auto; margin-bottom: 18px; }
.footer-tagline { margin: 0 0 8px; color: #d9e0e5; }
.footer-location { margin: 0; color: var(--color-muted); font-size: var(--font-small); }
.footer-column h4 { margin: 0 0 12px; color: var(--color-accent); font-size: var(--font-small); letter-spacing: .08em; }
.footer-column a { display: block; width: fit-content; padding-block: 6px; color: var(--color-muted); font-size: var(--font-small); }
.footer-column a:hover { color: var(--color-accent); }
.footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: var(--font-small); }

/* 6. Responsive layouts and accessibility */
@media (min-width: 1600px) {
  .pillars, .cambodia { max-width: 1600px; margin-inline: auto; }
}
@media (max-width: 1100px) {
  .nav-links { gap: 12px; }
  .brand-logo { width: 150px; }
  .nav-links > .nav-cta { padding-inline: 12px; }
  .hero-copy { width: 42%; }
  .company-top { grid-template-columns: 1fr 1.2fr; }
  .company-rail { display: none; }
  .cambodia { grid-template-columns: 1fr 1fr; }
  .benefits { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .section .engagement-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  :root { --header-height: 72px; --page-gutter: 20px; }
  .menu-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: var(--header-height); left: 0; right: 0; padding: 16px 24px; background: #061520; flex-direction: column; align-items: stretch; gap: 4px; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 12px; }
  .nav-links > .nav-cta { justify-content: center; }
  .sectors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .pillar-content { max-width: 420px; }
  .pillar-quote { display: none; }
  .process-head { grid-template-columns: 1fr 1fr; }
  .process-note { display: none; }
  .split-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --page-gutter: 18px; --section-space: 36px; }
  .hero, .hero-inner { min-height: 522px; }
  .hero-bg { left: 0; background-size: auto 63%; background-position: right top; }
  .hero-overlay { background: linear-gradient(180deg, rgb(4 17 27 / 15%), rgb(4 17 27 / 80%) 38%, #04111b 68%); }
  .hero-inner { align-items: flex-end; }
  .hero-copy { width: 100%; max-width: 420px; }
  .hero-note { display: none; }
  .company-top, .sectors-grid, .process-head, .process .engagement-steps, .cambodia, .cards, .feature-grid, .stat-grid, .section .engagement-steps, .form { grid-template-columns: 1fr; }
  .company-main { padding-top: 0; }
  .sector-card h3 { min-height: 0; }
  .cambodia-image { min-height: 260px; }
  .cambodia-copy { border-right: 0; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-inner { grid-template-columns: 1fr; gap: 20px; }
  .cta-inner > .button { justify-self: start; }
  .cta-note { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 100; transform: translateY(-160%); padding: 12px 18px; background: var(--color-accent); color: var(--color-background); }
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none; }
}