/* ================================================================
   CMDesign·Met — Civil Engineering / Steel Structures
   Palette: Construction Orange · Black · Safety Green · White
   Fonts: Saira Condensed (display) · Saira (body) · Saira Semi Condensed
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500;600;700;800;900&family=Saira:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Saira+Semi+Condensed:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---- TOKENS ---- */
:root {
  /* Construction palette */
  --orange:       #F39200;
  --orange-bright:#FFA51F;
  --orange-deep:  #D97E00;
  --orange-pale:  #FFF1DD;
  --orange-glow:  rgba(243,146,0,0.14);

  --green:        #2E8B40;
  --green-bright: #38A14C;
  --green-deep:   #1F6E2F;
  --green-pale:   #E7F4E9;
  --green-glow:   rgba(46,139,64,0.14);

  --black:        #14161A;
  --black-2:      #1C1F24;
  --black-3:      #262A31;
  --ink:          #14161A;

  --white:        #FFFFFF;
  --cream:        #FAFAF7;
  --gray-100:     #F2F3F1;
  --gray-200:     #E4E6E2;
  --gray-300:     #CDD0CB;
  --gray-400:     #9DA29B;
  --gray-500:     #6B7069;
  --gray-600:     #474B45;

  /* Fonts */
  --font-display: 'Saira Condensed', sans-serif;
  --font-head:    'Saira Semi Condensed', sans-serif;
  --font-body:    'Saira', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --nav-h: 72px;

  --border:        1px solid rgba(20,22,26,0.10);
  --border-orange: 1px solid rgba(243,146,0,0.40);
  --border-green:  1px solid rgba(46,139,64,0.35);
  --border-dark:   1px solid rgba(255,255,255,0.10);

  --r-xs: 2px;
  --r-sm: 5px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 26px;

  --t:      0.25s cubic-bezier(0.4,0,0.2,1);
  --t-slow: 0.55s cubic-bezier(0.4,0,0.2,1);

  --shadow-sm:     0 1px 8px rgba(20,22,26,0.08);
  --shadow-md:     0 6px 28px rgba(20,22,26,0.12);
  --shadow-lg:     0 16px 48px rgba(20,22,26,0.18);
  --shadow-orange: 0 8px 30px rgba(243,146,0,0.30);

  /* Hazard stripe (signature) */
  --hazard: repeating-linear-gradient(45deg, var(--orange) 0 14px, var(--black) 14px 28px);
}

/* ---- RESET ---- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--font-body); cursor:pointer; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--gray-100); }
::-webkit-scrollbar-thumb { background:var(--orange); border-radius:3px; }
::selection { background:var(--orange); color:var(--white); }

/* ---- HAZARD STRIPE STRIP ---- */
.hazard-strip { height:8px; background:var(--hazard); }

/* ---- NAVBAR ---- */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 56px;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(16px);
  border-bottom:3px solid var(--black);
  transition:box-shadow var(--t);
}
nav.scrolled { box-shadow:var(--shadow-md); }

.nav-brand { display:flex; align-items:center; gap:14px; }
.nav-logo-mark {
  width:56px; height:56px;
  background:var(--white);
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  border:2px solid var(--orange);
}
.nav-logo-mark img { width:100%; height:100%; object-fit:contain; padding:3px; }
.nav-logo-mark-fallback { font-family:var(--font-display); font-size:1.2rem; font-weight:800; color:var(--orange); letter-spacing:0.5px; }
.nav-brand-text { line-height:1; }
.nav-brand-name {
  font-family:var(--font-display);
  font-size:1.35rem; font-weight:800;
  color:var(--black); letter-spacing:0.5px; text-transform:uppercase;
}
.nav-brand-name span { color:var(--orange); }
.nav-brand-sub {
  font-family:var(--font-mono);
  font-size:0.56rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--gray-500); margin-top:2px;
}
.nav-links { display:flex; align-items:center; gap:0; list-style:none; }
.nav-links a {
  padding:8px 15px; border-radius:var(--r-sm);
  font-family:var(--font-head);
  font-size:0.92rem; font-weight:600; color:var(--gray-600);
  letter-spacing:0.5px; text-transform:uppercase;
  transition:all var(--t);
}
.nav-links a:hover { color:var(--black); background:var(--gray-100); }
.nav-links a.active { color:var(--orange); }
.nav-lang {
  display:flex; align-items:center; gap:4px;
  margin-left:16px; padding:6px 11px;
  border:2px solid var(--black); border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:1px; font-weight:700;
  color:var(--black); transition:all var(--t); cursor:pointer;
}
.nav-lang:hover { background:var(--black); color:var(--white); }
.nav-cta {
  margin-left:12px; padding:11px 24px;
  background:var(--orange); color:var(--white);
  border:none; border-radius:var(--r-sm);
  font-family:var(--font-head);
  font-size:0.92rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  box-shadow:var(--shadow-orange);
  transition:all var(--t); cursor:pointer;
}
.nav-cta:hover { background:var(--orange-deep); transform:translateY(-1px); box-shadow:0 10px 34px rgba(243,146,0,0.40); }

/* ---- PAGE HERO ---- */
.page-hero {
  padding:calc(var(--nav-h) + 72px) 56px 76px;
  background:var(--black);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0; opacity:0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:48px 48px;
}
.page-hero::after {
  content:''; position:absolute; top:0; right:0; width:40%; height:100%;
  background:radial-gradient(ellipse at 100% 50%, var(--orange-glow) 0%, transparent 70%);
}
.page-hero-inner { max-width:1280px; margin:0 auto; position:relative; z-index:1; }
.page-hero h1 {
  font-family:var(--font-display);
  font-size:5rem; font-weight:800; line-height:0.95;
  color:var(--white); letter-spacing:0.5px; text-transform:uppercase; margin-bottom:16px;
}
.page-hero h1 em { font-style:normal; color:var(--orange); }
.page-hero p { font-size:1.05rem; color:rgba(255,255,255,0.65); max-width:580px; line-height:1.8; }
.page-hero-line { position:absolute; bottom:0; left:0; right:0; height:6px; background:var(--hazard); }
.page-label {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:0.65rem; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--orange); margin-bottom:18px; padding:6px 13px;
  border:var(--border-orange); border-radius:var(--r-xs); background:rgba(243,146,0,0.10);
}

/* ---- SECTIONS ---- */
.section { padding:92px 56px; }
.section-white { background:var(--white); }
.section-cream { background:var(--cream); }
.section-gray  { background:var(--gray-100); }
.section-dark  { background:var(--black); color:var(--white); }
.section-inner { max-width:1280px; margin:0 auto; }

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:0.64rem; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--orange); margin-bottom:12px; font-weight:500;
}
.eyebrow::before { content:''; width:24px; height:3px; background:var(--orange); }
.section-title {
  font-family:var(--font-display);
  font-size:3.4rem; font-weight:800; line-height:1.0;
  color:var(--black); letter-spacing:0.5px; text-transform:uppercase; margin-bottom:14px;
}
.section-title em { font-style:normal; color:var(--orange); }
.section-title .green { color:var(--green); }
.section-dark .section-title { color:var(--white); }
.section-dark .eyebrow { color:var(--orange-bright); }
.section-dark .eyebrow::before { background:var(--orange-bright); }
.section-lead { font-size:1rem; color:var(--gray-600); max-width:560px; line-height:1.85; }
.section-dark .section-lead { color:rgba(255,255,255,0.6); }

/* ---- DIVIDERS ---- */
.divider { height:1px; background:var(--border); }
.divider-hazard { height:6px; background:var(--hazard); }

/* ---- BUTTONS ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:0.92rem;
  letter-spacing:0.5px; text-transform:uppercase;
  padding:13px 28px; border-radius:var(--r-sm);
  transition:all var(--t); border:none; cursor:pointer;
}
.btn-orange { background:var(--orange); color:var(--white); box-shadow:var(--shadow-orange); }
.btn-orange:hover { background:var(--orange-deep); transform:translateY(-2px); box-shadow:0 12px 38px rgba(243,146,0,0.40); }
.btn-green { background:var(--green); color:var(--white); box-shadow:0 8px 30px rgba(46,139,64,0.28); }
.btn-green:hover { background:var(--green-deep); transform:translateY(-2px); }
.btn-black { background:var(--black); color:var(--white); }
.btn-black:hover { background:var(--black-3); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--black); border:2px solid var(--black); }
.btn-outline:hover { background:var(--black); color:var(--white); }
.btn-outline-orange { background:transparent; color:var(--orange); border:2px solid var(--orange); }
.btn-outline-orange:hover { background:var(--orange); color:var(--white); }
.btn-outline-white { background:transparent; color:var(--white); border:2px solid rgba(255,255,255,0.4); }
.btn-outline-white:hover { background:var(--white); color:var(--black); border-color:var(--white); }

/* ---- TAGS ---- */
.tag {
  display:inline-block; font-family:var(--font-mono);
  font-size:0.6rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:500;
  padding:4px 10px; border-radius:var(--r-xs);
}
.tag-orange { background:var(--orange-pale); color:var(--orange-deep); border:var(--border-orange); }
.tag-green  { background:var(--green-pale); color:var(--green-deep); border:var(--border-green); }
.tag-black  { background:var(--gray-100); color:var(--gray-600); border:var(--border); }
.tag-white  { background:rgba(255,255,255,0.10); color:rgba(255,255,255,0.85); border:1px solid rgba(255,255,255,0.18); }

/* ---- FORM ---- */
.form-group { margin-bottom:20px; }
.form-label {
  display:block; font-family:var(--font-mono); font-size:0.62rem;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--gray-500);
  margin-bottom:8px; font-weight:500;
}
.form-control {
  width:100%; padding:12px 16px;
  background:var(--cream); border:2px solid var(--gray-200);
  border-radius:var(--r-sm); color:var(--ink);
  font-family:var(--font-body); font-size:0.93rem;
  transition:all var(--t); outline:none; resize:vertical;
}
.form-control:focus { border-color:var(--orange); background:var(--white); }
.form-control::placeholder { color:var(--gray-400); }
.form-control option { background:var(--white); }

/* ---- FOOTER ---- */
footer { background:var(--black); color:var(--white); padding:68px 56px 32px; }
.footer-inner { max-width:1280px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:2.2fr 1fr 1fr 1.2fr; gap:52px; padding-bottom:48px; border-bottom:var(--border-dark); }
.f-brand { margin-bottom:20px; display:flex; align-items:center; gap:14px; }
.f-logo-mark { width:60px; height:60px; background:var(--white); border-radius:var(--r-sm); border:2px solid var(--orange); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.f-logo-mark img { width:100%; height:100%; object-fit:contain; padding:3px; }
.f-logo-mark-txt { font-family:var(--font-display); font-size:1.2rem; font-weight:800; color:var(--orange); }
.f-brand-name { font-family:var(--font-display); font-size:1.35rem; font-weight:800; color:var(--white); text-transform:uppercase; letter-spacing:0.5px; }
.f-brand-name span { color:var(--orange); }
.f-brand-sub { font-family:var(--font-mono); font-size:0.55rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.35); }
footer p { font-size:0.88rem; color:rgba(255,255,255,0.5); line-height:1.85; max-width:320px; }
.f-col h4 { font-family:var(--font-head); font-size:0.78rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid rgba(243,146,0,0.25); }
.f-col ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.f-col a { font-size:0.86rem; color:rgba(255,255,255,0.5); transition:color var(--t); }
.f-col a:hover { color:var(--orange-bright); }
.f-socials { display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; }
.f-social { padding:7px 13px; border-radius:var(--r-sm); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); font-size:0.78rem; color:rgba(255,255,255,0.55); transition:all var(--t); }
.f-social:hover { background:var(--orange); border-color:var(--orange); color:var(--white); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:28px; }
.footer-bottom p { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:1.5px; color:rgba(255,255,255,0.25); text-transform:uppercase; max-width:none; }

/* ---- REVEAL ---- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-l { opacity:0; transform:translateX(-20px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal-l.visible { opacity:1; transform:translateX(0); }
.reveal-r { opacity:0; transform:translateX(20px); transition:opacity 0.65s ease, transform 0.65s ease; }
.reveal-r.visible { opacity:1; transform:translateX(0); }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:0.25} }

/* ---- ENGINEERING CARTOUCHE ---- */
.cartouche { border:2px solid var(--black); border-radius:var(--r-xs); overflow:hidden; font-family:var(--font-mono); background:var(--white); }
.cartouche-row { display:flex; border-bottom:1px solid rgba(20,22,26,0.12); }
.cartouche-row:last-child { border-bottom:none; }
.cartouche-cell { padding:8px 12px; flex:1; border-right:1px solid rgba(20,22,26,0.12); }
.cartouche-cell:last-child { border-right:none; }
.cartouche-label { font-size:0.52rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray-500); margin-bottom:2px; }
.cartouche-val { font-size:0.78rem; font-weight:500; color:var(--black); }
.cartouche-val.orange { color:var(--orange-deep); }

/* ---- RESPONSIVE ---- */
@media(max-width:1100px){
  nav { padding:0 28px; }
  .section { padding:68px 28px; }
  .page-hero { padding:calc(var(--nav-h)+52px) 28px 60px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:36px; }
  footer { padding:52px 28px 26px; }
}
@media(max-width:768px){
  .nav-links { display:none; }
  .section { padding:52px 20px; }
  .page-hero { padding:calc(var(--nav-h)+36px) 20px 48px; }
  .page-hero h1 { font-size:3rem; }
  .section-title { font-size:2.3rem; }
  footer { padding:44px 20px 24px; }
  .footer-grid { grid-template-columns:1fr; gap:26px; }
  .footer-bottom { flex-direction:column; gap:8px; text-align:center; }
}