/* ============================================================
   ALIERA — Home Page Styles
   Brand: #1E3847 (navy) · #F7932F (orange/CTA) · #66A5C8 (blue)
   Base theme = light (white sections); .theme-dark flips a
   section back to navy. All components read the same custom
   properties, so they adapt automatically per section.
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

:root {
  --bg:        #FFFFFF;
  --bg-deep:   #EEF2F4;
  --bg-card:   #F3F6F8;
  --bg-card2:  #E7EDF0;
  --border:    rgba(22,48,61,0.10);
  --border2:   rgba(22,48,61,0.18);
  --text:      #16303D;
  --muted:     #57707C;
  --faint:     #E1E8EB;

  --orange:      #F7932F;
  --orange-dim:  rgba(247,147,47,0.10);
  --orange-bord: rgba(247,147,47,0.38);
  --blue:        #66A5C8;
  --blue-accent: #2B6E93;
  --blue-dim:    rgba(102,165,200,0.16);
  --blue-bord:   rgba(102,165,200,0.45);

  --font-h: 'Syne', sans-serif;
  --font-b: 'DM Sans', sans-serif;
}

/* Dark navy theme — applied to hero, stats, and select bands */
.theme-dark {
  --bg:        #1E3847;
  --bg-deep:   #16282F;
  --bg-card:   #24414F;
  --bg-card2:  #2B4A59;
  --border:    rgba(255,255,255,0.09);
  --border2:   rgba(255,255,255,0.16);
  --text:      #F3F6F8;
  --muted:     #A9BEC7;
  --faint:     #395260;

  --orange-dim:  rgba(247,147,47,0.12);
  --orange-bord: rgba(247,147,47,0.32);
  --blue-accent: #66A5C8;
  --blue-dim:    rgba(102,165,200,0.12);
  --blue-bord:   rgba(102,165,200,0.32);

  background:var(--bg); color:var(--text);
}

body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

img, video { max-width:100%; display:block; }

/* ---------- layout helpers ---------- */
.wrap { max-width:1200px; margin:0 auto; padding:0 48px; position:relative; z-index:1; }
.section { padding:100px 0; background:var(--bg); color:var(--text); }
.section-sm { padding:64px 0; background:var(--bg); color:var(--text); }

@media (max-width:900px) {
  .wrap { padding:0 22px; }
  .section, .section-sm { padding:64px 0; }
}

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family:var(--font-h); color:var(--text); }
h1 {
  font-size:clamp(38px,5.4vw,64px);
  font-weight:800; line-height:1.06; letter-spacing:-1.5px;
}
h2 { font-size:clamp(28px,3.4vw,40px); font-weight:700; line-height:1.18; letter-spacing:-0.8px; }
h3 { font-size:21px; font-weight:700; letter-spacing:-0.3px; }
h4 { font-size:16px; font-weight:600; }
p.lead { font-size:17px; color:var(--muted); line-height:1.75; font-weight:300; }
.muted { color:var(--muted); }
.orange { color:var(--orange); }
.blue-text { color:var(--blue-accent); }

.section-label {
  font-size:11px; font-weight:700; letter-spacing:2.6px; text-transform:uppercase;
  color:var(--blue-accent); margin-bottom:18px; display:block;
}

.sep { width:44px; height:2px; background:var(--orange); margin:22px 0; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:8px; font-size:14.5px;
  font-weight:600; cursor:pointer; text-decoration:none;
  transition:all .2s ease; font-family:var(--font-b); border:none;
}
.btn-orange { background:var(--orange); color:#16303D; }
.btn-orange:hover { opacity:.87; transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--text); border:1.5px solid var(--border2); }
.btn-outline:hover { border-color:var(--orange); color:var(--orange); }
.btn-ghost { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--text); border-color:var(--border2); }

/* ---------- tag ---------- */
.tag {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--orange-dim); border:1px solid var(--orange-bord);
  color:var(--orange); font-size:11.5px; font-weight:700;
  letter-spacing:1.6px; text-transform:uppercase;
  padding:7px 15px; border-radius:20px;
}
.tag-dot { width:5px; height:5px; background:var(--orange); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ---------- nav ---------- */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:72px; display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(22,48,61,0.08);
}
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer; }
.logo-mark { width:144px; height:48px; flex-shrink:0; }
.logo-mark svg, .logo-mark img { width:100%; height:100%; object-fit:contain; }
.nav-links { display:flex; align-items:center; gap:34px; list-style:none; }
.nav-links a {
  color:#3E5866; text-decoration:none; font-size:14.5px; font-weight:500;
  transition:color .2s;
}
.nav-links a:hover { color:#16303D; }
.nav-links a.active { color:#16303D; font-weight:600; }
.nav-cta { background:var(--orange); color:#16303D !important; padding:9px 20px; border-radius:7px; font-weight:700 !important; }
.nav-cta:hover { opacity:.88; color:#16303D !important; }

.mob-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.mob-toggle span { width:22px; height:2px; background:#16303D; border-radius:2px; }

@media (max-width:900px) {
  nav { padding:0 22px; }
  .nav-links {
    display:none; position:absolute; top:72px; left:0; right:0;
    background:rgba(255,255,255,0.98); flex-direction:column; align-items:flex-start;
    padding:24px 22px; gap:20px; border-bottom:1px solid rgba(22,48,61,0.08);
  }
  .nav-links.open { display:flex; }
  .mob-toggle { display:flex; }
}

/* ---------- hero (light, device-mockup visual) ---------- */
#hero {
  min-height:92vh; display:flex; align-items:center;
  padding-top:100px; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 800px 460px at 88% 20%, rgba(247,147,47,0.07), transparent 60%),
    radial-gradient(ellipse 600px 460px at 6% 95%, rgba(102,165,200,0.08), transparent 60%),
    var(--bg);
}
.hero-deco { position:absolute; inset:0; pointer-events:none; opacity:.7; }
.hero-deco svg { position:absolute; }

.hero-grid {
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
  padding:60px 0;
}
.hero-copy h1 { margin-top:24px; font-weight:600; letter-spacing:-0.5px; color:#16303D; }
.hero-copy h1 em { color:var(--orange); font-style:normal; }
.hero-copy p.lead { margin-top:26px; max-width:560px; }
.hero-ctas { display:flex; gap:16px; flex-wrap:wrap; margin-top:40px; }
.hero-ctas .btn { border-radius:5px; letter-spacing:.4px; }
.hero-ctas .btn-orange { background:#F0A860; color:#fff; font-weight:700; }
.hero-ctas .btn-outline { background:#8FB4CE; color:#fff; border:none; font-weight:700; }
.hero-ctas .btn-outline:hover { background:#7FA3BE; color:#fff; }

/* hero video (plain, no device frame) */
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; min-height:340px; }
.hero-video {
  width:100%; max-width:480px; display:block; border-radius:14px;
  box-shadow:0 30px 60px rgba(22,48,61,0.18);
}
/* AWRTD landing hero — wider cinematic 16:9 media */
.awrtd-hero .hero-grid { grid-template-columns:1fr 1.05fr; }
.awrtd-hero .hero-video { max-width:640px; }

.fade-in { animation:fadeUp .7s ease both; }
.fade-in-2 { animation:fadeUp .7s .15s ease both; }
.fade-in-3 { animation:fadeUp .7s .3s ease both; }
.fade-in-4 { animation:fadeUp .7s .45s ease both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { order:-1; min-height:0; }
  .hero-video { max-width:320px; margin:0 auto; }
  .awrtd-hero .hero-grid { grid-template-columns:1fr; }
  .awrtd-hero .hero-video { max-width:420px; }
}

/* ---------- trust strip ---------- */
.trust-strip { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 0; background:var(--bg-deep); }
.trust-items { display:flex; align-items:center; gap:0; overflow-x:auto; scrollbar-width:none; }
.trust-items::-webkit-scrollbar { display:none; }
.trust-item { display:flex; align-items:center; gap:9px; padding:0 30px; border-right:1px solid var(--border); white-space:nowrap; flex-shrink:0; }
.trust-item:last-child { border-right:none; }
.trust-item-label { font-size:11.5px; color:var(--muted); }
.trust-item-name { font-size:13px; font-weight:600; color:var(--text); }
.trust-dot { width:4px; height:4px; background:var(--orange); border-radius:50%; flex-shrink:0; }

/* ---------- stats ---------- */
.stats-band { padding:64px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(6,1fr); }
.stat-item { text-align:center; padding:16px 10px; border-left:1px solid var(--border); }
.stat-item:first-child { border-left:none; }
.stat-num { font-family:var(--font-h); font-size:38px; font-weight:800; letter-spacing:-1.5px; line-height:1; }
.stat-num.c-orange { color:var(--orange); }
.stat-num.c-blue { color:var(--blue); }
.stat-label { font-size:12.5px; color:var(--muted); margin-top:8px; }
@media (max-width:1000px) {
  .stats-grid { grid-template-columns:repeat(3,1fr); row-gap:32px; }
  .stat-item:nth-child(4) { border-left:none; }
}
@media (max-width:640px) {
  .stats-grid { grid-template-columns:1fr 1fr; row-gap:28px; }
  .stat-item:nth-child(3), .stat-item:nth-child(5) { border-left:none; }
}

/* ---------- cards ---------- */
.card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:32px;
  transition:border-color .25s, transform .25s;
}
.card:hover { border-color:var(--border2); transform:translateY(-2px); }

/* ---------- pipeline (light): visual left, step cards right ---------- */
.pipeline-inline { display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:center; margin-top:44px; }
.pipeline-visual {
  border-radius:16px; overflow:hidden; position:relative;
  width:100%; aspect-ratio:1/1; background:linear-gradient(120deg, var(--bg-card), var(--bg-card2));
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
}
.pipeline-visual video { width:100%; height:100%; object-fit:cover; }
.pipeline-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pipeline-step { text-align:center; padding:24px 14px; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); position:relative; }
.pipeline-step-num {
  width:32px; height:32px; border-radius:50%; background:var(--orange-dim); border:1px solid var(--orange-bord);
  color:var(--orange); font-family:var(--font-h); font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.pipeline-step h4 { font-size:13.5px; margin-bottom:6px; }
.pipeline-step p { font-size:12px; color:var(--muted); line-height:1.5; }
@media (max-width:1100px) { .pipeline-row { grid-template-columns:1fr 1fr; } }
@media (max-width:900px) {
  .pipeline-inline { grid-template-columns:1fr; }
  .pipeline-visual { max-width:300px; margin:0 auto; }
}
@media (max-width:560px) { .pipeline-row { grid-template-columns:1fr; } }

/* ---------- collaborative AI (dark): visual left, chips right ---------- */
.collab-inline { display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:center; margin-top:40px; }
.collab-visual {
  border-radius:16px; overflow:hidden; position:relative;
  width:100%; aspect-ratio:1/1; background:linear-gradient(120deg, var(--bg-card2), var(--bg-card));
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
}
.collab-visual video { width:100%; height:100%; object-fit:cover; }
.chip-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:center; }
.chip {
  display:flex; align-items:center; gap:12px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:10px; padding:16px 18px; font-size:13.5px;
}
.chip-dot { width:8px; height:8px; border-radius:50%; background:var(--blue-accent); flex-shrink:0; }
@media (max-width:900px) {
  .collab-inline { grid-template-columns:1fr; }
  .collab-visual { max-width:300px; margin:0 auto; }
}
@media (max-width:700px) { .chip-grid { grid-template-columns:1fr; } }

/* ---------- verticals grid ---------- */
.verticals-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:52px; }
.vert-card { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:30px; transition:border-color .25s, transform .25s; }
.vert-card:hover { border-color:var(--orange-bord); transform:translateY(-3px); }
.vert-num { font-family:var(--font-h); font-size:11px; font-weight:700; color:var(--orange); letter-spacing:2px; margin-bottom:16px; }
.vert-card h3 { margin-bottom:6px; }
.vert-count { font-size:12px; color:var(--blue-accent); font-weight:600; margin-bottom:14px; }
.vert-desc { font-size:13.5px; color:var(--muted); line-height:1.7; }
.vert-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.vert-tag { font-size:11px; color:var(--muted); background:var(--faint); padding:4px 10px; border-radius:5px; }
@media (max-width:1100px) { .verticals-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .verticals-grid { grid-template-columns:1fr; } }

/* ---------- capability icon grid (Platforms & Technologies) ---------- */
.cap-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
.cap-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:22px; }
.cap-icon {
  width:42px; height:42px; border-radius:10px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-weight:800; font-size:14px;
  background:var(--orange-dim); border:1px solid var(--orange-bord); color:var(--orange);
}
.cap-card h4 { font-size:13.5px; margin-bottom:8px; }
.cap-card p { font-size:12.5px; color:var(--muted); line-height:1.6; }
@media (max-width:1000px) { .cap-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .cap-grid { grid-template-columns:1fr; } }

/* ---------- AWRTD teaser ---------- */
.awrtd-card {
  background:linear-gradient(135deg, var(--bg-card) 0%, rgba(247,147,47,0.06) 100%);
  border:1px solid var(--orange-bord); border-radius:16px; padding:44px;
}
.engagement-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px; }
.engagement-card { background:var(--bg-card2); border:1px solid var(--border); border-radius:11px; overflow:hidden; transition:border-color .25s, transform .25s; }
.engagement-card:hover { border-color:var(--orange-bord); transform:translateY(-2px); }
.engagement-img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.engagement-body { padding:20px 22px 24px; }
.engagement-num { font-family:var(--font-h); font-size:11px; font-weight:700; color:var(--orange); letter-spacing:2px; margin-bottom:12px; }
.engagement-card h4 { font-size:14.5px; margin-bottom:8px; }
.engagement-card p { font-size:12.5px; color:var(--muted); line-height:1.6; }
@media (max-width:1000px) { .engagement-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .engagement-grid { grid-template-columns:1fr; } }

/* ---------- client mix / donut ---------- */
.clientmix-grid { display:grid; grid-template-columns:auto 1fr; gap:64px; align-items:center; margin-top:44px; }
.donut {
  width:230px; height:230px; border-radius:50%; flex-shrink:0;
  background: conic-gradient(
    var(--blue) 0deg 108deg,
    var(--orange) 108deg 198deg,
    #6FBF9A 198deg 270deg,
    #B57BC4 270deg 324deg,
    #E0B24C 324deg 360deg
  );
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.donut::after {
  content:''; position:absolute; width:64%; height:64%; border-radius:50%; background:var(--bg);
}
.donut-center { position:relative; z-index:2; text-align:center; }
.donut-center .num { font-family:var(--font-h); font-size:26px; font-weight:800; color:var(--text); }
.donut-center .lbl { font-size:10.5px; color:var(--muted); letter-spacing:.5px; }
.legend { display:flex; flex-direction:column; gap:14px; }
.legend-item { display:flex; align-items:center; gap:12px; font-size:14px; }
.legend-swatch { width:13px; height:13px; border-radius:3px; flex-shrink:0; }
.legend-pct { font-family:var(--font-h); font-weight:700; color:var(--text); margin-left:auto; }
@media (max-width:760px) { .clientmix-grid { grid-template-columns:1fr; justify-items:center; gap:32px; } }

/* ---------- ecosystem ---------- */
.ecosystem-visual {
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  margin-top:12px; background:var(--bg-card);
}
.ecosystem-visual img { width:100%; height:auto; display:block; }
/* Umbrella organisations logo grid */
.ecosystem-logos { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:48px; }
.umbrella-org {
  position:relative; display:flex; align-items:center; justify-content:center;
  aspect-ratio:5/2; border-radius:10px; transition:background .25s ease;
  background:var(--bg-card); border:1px solid var(--border); padding:8px;
}
.umbrella-org img { width:90%; height:85%; object-fit:contain; transition:opacity .35s ease; }
.umbrella-org .logo-colour { opacity:1; }
.umbrella-org .logo-grey { opacity:0; position:absolute; }
.umbrella-org:hover .logo-colour { opacity:0; }
.umbrella-org:hover .logo-grey { opacity:1; }
@media (max-width:1000px) { .ecosystem-logos { grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (max-width:640px) { .ecosystem-logos { grid-template-columns:repeat(2,1fr); gap:14px; } }

/* ---------- testimonials ---------- */
.testi-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:48px; }
.testi-card { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:30px; }
.testi-quote { font-size:15px; line-height:1.7; color:var(--text); margin-bottom:20px; }
.testi-attr-row { display:flex; align-items:center; gap:12px; }
.testi-avatar { width:48px; height:48px; border-radius:50%; background:var(--faint); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; overflow:hidden; }
.testi-avatar img { width:100%; height:100%; object-fit:cover; }
.testi-name { font-size:14px; font-weight:700; }
.testi-title { font-size:12px; color:var(--blue-accent); }
.testi-on { font-size:11.5px; color:var(--muted); margin-top:2px; }
@media (max-width:760px) { .testi-grid { grid-template-columns:1fr; } }

/* ---------- CTA band ---------- */
.cta-band { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--border); padding:56px 0 32px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:48px; }
.footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-desc { font-size:13.5px; color:var(--muted); line-height:1.8; max-width:280px; }
.footer-col-title { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--orange); margin-bottom:18px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:11px; }
.footer-links a, .footer-links span { font-size:13.5px; color:var(--muted); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--text); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:30px; margin-top:36px; border-top:1px solid var(--border); flex-wrap:wrap; gap:12px; }
.footer-copy { font-size:12px; color:var(--muted); }
@media (max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .footer-grid { grid-template-columns:1fr; } }

/* ============================================================
   AWRTD PAGE
============================================================ */

/* page hero (sub-page, shorter than home hero) */
.page-hero {
  padding:160px 0 70px; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 800px 460px at 88% 10%, rgba(247,147,47,0.07), transparent 60%),
    radial-gradient(ellipse 600px 460px at 6% 100%, rgba(102,165,200,0.08), transparent 60%),
    var(--bg);
}
.page-hero-inner { max-width:760px; }
.page-hero h1 { margin-top:24px; font-weight:600; letter-spacing:-0.5px; color:#16303D; font-size:clamp(30px,4.4vw,48px); line-height:1.15; }
.page-hero h1 em { color:var(--orange); font-style:normal; }
.page-hero .lead { margin-top:22px; max-width:640px; }

/* value cards (what is AWRTD) */
.value-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
.value-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:26px 22px; }
.value-icon {
  width:38px; height:38px; border-radius:10px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-weight:800; font-size:13px;
  background:var(--orange-dim); border:1px solid var(--orange-bord); color:var(--orange);
}
.value-card h4 { font-size:14.5px; margin-bottom:8px; }
.value-card p { font-size:13px; color:var(--muted); line-height:1.65; }
@media (max-width:1000px) { .value-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .value-grid { grid-template-columns:1fr; } }

/* client embassy: copy left, portrait diagram right */
.embassy-grid { display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:center; }
.embassy-visual img { width:100%; height:auto; display:block; }
.embassy-points { display:flex; flex-direction:column; gap:22px; margin-top:34px; }
.embassy-point { display:flex; gap:14px; align-items:flex-start; }
.embassy-point-dot { width:9px; height:9px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:7px; }
.embassy-point h4 { font-size:14.5px; margin-bottom:5px; }
.embassy-point p { font-size:13px; color:var(--muted); line-height:1.65; }
@media (max-width:1000px) {
  .embassy-grid { grid-template-columns:1fr; }
  .embassy-visual { max-width:420px; margin:0 auto; }
}

/* how we work: 4 steps in a row (reuses .pipeline-step) */
.how-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px; }
.how-row .pipeline-step { text-align:left; padding:26px 20px; }
.how-row .pipeline-step-num { margin:0 0 14px; }
@media (max-width:1000px) { .how-row { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .how-row { grid-template-columns:1fr; } }

/* practice areas */
.practice-block { margin-top:56px; }
.practice-chips { display:flex; flex-wrap:wrap; gap:12px; }
.practice-chips .chip { flex:0 1 auto; }

/* projects matrix filters */
.filter-rows { margin-top:40px; display:flex; flex-direction:column; gap:14px; }
.filter-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.filter-label { font-family:var(--font-h); font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); flex:0 0 110px; }
.filter-btn { font-size:12px; padding:6px 14px; border-radius:20px; border:1px solid var(--border); background:var(--bg-card); color:var(--muted); cursor:pointer; transition:all .2s; font-family:inherit; }
.filter-btn:hover { border-color:var(--orange-bord); color:var(--text); }
.filter-btn.active { background:var(--orange-dim); border-color:var(--orange-bord); color:var(--orange); font-weight:600; }
.matrix-count { margin-top:26px; font-size:12.5px; color:var(--muted); }
.case-card.hidden { display:none; }

/* case studies */
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.case-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; transition:border-color .25s, transform .25s;
}
.case-card:hover { border-color:var(--orange-bord); transform:translateY(-3px); }
a.case-card { display:block; text-decoration:none; color:inherit; }
a.case-card h4::after { content:" →"; color:var(--orange); }
.case-img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-bottom:1px solid var(--border); }
.case-body { padding:22px 22px 26px; }
.case-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.case-tag { font-size:10.5px; letter-spacing:.4px; color:var(--muted); background:var(--faint); padding:4px 10px; border-radius:5px; }
.case-tag-status { color:var(--orange); background:var(--orange-dim); border:1px solid var(--orange-bord); }
.case-card h4 { font-size:15px; margin-bottom:8px; line-height:1.35; }
.case-card p { font-size:13px; color:var(--muted); line-height:1.7; }
.case-note { margin-top:28px; font-size:12px; color:var(--muted); font-style:italic; }
@media (max-width:1000px) { .case-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .case-grid { grid-template-columns:1fr; } }

/* vs table */
.vs-table { margin-top:44px; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.vs-row { display:grid; grid-template-columns:1fr 1fr; }
.vs-row > div { padding:16px 24px; font-size:14px; border-top:1px solid var(--border); }
.vs-row > div:first-child { background:var(--orange-dim); color:var(--text); font-weight:600; border-right:1px solid var(--border); }
.vs-row > div:last-child { color:var(--muted); }
.vs-head > div { border-top:none; font-family:var(--font-h); font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase; }
.vs-head > div:first-child { color:var(--orange); }

/* ============================================================
   ABOUT PAGE
============================================================ */
.story-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
@media (max-width:900px) { .story-grid { grid-template-columns:1fr; gap:24px; } }

/* history timeline */
.timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:64px; position:relative; }
.timeline::before {
  content:""; position:absolute; top:7px; left:2%; right:2%;
  height:2px; background:var(--border);
}
.timeline-item { position:relative; padding-top:30px; }
.timeline-dot {
  position:absolute; top:0; left:0;
  width:16px; height:16px; border-radius:50%;
  background:var(--blue-accent); border:3px solid var(--bg-deep);
}
.timeline-ai .timeline-dot { background:var(--orange); }
.timeline-flag {
  position:absolute; top:-26px; left:0; font-size:10px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--orange); white-space:nowrap;
}
.timeline-period { font-family:var(--font-h); font-style:italic; font-weight:700; font-size:15px; margin-bottom:10px; }
.timeline-item p { font-size:12.5px; color:var(--muted); line-height:1.65; }
@media (max-width:1000px) {
  .timeline { grid-template-columns:1fr; gap:30px; padding-left:26px; }
  .timeline::before { top:2%; bottom:2%; left:7px; right:auto; width:2px; height:auto; }
  .timeline-item { padding-top:0; padding-left:0; }
  .timeline-dot { left:-26px; top:2px; }
  .timeline-flag { position:static; display:block; margin-bottom:6px; white-space:normal; }
}

.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.profile-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
  padding:34px 32px; display:flex; flex-direction:column;
}
.profile-head { display:flex; gap:22px; align-items:center; margin-bottom:22px; }
.profile-photo {
  width:110px; height:110px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid var(--orange-bord); background:var(--faint);
}
.profile-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-card h3 { font-size:19px; margin-bottom:4px; }
.profile-role { font-size:13px; color:var(--orange); font-weight:600; margin-bottom:4px; }
.profile-creds { font-size:12px; color:var(--muted); letter-spacing:.3px; }
.profile-bio p { font-size:13.5px; color:var(--muted); line-height:1.75; }
.profile-bio p + p { margin-top:14px; }
.profile-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
@media (max-width:1000px) { .profile-grid { grid-template-columns:1fr; } }
@media (max-width:560px) {
  .profile-head { flex-direction:column; align-items:flex-start; gap:16px; }
}

/* advisory board */
.advisor-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
.advisor-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:28px 22px; text-align:center;
}
.advisor-photo {
  width:84px; height:84px; border-radius:50%; overflow:hidden; margin:0 auto 16px;
  border:2px solid var(--orange-bord); background:var(--faint);
  display:flex; align-items:center; justify-content:center;
}
.advisor-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.advisor-photo span { font-family:var(--font-h); font-weight:800; font-size:13px; color:var(--muted); letter-spacing:1px; }
.advisor-card h4 { font-size:14.5px; margin-bottom:4px; }
.advisor-affil { font-size:12px; color:var(--muted); margin-bottom:14px; min-height:17px; }
.advisor-tba { border-style:dashed; }
.advisor-tba h4 { color:var(--muted); font-weight:500; }
@media (max-width:1000px) { .advisor-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .advisor-grid { grid-template-columns:1fr; } }

.partner-groups { display:flex; flex-direction:column; gap:38px; margin-top:48px; }
.partner-group h4 { font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }

/* partner logo tiles: slim border, tooltip with full name on hover */
.partner-logos { display:flex; flex-wrap:wrap; gap:10px; }
.partner-logo {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:6px 12px; background:#fff;
  border:1px solid var(--border); border-radius:8px; cursor:default;
  transition:border-color .2s ease;
}
.partner-logo:hover { border-color:var(--orange-bord); }
.partner-logo img { height:36px; width:auto; max-width:150px; object-fit:contain; display:block; }
.partner-logo::after {
  content:attr(data-name);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:#16303D; color:#fff; font-size:11.5px; line-height:1.4; letter-spacing:.2px;
  padding:7px 12px; border-radius:6px; white-space:nowrap; max-width:320px;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  z-index:20;
}
.partner-logo::before {
  content:""; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%) translateY(4px);
  border:6px solid transparent; border-top-color:#16303D;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  z-index:20;
}
.partner-logo:hover::after, .partner-logo:hover::before { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:640px) {
  .partner-logo { height:46px; }
  .partner-logo img { height:30px; max-width:120px; }
  .partner-logo::after { white-space:normal; width:max-content; max-width:220px; }
}

/* ============================================================
   PROJECT PAGES (template — MIRAI first)
============================================================ */
.project-hero { position:relative; }
.hero-kanji {
  position:absolute; top:120px; right:4%; width:min(360px,32vw); opacity:.10;
  pointer-events:none; user-select:none;
}
.project-hero-grid { display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
.breadcrumb { font-size:12.5px; color:var(--muted); margin-bottom:18px; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--orange); }
.breadcrumb span { margin:0 6px; }
.project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.project-hero h1 { font-weight:600; letter-spacing:-0.5px; color:#16303D; font-size:clamp(32px,4.6vw,52px); line-height:1.12; }
.project-subtitle { font-size:14px; color:var(--muted); letter-spacing:1px; margin-top:10px; }
.project-hero .lead { margin-top:22px; max-width:600px; }
.project-hero-visual img { width:100%; max-width:380px; border-radius:14px; display:block; margin:0 auto; }
.img-credit { font-size:11px; color:var(--muted); font-style:italic; margin-top:10px; text-align:center; }

.split-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.point-list { display:flex; flex-direction:column; gap:16px; margin-top:30px; }
.point { display:flex; gap:13px; align-items:flex-start; }
.point-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:8px; }
.point p { font-size:13.5px; color:var(--muted); line-height:1.7; }
.point strong { color:var(--text); }

.framed-img { margin:0; }
.framed-img img { width:100%; border-radius:12px; border:1px solid var(--border); display:block; background:#fff; }
.framed-img video { width:100%; border-radius:12px; border:1px solid var(--border); display:block; background:#000; }
.framed-img figcaption { font-size:12px; color:var(--muted); margin-top:10px; font-style:italic; }

.img-stack { display:flex; flex-direction:column; gap:16px; }
.img-stack img { width:100%; border-radius:12px; border:1px solid var(--border); display:block; }
.img-stack video { width:100%; border-radius:12px; border:1px solid var(--border); display:block; background:#000; }

.platform-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.platform-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:24px 22px; }
.platform-card h4 { font-size:14px; margin-bottom:8px; }
.platform-card p { font-size:13px; color:var(--muted); line-height:1.65; }

.edge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:44px; }
.edge-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.edge-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-bottom:1px solid var(--border); background:#fff; }
.edge-body { padding:16px 18px 20px; }
.edge-body h4 { font-size:13.5px; margin-bottom:5px; }
.edge-body p { font-size:12.5px; color:var(--muted); line-height:1.6; }

.video-frame { margin-top:44px; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:#000; }
.video-frame video { width:100%; display:block; aspect-ratio:16/9; }
.video-secondary { margin-top:16px; font-size:13.5px; color:var(--muted); }
.video-secondary a { color:var(--orange); text-decoration:none; }

/* pakevo page */
.pakevo-wordmark { width:min(340px, 72vw); height:auto; display:block; margin-bottom:6px; }
.cover-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start; }
.cover-row img { width:100%; border-radius:10px; border:1px solid var(--border); display:block; box-shadow:0 12px 28px rgba(22,48,61,0.10); }
.cover-row-3 { margin-top:26px; max-width:860px; }
@media (max-width:640px) { .cover-row { grid-template-columns:1fr; max-width:320px; } }

.platform-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.platform-tile {
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:border-color .25s, transform .25s;
}
a.platform-tile:hover { border-color:var(--orange-bord); transform:translateY(-3px); }
.platform-tile img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-bottom:1px solid var(--border); background:#fff; }
.platform-noimg {
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-weight:800; font-size:40px; color:var(--muted);
  background:var(--faint); border-bottom:1px solid var(--border);
}
.platform-tile-body { padding:18px 20px 22px; }
.platform-tile-body h4 { font-size:14.5px; margin-bottom:6px; }
.platform-tile-body p { font-size:12.5px; color:var(--muted); line-height:1.6; }
@media (max-width:1000px) { .platform-tiles { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .platform-tiles { grid-template-columns:1fr; } }

/* event photo strip */
.photo-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px; }
.photo-strip img {
  width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  border-radius:10px; border:1px solid var(--border);
}
@media (max-width:900px) { .photo-strip { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .photo-strip { grid-template-columns:1fr; } }

/* pakevo hero "O" list */
.evo-list { display:flex; flex-direction:column; gap:8px; max-width:320px; margin:0 auto; }
.evo-item {
  font-family:var(--font-h); font-size:14px; letter-spacing:1.5px; color:var(--muted);
  padding:9px 18px; border:1px solid var(--border); border-radius:8px; background:var(--bg-card);
}
.evo-item strong { color:var(--orange); font-weight:800; }

/* external site screenshot in a browser frame */
.browser-frame { margin-top:40px; border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:0 24px 50px rgba(22,48,61,0.14); display:block; text-decoration:none; }
.browser-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg-card2, #E9EEF1); border-bottom:1px solid var(--border); }
.browser-bar span { width:10px; height:10px; border-radius:50%; background:var(--faint); }
.browser-bar .url { flex:1; margin-left:8px; font-size:12px; color:var(--muted); background:var(--bg); border-radius:6px; padding:4px 12px; width:auto; height:auto; }
.browser-frame img { width:100%; display:block; }

.media-duo { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:36px; }
@media (max-width:800px) { .media-duo { grid-template-columns:1fr; } }

.agent-list { display:flex; flex-direction:column; gap:18px; }
/* decision lineage chain (document-intelligence page) */
.lineage-chain { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:36px; }
.lineage-step { display:flex; align-items:center; gap:10px; }
.lineage-dot { width:12px; height:12px; border-radius:50%; background:var(--orange); flex:0 0 auto; }
.lineage-step span { font-family:var(--font-h); font-size:12.5px; font-weight:700; letter-spacing:.4px; }
.lineage-arrow { color:var(--muted); font-size:14px; }
.mini-num { flex:0 0 auto; font-family:var(--font-h); font-size:11px; font-weight:700; color:var(--orange); letter-spacing:1px; padding-top:3px; }
.agent-row { display:flex; gap:14px; align-items:flex-start; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }
.agent-row h4 { font-size:14px; margin-bottom:4px; }
.agent-row p { font-size:13px; color:var(--muted); line-height:1.6; }

/* live demo tile with coming-soon overlay */
.demo-tile { position:relative; margin-top:40px; border-radius:16px; overflow:hidden; border:1px solid var(--border); display:block; }
.demo-tile img { width:100%; display:block; aspect-ratio:21/9; object-fit:cover; }
.demo-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:24px;
  background:rgba(22,48,61,0.72);
}
.demo-overlay p { color:#E8EEF1; font-size:14px; max-width:440px; line-height:1.6; }
.demo-badge {
  font-family:var(--font-h); font-weight:800; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--orange); background:rgba(0,0,0,0.35); border:1px solid var(--orange-bord);
  padding:8px 16px; border-radius:999px;
}
.demo-soon img { filter:saturate(.55); }

.stat-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:52px; }
.stat-chip { text-align:center; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:22px 12px; }
.stat-chip .num { font-family:var(--font-h); font-weight:800; font-size:30px; color:var(--orange); }
.stat-chip .lbl { font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.45; }

@media (max-width:1000px) {
  .project-hero-grid, .split-grid { grid-template-columns:1fr; gap:36px; }
  .platform-grid { grid-template-columns:1fr 1fr; }
  .edge-grid { grid-template-columns:1fr 1fr; }
  .stat-strip { grid-template-columns:repeat(3,1fr); }
  .hero-kanji { display:none; }
}
@media (max-width:560px) {
  .platform-grid, .edge-grid { grid-template-columns:1fr; }
  .stat-strip { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   CONTACT PAGE
============================================================ */
.contact-grid { display:grid; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:start; }
.contact-items { display:flex; flex-direction:column; gap:22px; margin-top:32px; }
.contact-item-label { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.contact-item-value { font-size:15px; }
.contact-item-value a { color:var(--text); text-decoration:none; border-bottom:1px solid var(--orange-bord); }
.contact-item-value a:hover { color:var(--orange); }

.contact-form {
  background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
  padding:34px 32px;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field { margin-bottom:18px; }
.form-field label { display:block; font-size:12px; letter-spacing:.5px; color:var(--muted); margin-bottom:7px; }
.form-field input, .form-field select, .form-field textarea {
  width:100%; padding:12px 14px; font-size:14px; font-family:inherit; color:var(--text);
  background:var(--bg-deep); border:1px solid var(--border); border-radius:8px;
  transition:border-color .2s ease; -webkit-appearance:none; appearance:none;
}
.form-field textarea { resize:vertical; min-height:120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline:none; border-color:var(--orange-bord);
}
.hp-field { position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden; }
.next-steps {
  margin-top:36px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; padding:24px 22px;
}
.next-steps h4 { font-size:14px; margin-bottom:18px; }
.next-step { display:flex; gap:12px; align-items:flex-start; }
.next-step + .next-step { margin-top:14px; }
.next-step strong { font-size:13px; display:block; margin-bottom:2px; }
.next-step p { font-size:12.5px; color:var(--muted); line-height:1.55; }
.contact-item-value a[target] { color:var(--blue-accent); border-bottom:none; }
.form-note { font-size:12px; color:var(--muted); margin-top:14px; }
.form-error {
  background:var(--orange-dim); border:1px solid var(--orange-bord); color:var(--text);
  border-radius:8px; padding:12px 16px; font-size:13px; margin-bottom:18px;
}
@media (max-width:900px) {
  .contact-grid { grid-template-columns:1fr; gap:36px; }
  .form-row { grid-template-columns:1fr; gap:0; }
}

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

::-webkit-scrollbar { width:7px; }
::-webkit-scrollbar-track { background:var(--bg-deep); }
::-webkit-scrollbar-thumb { background:var(--faint); border-radius:4px; }

.vert-card[data-vhref] { cursor:pointer; }