/* ============================================================
   MY RACK SOLUTION — Design tokens (v2: clean corporate)
   Palette: navy + steel blue on white/light grey, warm orange CTA
   Type: Oswald (display/condensed industrial), Inter (body),
         JetBrains Mono (specs / capacity figures)
   Signature element: the "rating plate" — a bordered spec card
   referencing the load-capacity plates bolted onto racking
   uprights, reused for stats and product specs.
   ============================================================ */

:root{
  --navy: #14304d;
  --navy-2: #1d3f63;
  --blue: #0b6fb8;
  --steel: #5b6b7c;
  --steel-light: #8b98a6;
  --line: #e2e5ea;
  --bg: #ffffff;
  --bg-alt: #f4f6f8;
  --orange: #e8622c;
  --orange-dim: #c94f1f;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 3px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--navy);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.wrap{max-width: 1180px; margin: 0 auto; padding: 0 32px;}

/* ---------- Header ---------- */
.site-header{
  background: var(--bg);
  color: var(--navy);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
}
.logo-row{ padding: 18px 0 14px; }
.logo-row .wrap{ display:flex; align-items:center; }
.nav-row{ border-top: 1px solid var(--line); }
.nav-row .wrap{
  display:flex; align-items:center; justify-content:space-between; height: 56px;
}
.logo{
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  letter-spacing: 0.01em; text-transform: uppercase;
  display:flex; align-items:center; gap:12px; color: var(--navy);
}
.logo-img{ height: 84px; width: auto; display: block; }
.logo .mark{
  width: 40px;height: 40px;
  background: var(--navy);
  display:flex;align-items:center;justify-content:center;
  font-family: var(--font-mono); font-size: 15px; font-weight:700;
  color: var(--bg); flex-shrink:0; border-radius: var(--radius);
}
.logo .sub{
  display:block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--steel-light); font-weight: 400; margin-top:3px;
}
nav.main-nav{display:flex; align-items:center; justify-content:space-between; width: 100%; gap: 20px;}
.nav-links{display:flex; align-items:center; gap: 34px;}
.nav-links a{
  font-family: var(--font-display); font-size: 14.5px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--navy);
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.nav-links a:hover, .nav-links a.active{ border-color: var(--blue); color: var(--blue); }
.nav-call{
  font-family: var(--font-mono); font-size: 13.5px; color: #fff;
  background: var(--orange); padding: 10px 18px; border-radius: var(--radius);
  font-weight: 700; letter-spacing: 0.02em;
}
.nav-call:hover{background: var(--orange-dim);}
.menu-toggle{display:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 14.5px; padding: 14px 26px; border-radius: var(--radius);
  border: 2px solid transparent; cursor:pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{transform: translateY(-2px);}
.btn-primary{background: var(--orange); color: #fff;}
.btn-primary:hover{background: var(--orange-dim);}
.btn-outline{border-color: var(--navy); color: var(--navy);}
.btn-outline:hover{background: var(--navy); color:#fff;}
.btn-outline-light{border-color: #fff; color: #fff;}
.btn-outline-light:hover{background: #fff; color: var(--navy);}

/* ---------- Hero ---------- */
.hero{ background: var(--bg-alt); padding: 92px 0 76px; border-bottom:1px solid var(--line); }
.hero .wrap{display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items:center;}
.eyebrow{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--blue); text-transform: uppercase; margin-bottom: 16px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue);}
h1{
  font-family: var(--font-display); font-size: 52px; line-height: 1.08;
  text-transform: uppercase; color: var(--navy); margin-bottom: 20px;
}
h1 em{font-style:normal; color: var(--blue);}
.hero p.lead{ font-size: 17px; color: var(--steel); max-width: 46ch; margin-bottom: 32px; }
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- Rating plate (signature element, light) ---------- */
.plate{
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: 0 12px 28px rgba(20,48,77,0.08);
}
.plate-label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--blue); text-transform: uppercase; margin-bottom: 14px;
}
.plate-row{ display:flex; justify-content:space-between; align-items:baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.plate-row:first-of-type{border-top:none;}
.plate-row .k{font-family: var(--font-mono); font-size:12px; color: var(--steel-light); text-transform:uppercase; letter-spacing:0.06em;}
.plate-row .v{font-family: var(--font-mono); font-size:15.5px; color: var(--navy); font-weight:700;}

/* ---------- Sections ---------- */
section{padding: 84px 0;}
.section-alt{background: var(--bg-alt);}
.section-navy{background: var(--navy); color: #fff;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap;}
.section-head h2{ font-family: var(--font-display); font-size: 34px; text-transform: uppercase; color: var(--navy); }
.section-navy .section-head h2{color:#fff;}
.section-navy .eyebrow{color:#7fc2ff;}
.section-head p{max-width: 46ch; color: var(--steel); font-size:15px;}
.section-navy .section-head p{color: #b7c3d1;}

/* ---------- Category tile grid ---------- */
.grid{display:grid; gap: 24px;}
.grid-3{grid-template-columns: repeat(3, 1fr);}
.grid-2{grid-template-columns: repeat(2, 1fr);}

.tile{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.tile:hover{ box-shadow: 0 14px 30px rgba(20,48,77,0.1); transform: translateY(-4px); }
.tile .art{
  height: 148px;
  background: var(--bg-alt);
  display:flex; align-items:center; justify-content:center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.tile .art svg{width:64px;height:64px;color:var(--blue);}
.tile .art img{width:100%;height:100%;object-fit:cover;}
.tile .body{padding: 22px 22px 26px;}
.tile h3{
  font-family: var(--font-display); font-size: 19px; text-transform: uppercase;
  color: var(--navy); margin-bottom: 8px; letter-spacing:0.01em;
}
.tile p{color: var(--steel); font-size: 14px; margin-bottom: 14px;}
.tile .link{
  font-family: var(--font-mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--blue); font-weight:700;
}

/* Plain content card (benefits, segments) */
.card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover{border-top-color: var(--blue); transform: translateY(-3px);}
.card .num{ font-family: var(--font-mono); font-size: 12px; color: var(--blue); letter-spacing:0.12em; margin-bottom:14px; display:block;}
.card h3{ font-family: var(--font-display); font-size: 20px; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; }
.card p{color: var(--steel); font-size: 14.5px;}
.section-navy .card{background: var(--navy-2); border-color: rgba(255,255,255,0.14);}
.section-navy .card h3{color:#fff;}
.section-navy .card p{color:#b7c3d1;}

/* Benefits list */
.benefits{display:grid; grid-template-columns: repeat(2,1fr); gap: 14px 32px; margin-top: 24px;}
.benefit{ display:flex; gap:12px; align-items:flex-start; }
.benefit .check{
  width:22px;height:22px; border-radius:50%; background: var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; font-weight:700;
}
.benefit p{font-size:14.5px; color: var(--steel);}

/* Product spec card */
.product-card{
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden;
}
.product-card .art{ height: 150px; background: var(--bg-alt); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.product-card .art svg{width:56px;height:56px;color:var(--blue);}
.product-card .art img{width:100%;height:100%;object-fit:cover;}
.product-card .tag{
  position:absolute; top:14px; left:14px; background: var(--navy); color:#fff;
  font-family: var(--font-mono); font-size:11px; font-weight:700; padding: 5px 10px;
  text-transform:uppercase; letter-spacing:0.08em; border-radius: var(--radius);
}
.product-card .body{padding: 22px;}
.product-card h3{ font-family: var(--font-display); font-size: 20px; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; }
.product-card p{color: var(--steel); font-size: 14px; margin-bottom: 16px;}
.spec-list{border-top: 1px solid var(--line); padding-top:14px;}
.spec-list li{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:12.5px; padding: 6px 0; color: var(--navy); }
.spec-list li span:first-child{color: var(--steel-light); text-transform:uppercase; letter-spacing:0.06em;}

/* ---------- Steps ---------- */
.steps{display:grid; grid-template-columns: repeat(4,1fr); gap: 0;}
.step{padding: 0 22px 0 0; position:relative;}
.step:not(:last-child)::after{
  content:""; position:absolute; top:26px; right:-2px; width: calc(100% - 52px); height:2px;
  background: repeating-linear-gradient(90deg, var(--line), var(--line) 6px, transparent 6px, transparent 12px);
}
.section-navy .step:not(:last-child)::after{background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25), rgba(255,255,255,0.25) 6px, transparent 6px, transparent 12px);}
.step .step-num{ font-family: var(--font-display); font-size: 42px; color: var(--blue); line-height:1; margin-bottom: 14px; }
.step h4{ font-family: var(--font-display); text-transform: uppercase; font-size: 15.5px; color: var(--navy); margin-bottom: 8px; }
.section-navy .step h4{color:#fff;}
.step p{font-size: 13.5px; color: var(--steel);}
.section-navy .step p{color:#b7c3d1;}

/* ---------- CTA band ---------- */
.cta-band{ background: var(--navy); color: #fff; padding: 56px 0; }
.cta-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band h2{ font-family: var(--font-display); font-size: 28px; text-transform: uppercase; }
.cta-band p{font-size:14px; color:#b7c3d1;}

/* ---------- Footer ---------- */
footer{ background: var(--navy); color: #b7c3d1; padding: 56px 0 28px; border-top: 4px solid var(--orange); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer-grid h5{ font-family: var(--font-display); color: #fff; text-transform: uppercase; font-size: 14px; letter-spacing: 0.08em; margin-bottom: 16px; }
.footer-grid p, .footer-grid a{font-size: 14px; line-height:1.9;}
.footer-grid a:hover{color: var(--orange);}
.footer-bottom{ padding-top: 22px; display:flex; justify-content:space-between; font-size:12.5px; font-family: var(--font-mono); flex-wrap:wrap; gap:10px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ background: var(--bg-alt); padding: 60px 0 46px; border-bottom: 1px solid var(--line); }
.page-hero h1{font-size:38px; margin-bottom: 10px;}
.page-hero p{color: var(--steel); max-width: 60ch; font-size:15px;}
.crumb{ font-family: var(--font-mono); font-size:12px; color: var(--steel-light); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:16px; }
.crumb span{color: var(--orange);}

/* ---------- Contact page ---------- */
.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 48px;}
.info-row{ display:flex; gap:16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.info-row:first-child{border-top:1px solid var(--line);}
.info-row .ico{
  width:40px;height:40px; flex-shrink:0; background: var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; border-radius: var(--radius);
  font-family: var(--font-mono); font-weight:700;
}
.info-row h4{ font-family: var(--font-display); text-transform:uppercase; font-size:14px; letter-spacing:0.05em; margin-bottom:4px; color: var(--navy); }
.info-row p, .info-row a{font-size:14.5px; color: var(--steel);}

form.quote-form{ background: var(--bg-alt); padding: 34px; border-radius: var(--radius); color: var(--navy); border: 1px solid var(--line); }
.quote-form .field{margin-bottom:18px;}
.quote-form label{ display:block; font-family: var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--steel); margin-bottom:8px; }
.quote-form input, .quote-form select, .quote-form textarea{
  width:100%; background: #fff; border: 1px solid var(--line);
  color: var(--navy); padding: 12px 14px; font-family: var(--font-body); font-size:14px; border-radius: var(--radius);
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{ outline: none; border-color: var(--blue); }
.quote-form textarea{resize:vertical; min-height:100px;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--blue); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none !important;} }

/* ---------- Featured project photo ---------- */
.project-banner{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.project-banner img{width:100%; height: 420px; object-fit: cover; display:block;}
.project-banner .caption{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(20,48,77,0.88), rgba(20,48,77,0));
  color:#fff; padding: 40px 28px 20px;
}
.project-banner .caption .tag{
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color: var(--orange); margin-bottom:8px; display:block;
}
.project-banner .caption h3{ font-family: var(--font-display); font-size:22px; text-transform:uppercase; }
.photo-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:16px;}
.photo-grid figure{border-radius: var(--radius); overflow:hidden; border:1px solid var(--line);}
.photo-grid img{width:100%; height:200px; object-fit:cover; display:block;}
.photo-grid figcaption{
  font-family: var(--font-mono); font-size:11.5px; color: var(--steel);
  padding: 10px 4px 0; text-transform:uppercase; letter-spacing:0.04em;
}

@media (max-width:900px){ .photo-grid{grid-template-columns:1fr 1fr;} .project-banner img{height:300px;} }
@media (max-width:640px){ .photo-grid{grid-template-columns:1fr;} }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero .wrap{grid-template-columns: 1fr;}
  h1{font-size:38px;}
  .grid-3{grid-template-columns: 1fr 1fr;}
  .steps{grid-template-columns: 1fr 1fr; row-gap: 32px;}
  .step:nth-child(2)::after{display:none;}
  .footer-grid{grid-template-columns: 1fr;}
  .contact-grid{grid-template-columns: 1fr;}
  .benefits{grid-template-columns: 1fr;}
}
@media (max-width: 640px){
  .wrap{padding: 0 20px;}
  nav.main-nav{
    position: fixed; top:146px; left:0; right:0; bottom:0; background: var(--bg);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; padding: 30px 24px; gap: 22px;
    transform: translateX(100%); transition: transform .2s ease; border-top:1px solid var(--line);
  }
  .nav-links{ flex-direction:column; align-items:flex-start; gap: 22px; }
  nav.main-nav.open{transform: translateX(0);}
  .menu-toggle{ display:block; background:none; border:none; color: var(--navy); font-size: 26px; cursor:pointer; }
  h1{font-size: 30px;}
  .grid-3, .grid-2{grid-template-columns: 1fr;}
  .steps{grid-template-columns: 1fr;}
  .step::after{display:none;}
  .cta-band .wrap{flex-direction:column; align-items:flex-start;}
}