/* ============================================================
   GROUNDWORK STUDIO — home.css
   ============================================================ */

/* ── HERO ── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--green); }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 80% 50%, rgba(201,168,76,.07) 0%, transparent 70%), linear-gradient(160deg, #1e3329 0%, #2d4a3e 45%, #243d33 100%); }
.hero-bg::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-55deg, transparent 0px, transparent 40px, rgba(201,168,76,.025) 40px, rgba(201,168,76,.025) 41px); }
.hero-content { position: relative; z-index: 2; padding-top: var(--nav-h); width: 100%; }
.hero-inner { max-width: var(--max-w); margin: 0 auto; padding: 5rem 28px 6rem; display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: center; }
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 1.4rem; }
.hero-eyebrow-line { width: 36px; height: 1px; background: var(--gold); flex-shrink: 0; }
.hero-eyebrow span { font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.hero-tagline { font-family: var(--font-display); font-size: clamp(3.2rem, 6.5vw, 6.5rem); font-weight: 300; line-height: .96; color: var(--cream); margin-bottom: .35rem; }
.hero-tagline em { font-style: italic; color: var(--gold); display: block; }
.hero-tagline-sub { font-family: var(--font-display); font-size: clamp(1rem, 1.8vw, 1.4rem); font-style: italic; font-weight: 300; color: rgba(201,168,76,.85); margin-bottom: 1.8rem; }
.hero-sub { font-size: .96rem; color: rgba(245,240,232,.78); max-width: 460px; line-height: 1.85; margin-bottom: 2.2rem; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-e2e { display: flex; flex-wrap: wrap; gap: .8rem 0; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid rgba(201,168,76,.2); }
.hero-e2e-item { display: flex; align-items: center; gap: 7px; padding-right: 1.4rem; margin-right: 1.4rem; border-right: 1px solid rgba(201,168,76,.15); font-size: .7rem; letter-spacing: .08em; color: rgba(245,240,232,.72); white-space: nowrap; }
.hero-e2e-item:last-child { border-right: none; }
.hero-e2e-dot { width: 5px; height: 5px; background: var(--gold); border-radius: 50%; flex-shrink: 0; }

/* Hero visual mockup */
.hero-visual { position: relative; }
.hero-card-badge { position: absolute; top: -1rem; right: -1rem; z-index: 2; background: var(--gold); color: var(--charcoal); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; padding: 6px 14px; border-radius: 2px; font-weight: 500; }
.hero-card-label { position: absolute; bottom: -1rem; left: -1rem; z-index: 2; background: var(--cream); color: var(--green); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 14px; border-radius: 2px; border: 1px solid var(--border); }
.hero-card-main { background: rgba(245,240,232,.05); border: 1px solid rgba(201,168,76,.22); border-radius: 4px; overflow: hidden; }
.hcb { background: rgba(245,240,232,.07); padding: 9px 14px; border-bottom: 1px solid rgba(201,168,76,.12); display: flex; align-items: center; gap: 6px; }
.hcb-dots { display: flex; gap: 5px; }
.hcb-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(201,168,76,.3); }
.hcb-url { flex: 1; height: 14px; background: rgba(245,240,232,.06); border-radius: 2px; margin: 0 8px; }
.hcs { padding: 18px; }
.hm-nav { height: 26px; background: rgba(45,74,62,.55); border-radius: 2px; margin-bottom: 12px; display: flex; align-items: center; padding: 0 10px; gap: 8px; }
.hm-logo { width: 44px; height: 7px; background: rgba(201,168,76,.5); border-radius: 1px; }
.hm-links { display: flex; gap: 5px; margin-left: auto; }
.hm-links span { width: 18px; height: 4px; background: rgba(245,240,232,.2); border-radius: 1px; }
.hm-hero { height: 78px; background: rgba(45,74,62,.38); border-radius: 2px; margin-bottom: 10px; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; gap: 5px; }
.hm-h { width: 60%; height: 7px; background: rgba(245,240,232,.55); border-radius: 1px; }
.hm-p { width: 45%; height: 5px; background: rgba(245,240,232,.3); border-radius: 1px; }
.hm-btn { width: 58px; height: 13px; background: rgba(201,168,76,.6); border-radius: 1px; margin-top: 4px; }
.hm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 8px; }
.hm-card { background: rgba(245,240,232,.05); border: 1px solid rgba(201,168,76,.1); border-radius: 2px; padding: 7px; }
.hm-card-img { width: 100%; height: 24px; background: rgba(45,74,62,.4); border-radius: 1px; margin-bottom: 5px; }
.hm-card-line { height: 4px; background: rgba(245,240,232,.28); border-radius: 1px; margin-bottom: 3px; }
.hm-card-line.s { width: 60%; }

/* ── SERVICES PREVIEW (homepage strip) ── */
.services-preview { background: var(--green); }
.services-preview-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 3.5rem; }
.services-preview-header h2 { color: var(--cream); }
.services-preview-header p { color: rgba(245,240,232,.75); }
.services-preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.15); border-radius: 3px; overflow: hidden; }
.service-card { background: rgba(255,255,255,.08); padding: 2.2rem 1.8rem; position: relative; transition: background var(--trans); overflow: hidden; }
.service-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.service-card:hover { background: rgba(255,255,255,.13); }
.service-card:hover::after { transform: scaleX(1); }
.service-num { font-family: var(--font-display); font-size: .72rem; letter-spacing: .18em; color: var(--gold); display: block; margin-bottom: 1.2rem; }
.service-icon { width: 38px; height: 38px; background: rgba(201,168,76,.2); border: 1px solid rgba(201,168,76,.3); border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; }
.service-icon svg { stroke: var(--gold) !important; }
.service-card h3 { font-style: normal; color: var(--cream); font-size: 1.15rem; margin-bottom: .5rem; }
.service-card p { font-size: .88rem; margin-bottom: 0; color: rgba(245,240,232,.88) !important; }
.service-link { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: 1.2rem; opacity: 0; transition: opacity var(--trans); }
.service-card:hover .service-link { opacity: 1; }

/* ── WORK PREVIEW ── */
.work-preview { background: var(--cream-dark); }
.work-preview-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.case-preview { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; }
.case-preview-img { position: relative; border-radius: 3px; overflow: hidden; }
.case-preview-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .55s ease; }
.case-preview-img:hover img { transform: scale(1.03); }
.case-preview-tag { position: absolute; top: 14px; left: 14px; background: var(--green); color: var(--cream); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 1px; }
.case-preview-body { padding: 1rem 0; }
.case-client { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display: block; }
.case-title { font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--green); margin-bottom: 1rem; font-style: normal; line-height: 1.1; }
.case-desc { font-size: .92rem; color: var(--gray); line-height: 1.8; margin-bottom: 1.5rem; }
.case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2rem; }
.tag { font-size: .68rem; color: var(--green); background: var(--green-light); border-radius: 1px; padding: 4px 10px; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; }
.case-stat { padding: 1rem; background: var(--cream); border: 1px solid var(--border); border-radius: 2px; text-align: center; }
.case-stat-num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 300; color: var(--green); display: block; line-height: 1; margin-bottom: 4px; }
.case-stat-lbl { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* ── MISSION STRIP ── */
.mission-strip { background: var(--green); padding: 5rem 0; }
.mission-strip p { color: rgba(245,240,232,.88) !important; }
.mission-strip h2 { color: var(--cream); }
.mission-strip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.mission-points { display: flex; flex-direction: column; }
.mission-point { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid rgba(245,240,232,.1); }
.mission-point:first-child { border-top: 1px solid rgba(245,240,232,.1); }
.mission-point-num { font-size: .66rem; letter-spacing: .18em; color: var(--gold); flex-shrink: 0; padding-top: 2px; }
.mission-point h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 400; color: var(--cream); margin-bottom: 3px; }
.mission-point p { font-size: .84rem; margin-bottom: 0; color: rgba(245,240,232,.88); }
.mission-text p { margin-bottom: 1rem; }
.mission-checklist { margin: 1.6rem 0 2rem; display: flex; flex-direction: column; gap: 10px; }
.mission-check { display: flex; align-items: center; gap: 12px; font-size: .88rem; color: rgba(245,240,232,.82); }
.mission-check-icon { width: 18px; height: 18px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .6rem; color: var(--white); }

/* ── PROCESS ── */
.process { background: var(--green-light); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 3.5rem; }
.process-step { padding: 2rem 2rem 2rem 0; border-right: 1px solid var(--border); }
.process-step:last-child { border-right: none; padding-right: 0; }
.process-step + .process-step { padding-left: 2rem; }
.process-step-num { font-family: var(--font-display); font-size: 3.5rem; font-weight: 300; font-style: italic; color: rgba(201,168,76,.55); line-height: 1; display: block; margin-bottom: .6rem; }
.process-step h4 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; font-style: italic; color: var(--green); margin-bottom: 7px; }
.process-step p { font-size: .9rem; line-height: 1.78; margin-bottom: 0; }

/* ── CTA STRIP ── */
.cta-strip { background: var(--green); padding: 5rem 0; }
.cta-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; }
.cta-strip h2 { color: var(--cream); margin-bottom: .5rem; }
.cta-strip p { color: rgba(245,240,232,.88); max-width: 480px; margin-bottom: 0; font-size: 1rem; }
.cta-strip-actions { display: flex; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; }

/* ── PROJECT CARD & GALLERY ── */
.project-card { background: var(--white); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.project-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding: 2rem 2rem 1.5rem; flex-wrap: wrap; }
.project-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 6px; }
.project-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--green); line-height: 1.2; margin: 0; }
.project-meta { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.project-tag { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; background: var(--green); color: var(--cream); padding: 4px 12px; border-radius: 1px; }
.project-live { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid rgba(201,168,76,.3); padding-bottom: 1px; transition: border-color var(--trans); }
.project-live:hover { border-color: var(--gold); }

/* Gallery */
.gallery-wrap { position: relative; overflow: hidden; background: var(--green); }
.gallery-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.gallery-slide { min-width: 100%; position: relative; }
.gallery-slide img { width: 100%; height: 380px; object-fit: cover; display: block; }
.gallery-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.5rem .85rem; background: linear-gradient(to top, rgba(26,26,26,.65), transparent); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,240,232,.85); }
.gallery-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(26,26,26,.5); border: 1px solid rgba(245,240,232,.2); color: var(--cream); width: 42px; height: 42px; border-radius: 50%; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--trans); z-index: 2; backdrop-filter: blur(4px); }
.gallery-btn:hover { background: rgba(26,26,26,.8); }
.gallery-prev { left: 1rem; }
.gallery-next { right: 1rem; }
.gallery-dots { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(245,240,232,.35); cursor: pointer; transition: background var(--trans); border: none; padding: 0; }
.gallery-dot.active { background: var(--gold); }

/* Project stats & tags */
.project-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.project-stat { background: var(--cream); padding: 1.25rem 1rem; text-align: center; }
.project-stat-num { font-family: var(--font-display); font-size: 1.8rem; font-weight: 300; color: var(--green); display: block; line-height: 1; margin-bottom: 4px; }
.project-stat-lbl { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.project-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 1.25rem 2rem; border-top: 1px solid var(--border); background: var(--cream); }

/* iframe wrap */
.iframe-wrap { position: relative; overflow: hidden; height: 320px; }
.iframe-wrap--tall { height: 460px; }

@media (max-width: 1024px) {
  .services-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2) { border-right: none; }
  .process-step:nth-child(3) { border-top: 1px solid var(--border); }
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 3rem; padding-bottom: 4rem; }
  .hero-visual { display: none; }
  .iframe-wrap { height: 220px; }
  .iframe-wrap iframe { width: 300% !important; height: 660px !important; transform: scale(0.333) !important; transform-origin: top left !important; }
  .services-preview-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .case-preview { grid-template-columns: 1fr; }
  .mission-strip-grid { grid-template-columns: 1fr; gap: 3rem; }
  .cta-strip-inner { flex-direction: column; align-items: flex-start; }
  .cta-strip-actions { flex-direction: column; width: 100%; }
  .cta-strip-actions a { text-align: center; width: 100%; }
  .work-preview-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .hero-tagline { font-size: 3rem; }
  .hero-e2e { flex-direction: column; gap: .5rem; }
  .hero-e2e-item { border-right: none; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { border-right: none; padding-right: 0; border-top: 1px solid rgba(45,74,62,.15); }
  .process-step:first-child { border-top: none; padding-top: 0; }
  .process-step + .process-step { padding-left: 0; }
  .case-stats { grid-template-columns: repeat(3, 1fr); }
  .services-preview-grid { grid-template-columns: repeat(2, 1fr); }
  .project-stats { grid-template-columns: repeat(2, 1fr); }
  .project-card-header { flex-direction: column; gap: 1rem; }
  .iframe-wrap { height: 180px; }
  .iframe-wrap iframe { width: 400% !important; height: 720px !important; transform: scale(0.25) !important; transform-origin: top left !important; }
}