/* VenueLine Consulting — site styles */
:root {
  --ink: #0B1211;
  --ink-2: #1B2422;
  --ink-line: #26332F;
  --teal: #5A919D;
  --teal-dark: #35707E;
  --paper: #F4F2EE;
  --paper-2: #FAF9F6;
  --white: #FFFFFF;
  --line: #D9D5CE;
  --text: #2A3230;
  --muted: #56605E;
  --on-dark: #E9ECEB;
  --on-dark-2: #C9D1CF;
  --on-dark-3: #A9B4B2;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --pad: clamp(20px, 5.5vw, 80px);
  --section: clamp(64px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: var(--teal-dark); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--white); color: var(--ink); padding: 12px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.dark { background: var(--ink); color: var(--on-dark); }
.white { background: var(--white); }
.rule-b { border-bottom: 1px solid var(--line); }
.rule-t { border-top: 1px solid var(--line); }

/* Type */
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-dark); margin: 0 0 16px; }
.dark .eyebrow, .hero .eyebrow { color: var(--teal); }
.display { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 0.95; color: var(--ink); margin: 0; }
.dark .display, .hero .display { color: var(--white); }
.display { overflow-wrap: break-word; }
.d-xl { font-size: clamp(52px, 7.8vw, 112px); line-height: 0.92; }
.d-l { font-size: clamp(46px, 6.6vw, 96px); }
.d-m { font-size: clamp(38px, 4.6vw, 64px); line-height: 1; }
.d-s { font-size: clamp(32px, 3.4vw, 48px); line-height: 1; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; max-width: 760px; margin: 24px 0 0; }
.dark .lede, .hero .lede { color: var(--on-dark-2); }
h3 { font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--ink); margin: 0; }
.num { font-family: var(--mono); font-size: 13px; color: var(--teal-dark); }
p { margin: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; font-family: var(--body); font-size: 17px; font-weight: 600; text-decoration: none; border-radius: 2px; border: 1px solid transparent; cursor: pointer; }
.btn-teal { background: var(--teal); color: var(--ink); }
.btn-teal:hover { background: #6FA5B0; color: var(--ink); }
.btn-solid { background: var(--teal-dark); color: var(--white); }
.btn-solid:hover { background: #2A5B66; color: var(--white); }
.btn-ghost { border-color: var(--teal); color: var(--on-dark); }
.btn-ghost:hover { background: rgba(90,145,157,0.15); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* Header */
.site-header { background: var(--ink); border-bottom: 1px solid #1E2A28; position: relative; z-index: 20; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand .mark { height: 48px; width: auto; }
.brand .word { height: 28px; width: auto; }
.nav { display: flex; align-items: center; gap: 34px; font-size: 15px; }
.nav a { color: var(--on-dark); text-decoration: none; padding: 6px 0; }
.nav a:hover { color: var(--teal); }
.nav a[aria-current="page"] { color: var(--teal); border-bottom: 2px solid var(--teal); }
.nav .login { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--on-dark-3); }
.nav .btn { min-height: 44px; padding: 0 22px; font-size: 15px; border-bottom: 0; }
.nav .btn:hover { color: var(--ink); }
.menu-btn { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--on-dark); }
.menu-btn svg { width: 26px; height: 26px; }

@media (max-width: 1080px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-bottom: 1px solid #1E2A28; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--pad) 24px; }
  .nav-open .nav { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid #1E2A28; font-size: 17px; }
  .nav a[aria-current="page"] { border-bottom: 1px solid #1E2A28; }
  .nav .btn { margin-top: 16px; min-height: 52px; }
  .brand .mark { height: 38px; }
  .brand .word { height: 22px; }
  .site-header .wrap { min-height: 72px; }
}

/* Home hero */
.hero { background-color: var(--ink); background-image: linear-gradient(90deg, rgba(11,18,17,0.95) 0%, rgba(11,18,17,0.82) 48%, rgba(11,18,17,0.6) 100%), url('/assets/img/hero-hazy.jpg'); background-size: cover; background-position: center 35%; color: var(--on-dark); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 80px; align-items: center; padding-top: clamp(64px, 9vw, 136px); padding-bottom: clamp(64px, 9vw, 144px); }
.ladder { display: flex; align-items: flex-end; gap: 14px; height: 320px; padding: 0 8px; border-bottom: 2px solid var(--teal); }
.ladder span { flex: 1; background: var(--teal); }
.ladder span:nth-child(1) { height: 29%; opacity: 0.45; }
.ladder span:nth-child(2) { height: 45%; opacity: 0.6; }
.ladder span:nth-child(3) { height: 62%; opacity: 0.75; }
.ladder span:nth-child(4) { height: 80%; opacity: 0.9; }
.ladder span:nth-child(5) { height: 100%; }
.ladder-ends { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--on-dark-3); padding: 14px 8px 0; }
.ladder-note { font-size: 14px; line-height: 1.55; color: var(--on-dark-3); margin-top: 14px; }
@media (max-width: 960px) {
  .hero { background-image: linear-gradient(180deg, rgba(11,18,17,0.9) 0%, rgba(11,18,17,0.8) 100%), url('/assets/img/hero-hazy.jpg'); background-position: center; }
  .hero .wrap { grid-template-columns: 1fr; gap: 48px; }
  .ladder { height: 140px; max-width: 360px; gap: 10px; }
  .ladder-ends, .ladder-note { max-width: 360px; }
}

/* Design-team venues */
.venues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 12px; }
.venue img { width: 100%; height: 260px; object-fit: cover; margin-bottom: 18px; }
.venue .name { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.venue .city { font-size: 16px; color: var(--muted); }
.comp-note { font-size: 17px; max-width: 860px; margin-top: 36px; }
@media (max-width: 860px) { .venues { grid-template-columns: 1fr; gap: 40px; } .venue img { height: 220px; } }

/* Full-width photo band */
.band { width: 100%; height: clamp(260px, 44vw, 640px); object-fit: cover; object-position: center 60%; }

/* Section heads */
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 56px; }
.head-row a { font-weight: 600; }

/* Four services */
.four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.four > div { border-top: 1px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.four p { font-size: 16px; }
@media (max-width: 1080px) { .four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } }
@media (max-width: 600px) { .four { grid-template-columns: 1fr; } }

/* Is / is not */
.isnot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--white); }
.isnot > div { padding: clamp(32px, 4vw, 56px); }
.isnot > div + div { border-left: 1px solid var(--line); background: var(--paper-2); }
.isnot .no .eyebrow { color: var(--muted); }
.isnot ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 18px; color: var(--ink); }
.isnot .no ul { color: var(--muted); }
@media (max-width: 760px) { .isnot { grid-template-columns: 1fr; } .isnot > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Phases */
.phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); margin-top: 56px; }
.phases > div { padding: 28px 28px 0; display: flex; flex-direction: column; gap: 10px; }
.phases > div:first-child { padding-left: 0; }
.phases > div + div { border-left: 1px solid var(--line); }
.phase-tag { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 0.06em; color: var(--teal-dark); }
.phases p { font-size: 16px; }
@media (max-width: 1080px) {
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phases > div { padding: 28px 24px 28px 0; }
  .phases > div + div { border-left: 0; }
  .phases > div:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
  .phases > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .phases { grid-template-columns: 1fr; }
  .phases > div, .phases > div:nth-child(even) { padding: 24px 0; border-left: 0; }
  .phases > div + div { border-top: 1px solid var(--line); }
}

/* Market intelligence */
.mi .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 96px; align-items: center; }
.mi p { font-size: 18px; color: var(--on-dark-2); margin-top: 24px; max-width: 640px; }
.mi .login-link { display: inline-block; margin-top: 24px; color: var(--teal); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); }
.stat { background: var(--ink); padding: 32px; }
.stat b { display: block; font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1; color: var(--white); }
.stat span { font-size: 15px; color: var(--on-dark-3); }
.walk { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; background: var(--teal); color: var(--ink); text-decoration: none; }
.walk:hover { background: #6FA5B0; color: var(--ink); }
.walk strong { display: block; font-family: var(--display); font-size: 32px; line-height: 1.05; text-transform: uppercase; }
.walk small { font-size: 15px; font-weight: 500; }
.walk .arrow { font-size: 32px; font-weight: 600; }
@media (max-width: 1080px) { .mi .wrap { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 480px) { .stat { padding: 24px; } .stat b { font-size: 52px; } .walk { padding: 24px; } .walk strong { font-size: 26px; } }

/* Collaborators */
.collab .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px 64px; flex-wrap: wrap; padding-top: 56px; padding-bottom: 56px; }
.collab .eyebrow { margin: 0; }
.collab .names { display: flex; gap: 16px 64px; flex-wrap: wrap; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); text-transform: uppercase; color: var(--ink); }

/* CTA */
.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 40px 64px; flex-wrap: wrap; }
.cta .text { max-width: 820px; }
.cta p { font-size: 19px; margin-top: 16px; }
.cta .btn { min-height: 60px; padding: 0 36px; font-size: 18px; }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-dark-3); font-size: 15px; line-height: 1.7; }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; padding-top: 64px; padding-bottom: 64px; }
.site-footer .lockup { width: 200px; height: auto; margin-bottom: 14px; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--teal); }
.site-footer .contact { display: flex; flex-direction: column; gap: 4px; }

/* Page intro (inner pages) */
.intro-split .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 72px; align-items: center; }
.intro-split img { width: 100%; height: 440px; object-fit: cover; }
@media (max-width: 960px) { .intro-split .wrap { grid-template-columns: 1fr; gap: 40px; } .intro-split img { height: 300px; } }

/* Service rows */
.svc { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 80px; }
.svc .body { display: flex; flex-direction: column; gap: 32px; }
.svc .body > p { font-size: 19px; }
.items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; font-size: 16px; margin: 0; padding: 0; list-style: none; }
.why { padding: 20px 24px; background: var(--white); border: 1px solid var(--line); font-size: 17px; color: var(--ink); }
.why strong { color: var(--teal-dark); }
@media (max-width: 960px) { .svc { grid-template-columns: 1fr; gap: 24px; } .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .items { grid-template-columns: 1fr; } }

/* Experience */
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-row img { width: 100%; height: clamp(180px, 24vw, 340px); object-fit: cover; }
@media (max-width: 700px) { .photo-row { grid-template-columns: 1fr; } .photo-row img:nth-child(n+2) { display: none; } }
.cases { display: flex; flex-direction: column; gap: 32px; }
.case { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 64px; padding: clamp(28px, 3.4vw, 48px); background: var(--white); border: 1px solid var(--line); }
.case .tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--teal-dark); }
.case .city { font-size: 16px; font-weight: 500; color: var(--ink); margin-top: 8px; }
.case .summary { font-size: 16px; color: var(--muted); margin-top: 16px; }
.case .detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.case .label { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.case ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.case .detail p { font-size: 16px; }
@media (max-width: 1080px) { .case { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 600px) { .case .detail { grid-template-columns: 1fr; gap: 28px; } }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; }
.two-col ul { margin: 24px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 17px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: 48px; } }

/* About */
.founder { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 96px; }
.founder img { width: 100%; height: 550px; object-fit: cover; }
.founder .bio { font-size: 18px; line-height: 1.7; margin-top: 28px; }
.founder .skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; font-size: 16px; margin: 28px 0 0; padding: 28px 0 0; list-style: none; border-top: 1px solid var(--line); }
@media (max-width: 960px) { .founder { grid-template-columns: 1fr; gap: 40px; } .founder img { height: auto; aspect-ratio: 4 / 5; max-width: 440px; } }
@media (max-width: 520px) { .founder .skills { grid-template-columns: 1fr; } }
.beliefs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin: 8px 0 48px; }
.beliefs p { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.08; text-transform: uppercase; color: var(--white); }
.dark .after { font-size: 19px; color: var(--on-dark-2); max-width: 900px; }
.links3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.links3 > div { border-top: 2px solid var(--ink); padding-top: 24px; }
.links3 .tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--teal-dark); display: block; margin-bottom: 14px; }
.links3 p { font-size: 18px; }
@media (max-width: 860px) { .beliefs, .links3 { grid-template-columns: 1fr; gap: 32px; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 112px; }
.direct { display: flex; flex-direction: column; gap: 20px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.direct .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--muted); display: block; }
.direct a, .direct span.v { font-size: 20px; font-weight: 500; text-decoration: none; color: var(--teal-dark); }
.direct span.v { color: var(--ink); }
.form { padding: clamp(28px, 3.4vw, 48px); background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #8F8A82; border-radius: 2px; background: var(--white); color: var(--ink); }
.field input, .field select { min-height: 48px; padding-top: 0; padding-bottom: 0; }
.field textarea { resize: vertical; min-height: 150px; }
.form .note { font-size: 14px; color: var(--muted); }
.form .btn { width: 100%; }
@media (max-width: 1080px) { .contact-grid { grid-template-columns: 1fr; gap: 56px; } }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }