/* ============================================================
   HOME PAGE — editorial, breathing, consultancy-grade
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   SECTION B · HERO
   Full-bleed, ~85vh, generous space, ONE CTA
   ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Background accent — very subtle teal radial */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 30%, var(--teal-glow), transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(13,94,91,.04), transparent 40%);
  pointer-events: none;
}

.hero-in {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  width: 100%;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
}
.hero-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--teal);
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 5.25rem);
  letter-spacing: -0.04em;
  line-height: 0.96;
  font-weight: 700;
  margin-bottom: 1.75rem;
  max-width: 720px;
}
.hero h1 .accent {
  color: var(--teal);
  font-style: normal;
}

.hero-sub {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 520px;
  margin-bottom: 2.5rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero-meta {
  font-size: 0.8125rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-meta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a8a56;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.9); }
}

/* ─── Hero visual ─────────────────────────────────────────── */
.hero-visual {
  position: relative;
}
.hero-visual img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  margin-left: auto;
  display: block;
  box-shadow:
    0 1px 2px rgba(10,10,10,0.04),
    0 16px 40px rgba(10,10,10,0.06),
    0 32px 80px var(--teal-glow);
  animation: heroFade 1s cubic-bezier(.2,.7,.2,1) 0.1s both;
}
@keyframes heroFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   SECTION C · TRUST STRIP
   Thin band under hero — establishes credibility immediately
   ═══════════════════════════════════════════════════════════ */
.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: 1.25rem 0;
}
.trust-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.trust-in strong {
  color: var(--ink);
  font-weight: 600;
}
.trust-sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--muted-2);
  border-radius: 50%;
}

/* ════════════════════════════════════════════════════════════
   SECTION D · INDUSTRIES SERVED
   Three columns, each is a clickable card pointing to case work
   ═══════════════════════════════════════════════════════════ */
.industries {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-bottom: 1px solid var(--line);
}
.industries-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.industries-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.industries-head h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 520px;
}

.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
}

.industry-card {
  background: var(--bg);
  padding: clamp(2rem, 3.5vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-med);
  position: relative;
}
.industry-card:hover {
  background: var(--bg-2);
}
.industry-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.industry-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.industry-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  flex-grow: 1;
}
.industry-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--teal);
  margin-top: 0.75rem;
  transition: gap var(--t-fast);
}
.industry-card:hover .industry-link {
  gap: 10px;
}

/* ════════════════════════════════════════════════════════════
   SECTION E · FEATURED CASE STUDY
   Full-width editorial spread for the strongest project
   ═══════════════════════════════════════════════════════════ */
.featured {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.featured-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.featured-visual {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.featured-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-visual-meta {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 6px;
}

.featured-content .eyebrow { margin-bottom: 1rem; }
.featured-content h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: 1.5rem;
  max-width: 480px;
}
.featured-content p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 1.5rem;
  max-width: 480px;
}
.featured-meta {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
  display: flex;
  gap: 12px;
}
.featured-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 12px;
  color: var(--muted-2);
}
.featured-kpis {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.featured-kpi-num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.03em;
  line-height: 1;
}
.featured-kpi-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 5px;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════
   SECTION F · HOW I WORK (METHODOLOGY)
   Dark section. Theater. Engineer-to-engineer trust.
   ═══════════════════════════════════════════════════════════ */
.methodology {
  background: var(--bg-dark);
  color: var(--on-dark-muted);
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}
.methodology::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(27,163,156,.08), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(27,163,156,.04), transparent 40%);
  pointer-events: none;
}
.methodology-in {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.methodology-head {
  max-width: 700px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.methodology-head h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  color: var(--on-dark);
  margin-bottom: 1rem;
}
.methodology-head p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--on-dark-muted);
  max-width: 540px;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.method-step {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-dark);
  position: relative;
}
.method-step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--teal-bright);
}
.method-num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--teal-bright);
  margin-bottom: 0.85rem;
}
.method-step h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--on-dark);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.method-step p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--on-dark-muted);
}

/* ════════════════════════════════════════════════════════════
   SECTION G · PROFESSIONAL BACKGROUND
   Logo-style wall of companies
   ═══════════════════════════════════════════════════════════ */
.background-band {
  padding: clamp(3rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.background-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.background-label {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
}
.background-companies {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}
.bg-co {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity var(--t-med);
  letter-spacing: -0.01em;
}
.bg-co:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   SECTION H · ABOUT
   Smaller, secondary — feature not centerpiece
   ═══════════════════════════════════════════════════════════ */
.about {
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-bottom: 1px solid var(--line);
}
.about-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.about-photo {
  position: relative;
}
.about-photo img,
.about-photo .photo-ph {
  width: 200px;
  height: 250px;
  object-fit: cover;
  object-position: center top;
  border-radius: 3px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: block;
}
.photo-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted-2);
}
.photo-ph svg { width: 30px; height: 30px; stroke: currentColor; fill: none; opacity: 0.4; }
.photo-ph span { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }

.about-text {
  max-width: 640px;
}
.about-text h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.125rem);
  margin-bottom: 1.25rem;
  max-width: 500px;
}
.about-text .lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.about-text p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1rem;
}
.about-text .name {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.about-text .name strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}
.about-text .name span {
  font-size: 0.8125rem;
  color: var(--muted);
}
.skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 1.25rem;
}

/* ════════════════════════════════════════════════════════════
   SECTION I · FINAL CTA
   ═══════════════════════════════════════════════════════════ */
.cta-section {
  padding: clamp(4rem, 7vw, 6rem) 0;
}
.cta-card {
  max-width: calc(var(--max-w) - 2rem);
  margin: 0 clamp(1.25rem, 4vw, 3rem);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  background: var(--teal);
  color: #fff;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.08), transparent 40%),
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.04), transparent 40%);
  pointer-events: none;
}
.cta-card > * { position: relative; }
.cta-card h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 0.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.cta-card p {
  color: rgba(255,255,255,.78);
  font-size: 0.9375rem;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 880px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .hero { min-height: auto; padding-top: 4rem; padding-bottom: 3rem; }
  .hero-in {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-visual { order: -1; }
  .hero-visual img { max-width: 280px; margin: 0 auto; }

  .industries-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .industries-grid {
    grid-template-columns: 1fr;
  }

  .featured-in {
    grid-template-columns: 1fr;
  }

  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-in {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .about-photo img,
  .about-photo .photo-ph {
    width: 160px;
    height: 200px;
  }

  .cta-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — PHONE (≤ 640px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .hero-visual img { max-width: 240px; }

  .method-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .featured-kpis {
    gap: 1.25rem;
  }

  .background-companies {
    gap: 1rem 1.5rem;
  }
}
/* Industries line under capability cards */
.cap-industries {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: clamp(2rem, 4vw, 3rem);
  font-style: italic;
}
/* ============================================================
   HERO GALLERY — two-column infinite scroll
   ============================================================ */
.gallery {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 560px;
  margin-left: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  overflow: hidden;
  border-radius: 4px;
  /* Fade top/bottom edges */
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}

.gallery-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  will-change: transform;
}

.gallery-col-up {
  animation: galleryScrollUp 50s linear infinite;
}
.gallery-col-down {
  animation: galleryScrollDown 50s linear infinite;
}

@keyframes galleryScrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes galleryScrollDown {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* Pause on hover */
.gallery:hover .gallery-col {
  animation-play-state: paused;
}

.gallery-item {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(0.85);
  transform-origin: center;
  display: block;
}
Two changes:

cover → contain (shows whole image, no crop)
Added padding: 8px (small white border around each image — looks clean)
Commit: Gallery — show full image instead of cropping

Hard refresh. Your full images will now display inside each tile.

One side effect
If your images have different aspect ratios (some wide, some square, some tall), they'll all be centered inside their square tiles with empty space around them. Looks intentional and gallery-like. If you'd rather have a colored background fill the empty space, the existing background: var(--bg-3) already handles that (light gray fill).

Try it and tell me if it looks right. If the empty space around irregular images bothers you, we can switch to a smarter approach (e.g., object-fit: cover with a "scale: 0.85" to zoom out slightly while keeping the fill).





/* Mobile */
@media (max-width: 880px) {
  .gallery {
    height: 520px;
    gap: 10px;
    max-width: 100%;
    margin: 0 auto;
  }
  .gallery-col { gap: 10px; }
  .gallery-item { aspect-ratio: 1/1; }
  .gallery-col-up   { animation-duration: 45s; }
  .gallery-col-down { animation-duration: 45s; }
}
@media (max-width: 480px) {
  .gallery { height: 460px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .gallery-col { animation: none !important; }
}