:root{
  --white:#ffffff;
  --grey:#F6F7F6;
  --grey-2:#EDEFEE;
  --line:#E5E7E6;
  --charcoal:#161818;
  --charcoal-soft:#63676A;
  --teal:#2FA79A;
  --teal-deep:#12564E;
  --amber:#C97B3D;
  --amber-deep:#8A4A1D;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ width:100%; font-family:'Inter',sans-serif; color:var(--charcoal); background:var(--white); -webkit-font-smoothing:antialiased; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
input,textarea{ font-family:inherit; }
::selection{ background:var(--teal); color:#fff; }
.disp{ font-family:'Sora', sans-serif; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* ============ SCREENS / ROUTER ============ */
.screen{
  position:fixed; inset:0; width:100%; height:100%;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
  overflow-y:auto; background:var(--white);
  -webkit-overflow-scrolling:touch;
}
.screen.active{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear 0s;
}
body.lock-landing #screen-landing{ overflow:hidden; }
.page-section{
  min-height:100vh;
  padding-top:70px;
  background:var(--white);
  opacity:1;
  transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease;
}
.page-section.fade-out{
  opacity:0;
  transform:translateY(8px);
}
.page-section.fade-in{
  animation:pageIn .4s ease forwards;
}
@keyframes pageIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
/* ============ TOPBAR ============ */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .brand img{ height:20px; width:auto; }
.topbar .nav-actions{ display:flex; align-items:center; gap:8px; }
.topbar .home-btn{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--charcoal-soft); padding:9px 14px; border-radius:999px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.topbar .home-btn:hover{ background:var(--grey-2); color:var(--charcoal); }
.topbar .home-btn svg{ width:14px; height:14px; }
.topbar .contact-btn{ background:var(--charcoal); color:#fff; padding:9px 18px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; transition:background .25s var(--ease); }
.topbar .contact-btn:hover{ background:var(--teal-deep); }
.topbar .menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.topbar .menu-toggle svg{ width:20px; height:20px; color:var(--charcoal); }
.topbar .nav-menu{ display:none; }
@media (min-width:900px){
  .topbar{ padding:16px 44px; }
  .topbar .brand img{ height:24px; }
  .topbar .nav-menu{ display:flex; align-items:center; gap:4px; margin-left:20px; }
  .topbar .nav-menu a{ font-size:12.5px; font-weight:500; color:var(--charcoal-soft); padding:8px 12px; border-radius:8px; transition:all .2s var(--ease); text-decoration:none; white-space:nowrap; }
  .topbar .nav-menu a:hover{ background:var(--grey); color:var(--charcoal); }
  .topbar .menu-toggle{ display:none; }
}
@media (max-width:899px){
  .topbar .menu-toggle{ display:block; }
  .topbar .nav-menu{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--white); flex-direction:column; padding:16px 20px; border-bottom:1px solid var(--grey); box-shadow:0 8px 24px rgba(0,0,0,0.1); z-index:1000; }
  .topbar .nav-menu.open{ display:flex; }
  .topbar .nav-menu a{ font-size:14px; padding:12px 0; border-bottom:1px solid var(--grey); text-decoration:none; color:var(--charcoal); }
  .topbar .contact-btn{ display:none; }
}

/* ============================================================
   LANDING
   ============================================================ */
.landing{ min-height:100%; display:flex; flex-direction:column; position:relative; padding:0 20px; }
.landing-atmos{ position:fixed; inset:0; pointer-events:none; z-index:0; background:var(--white); overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; animation:breathe 9s ease-in-out infinite; }
.blob-amber{ width:60vw; height:60vw; max-width:640px; max-height:640px; left:-16vw; top:4vh; background:radial-gradient(circle, rgba(201,123,61,0.35), rgba(201,123,61,0) 70%); }
.blob-teal{ width:60vw; height:60vw; max-width:640px; max-height:640px; right:-16vw; bottom:2vh; background:radial-gradient(circle, rgba(47,167,154,0.30), rgba(47,167,154,0) 70%); animation-delay:2s; }
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.landing-center{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; padding:56px 0 34px; }
.philosophy{ font-family:'Sora', sans-serif; font-weight:300; font-size:14px; line-height:1.6; color:var(--charcoal-soft); max-width:300px; }
.logo-wrap{ position:relative; width:112px; height:112px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-glow{ position:absolute; inset:-45%; background:radial-gradient(circle, rgba(47,167,154,0.20) 0%, rgba(201,123,61,0.08) 45%, transparent 72%); animation:pulse 5s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.1); opacity:1; } }
#particle-canvas{ position:absolute; inset:-70%; pointer-events:none; }
.logo-wrap img{ position:relative; z-index:2; width:76%; height:76%; object-fit:contain; }
.energy-line{ font-family:'Sora', sans-serif; font-weight:700; font-size:19px; letter-spacing:-.01em; }
.tagline{ font-family:'Sora', sans-serif; font-weight:400; font-size:13px; color:var(--charcoal-soft); letter-spacing:.02em; }
.journeys{ position:relative; z-index:2; display:flex; flex-direction:column; gap:14px; padding-bottom:32px; flex:1; }
.journey-card{ border-radius:24px; padding:28px 24px; flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; min-height:200px; cursor:pointer; border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.journey-card:hover, .journey-card:focus-visible{ transform:translateY(-4px); box-shadow:0 24px 60px rgba(15,20,20,0.10); }
.journey-steel{ background:linear-gradient(160deg, #FFFAF3, #FCEEDD); }
.journey-circular{ background:linear-gradient(160deg, #F3FBFA, #E4F5F2); }
.journey-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.journey-steel .journey-eyebrow{ color:var(--amber-deep); }
.journey-circular .journey-eyebrow{ color:var(--teal-deep); }
.journey-title{ font-family:'Sora', sans-serif; font-weight:700; font-size:clamp(22px,6vw,32px); letter-spacing:-.02em; line-height:1.05; }
.journey-btn{ align-self:flex-start; margin-top:4px; padding:11px 24px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:transform .3s var(--ease); }
.journey-steel .journey-btn{ background:var(--amber-deep); color:#fff; }
.journey-circular .journey-btn{ background:var(--teal-deep); color:#fff; }
.journey-card:hover .journey-btn{ transform:translateX(4px); }
@media (min-width:900px){
  body.lock-landing{ overflow:hidden; }
  .landing{ height:100vh; flex-direction:row; align-items:center; padding:0 40px; gap:20px; }
  .landing-center{ order:2; flex:0 0 300px; padding:0; }
  .philosophy{ max-width:280px; font-size:14.5px; }
  .logo-wrap{ width:150px; height:150px; }
  .journeys{ display:contents; }
  .journey-card{ order:1; flex:1; height:76vh; min-height:0; border-radius:32px; padding:46px; }
  .journey-circular{ order:3; }
  .journey-title{ font-size:clamp(28px, 3vw, 42px); }
  .energy-line{ font-size:21px; }
}

/* ============================================================
   SHARED PAGE HEADERS
   ============================================================ */
.page-hero{ padding:36px 20px 6px; max-width:1180px; margin:0 auto; }
.page-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:12px; }
.page-eyebrow.amber{ color:var(--amber-deep); }
.page-title{ font-family:'Sora', sans-serif; font-weight:800; font-size:clamp(28px, 7vw, 46px); line-height:1.05; letter-spacing:-.02em; max-width:820px; }
.page-sub{ font-family:'Sora', sans-serif; font-weight:400; font-size:clamp(15px,3.4vw,19px); color:var(--charcoal-soft); margin-top:16px; max-width:560px; line-height:1.5; }
@media (min-width:900px){ .page-hero{ padding:60px 44px 6px; } }

/* Search */
.search-wrap{ max-width:1180px; margin:30px auto 0; padding:0 20px; }
.search-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.search-tab{ padding:10px 20px; border-radius:12px; background:var(--grey); border:1px solid transparent; font-size:13px; font-weight:600; color:var(--charcoal-soft); cursor:pointer; transition:all .3s var(--ease); }
.search-tab:hover{ background:var(--white); border-color:var(--grey-2); }
.search-tab.active{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); }
.search-bar{ display:flex; align-items:center; gap:14px; padding:17px 22px; background:var(--grey); border-radius:18px; border:1px solid transparent; transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.search-bar:focus-within{ background:var(--white); border-color:rgba(47,167,154,0.4); box-shadow:0 14px 40px rgba(20,60,55,0.08); }
.search-bar svg{ width:18px; height:18px; color:var(--charcoal-soft); flex-shrink:0; }
.search-bar input{ border:none; background:none; outline:none; font-size:15.5px; width:100%; color:var(--charcoal); }
.search-bar input::placeholder{ color:#9AA0A0; }
.search-empty{ text-align:center; padding:50px 20px; color:var(--charcoal-soft); font-size:14.5px; display:none; }
.search-empty.show{ display:block; }
@media (min-width:900px){ .search-wrap{ padding:0 44px; } .search-bar{ padding:20px 28px; border-radius:22px; } .search-bar input{ font-size:17px; } .search-tab{ padding:12px 24px; font-size:14px; } }

/* Explore Cards */
.explore-cards{ max-width:1180px; margin:24px auto 0; padding:0 20px; display:grid; grid-template-columns:1fr; gap:12px; }
.explore-card{ background:var(--white); border:1px solid var(--grey-2); border-radius:18px; overflow:hidden; transition:all .3s var(--ease); }
.explore-card:hover{ border-color:transparent; box-shadow:0 12px 32px rgba(15,40,36,0.08); }
.explore-card-header{ padding:18px 20px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.explore-card-header h3{ font-size:15px; font-weight:700; color:var(--charcoal); margin:0; }
.explore-card-header svg{ width:16px; height:16px; color:var(--charcoal-soft); transition:transform .3s var(--ease); }
.explore-card.open .explore-card-header svg{ transform:rotate(90deg); }
.explore-card-content{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.explore-card.open .explore-card-content{ max-height:500px; }
.explore-item{ padding:12px 20px; font-size:14px; color:var(--charcoal-soft); cursor:pointer; transition:all .2s var(--ease); border-left:3px solid transparent; }
.explore-item:hover{ background:var(--grey); color:var(--charcoal); border-left-color:var(--teal); }
@media (min-width:900px){ .explore-cards{ grid-template-columns:repeat(3,1fr); padding:0 44px; gap:16px; margin-top:30px; } }

/* Three nav tiles */
.nav-tiles{ max-width:1180px; margin:20px auto 0; padding:0 20px; display:grid; grid-template-columns:1fr; gap:12px; }
.nav-tile{ padding:18px 20px; border-radius:16px; background:var(--white); border:1px solid var(--grey-2); display:flex; align-items:center; justify-content:space-between; font-size:14.5px; font-weight:600; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.nav-tile:hover, .nav-tile:focus-visible{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(15,40,36,0.08); border-color:transparent; }
.nav-tile svg{ width:15px; height:15px; opacity:.5; flex-shrink:0; }
@media (min-width:900px){ .nav-tiles{ grid-template-columns:repeat(3,1fr); padding:0 44px; gap:16px; margin-top:26px; } .nav-tile{ padding:22px 24px; border-radius:18px; font-size:15px; } }

/* ============================================================
   TILE GRID (shared: steel products, materials, services)
   ============================================================ */
.tile-layout{ max-width:1180px; margin:34px auto 90px; padding:0 20px; display:flex; flex-direction:column; gap:16px; }
.tile-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.tile-grid.tile-grid-plain{ display:grid; }
.grid-tile{
  position:relative; aspect-ratio:1/1; border-radius:18px; background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  overflow:hidden; cursor:pointer; border:1px solid var(--grey);
  width:100%; min-height:0;
}
.grid-tile:hover, .grid-tile.active-tile, .grid-tile:focus-visible{ box-shadow:0 12px 28px rgba(15,40,36,0.10); transform:translateY(-3px); }
.grid-tile .icon-badge{ width:56px; height:56px; border-radius:14px; background:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.grid-tile .icon-badge svg{ width:28px; height:28px; }
.grid-tile.amber-tone .icon-badge svg{ color:var(--amber-deep); }
.grid-tile.teal-tone .icon-badge svg{ color:var(--teal-deep); }
.grid-tile .name{ font-size:14px; font-weight:600; text-align:center; padding:0 6px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.grid-tile.hidden-tile{ display:none; }
.grid-tile .tile-image{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; }
.grid-tile .tile-image img{ width:100%; height:100%; object-fit:cover; }
.grid-tile .icon-badge{ position:relative; z-index:2; }
.grid-tile .tile-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:12px; z-index:3; background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); border-radius:inherit; }
.grid-tile .tile-overlay .name{ color:#fff; font-size:13px; font-weight:700; text-align:center; letter-spacing:0.02em; text-shadow:0 1px 4px rgba(0,0,0,0.4); width:100%; }
.grid-tile .tile-overlay .badge{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-size:10px; color:#fff; font-weight:500; }
.grid-tile .tile-overlay .badge svg{ width:12px; height:12px; color:#22c55e; }
@media (min-width:900px){ .grid-tile .icon-badge{ width:64px; height:64px; border-radius:16px; } .grid-tile .icon-badge svg{ width:32px; height:32px; } .grid-tile .name{ font-size:15px; } }

/* mobile accordion detail */
.tile-detail{ grid-column:1/-1; overflow:hidden; max-height:0; opacity:0; transition:max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease); border-radius:20px; background:var(--white); border:1px solid var(--line); }
.tile-detail.open{ max-height:900px; opacity:1; margin-top:2px; }
.tile-detail-inner{ padding:22px; display:flex; flex-direction:column; gap:14px; }
.tile-visual{ height:140px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.tile-visual svg{ width:52px; height:52px; color:#fff; opacity:.9; }
.tile-row .label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--charcoal-soft); font-weight:700; }
.tile-row .value{ font-size:14px; margin-top:3px; line-height:1.5; }
.tile-explore{ align-self:flex-start; padding:12px 26px; border-radius:999px; background:var(--charcoal); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }

@media (min-width:900px){
  .tile-layout{ flex-direction:row; align-items:flex-start; gap:28px; margin-top:44px; padding:0 44px; }
  .tile-layout.no-panel{ flex-direction:column; }
  .tile-grid{ flex:1 1 60%; grid-template-columns:repeat(4,1fr); gap:14px; align-content:start; }
  .tile-layout.no-panel .tile-grid{ grid-template-columns:repeat(4,1fr); width:100%; }
  .grid-tile{ border-radius:18px; }
  .grid-tile .icon-badge{ width:60px; height:60px; border-radius:16px; }
  .grid-tile .icon-badge svg{ width:30px; height:30px; }
  .grid-tile .name{ font-size:14px; text-align:center; }
  .tile-detail{ display:none; }

  .preview-panel{ flex:1 1 38%; position:sticky; top:110px; border-radius:28px; overflow:hidden; background:var(--grey); min-height:520px; display:flex; flex-direction:column; box-shadow:0 30px 70px rgba(15,40,36,0.08); transition:opacity .22s var(--ease); }
  .preview-visual{ height:44%; min-height:220px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .preview-visual .pv-bg{ position:absolute; inset:0; transition:opacity .5s var(--ease); }
  .preview-visual svg{ position:relative; z-index:2; width:74px; height:74px; color:#fff; opacity:.92; }
  .preview-body{ padding:34px; display:flex; flex-direction:column; gap:16px; flex:1; }
  .preview-body h3{ font-family:'Sora', sans-serif; font-weight:700; font-size:24px; letter-spacing:-.01em; }
  .preview-row{ display:flex; flex-direction:column; gap:4px; }
  .preview-row .label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--charcoal-soft); font-weight:700; }
  .preview-row .value{ font-size:14px; line-height:1.55; }
  .preview-explore{ margin-top:auto; align-self:flex-start; padding:13px 30px; border-radius:999px; background:var(--charcoal); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:background .3s var(--ease); }
  .preview-explore:hover{ background:var(--teal-deep); }
}

/* ============================================================
   CIRCULAR ECONOMY — stats + metals
   ============================================================ */
.stats-block{ max-width:1180px; margin:20px auto 0; padding:0 20px; display:flex; flex-direction:column; gap:18px; }
.stat-line{ font-family:'Sora', sans-serif; font-weight:700; letter-spacing:-.01em; line-height:1.18; }
.stat-1{ font-size:clamp(20px,5.4vw,30px); }
.stat-2, .stat-3{ font-size:clamp(17px,4.4vw,24px); color:var(--charcoal-soft); font-weight:600; }
@media (min-width:900px){ .stats-block{ padding:0 44px; margin-top:28px; gap:14px; max-width:900px; } }

.metals-zone{ position:relative; margin-top:44px; overflow:hidden; min-height:280px; }
.metal-bg-layer{ position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease); }
.metal-bg-layer.active{ opacity:1; }
.metals-zone-inner{ position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:40px 20px 44px; display:flex; flex-direction:column; align-items:flex-start; gap:26px; }
.metals-label{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#EFFBF8; }
.metals-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; }
.metal-btn{ position:relative; height:88px; border-radius:16px; background:linear-gradient(120deg,#cfd4d2 0%,#eef1f0 18%,#b9bfbd 34%,#f4f6f5 52%,#c3c9c7 68%,#eef1f0 84%,#cfd4d2 100%); background-size:220% 100%; border:1px solid rgba(255,255,255,0.5); box-shadow:inset 0 1px 1px rgba(255,255,255,0.7), 0 10px 22px rgba(0,0,0,0.18); color:#2b2f2e; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background-position .6s var(--ease); }
.metal-btn .sym{ font-family:'Sora', sans-serif; font-size:22px; font-weight:700; }
.metal-btn .num{ font-size:8.5px; letter-spacing:.08em; opacity:.55; font-weight:600; }
.metal-btn:hover, .metal-btn.active, .metal-btn:focus-visible{ transform:translateY(-4px); background-position:100% 0; box-shadow:inset 0 1px 1px rgba(255,255,255,0.8), 0 16px 30px rgba(0,0,0,0.22); }
@media (min-width:900px){
  .metals-zone-inner{ padding:70px 44px 80px; }
  .metals-row{ grid-template-columns:repeat(5,1fr); gap:20px; max-width:640px; }
  .metal-btn{ height:120px; border-radius:20px; }
  .metal-btn .sym{ font-size:28px; }
  .metal-btn .num{ font-size:9.5px; }
}

.section-heading{ font-family:'Sora', sans-serif; font-weight:800; font-size:clamp(22px,5.6vw,30px); letter-spacing:-.01em; max-width:640px; }
.section-block{ max-width:1180px; margin:64px auto 0; padding:0 20px; }
@media (min-width:900px){ .section-block{ padding:0 44px; } }

.proposal-cta-wrap{ display:flex; justify-content:center; margin:44px 0 8px; padding:0 20px; }
.proposal-cta{ width:100%; max-width:360px; padding:18px; border-radius:999px; background:var(--teal-deep); color:#fff; font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-align:center; box-shadow:0 18px 44px rgba(20,90,80,0.25); transition:transform .3s var(--ease), background .3s var(--ease); }
.proposal-cta:hover{ transform:translateY(-2px); background:var(--charcoal); }

.proposal-form{ max-width:720px; margin:0 auto; padding:0 20px; overflow:hidden; max-height:0; opacity:0; transition:max-height .6s var(--ease), opacity .5s var(--ease); }
.proposal-form.open{ max-height:1500px; opacity:1; }
.form-card{ background:var(--grey); border-radius:22px; padding:26px 20px; margin-top:26px; display:grid; grid-template-columns:1fr; gap:16px; }
.form-card .full{ grid-column:1/-1; }
.field label{ display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-soft); margin-bottom:7px; }
.field input, .field textarea, .field select{ width:100%; padding:13px 15px; border-radius:12px; border:1px solid #DDE2E1; background:#fff; font-size:14.5px; outline:none; transition:border-color .3s var(--ease); }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--teal); }
.field textarea{ resize:vertical; min-height:88px; }
.upload-field{ border:1.5px dashed #C9D2D0; border-radius:12px; padding:16px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--charcoal-soft); cursor:pointer; transition:border-color .3s var(--ease), background .3s var(--ease); }
.upload-field:hover{ border-color:var(--teal); background:#fff; }
.upload-field svg{ width:18px; height:18px; flex-shrink:0; color:var(--teal-deep); }
.send-btn{ grid-column:1/-1; padding:15px; border-radius:12px; background:var(--charcoal); color:#fff; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:background .3s var(--ease); }
.send-btn:hover{ background:var(--teal-deep); }
.form-confirm{ display:none; background:var(--teal-deep); color:#fff; border-radius:16px; padding:18px 22px; font-size:14px; margin-top:16px; }
.form-confirm.show{ display:block; }
@media (min-width:900px){ .proposal-form{ padding:0 44px; } .form-card{ grid-template-columns:1fr 1fr; padding:44px; border-radius:28px; } }

/* Explore OMPL divider + grid */
.divider-wrap{ max-width:1180px; margin:70px auto 0; padding:0 20px; }
.divider-line{ height:1px; background:var(--line); }
.explore-heading{ font-family:'Sora', sans-serif; font-weight:800; font-size:clamp(22px,5.6vw,30px); letter-spacing:-.01em; text-align:center; margin:34px 0 26px; }
.app-grid{ max-width:1180px; margin:0 auto 90px; padding:0 20px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.app-tile{ position:relative; aspect-ratio:1/1; border-radius:18px; background:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; overflow:hidden; cursor:pointer; border:1px solid var(--grey); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.app-tile:hover, .app-tile:focus-visible{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(15,40,36,0.10); }
.app-tile .icon-badge{ width:56px; height:56px; border-radius:14px; background:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.app-tile .icon-badge svg{ width:28px; height:28px; color:var(--teal-deep); }
.app-tile .name{ font-size:14px; font-weight:600; text-align:center; padding:0 6px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (min-width:900px){
  .divider-wrap{ padding:0 44px; margin-top:90px; }
  .app-grid{ gap:14px; padding:0 44px; margin-bottom:100px; }
  .app-tile .icon-badge{ width:64px; height:64px; }
  .app-tile .icon-badge svg{ width:32px; height:32px; }
  .app-tile .name{ font-size:15px; }
}

/* ============================================================
   LIST ROWS (Knowledge Centre)
   ============================================================ */
.list-rows{ max-width:820px; margin:34px auto 90px; padding:0 20px; display:flex; flex-direction:column; gap:10px; }
.list-row{ display:flex; align-items:center; gap:16px; padding:20px; border-radius:18px; background:var(--grey); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.list-row:hover, .list-row:focus-visible{ transform:translateX(4px); box-shadow:0 14px 32px rgba(15,40,36,0.08); }
.list-row .icon-badge{ width:44px; height:44px; border-radius:13px; background:var(--white); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 16px rgba(0,0,0,0.06); }
.list-row .icon-badge svg{ width:20px; height:20px; color:var(--teal-deep); }
.list-row .row-text{ flex:1; }
.list-row .row-title{ font-size:15px; font-weight:600; }
.list-row .row-sub{ font-size:12.5px; color:var(--charcoal-soft); margin-top:2px; }
.list-row svg.chev{ width:16px; height:16px; opacity:.4; flex-shrink:0; }
@media (min-width:900px){ .list-rows{ margin-top:40px; } }

/* ============================================================
   MEDIA THUMBS
   ============================================================ */
.thumb-grid{ max-width:1180px; margin:34px auto 90px; padding:0 20px; display:grid; grid-template-columns:1fr; gap:16px; }
.thumb-tile{ border-radius:22px; overflow:hidden; background:var(--grey); cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.thumb-tile:hover, .thumb-tile:focus-visible{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(15,40,36,0.10); }
.thumb-media{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; position:relative; }
.thumb-media svg{ width:40px; height:40px; color:#fff; opacity:.92; }
.thumb-info{ padding:18px 20px; }
.thumb-title{ font-size:15px; font-weight:700; font-family:'Sora',sans-serif; }
.thumb-sub{ font-size:12.5px; color:var(--charcoal-soft); margin-top:4px; }
@media (min-width:900px){ .thumb-grid{ grid-template-columns:repeat(3,1fr); margin-top:44px; padding:0 44px; gap:22px; } }

/* ============================================================
   ABOUT / GROUP PAGE
   ============================================================ */
.group-hero{ position:relative; min-height:380px; overflow:hidden; margin-bottom:0; display:flex; align-items:flex-end; }
.group-hero-bg{ position:absolute; inset:0; background:linear-gradient(135deg, #0E2C28 0%, #1B4B44 40%, #2F9A9A 100%); }
.group-hero-content{ position:relative; z-index:1; padding:40px 20px 60px; max-width:1180px; margin:0 auto; width:100%; }
.group-stats{ max-width:1180px; margin:-40px auto 0; padding:0 20px; position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.stat-card{ background:var(--white); border-radius:16px; padding:20px; text-align:center; box-shadow:0 4px 20px rgba(15,40,36,0.08); }
.stat-num{ font-size:32px; font-weight:800; color:var(--charcoal); line-height:1; }
.stat-label{ font-size:12px; font-weight:600; color:var(--charcoal-soft); margin-top:6px; text-transform:uppercase; letter-spacing:.06em; }
.group-vision{ max-width:1180px; margin:60px auto; padding:0 20px; display:flex; align-items:center; gap:40px; }
.vision-text{ flex:1; }
.vision-text h2{ font-size:28px; font-weight:700; margin-bottom:16px; color:var(--charcoal); }
.vision-text p{ font-size:15px; line-height:1.7; color:var(--charcoal-soft); }
.vision-icon{ width:120px; height:120px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--grey); border-radius:50%; }
.vision-icon svg{ width:60px; height:60px; color:var(--teal-deep); }
.group-section{ max-width:1180px; margin:60px auto; padding:0 20px; }
.group-section-header{ margin-bottom:30px; }
.group-section-header .page-title{ font-size:28px; }
.group-section-header .page-sub{ margin-top:8px; }
.companies-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.company-card{ border-radius:18px; padding:24px; background:var(--grey); display:flex; flex-direction:column; gap:10px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); cursor:pointer; }
.company-card:hover, .company-card:focus-visible{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(15,40,36,0.1); }
.company-icon{ width:44px; height:44px; border-radius:12px; background:var(--white); display:flex; align-items:center; justify-content:center; }
.company-icon svg{ width:22px; height:22px; }
.group-card .company-icon svg{ color:var(--amber-deep); }
.incubation-card .company-icon svg{ color:var(--teal-deep); }
.company-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:17px; }
.company-desc{ font-size:13px; color:var(--charcoal-soft); line-height:1.5; }
.company-tag{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-deep); margin-top:auto; }
.group-cta{ max-width:1180px; margin:80px auto; padding:40px 20px; text-align:center; background:var(--grey); border-radius:24px; }
.group-cta h2{ font-size:24px; margin-bottom:12px; }
.group-cta p{ font-size:14px; color:var(--charcoal-soft); margin-bottom:24px; }
.group-cta-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
@media (min-width:600px){ .group-stats{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:900px){
  .group-hero{ min-height:400px; }
  .group-hero-content{ padding:40px 44px 60px; }
  .group-stats{ padding:0 44px; margin-top:-40px; }
  .group-vision{ padding:0 44px; }
  .group-section{ padding:0 44px; }
  .group-cta{ margin:80px 44px; }
  .companies-grid{ grid-template-columns:repeat(3,1fr); gap:18px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.cta-row{ max-width:1180px; margin:28px auto 0; padding:0 20px; display:grid; grid-template-columns:1fr; gap:10px; }
.cta-pill{ padding:16px 22px; border-radius:16px; background:var(--grey); font-size:13.5px; font-weight:600; text-align:center; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.cta-pill:hover, .cta-pill.active-cta{ background:var(--teal-deep); color:#fff; transform:translateY(-2px); }
@media (min-width:900px){ .cta-row{ grid-template-columns:repeat(5,1fr); padding:0 44px; gap:14px; margin-top:36px; } }

.contact-grid{ max-width:1180px; margin:44px auto 90px; padding:0 20px; display:flex; flex-direction:column; gap:32px; }
.contact-info{ display:flex; flex-direction:column; gap:18px; }
.contact-info-row{ display:flex; align-items:flex-start; gap:14px; }
.contact-info-row .icon-badge{ width:42px; height:42px; border-radius:12px; background:var(--grey); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-row .icon-badge svg{ width:19px; height:19px; color:var(--teal-deep); }
.contact-info-row .label{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-soft); }
.contact-info-row .value{ font-size:14.5px; margin-top:3px; }
.map-placeholder{ border:1.5px dashed var(--line); border-radius:22px; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--charcoal-soft); font-size:13px; text-align:center; padding:20px; }
.map-placeholder svg{ width:30px; height:30px; opacity:.5; }
@media (min-width:900px){ .contact-grid{ flex-direction:row; padding:0 44px; gap:50px; } .contact-info{ flex:1 1 40%; } .contact-form-wrap{ flex:1 1 60%; } }

/* ============================================================
   DETAIL TEMPLATE (rich)
   ============================================================ */
.detail-hero{ padding:40px 20px 0; max-width:1180px; margin:0 auto; }
.detail-hero-visual{ border-radius:26px; height:180px; display:flex; align-items:center; justify-content:center; margin-top:22px; }
.detail-hero-visual svg{ width:60px; height:60px; color:#fff; opacity:.92; }
.detail-body{ max-width:820px; margin:0 auto; padding:30px 20px 90px; display:flex; flex-direction:column; gap:34px; }
.detail-block-title{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal-soft); margin-bottom:12px; }
.detail-overview{ font-size:16px; line-height:1.65; color:var(--charcoal); }
.fact-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.fact-item{ background:var(--grey); border-radius:16px; padding:16px 18px; }
.fact-item .fk{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--charcoal-soft); }
.fact-item .fv{ font-size:14.5px; margin-top:5px; line-height:1.5; }
.benefit-list{ display:flex; flex-direction:column; gap:10px; }
.benefit-item{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.5; }
.benefit-item svg{ width:16px; height:16px; color:var(--teal-deep); flex-shrink:0; margin-top:2px; }
.download-list{ display:flex; flex-direction:column; gap:8px; }
.download-item{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--grey); border-radius:12px; font-size:14px; font-weight:500; }
.download-item svg{ width:17px; height:17px; color:var(--charcoal-soft); flex-shrink:0; }
.video-placeholder{ aspect-ratio:16/9; border-radius:18px; background:linear-gradient(150deg,#1c1e1e,#2c2f2f); display:flex; align-items:center; justify-content:center; }
.video-placeholder svg{ width:44px; height:44px; color:#fff; opacity:.85; }
.detail-cta-row{ display:flex; flex-wrap:wrap; gap:10px; }
.detail-cta{ padding:14px 26px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.detail-cta.primary{ background:var(--charcoal); color:#fff; }
.detail-cta.secondary{ background:var(--grey); color:var(--charcoal); }
@media (min-width:900px){
  .detail-hero{ padding:56px 44px 0; }
  .detail-hero-visual{ height:260px; border-radius:32px; }
  .detail-body{ padding:44px 44px 110px; }
  .fact-grid{ grid-template-columns:repeat(2,1fr); }
}

/* Back link (used on non-landing screens with no rich hero) */
.simple-back{ max-width:1180px; margin:0 auto; padding:20px 20px 0; }
@media (min-width:900px){ .simple-back{ padding:26px 44px 0; } }
.back-link{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-deep); padding:8px 16px; border-radius:999px; border:1px solid var(--teal); display:inline-flex; align-items:center; gap:6px; transition:background .3s var(--ease), color .3s var(--ease); text-decoration:none; }
.back-link svg{ width:14px; height:14px; }
.back-link:hover{ background:var(--teal-deep); color:#fff; }

/* ============================================================
   LABORATORY PAGE
   ============================================================ */
.lab-process{ max-width:1180px; margin:40px auto; padding:0 20px; }
.process-header{ text-align:center; margin-bottom:30px; }
.process-header h2{ font-family:'Sora', sans-serif; font-size:28px; font-weight:700; margin-bottom:8px; }
.process-header p{ font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-deep); }
.process-steps{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.process-step{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px; background:var(--grey); border-radius:14px; min-width:90px; transition:all .3s var(--ease); cursor:pointer; }
.process-step:hover{ background:var(--white); box-shadow:0 8px 24px rgba(15,40,36,0.08); transform:translateY(-2px); }
.step-icon{ width:44px; height:44px; border-radius:12px; background:var(--white); display:flex; align-items:center; justify-content:center; }
.step-icon svg{ width:22px; height:22px; color:var(--teal-deep); }
.step-name{ font-size:11px; font-weight:600; text-align:center; color:var(--charcoal); }
.lab-categories{ max-width:1180px; margin:60px auto; padding:0 20px; }
.lab-category{ margin-bottom:40px; }
.category-title{ font-family:'Sora', sans-serif; font-size:22px; font-weight:700; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--grey); }
.equipment-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.equipment-card{ background:var(--white); border:1px solid var(--grey-2); border-radius:16px; overflow:hidden; transition:all .3s var(--ease); cursor:pointer; }
.equipment-card:hover{ border-color:transparent; box-shadow:0 12px 32px rgba(15,40,36,0.08); transform:translateY(-2px); }
.equip-image{ height:140px; overflow:hidden; }
.equip-image img{ width:100%; height:100%; object-fit:cover; }
.equip-icon{ height:140px; display:flex; align-items:center; justify-content:center; background:var(--grey); }
.equip-icon svg{ width:48px; height:48px; color:var(--teal-deep); }
.equip-info{ padding:16px; }
.equip-info h3{ font-size:14px; font-weight:700; margin-bottom:6px; }
.equip-info p{ font-size:12.5px; color:var(--charcoal-soft); line-height:1.5; }
.lab-cta{ max-width:1180px; margin:60px auto; padding:40px 20px; text-align:center; background:var(--grey); border-radius:24px; }
.lab-cta h2{ font-family:'Sora', sans-serif; font-size:24px; font-weight:700; margin-bottom:20px; }
.btn-primary{ display:inline-block; padding:14px 32px; background:var(--charcoal); color:#fff; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition:all .3s var(--ease); }
.btn-primary:hover{ background:#000; transform:translateY(-2px); }
.btn-secondary{ display:inline-block; padding:14px 32px; background:var(--white); color:var(--charcoal); border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; border:1px solid var(--grey-2); transition:all .3s var(--ease); }
.btn-secondary:hover{ border-color:var(--charcoal); }
@media (min-width:900px){ .process-steps{ flex-wrap:nowrap; } .equipment-grid{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   RESEARCH PAGE
   ============================================================ */
.research-timeline{ max-width:900px; margin:40px auto; padding:0 20px; }
.timeline-section{ margin-bottom:40px; }
.timeline-header{ display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.timeline-badge{ padding:8px 20px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.timeline-badge.commercial{ background:#dcfce7; color:#166534; }
.timeline-badge.pilot{ background:#fef3c7; color:#92400e; }
.timeline-badge.research{ background:#dbeafe; color:#1e40af; }
.timeline-badge.concept{ background:#f3e8ff; color:#6b21a8; }
.timeline-line{ flex:1; height:2px; background:var(--grey); }
.timeline-projects{ display:flex; flex-direction:column; gap:12px; }
.project-card{ display:flex; align-items:center; justify-content:space-between; padding:20px; background:var(--white); border:1px solid var(--grey-2); border-radius:14px; text-decoration:none; transition:all .3s var(--ease); }
.project-card:hover{ border-color:transparent; box-shadow:0 8px 24px rgba(15,40,36,0.08); transform:translateY(-2px); }
.project-info h3{ font-size:15px; font-weight:700; color:var(--charcoal); margin-bottom:4px; }
.project-info p{ font-size:13px; color:var(--charcoal-soft); }
.project-meta{ display:flex; align-items:center; gap:12px; }
.partners{ font-size:11px; color:var(--charcoal-soft); max-width:150px; text-align:right; }
.project-meta svg{ width:16px; height:16px; color:var(--charcoal-soft); }

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.product-hero{ position:relative; height:260px; overflow:hidden; margin-bottom:40px; }
.product-hero.no-image{ background:linear-gradient(135deg, #FCEEDD 0%, var(--amber) 100%); }
.product-hero-image{ position:absolute; inset:0; }
.product-hero-image img{ width:100%; height:100%; object-fit:cover; }
.product-hero-content{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:40px 20px; background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); }
.product-hero.no-image .product-hero-content{ background:linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%); }
.product-hero-content .page-eyebrow{ color:rgba(255,255,255,0.8); }
.product-hero-content .page-title{ color:#fff; font-size:clamp(28px, 5vw, 42px); }
.product-content{ max-width:800px; margin:0 auto; padding:0 20px; }
.product-section{ margin-bottom:32px; }
.product-section h2{ font-family:'Sora', sans-serif; font-size:18px; font-weight:700; margin-bottom:12px; color:var(--charcoal); }
.product-section p{ font-size:15px; line-height:1.7; color:var(--charcoal-soft); }
.benefits-list{ list-style:none; padding:0; margin:0; }
.benefits-list li{ padding:10px 0; border-bottom:1px solid var(--grey); font-size:14px; display:flex; align-items:center; gap:10px; }
.benefits-list li::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--teal-deep); flex-shrink:0; }
.product-cta{ display:flex; gap:12px; margin:40px 0; }
.related-products{ max-width:1180px; margin:60px auto; padding:0 20px; }
.related-products h2{ font-family:'Sora', sans-serif; font-size:22px; font-weight:700; margin-bottom:20px; }
.related-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.related-card{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px; background:var(--grey); border-radius:14px; text-decoration:none; transition:all .3s var(--ease); }
.related-card:hover{ background:var(--white); box-shadow:0 8px 24px rgba(15,40,36,0.08); }
.related-icon{ width:48px; height:48px; border-radius:12px; background:var(--white); display:flex; align-items:center; justify-content:center; }
.related-icon svg{ width:24px; height:24px; color:var(--amber-deep); }
.related-card span{ font-size:13px; font-weight:600; text-align:center; color:var(--charcoal); }
@media (min-width:900px){ .product-hero{ height:360px; } .product-content{ padding:0 44px; } .related-grid{ grid-template-columns:repeat(4,1fr); } }

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001s !important; transition-duration:.001s !important; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--charcoal); color:#fff; padding:60px 20px 30px; margin-top:80px; }
.footer-top{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:40px; }
.footer-brand{ max-width:320px; }
.footer-logo{ display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
.footer-logo img{ height:40px; width:auto; max-width:180px; object-fit:contain; border-radius:4px; }
.footer-logo .logo-text{ font-family:'Sora', sans-serif; font-size:28px; font-weight:800; letter-spacing:-.02em; }
.footer-logo .logo-tagline{ font-size:13px; color:rgba(255,255,255,0.6); }
.footer-desc{ font-size:14px; line-height:1.6; color:rgba(255,255,255,0.7); }
.footer-links{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col h4{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,0.5); margin-bottom:4px; }
.footer-col a{ font-size:14px; color:rgba(255,255,255,0.8); text-decoration:none; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-address{ font-size:14px; color:rgba(255,255,255,0.6); margin:0; }
.footer-presence{ max-width:1180px; margin:40px auto 0; padding-top:30px; border-top:1px solid rgba(255,255,255,0.1); }
.footer-presence h4{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,0.5); margin-bottom:16px; }
.presence-locations{ display:flex; flex-wrap:wrap; gap:16px; }
.location{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:rgba(255,255,255,0.8); }
.location svg{ width:16px; height:16px; color:var(--teal); }
.footer-licenses{ max-width:1180px; margin:30px auto 0; }
.license-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.license-badge{ padding:8px 16px; border:1px solid rgba(255,255,255,0.2); border-radius:8px; font-size:12px; font-weight:600; color:rgba(255,255,255,0.7); }
.footer-bottom{ max-width:1180px; margin:40px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,0.1); display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
.footer-bottom p{ font-size:13px; color:rgba(255,255,255,0.5); margin:0; }
.footer-social{ display:flex; gap:16px; }
.footer-social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; transition:background .2s; }
.footer-social a:hover{ background:rgba(255,255,255,0.2); }
.footer-social svg{ width:18px; height:18px; color:#fff; }

/* ============================================================
   DETAIL CONTENT (Research, etc.)
   ============================================================ */
.detail-content{ max-width:800px; margin:0 auto; padding:0 20px; }
.detail-section{ margin-bottom:32px; }
.detail-section h2{ font-family:'Sora', sans-serif; font-size:18px; font-weight:700; margin-bottom:12px; color:var(--charcoal); }
.detail-section p{ font-size:15px; line-height:1.7; color:var(--charcoal-soft); }
.project-timeline{ font-size:14px; color:var(--charcoal-soft); line-height:1.7; padding:16px; background:var(--grey); border-radius:12px; }
.download-list{ display:flex; flex-direction:column; gap:12px; }
.download-item{ display:flex; align-items:center; gap:12px; padding:14px; background:var(--grey); border-radius:12px; transition:all .2s var(--ease); }
.download-item:hover{ background:var(--white); box-shadow:0 4px 12px rgba(15,40,36,0.06); }
.download-item svg{ width:20px; height:20px; color:var(--teal-deep); flex-shrink:0; }
.download-item span{ font-size:14px; font-weight:500; }

body.landing-page .site-footer{ display:none; }

/* Force-hide the SPA detail screen on all standalone pages */
#screen-detail{ display:none !important; }
@media (min-width:900px){
  .site-footer{ padding:80px 44px 40px; }
  .footer-top{ grid-template-columns:1fr 2fr; gap:60px; }
  .footer-links{ grid-template-columns:repeat(4,1fr); }
  .footer-bottom{ flex-direction:row; justify-content:space-between; }
}

/* ============================================================
   CIRCULAR ECONOMY PAGE
   ============================================================ */
.ce-hero{ max-width:1180px; margin:0 auto; padding:60px 20px 0; text-align:center; }
.ce-hero .page-title{ font-size:clamp(28px, 4vw, 44px); max-width:820px; margin:16px auto 0; }
.ce-hero .page-sub{ margin-top:16px; }
.ce-stats{ display:flex; flex-direction:column; gap:6px; margin-top:18px; }
.ce-stats .ce-stat{ font-size:15px; color:var(--charcoal-soft); line-height:1.5; }
.ce-stats .ce-stat::before{ content:'— '; color:var(--teal); font-weight:700; }
@media (min-width:900px){ .ce-stats{ flex-direction:row; gap:24px; flex-wrap:wrap; justify-content:center; } }
.ce-metals{ max-width:1180px; margin:60px auto 0; padding:0 20px; }
.ce-metals-header{ margin-bottom:24px; }
.ce-metals-header h2{ font-size:clamp(26px, 3.5vw, 40px); margin-top:12px; }
.metal-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:1px; background:var(--grey-2); border:1px solid var(--grey-2); border-radius:16px; overflow:hidden; }
.metal-tile{ position:relative; aspect-ratio:1/1.15; background:var(--white); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; transition:background .4s var(--ease); cursor:pointer; }
.metal-tile .metal-sym{ font-family:'Sora', sans-serif; font-size:48px; font-weight:600; color:var(--teal-deep); opacity:.2; transition:color .4s, opacity .4s; position:absolute; top:20px; left:20px; }
.metal-tile .metal-name{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal-soft); transition:color .3s; }
.metal-tile .metal-list{ font-size:12.5px; color:var(--charcoal-soft); line-height:1.5; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s var(--ease), opacity .3s; margin-top:0; }
.metal-tile:hover{ background:var(--teal-deep); }
.metal-tile:hover .metal-sym{ color:rgba(255,255,255,.15); opacity:1; }
.metal-tile:hover .metal-name{ color:#fff; }
.metal-tile:hover .metal-list{ max-height:120px; opacity:1; color:rgba(255,255,255,.85); margin-top:8px; }
.ce-materials{ max-width:1180px; margin:80px auto 0; padding:0 20px; }
.ce-materials-header{ margin-bottom:24px; }
.ce-materials-header h2{ font-size:clamp(26px, 3.5vw, 40px); margin-top:12px; }
.ce-materials-header p{ font-size:14px; color:var(--charcoal-soft); margin-top:8px; }
.tile-grid-wrap{ position:relative; }
.ce-materials .tile-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; border:none; background:none; border-radius:0; overflow:visible; }
.ce-materials .tile{ background:var(--white); padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease); aspect-ratio:1/1; border-radius:18px; border:1px solid var(--grey); gap:10px; }
.ce-materials .tile:hover{ background:var(--white); transform:translateY(-3px); box-shadow:0 12px 28px rgba(15,40,36,0.10); }
.tile .tile-icon{ width:42px; height:42px; border-radius:12px; background:var(--white); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.06); color:var(--teal-deep); }
.tile .tile-icon svg{ width:20px; height:20px; }
.tile .tile-name{ font-size:12.5px; font-weight:600; text-align:center; padding:0 6px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tile .tile-tag{ font-size:11px; color:var(--charcoal-soft); }
.tile-preview{ display:none; }
.tile-preview.show{ display:block; position:absolute; z-index:40; right:-340px; top:0; width:320px; background:var(--white); border:1px solid var(--grey-2); border-radius:12px; box-shadow:0 20px 50px rgba(15,40,36,0.12); padding:24px; }
.tp-title{ font-size:16px; font-weight:700; margin-bottom:8px; }
.tp-desc{ font-size:13px; color:var(--charcoal-soft); line-height:1.6; margin-bottom:12px; }
.tp-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tp-chip{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--teal-tint, #e4f4f2); color:var(--teal-deep); padding:4px 10px; border-radius:20px; }
.tp-details{ display:flex; flex-direction:column; gap:8px; }
.tp-detail{ display:flex; flex-direction:column; gap:2px; }
.tp-detail-label{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-soft); }
.tp-detail-value{ font-size:13px; color:var(--charcoal); }
.ce-proposal{ background:var(--grey); border-top:1px solid var(--grey-2); border-bottom:1px solid var(--grey-2); margin-top:80px; }
.ce-proposal-inner{ max-width:920px; margin:0 auto; padding:80px 20px; }
.ce-proposal-header{ margin-bottom:40px; }
.ce-proposal-header h2{ font-size:clamp(26px, 3.5vw, 40px); margin-top:12px; }
.ce-proposal-header p{ font-size:14px; color:var(--charcoal-soft); margin-top:8px; }
.form-panel{ background:var(--white); border:1px solid var(--grey-2); padding:40px; border-radius:12px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-grid .full{ grid-column:1/-1; }
.field label{ display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal-soft); margin-bottom:6px; }
.field input, .field select, .field textarea{ width:100%; border:1px solid var(--grey-2); background:var(--white); padding:12px 14px; font-family:'Inter', sans-serif; font-size:14px; color:var(--charcoal); border-radius:8px; transition:border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--teal-deep); outline:none; }
.ce-cta{ max-width:1180px; margin:80px auto; padding:0 20px; }
.ce-cta-inner{ background:var(--charcoal); color:#fff; border-radius:16px; padding:60px; display:flex; justify-content:space-between; align-items:center; gap:40px; }
.ce-cta-inner h3{ font-size:clamp(22px, 3vw, 30px); }
.ce-cta-inner p{ color:rgba(255,255,255,.6); margin-top:8px; font-size:14px; }
@media (max-width:1100px){ .tile-preview.show{ display:none; } }
@media (max-width:900px){
  .metal-grid{ grid-template-columns:repeat(3, 1fr); }
  .tile-grid{ grid-template-columns:repeat(2, 1fr); }
  .app-grid{ grid-template-columns:repeat(2, 1fr); padding:0 20px; }
  .form-grid{ grid-template-columns:1fr; }
  .form-panel{ padding:24px; }
  .ce-cta-inner{ flex-direction:column; align-items:flex-start; padding:40px 24px; }
}
@media (max-width:560px){ .metal-grid{ grid-template-columns:repeat(2, 1fr); } }

/* Floating WhatsApp & Call Buttons */
.floating-btns{ position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:12px; z-index:9999; }
.floating-btn{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(0,0,0,0.25); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.floating-btn:hover{ transform:scale(1.1); box-shadow:0 6px 28px rgba(0,0,0,0.35); }
.floating-btn svg{ width:26px; height:26px; color:#fff; }
.whatsapp-btn{ background:#25D366; }
.call-btn{ background:#1a1a1a; }
body.landing-page .floating-btns{ display:none; }
@media (min-width:900px){
  .floating-btns{ bottom:32px; right:32px; }
  .floating-btn{ width:60px; height:60px; }
  .floating-btn svg{ width:28px; height:28px; }
}

/* ============================================================
   ISPAT VIDYAPEETH
   ============================================================ */
.iv-content{ max-width:900px; margin:0 auto; padding:0 20px; }
.iv-section{ margin-bottom:40px; }
.iv-section h2{ font-family:'Sora', sans-serif; font-size:22px; font-weight:700; margin-bottom:16px; color:var(--charcoal); }
.iv-section p{ font-size:15px; line-height:1.7; color:var(--charcoal-soft); }
.iv-programs{ display:grid; grid-template-columns:1fr; gap:16px; }
.iv-program-card{ padding:24px; background:var(--grey); border-radius:16px; transition:all .3s var(--ease); }
.iv-program-card:hover{ background:var(--white); box-shadow:0 8px 24px rgba(15,40,36,0.08); }
.iv-icon{ width:48px; height:48px; border-radius:12px; background:var(--white); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.iv-icon svg{ width:24px; height:24px; color:var(--teal-deep); }
.iv-program-card h3{ font-size:16px; font-weight:700; margin-bottom:8px; color:var(--charcoal); }
.iv-program-card p{ font-size:14px; color:var(--charcoal-soft); line-height:1.6; }
.iv-benefits{ list-style:none; padding:0; margin:0; }
.iv-benefits li{ padding:12px 0; border-bottom:1px solid var(--grey); font-size:14px; display:flex; align-items:center; gap:12px; color:var(--charcoal-soft); }
.iv-benefits li::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--teal-deep); flex-shrink:0; }
@media (min-width:900px){ .iv-programs{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   RESEARCH DETAIL PAGE
   ============================================================ */
.rd-hero{ position:relative; min-height:340px; overflow:hidden; display:flex; align-items:flex-end; }
.rd-hero-bg{ position:absolute; inset:0; }
.rd-bg-commercial{ background:linear-gradient(135deg,#0E2C28 0%,#1B4B44 40%,#2FA79A 100%); }
.rd-bg-pilot{ background:linear-gradient(135deg,#1a1a2e 0%,#16213e 40%,#0f3460 100%); }
.rd-bg-research{ background:linear-gradient(135deg,#1e3a5f 0%,#2563eb 60%,#60a5fa 100%); }
.rd-bg-concept{ background:linear-gradient(135deg,#2d1b69 0%,#6b21a8 60%,#a78bfa 100%); }
.rd-hero-content{ position:relative; z-index:1; padding:40px 20px 50px; max-width:1180px; margin:0 auto; width:100%; }
.rd-status-badge{ display:inline-block; padding:6px 16px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
.rd-status-badge.commercial{ background:rgba(34,197,94,.2); color:#4ade80; }
.rd-status-badge.pilot{ background:rgba(251,191,36,.2); color:#fbbf24; }
.rd-status-badge.research{ background:rgba(96,165,250,.2); color:#93c5fd; }
.rd-status-badge.concept{ background:rgba(167,139,250,.2); color:#c4b5fd; }
.rd-section{ padding:40px 20px; }
.rd-section-inner{ max-width:1180px; margin:0 auto; display:flex; gap:24px; align-items:flex-start; }
.rd-section h2{ font-size:22px; font-weight:800; margin-bottom:16px; color:var(--charcoal); }
.rd-section p{ font-size:15px; color:var(--charcoal-soft); line-height:1.7; }
.rd-section-icon{ width:48px; height:48px; border-radius:14px; background:var(--teal-tint,#e4f4f2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rd-section-icon svg{ width:22px; height:22px; color:var(--teal-deep); }
.rd-partners{ background:var(--grey); border-radius:0; }
.rd-partner-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.rd-partner-tag{ padding:8px 18px; border-radius:999px; background:var(--white); border:1px solid var(--grey-2); font-size:13px; font-weight:600; color:var(--charcoal); }
.rd-overview{ background:var(--white); }
.rd-overview .rd-section-inner{ flex-direction:column; gap:0; }
.rd-timeline{ background:var(--grey); }
.rd-timeline-bar{ display:flex; flex-direction:column; gap:0; margin-top:4px; }
.rd-milestone{ display:flex; align-items:flex-start; gap:16px; position:relative; padding-bottom:24px; }
.rd-milestone:last-child{ padding-bottom:0; }
.rd-milestone::before{ content:''; position:absolute; left:7px; top:16px; bottom:0; width:2px; background:var(--grey-2); }
.rd-milestone:last-child::before{ display:none; }
.rd-milestone-dot{ width:16px; height:16px; border-radius:50%; background:var(--teal-deep); border:3px solid var(--white); flex-shrink:0; margin-top:2px; z-index:1; }
.rd-milestone-text{ font-size:14px; color:var(--charcoal-soft); line-height:1.5; padding-top:1px; }
.rd-gallery{ background:var(--white); }
.rd-gallery .rd-section-inner{ flex-direction:column; gap:0; }
.rd-gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.rd-gallery-card{ border-radius:14px; overflow:hidden; border:1px solid var(--grey-2); }
.rd-gallery-placeholder{ aspect-ratio:16/10; background:linear-gradient(135deg,#f0f0f0,#e8e8e8); display:flex; align-items:center; justify-content:center; }
.rd-gallery-placeholder svg{ width:32px; height:32px; color:var(--charcoal-soft); opacity:.4; }
.rd-gallery-label{ padding:10px 14px; font-size:13px; font-weight:600; color:var(--charcoal); background:var(--white); }
.rd-downloads{ background:var(--grey); }
.rd-download-list{ display:flex; flex-direction:column; gap:0; }
.rd-download-item{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--grey-2); cursor:pointer; transition:color .2s; }
.rd-download-item:last-child{ border-bottom:none; }
.rd-download-item:hover{ color:var(--teal-deep); }
.rd-download-item svg{ width:20px; height:20px; color:var(--teal-deep); flex-shrink:0; }
.rd-download-item span{ font-size:14px; font-weight:500; }
@media (min-width:900px){
  .rd-hero-content{ padding:40px 44px 60px; }
  .rd-section{ padding:60px 44px; }
  .rd-gallery-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:600px){ .rd-gallery-grid{ grid-template-columns:1fr; } }