/* ═══════════════════════════════════════════════════════════════
   RALAND — Monochrome / Design-Studio  (Graya-inspired)
   Pure black & white · full sans-serif · restraint & space
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Archivo+Expanded:wght@500;600;700&display=swap');

:root {
  --black:   #0c0d0f;
  --ink:     #141619;
  --char:    #1c1f23;
  --char-2:  #2a2e34;
  --grey:    #6c727b;
  --grey-2:  #9aa0a8;
  --line:    #e8e9eb;
  --line-2:  #f1f2f3;
  --paper:   #ffffff;
  --paper-2: #f6f7f8;

  --accent:    #5b7089;   /* cool grey-blue */
  --accent-dk: #3f5066;   /* darker, for text on light */
  --accent-lt: #8fa3bd;   /* lighter, for dark backgrounds */

  --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;

  --nav-h: 88px;
  --maxw: 1340px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition: 0.55s var(--ease);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
.max-w { max-width: var(--maxw); margin:0 auto; padding:0 56px; }

/* ─── Type primitives ─── */
.section-eyebrow, .hero-eyebrow, .page-hero-sub, .news-card-cat,
.project-tag, .stat-label, .service-number, .breadcrumb, .news-cat {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-dk);
}
.section-title, .page-hero-title, .hero h1 {
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.02;
  color: var(--ink); text-transform: none;
}
.section-title em, .hero h1 em, .page-hero-title em { font-style: normal; font-weight: 300; }

/* ═══ NAV ═══ */
.nav {
  position: fixed; top:0; left:0; right:0; height: var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 56px; z-index:1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.nav.scrolled { background: rgba(255,255,255,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }

.nav-logo { display:flex; align-items:center; height: 34px; }
.nav-logo img { height: 30px; width:auto; display:block; }
.nav-logo .logo-white { display:block; }
.nav-logo .logo-ink { display:none; }
.nav.scrolled .logo-white { display:none; }
.nav.scrolled .logo-ink { display:block; }

.nav-links { list-style:none; display:flex; align-items:center; gap:36px; }
.nav-links a { font-size:13px; font-weight:500; letter-spacing:0.02em; color:#fff; position:relative; transition: color var(--transition); }
.nav.scrolled .nav-links > li > a { color: var(--ink); }
.nav-links a:not(.nav-cta)::after { content:''; position:absolute; left:0; bottom:-7px; width:0; height:1px; background: currentColor; transition: width var(--transition); }
.nav-links a:not(.nav-cta):hover::after, .nav-links a.active::after { width:100%; }
.nav.scrolled .nav-links a.active { color: var(--accent-dk); }
.nav-cta { border:1px solid rgba(255,255,255,0.6); padding:11px 24px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; transition: all var(--transition); }
.nav-cta:hover { background:#fff; color:var(--ink)!important; border-color:#fff; }
.nav.scrolled .nav-cta { border-color: var(--ink); }
.nav.scrolled .nav-cta:hover { background: var(--ink); color:#fff!important; }

.hamburger { display:none; background:none; border:none; cursor:pointer; width:30px; height:20px; position:relative; }
.hamburger span { position:absolute; left:0; width:100%; height:2px; background:#fff; transition: var(--transition); }
.nav.scrolled .hamburger span { background: var(--ink); }
.hamburger span:nth-child(1){top:0;} .hamburger span:nth-child(2){top:9px;} .hamburger span:nth-child(3){top:18px;}
.hamburger.open span:nth-child(1){top:9px;transform:rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){top:9px;transform:rotate(-45deg);}

.mobile-menu { position:fixed; top:var(--nav-h); left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); transform:translateY(-120%); transition:transform var(--transition); z-index:999; padding:8px 0; }
.mobile-menu.open { transform:translateY(0); }
.mobile-menu a { display:block; padding:16px 56px; font-size:15px; color:var(--ink); border-bottom:1px solid var(--line-2); }
.mobile-menu a:last-child { border-bottom:none; }

/* ═══ HERO ═══ */
.hero { position:relative; min-height:100vh; display:flex; align-items:flex-end; padding:0 0 96px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:-2; }
.hero-bg-img { width:100%; height:100%; object-fit:cover; filter: grayscale(100%) contrast(1.05); }
.hero-overlay { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(12,13,15,0.5) 0%, rgba(12,13,15,0.2) 45%, rgba(12,13,15,0.85) 100%); }
.hero-content { color:#fff; }
.hero-eyebrow { color:var(--accent-lt); margin-bottom:28px; display:block; }
.hero h1 { font-size:clamp(46px,7.5vw,96px); color:#fff; }
.hero p, .hero .section-body { color:rgba(255,255,255,0.82); font-size:17px; max-width:500px; margin-top:30px; }
.hero-actions { margin-top:42px; display:flex; gap:14px; flex-wrap:wrap; }

/* ═══ BUTTONS ═══ */
.btn-primary, .btn-dark, .btn-outline {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  padding:17px 34px; transition:all var(--transition); cursor:pointer; border:1px solid transparent;
}
.btn-primary, .btn-dark { background:#fff; color:var(--ink); }
.btn-primary:hover, .btn-dark:hover { background:var(--ink); color:#fff; }
.btn-outline { background:transparent; border-color:rgba(255,255,255,0.55); color:#fff; }
.btn-outline:hover { background:#fff; color:var(--ink); border-color:#fff; }
.section .btn-outline, .bg-paper .btn-outline { color:var(--ink); border-color:var(--ink); }
.section .btn-outline:hover { background:var(--ink); color:#fff; }
.section .btn-primary, .section .btn-dark { background:var(--ink); color:#fff; }
.section .btn-primary:hover, .section .btn-dark:hover { background:var(--char-2); }

/* ═══ SECTIONS ═══ */
.section { padding:140px 0; }
.section-sm { padding:90px 0; }
.bg-dark { background:var(--black); color:#fff; }
.bg-dark .section-title, .bg-dark .hero h1 { color:#fff; }
.bg-dark .section-body, .bg-dark p { color:rgba(255,255,255,0.7); }
.bg-dark .section-eyebrow { color:var(--accent-lt); }
.bg-paper-2 { background:var(--paper-2); }
.section-eyebrow { display:block; margin-bottom:22px; }
.section-title { font-size:clamp(32px,4.5vw,58px); }
.section-body { font-size:16px; color:var(--grey); max-width:560px; line-height:1.85; }
.section-view-all { text-align:center; margin-top:64px; }
.divider { width:100%; height:1px; background:var(--line); }

/* ═══ PAGE HERO ═══ */
.page-hero { position:relative; min-height:66vh; display:flex; align-items:center; padding:var(--nav-h) 0 0; overflow:hidden; background:var(--black); }
.page-hero .hero-bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.45; filter:grayscale(100%); }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,13,15,0.45), rgba(12,13,15,0.85)); }
.page-hero-content { position:relative; color:#fff; }
.breadcrumb { display:block; margin-bottom:26px; color:rgba(255,255,255,0.55); }
.breadcrumb a { color:rgba(255,255,255,0.55); }
.page-hero-sub { color:var(--accent-lt); display:block; margin-bottom:20px; }
.page-hero-title { font-size:clamp(38px,6vw,82px); color:#fff; }
.page-hero p { color:rgba(255,255,255,0.78); max-width:580px; margin-top:24px; font-size:16px; }

/* ═══ PROJECTS ═══ */
.projects-filter { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:64px; }
.filter-btn, .cat-tab { font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; padding:12px 26px; border:1px solid var(--line); background:var(--paper); color:var(--grey); cursor:pointer; transition:all var(--transition); }
.filter-btn:hover, .cat-tab:hover { border-color:var(--ink); color:var(--ink); }
.filter-btn.active, .cat-tab.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.project-card { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--black); cursor:pointer; }
.project-card.wide { grid-column:span 2; aspect-ratio:8/5; }
.project-card img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter var(--transition); filter:grayscale(100%); }
.project-card:hover img { transform:scale(1.05); filter:grayscale(0%); }
.project-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,13,15,0) 40%, rgba(12,13,15,0.88) 100%); }
.project-info { position:absolute; left:0; right:0; bottom:0; padding:34px; color:#fff; }
.project-tag { color:rgba(255,255,255,0.7); margin-bottom:12px; display:block; }
.project-name { font-family:var(--font-display); font-size:27px; font-weight:600; line-height:1.08; margin-bottom:8px; }
.project-sub { font-size:13px; color:rgba(255,255,255,0.72); }
.project-badge { display:inline-block; margin-top:16px; font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; padding:6px 13px; border:1px solid rgba(255,255,255,0.4); }
.badge-completed { background:#fff; color:var(--ink); border-color:#fff; }
.badge-active { border-color:var(--accent-lt); color:#fff; }
.badge-pipeline, .badge-coming-soon { border-color:rgba(255,255,255,0.45); }

/* ═══ FEATURED ═══ */
.featured-project { position:relative; min-height:80vh; display:flex; align-items:center; overflow:hidden; }
.featured-project-image { position:absolute; inset:0; }
.featured-project-image img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%); }
.featured-project-image::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(12,13,15,0.85) 0%, rgba(12,13,15,0.4) 60%, transparent 100%); }
.featured-project-content { position:relative; color:#fff; max-width:560px; }

/* ═══ SERVICES ═══ */
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card { background:var(--paper); padding:64px 52px; transition:background var(--transition); }
.service-card:hover { background:var(--paper-2); }
.service-number { display:block; margin-bottom:26px; color:var(--ink); }
.service-title { font-family:var(--font-display); font-size:28px; font-weight:600; margin-bottom:18px; }
.service-desc { font-size:15px; color:var(--grey); line-height:1.85; margin-bottom:26px; }
.service-link { font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:4px; }

/* ═══ STATS ═══ */
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.1); }
.stat-item { padding:64px 36px; text-align:center; background:var(--black); }
.stat-number { font-family:var(--font-display); font-size:clamp(42px,6vw,66px); font-weight:600; color:#fff; line-height:1; }
.stat-label { display:block; margin-top:18px; color:var(--grey-2); }

/* ═══ NEWS ═══ */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.news-card { background:var(--paper); border:1px solid var(--line); transition:all var(--transition); display:flex; flex-direction:column; }
.news-card:hover { border-color:var(--ink); transform:translateY(-4px); }
.news-card-image { aspect-ratio:3/2; overflow:hidden; }
.news-card-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.9s var(--ease), filter var(--transition); filter:grayscale(100%); }
.news-card:hover .news-card-image img { transform:scale(1.04); filter:grayscale(0%); }
.news-card-body { padding:30px; flex:1; display:flex; flex-direction:column; }
.news-card-cat { color:var(--ink); margin-bottom:16px; }
.news-card-title { font-family:var(--font-display); font-size:21px; font-weight:600; line-height:1.22; margin-bottom:12px; }
.news-card-excerpt { font-size:14px; color:var(--grey); line-height:1.7; flex:1; }
.news-card-date { font-size:12px; color:var(--grey-2); margin-top:22px; letter-spacing:0.05em; }
.news-hero-article { display:grid; grid-template-columns:1.2fr 1fr; gap:0; border:1px solid var(--line); margin-bottom:64px; overflow:hidden; }
.news-hero-img { overflow:hidden; }
.news-hero-img img { width:100%; height:100%; object-fit:cover; min-height:360px; filter:grayscale(100%); transition:filter var(--transition); }
.news-hero-article:hover .news-hero-img img { filter:grayscale(0%); }
.news-hero-body { padding:56px; display:flex; flex-direction:column; justify-content:center; }
.news-cat { color:var(--ink); margin-bottom:20px; }
.news-hero-title { font-family:var(--font-display); font-size:32px; font-weight:600; line-height:1.16; margin-bottom:18px; }
.news-hero-excerpt { font-size:15px; color:var(--grey); line-height:1.8; }
.news-date { font-size:12px; color:var(--grey-2); margin-top:24px; }
.news-read-more { font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); margin-top:26px; border-bottom:1px solid var(--accent); padding-bottom:4px; align-self:flex-start; }
.cat-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:56px; }
.state-msg { text-align:center; padding:90px 20px; color:var(--grey); }
.state-msg h3 { font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--ink); margin-bottom:10px; }

/* ═══ ABOUT / SPLIT ═══ */
.about-split { display:grid; grid-template-columns:1fr 1fr; gap:88px; align-items:center; }
.about-image { position:relative; }
.about-image img { width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(100%); }
.about-image-badge { position:absolute; bottom:-30px; left:-30px; background:var(--black); color:#fff; padding:32px 36px; }
.about-image-badge .stat-number { font-size:42px; }

/* ═══ PARTNERS ═══ */
.partners-strip { display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border:1px solid var(--line); }
.partner-item { flex:1 1 200px; background:var(--paper); padding:48px; text-align:center; font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--grey-2); }

/* ═══ TEAM ═══ */
.team-card { background:var(--paper); }
.team-card-img { aspect-ratio:1; overflow:hidden; background:var(--paper-2); }
.team-card-img img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%); }
.team-card-info { padding:24px 0; }
.team-card-name { font-family:var(--font-display); font-size:21px; font-weight:600; }

/* ═══ CTA ═══ */
.cta-band { background:var(--black); padding:120px 0; text-align:center; }
.cta-band-text { font-family:var(--font-display); font-size:clamp(30px,5vw,54px); font-weight:600; color:#fff; line-height:1.08; max-width:820px; margin:0 auto 40px; }
.cta-band-text em { font-style:normal; font-weight:300; }

/* ═══ CONTACT FORM ═══ */
.contact-form-wrap { background:var(--paper); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.form-group { margin-bottom:24px; }
.form-group label { display:block; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--grey); margin-bottom:10px; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:16px; border:1px solid var(--line); background:var(--paper-2); font-family:var(--font-body); font-size:15px; color:var(--ink); transition:border-color var(--transition); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline:none; border-color:var(--ink); }
.contact-info-card { display:block; padding:30px 0; border-bottom:1px solid var(--line); }
.contact-info-label { font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--grey); margin-bottom:8px; }
.contact-info-value { font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--ink); }

/* ═══ FOOTER ═══ */
.footer { background:var(--black); color:rgba(255,255,255,0.65); padding:100px 0 40px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:52px; padding-bottom:72px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-brand .nav-logo { height:auto; margin-bottom:22px; }
.footer-brand .nav-logo img { height:34px; }
.footer-brand p { font-size:14px; line-height:1.8; max-width:330px; color:rgba(255,255,255,0.55); }
.footer-social { display:flex; gap:12px; margin-top:26px; }
.footer-social a { width:42px; height:42px; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:13px; transition:all var(--transition); }
.footer-social a:hover { background:#fff; color:var(--ink); border-color:#fff; }
.footer-col h4 { font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#fff; margin-bottom:24px; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:13px; }
.footer-col a { font-size:14px; color:rgba(255,255,255,0.55); transition:color var(--transition); }
.footer-col a:hover { color:#fff; }
.footer-contact-item { display:flex; gap:12px; margin-bottom:16px; font-size:14px; color:rgba(255,255,255,0.55); line-height:1.6; }
.footer-contact-item .icon { color:#fff; }
.footer-contact-item a { color:rgba(255,255,255,0.55); }
.footer-contact-item a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:34px; font-size:13px; color:rgba(255,255,255,0.4); flex-wrap:wrap; gap:16px; }
.footer-bottom a { color:rgba(255,255,255,0.4); margin-left:26px; }
.footer-bottom a:hover { color:#fff; }

/* ═══ REVEAL ═══ */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:0.12s; }
.reveal-delay-2 { transition-delay:0.24s; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:1024px){
  .projects-grid, .news-grid { grid-template-columns:repeat(2,1fr); }
  .project-card.wide { grid-column:span 2; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
  .about-split { grid-template-columns:1fr; gap:48px; }
  .news-hero-article { grid-template-columns:1fr; }
}
@media (max-width:768px){
  .max-w { padding:0 24px; }
  .nav { padding:0 24px; }
  .nav-links { display:none; }
  .hamburger { display:block; }
  .section { padding:88px 0; }
  .services-grid { grid-template-columns:1fr; }
  .stats-bar { grid-template-columns:1fr 1fr; }
  .projects-grid, .news-grid { grid-template-columns:1fr; }
  .project-card.wide { grid-column:span 1; aspect-ratio:4/5; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .featured-project-image::after { background:linear-gradient(180deg, rgba(12,13,15,0.5), rgba(12,13,15,0.85)); }
}

/* Line-icon containers (replaced emoji) */
.value-icon, .model-icon { width: 44px; height: 44px; color: var(--accent-dk); margin-bottom: 24px; }
.value-icon svg, .model-icon svg { width: 100%; height: 100%; }
.contact-info-icon { width: 22px; height: 22px; color: var(--accent-dk); flex-shrink: 0; }
.contact-info-icon svg { width: 100%; height: 100%; }

/* ═══ ARTICLE PAGES ═══ */
.article-hero { position:relative; min-height:60vh; display:flex; align-items:flex-end; padding:var(--nav-h) 0 64px; overflow:hidden; background:var(--black); }
.article-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.4; filter:grayscale(100%); }
.article-hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,13,15,0.4), rgba(12,13,15,0.85)); }
.article-hero-content { position:relative; color:#fff; }
.article-hero .breadcrumb { color:rgba(255,255,255,0.6); }
.article-hero .breadcrumb a { color:rgba(255,255,255,0.6); }
.article-title { font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4.5vw,56px); line-height:1.08; color:#fff; max-width:900px; margin:16px 0 18px; }
.article-date { font-size:13px; letter-spacing:0.05em; color:rgba(255,255,255,0.65); }
.article-body { max-width:720px; margin:0 auto; padding:0 24px; }
.article-lead { font-family:var(--font-display); font-weight:400; font-size:23px; line-height:1.5; color:var(--ink); margin-bottom:36px; }
.article-body p { font-size:17px; line-height:1.85; color:var(--char); margin-bottom:24px; }
.article-back { display:inline-block; margin-top:24px; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-dk); border-bottom:1px solid var(--accent); padding-bottom:4px; }