/* ============================================================
   Trace1 Flow Solutions — shared stylesheet
   Design tokens and components extracted from the original
   single-page design so every page shares one source of truth.
   ============================================================ */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --blue-deep:#185FA5; --blue-mid:#4472C4; --blue-slate:#44546A;
  --charcoal:#2C2C2A; --grey:#5F5E5A; --off-white:#F4F6F9;
  --white:#ffffff; --rule:#D0DAE8; --gold:#FFC000;
}

body { font-family:Barlow,sans-serif; font-weight:400; color:var(--charcoal); background:var(--white); line-height:1.6; }

/* ---------- NAV ---------- */
nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(255,255,255,0.97); border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; padding:0 4rem; height:72px; }
nav .logo img { height:48px; width:auto; }
nav ul { list-style:none; display:flex; gap:2.5rem; }
nav ul a { text-decoration:none; font-size:0.9rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); transition:color 0.2s; }
nav ul a:hover, nav ul a.active { color:var(--blue-deep); }
nav .cta-btn { background:var(--blue-deep); color:var(--white); padding:0.55rem 1.4rem; border-radius:3px; font-size:0.85rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero { margin-top:72px; background:var(--blue-deep); padding:5rem 4rem; position:relative; overflow:hidden; }
.page-hero::before { content:""; position:absolute; top:-20%; right:-8%; width:50%; height:150%; background:var(--blue-slate); clip-path:polygon(20% 0%,100% 0%,100% 100%,0% 100%); opacity:0.4; }
.page-hero::after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--gold); }
.page-hero p.eyebrow { font-family:"Barlow Condensed",sans-serif; font-size:0.8rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:0.75rem; position:relative; z-index:1; }
.page-hero h1 { font-family:"Barlow Condensed",sans-serif; font-size:clamp(2.4rem,4vw,3.6rem); font-weight:700; color:var(--white); line-height:1.08; position:relative; z-index:1; }
.page-hero .sub { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.75); max-width:520px; margin-top:1rem; position:relative; z-index:1; }
.page-hero .hero-points { display:grid; grid-template-columns:repeat(3,1fr); gap:0.9rem 2rem; margin-top:2.25rem; max-width:780px; position:relative; z-index:1; }
.page-hero .hero-points .pt { display:flex; align-items:flex-start; gap:0.6rem; }
.page-hero .hero-points .pt .mark { color:var(--gold); font-weight:700; font-size:1rem; line-height:1.4; flex:0 0 auto; }
.page-hero .hero-points .pt .txt { color:rgba(255,255,255,0.92); font-size:0.92rem; line-height:1.4; }
@media(max-width:900px){ .page-hero .hero-points { grid-template-columns:1fr 1fr; } }

/* ---------- HOME HERO (large) ---------- */
.home-hero { margin-top:72px; background:var(--blue-deep); padding:7rem 4rem 6rem; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:3.5rem; flex-wrap:wrap; }
.home-hero::before { content:""; position:absolute; top:-25%; right:-6%; width:55%; height:160%; background:var(--blue-slate); clip-path:polygon(22% 0%,100% 0%,100% 100%,0% 100%); opacity:0.4; }
.home-hero::after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--gold); }
.home-hero .inner { position:relative; z-index:1; max-width:640px; flex:1 1 460px; }
.home-hero .eyebrow { font-family:"Barlow Condensed",sans-serif; font-size:0.82rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.home-hero h1 { font-family:"Barlow Condensed",sans-serif; font-size:clamp(2.8rem,5.5vw,4.6rem); font-weight:700; color:var(--white); line-height:1.04; }
.home-hero .sub { font-size:1.15rem; font-weight:300; color:rgba(255,255,255,0.78); max-width:560px; margin-top:1.5rem; }
.home-hero .hero-actions { display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap; }
.home-hero .hero-bio { position:relative; z-index:1; flex:0 1 440px; }
.home-hero .hero-bio .tech-card-label { color:var(--gold); margin-top:0; }

/* ---------- BUTTONS ---------- */
.btn { display:inline-block; border-radius:3px; font-family:Barlow,sans-serif; font-size:0.9rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; padding:0.85rem 2rem; cursor:pointer; transition:background 0.2s, transform 0.15s, color 0.2s; border:1px solid transparent; }
.btn-primary { background:var(--blue-deep); color:var(--white); }
.btn-primary:hover { background:var(--blue-slate); transform:translateY(-1px); }
.btn-gold { background:var(--gold); color:var(--charcoal); }
.btn-gold:hover { transform:translateY(-1px); filter:brightness(1.05); }
.btn-ghost { background:transparent; color:var(--white); border-color:rgba(255,255,255,0.5); }
.btn-ghost:hover { background:rgba(255,255,255,0.1); }

/* ---------- SECTION SHELL ---------- */
section.block { padding:5rem 4rem; }
.section-head { max-width:640px; margin-bottom:3rem; }
.section-head .eyebrow { font-family:"Barlow Condensed",sans-serif; font-size:0.8rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:0.75rem; }
.section-head h2 { font-family:"Barlow Condensed",sans-serif; font-size:clamp(1.9rem,3vw,2.6rem); font-weight:700; color:var(--charcoal); line-height:1.1; }
.section-head p { font-size:1rem; color:var(--grey); margin-top:1rem; }

/* ---------- SERVICE / FEATURE CARDS ---------- */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.card { background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--blue-deep); border-radius:2px; padding:2rem 1.75rem; transition:box-shadow 0.2s, transform 0.2s; }
.card:hover { box-shadow:0 12px 30px rgba(24,95,165,0.1); transform:translateY(-3px); }
.card .num { font-family:"Barlow Condensed",sans-serif; font-size:0.8rem; font-weight:700; letter-spacing:0.14em; color:var(--gold); }
.card h3 { font-family:"Barlow Condensed",sans-serif; font-size:1.3rem; font-weight:700; color:var(--charcoal); margin:0.5rem 0 0.75rem; }
.card p { font-size:0.92rem; color:var(--grey); line-height:1.7; }
.card ul { list-style:none; margin-top:1rem; }
.card ul li { font-size:0.88rem; color:var(--charcoal); padding-left:1.2rem; position:relative; margin-bottom:0.45rem; }
.card ul li::before { content:"\2713"; color:var(--blue-deep); font-weight:700; position:absolute; left:0; }

/* ---------- INDUSTRIES ---------- */
.industries { background:var(--off-white); }
.industry-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.industry { background:var(--white); border:1px solid var(--rule); border-radius:2px; padding:1.75rem; border-left:3px solid var(--gold); }
.industry h3 { font-family:"Barlow Condensed",sans-serif; font-size:1.2rem; font-weight:700; color:var(--charcoal); margin-bottom:0.5rem; }
.industry p { font-size:0.9rem; color:var(--grey); line-height:1.65; }

/* ---------- STATS STRIP ---------- */
.stats { background:var(--charcoal); display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:3.5rem 4rem; }
.stat { text-align:center; }
.stat .figure { font-family:"Barlow Condensed",sans-serif; font-size:2.6rem; font-weight:700; color:var(--gold); line-height:1; }
.stat .label { font-size:0.82rem; color:rgba(255,255,255,0.6); letter-spacing:0.06em; text-transform:uppercase; margin-top:0.6rem; }

/* ---------- PROCESS STEPS ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; counter-reset:step; }
.step { position:relative; padding-top:1.5rem; }
.step::before { counter-increment:step; content:counter(step,decimal-leading-zero); font-family:"Barlow Condensed",sans-serif; font-size:2.2rem; font-weight:700; color:var(--rule); display:block; line-height:1; margin-bottom:0.5rem; }
.step h3 { font-family:"Barlow Condensed",sans-serif; font-size:1.15rem; font-weight:700; color:var(--charcoal); margin-bottom:0.5rem; }
.step p { font-size:0.9rem; color:var(--grey); line-height:1.65; }

/* ---------- CTA BAND ---------- */
.cta-band { background:var(--blue-deep); padding:4rem; position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--gold); }
.cta-band .inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; max-width:1100px; }
.cta-band h2 { font-family:"Barlow Condensed",sans-serif; font-size:clamp(1.8rem,3vw,2.4rem); font-weight:700; color:var(--white); line-height:1.1; }
.cta-band p { color:rgba(255,255,255,0.78); font-weight:300; margin-top:0.6rem; max-width:480px; }

/* ---------- CONTACT LAYOUT ---------- */
.contact-layout { display:grid; grid-template-columns:1fr 1.4fr; min-height:600px; }
.contact-info { background:var(--off-white); padding:5rem 4rem; border-right:1px solid var(--rule); }
.contact-info .section-label { font-family:"Barlow Condensed",sans-serif; font-size:0.8rem; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:0.75rem; }
.contact-info h2 { font-family:"Barlow Condensed",sans-serif; font-size:2rem; font-weight:700; color:var(--charcoal); margin-bottom:0.5rem; }
.contact-info .sub { font-size:0.95rem; color:var(--grey); line-height:1.7; margin-bottom:3rem; }

.info-block { margin-bottom:2rem; }
.info-block .info-label { font-family:"Barlow Condensed",sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:0.4rem; }
.info-block .info-value { font-size:0.95rem; color:var(--charcoal); font-weight:500; }
.info-block .info-value a { color:var(--blue-deep); text-decoration:none; }
.placeholder-val { color:var(--blue-mid); font-style:italic; font-size:0.88rem; border:1px dashed var(--blue-mid); border-radius:2px; padding:0.25rem 0.6rem; display:inline-block; background:rgba(68,114,196,0.05); }

.response-badge { margin-top:3rem; background:var(--charcoal); padding:1.5rem; border-radius:2px; }
.response-badge p { font-size:0.82rem; color:rgba(255,255,255,0.6); line-height:1.6; }
.response-badge strong { color:var(--gold); font-weight:600; }

.tech-card-label { font-family:"Barlow Condensed",sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--blue-deep); margin-top:2.5rem; margin-bottom:0.6rem; }
.tech-card { background:var(--white); border:1px solid var(--rule); border-top:3px solid var(--blue-deep); border-radius:2px; overflow:hidden; display:grid; grid-template-columns:150px 1fr; align-items:stretch; gap:0; }
.tech-card .photo { overflow:hidden; }
.tech-card .photo img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.tech-card .body { padding:2rem 2.1rem; display:flex; flex-direction:column; justify-content:center; }
.tech-card .name { font-family:"Barlow Condensed",sans-serif; font-size:1.7rem; font-weight:700; color:var(--charcoal); line-height:1.1; }
.tech-card .role { font-size:0.82rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--blue-deep); margin-top:0.4rem; margin-bottom:0.9rem; }
.tech-card .body p { font-size:1.05rem; color:var(--grey); line-height:1.75; margin:0; }

/* ---------- FORM ---------- */
.contact-form-panel { background:var(--white); padding:5rem 4rem; }
.contact-form-panel h2 { font-family:"Barlow Condensed",sans-serif; font-size:1.6rem; font-weight:700; color:var(--charcoal); margin-bottom:0.5rem; }
.contact-form-panel .sub { font-size:0.92rem; color:var(--grey); margin-bottom:2.5rem; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:1.25rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.25rem; }
.form-group label { font-size:0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey); }
.form-group input, .form-group select, .form-group textarea {
  border:1px solid var(--rule); border-radius:2px; padding:0.7rem 0.9rem;
  font-family:Barlow,sans-serif; font-size:0.95rem; color:var(--charcoal);
  background:var(--white); transition:border-color 0.2s; outline:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--blue-deep); }
.form-group textarea { resize:vertical; min-height:130px; }
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235F5E5A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.9rem center; }

.submit-btn { background:var(--blue-deep); color:var(--white); padding:0.9rem 2.5rem; border:none; border-radius:3px; font-family:Barlow,sans-serif; font-size:0.9rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:background 0.2s, transform 0.15s; display:inline-block; }
.submit-btn:hover { background:var(--blue-slate); transform:translateY(-1px); }
.submit-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; }

.form-note { font-size:0.8rem; color:var(--grey); margin-top:0.75rem; }
.hp-field { display:none; }

/* ---------- FOOTER ---------- */
footer { background:#1a1a18; padding:2.5rem 4rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
footer img { height:36px; filter:brightness(0) invert(1); opacity:0.7; }
footer p { font-size:0.82rem; color:rgba(255,255,255,0.4); }
footer .footer-links { display:flex; gap:1.5rem; }
footer .footer-links a { font-size:0.82rem; color:rgba(255,255,255,0.45); text-decoration:none; }
footer .footer-links a:hover { color:var(--gold); }

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  nav { padding:0 1.5rem; } nav ul { display:none; }
  .page-hero, .home-hero { padding:4rem 1.5rem; }
  section.block, .cta-band, .stats { padding:3rem 1.5rem; }
  .contact-layout { grid-template-columns:1fr; }
  .contact-info, .contact-form-panel { padding:3rem 1.5rem; }
  .form-row { grid-template-columns:1fr; }
  .card-grid, .industry-grid, .steps, .stats { grid-template-columns:1fr 1fr; }
  footer { padding:2rem 1.5rem; }
}
@media(max-width:560px){
  .card-grid, .industry-grid, .steps, .stats { grid-template-columns:1fr; }
}