/* ==========================================================================
   Worthington Construction Managers — styles.css
   Last updated: 2025-10-02
   Notes:
   - Minimal, professional, accessible
   - Brand-forward (blue/black primary, teal accent, restrained green utility)
   - Mobile-first responsive scale
   ========================================================================== */

/* ========== Base ========== */
:root{
  --text:#1c2432;
  --muted:#4b5563;
  --navy:#133c74;
  --tint:rgba(19,60,116,.08);
  --container:1140px;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --section-pad: 56px;
  --gap: 2rem;
}

html{box-sizing:border-box;scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
body{
  margin:0;
  color:var(--text);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:#fff;
}

img{max-width:100%;height:auto;display:block}
a{color:#1b4db3;text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(100% - 2rem, var(--container)); margin-inline:auto}

/* Typographic rhythm */
h1,h2,h3{margin:0 0 .6rem; line-height:1.15; letter-spacing:-.005em}
h1{font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight:600}
h2{font-size: clamp(1.25rem, 1.9vw, 1.55rem); font-weight:700}
h3{font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight:700}
p{margin:.4rem 0 .9rem; max-width: 62ch}
ul{margin:.5rem 0 0; padding-left:1.2rem}

/* ========== Header (tight) ========== */
.site-header{position:sticky; top:0; z-index:20; background:#fff}
.site-header .header-inner{padding:.5rem 0}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:14px}
.site-logo{height:40px; overflow:hidden; display:flex; align-items:center}
.site-logo img{height:56px; transform:translateY(-4px)}

/* ========== Hero ========== */
.hero{position:relative; background: linear-gradient(#f8fbff, #eef5ff)}
.hero .hero-inner{padding: 18px 0 16px}
.hero .hero-copy p{color:#203048}

.hero-badges{margin:.25rem 0}
.badge{background:none; padding:0; border:0; font-weight:500; color:#1e2e49}

.trust-bullets{
  list-style:none; padding:0; margin:.45rem 0 0;
  display:flex; gap:1.25rem; flex-wrap:nowrap; font-size:1rem; white-space:nowrap;
}
.trust-bullets li{margin:0}
.trust-bullets li::after{content:"•"; margin-left:1.25rem; opacity:.4}
.trust-bullets li:last-child::after{content:""}

@media (max-width:860px){
  .trust-bullets{flex-wrap:wrap; white-space:normal; gap:.5rem 1rem}
}

/* Soft divider under hero */
.hero::after{
  content:""; display:block; height:8px; margin-top:8px;
  background:linear-gradient(to bottom, var(--tint), rgba(255,255,255,0));
}

/* ========== Reusable sections ========== */
section{padding: var(--section-pad) 0}
section + section{border-top:1px solid #f1f3f7}
.section-head{margin-bottom: .7rem}

/* Standardize spacing for key sections */
.approach .section-head,
.about .section-head,
.services .section-head,
.process .section-head,
.contact .section-head { margin-bottom: .75rem }

.approach p,
.about p,
.services p,
.process p,
.contact p { line-height:1.55 }

/* ========== Our Approach block ========== */
.approach .approach-grid{
  display: grid;
  grid-template-columns: 3fr 4fr; /* wider video column */
  gap: 2rem;
  align-items: center;
}
.approach .approach-text{max-width:56ch}
.video-frame{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); background:#000}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

@media (max-width:900px){
  .approach .approach-grid{grid-template-columns:1fr}
}
/* 1. Widen just the Approach section’s container */
.approach .container{
  max-width: 1200px;   /* increase as desired, up to ~1280px */
}
@media (min-width: 1400px){
  .approach .container{ max-width: 1280px; }
}

/* 2. Ensure the <video> fills the .video-frame */
.video-frame video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}


/* Fallback YouTube link styling */
.video-fallback{
  margin-top: .5rem;
  text-align: center;   /* ← change from right to center */
}
.video-fallback a{
  font-weight: 600;
  text-decoration: none;
  color: #1b4db3;       /* optional: WCM blue brand color */
}
.video-fallback a:hover{
  text-decoration: underline;
}


/* ========== About ========== */
.about .logo-side{max-width:120px;}

/* ========== Services ========== */
.services h3{margin-top:1rem}
.services p{margin:.2rem 0 .7rem}

/* ========== Process (Approach steps) ========== */
.process .steps{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
.process .step{
  padding:1rem; border:1px solid #edf1f6; border-radius:10px; background:#fff;
}
.process .step h3{margin-bottom:.35rem}
.process .step p{margin:0}

@media (max-width:960px){ .process .steps{grid-template-columns:1fr} }

/* ========== Contact ========== */
.contact .card{
  padding:1rem 1.25rem; border:1px solid #edf1f6; border-radius:10px; background:#fff;
}
.contact .mini-form{display:grid; grid-template-columns: 1fr 1fr 2fr auto; gap:.5rem; align-items:end; margin-top:.6rem}
.contact .mini-form input, .contact .mini-form textarea{
  width:100%; padding:.45rem .55rem; border:1px solid #dfe5ee; border-radius:8px; font: inherit;
}
.contact .mini-form textarea{min-height:42px; resize:vertical}
.contact .mini-form button{
  padding:.5rem .8rem; border-radius:8px; border:1px solid #204a96; background:#2757b0; color:#fff; cursor:pointer
}
@media (max-width:720px){
  .contact .mini-form{grid-template-columns:1fr}
}

/* ========== Footer with soft top fade ========== */
footer::before{
  content:""; display:block; height:28px; margin-bottom:8px;
  background:linear-gradient(to top, var(--tint), rgba(255,255,255,0));
}
footer{padding:18px 0 32px; color:var(--muted); font-size:.92rem}
/* Header/nav final locks */
.site-header { position: sticky; top: 0; z-index: 20; background: #fff; }
.site-header .header-inner { padding: .5rem 0; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.site-logo { height: 40px; overflow: hidden; display: flex; align-items: center; }
.site-logo img { height: 56px; transform: translateY(-4px); }

.site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; }
.site-header nav a { font-weight: 600; text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
/* Header brand: match your HTML */
.site-header .brand{ display:flex; align-items:center; gap:10px; height:40px; }
.site-header .brand img{ height:40px; width:auto; display:block; }
.site-header .brand span{ position:absolute; left:-9999px; } /* keep text for accessibility */
/* Show the logo only in the header */

/* Header brand: match your HTML */
.site-header .brand { display:flex; align-items:center; gap:10px; height:40px; }
.site-header .brand img { height:40px; width:auto; display:block; }
.site-header .brand span { position:absolute; left:-9999px; }

/* Show the logo only in the header */
/* Show logo in header only (but guaranteed visible there) */
header img[src*="logo"] { display:inline-block !important; }



/* Headline-to-paragraph spacing in sections */
.section-head { margin-bottom: .75rem; }
.about .section-head,
.services .section-head,
.process .section-head,
.contact .section-head { margin-bottom: .85rem; }

/* Our Approach paragraph rhythm */
.approach .approach-text p { line-height: 1.55; }

/* Hero bullets inline until tablet */
.trust-bullets { display:flex; flex-wrap:nowrap; gap:1.25rem; white-space:nowrap; }
@media (max-width:860px){
  .trust-bullets { flex-wrap:wrap; white-space:normal; gap:.5rem 1rem; }
}
/* Header brand — guarantee the logo shows */
.site-header .brand{ display:flex; align-items:center; gap:10px; height:40px; }
.site-header .brand img{ display:inline-block !important; height:40px; width:auto; }

/* (Optional) keep the text for screen readers only */
.site-header .brand span{ position:absolute; left:-9999px; }
/* Header brand sizing + alignment */
.site-header .header-inner{ padding:.5rem 0; min-height:60px; }

.site-header .brand{
  display:flex; align-items:center; gap:10px;
  height:140px;                      /* was 40px */
}

.site-header .brand img{
  height:140px;                      /* was 40px */
  width:auto; display:block;
  /* nudge if it looks a hair low/high on your screen: */
  transform: translateY(-2px);
}

/* Keep nav vertically centered with the logo */
.site-header .nav{ display:flex; align-items:center; gap:1.25rem; }
.site-header .nav a{ font-weight:600; }
/* ========== Approach steps layout ========== */
.process .step {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.process .step-number {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0073e6; /* or your accent color */
  flex-shrink: 0;
  width: 1.5rem;
  text-align: right;
}

.process .step h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.process .step p {
  margin: 0.25rem 0 0 2.25rem;
  line-height: 1.5;
}
/* Approach steps — clean inline number + heading, paragraph indented under heading */
.process .step{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.75rem 0; border-top:1px solid #edf1f6;
}
.process .step:first-of-type{ border-top:none; }

.process .step-number{
  flex:0 0 1.5rem;
  text-align:right;
  font-weight:700; font-size:1.05rem; color:#1b4db3;
  line-height:1.4;
}

.process .step-body h4{
  margin:0; font-size:1.1rem; font-weight:700;
}
.process .step-body p{
  margin:.35rem 0 0; line-height:1.5; max-width:62ch;
}

/* slightly tighter block spacing */
.process{ padding-top: 40px; }
/* Keep Approach section aligned with page content */
.process {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

/* Give the heading some breathing room */
.process h2.section-head {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Keep step blocks visually balanced */
.process .step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid #edf1f6;
}

.process .step:first-of-type {
  border-top: none;
}

.process .step-number {
  flex: 0 0 1.5rem;
  text-align: right;
  font-weight: 700;
  font-size: 1.05rem;
  color: #1b4db3;
  line-height: 1.4;
}

.process .step-body h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.process .step-body p {
  margin: 0.35rem 0 0;
  line-height: 1.5;
  max-width: 62ch;
}
/* Make the step card look a touch more intentional */
.process .step{
  background:#fff;
  border:1px solid #edf1f6;
  border-radius:12px;
  padding:1rem 1.25rem;
  margin-bottom:1rem;
}

/* Slightly bolder number and calmer blue */
.process .step-number{ color:#1f4aa8; font-weight:700; }

/* Tighten the gap under each h4 */
.process .step-body p{ margin:.3rem 0 0; }

/* Keep the overall block centered and consistent with the page rhythm */
.process{ max-width:960px; margin:0 auto; padding:2.25rem 1.25rem; }

/* Responsive adjustment: reduce video height on mobile */
@media (max-width: 600px) {
  .video-frame {
    aspect-ratio: 16 / 10;   /* slightly taller but less dominant than 16:9 */
  }

  .approach .container {
    max-width: 95%;          /* give small screens a bit more breathing room */
    padding: 0 1rem;
  }

  .video-fallback {
    margin-top: 0.75rem;
  }
}


/* ------------------------------ End --------------------------------------- */