/* ============================================================
   Site-level additions for the static build:
   mobile nav, focus states, small-screen type, static form bits.
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.emc-skip { position:absolute; left:-9999px; top:8px; z-index:100; background:#fff; color:var(--cobalt-500); padding:10px 14px; border-radius:4px; font-family:var(--font-body); font-weight:600; }
.emc-skip:focus { left:8px; }

/* Buttons and links: keep them looking like the design, with visible keyboard focus */
a.emc-btn, a.emc-btn:hover { text-decoration: none; }
a.emc-btn--accent, a.emc-btn--accent:hover, a.emc-btn--primary, a.emc-btn--primary:hover { color:#fff; }
a.emc-btn--secondary { color: var(--cobalt-500); }
a.emc-btn--ghost { color: var(--tectonic-black); }
.emc-btn:focus-visible, .emc-chip:focus-visible, .emc-nav__toggle:focus-visible,
.emc-contact-faq__q:focus-visible, .emc-journal-card:focus-visible, .emc-journal-featured__card:focus-visible {
  outline: 2px solid var(--stream-500); outline-offset: 3px;
}
.emc-nav__brand { text-decoration: none; }
.emc-footer__place { margin-top: 6px; color: rgba(255,255,255,0.6); }

/* Nav: right cluster + mobile toggle */
.emc-nav { transition: background 200ms var(--ease-standard), border-color 200ms var(--ease-standard); }
.emc-nav__right { display:flex; align-items:center; gap:12px; }
.emc-nav__mobile-cta { display:none; }
.emc-nav__toggle { display:none; width:40px; height:40px; border:0; background:transparent; cursor:pointer; padding:10px 8px; flex-direction:column; justify-content:space-between; }
.emc-nav__toggle span { display:block; height:2px; background:var(--tectonic-black); border-radius:2px; transition: transform 200ms, opacity 200ms; }
.emc-nav--dark .emc-nav__toggle span { background:#fff; }
.emc-nav.is-open .emc-nav__toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.emc-nav.is-open .emc-nav__toggle span:nth-child(2) { opacity:0; }
.emc-nav.is-open .emc-nav__toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 900px) {
  .emc-nav { padding: 14px 20px; }
  .emc-nav__brand img { height: 26px; width: auto; }
  .emc-nav__right .emc-btn { display:none; }
  .emc-nav__toggle { display:flex; }
  .emc-nav__links {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; padding:8px 20px 24px;
    background:#fff; border-bottom:1px solid var(--neutral-100);
    box-shadow: 0 12px 24px rgba(0,0,20,0.08);
  }
  .emc-nav.is-open .emc-nav__links { display:flex; }
  .emc-nav.is-open { background:#fff; }
  .emc-nav.is-open.emc-nav--dark .emc-nav__toggle span { background: var(--tectonic-black); }
  .emc-nav__links .emc-nav__link { color: var(--tectonic-black); font-size:17px; padding:14px 0; border-bottom:1px solid var(--neutral-100); }
  .emc-nav__links .emc-nav__link.is-active::after { display:none; }
  .emc-nav__mobile-cta { display:inline-flex; justify-content:center; margin-top:20px; }
}

/* Work + service cards are not links yet: drop the lift-on-hover affordance */
div.emc-card:hover, div.emc-svc-card:hover { transform:none; box-shadow:0 1px 2px 0 rgba(0,0,20,0.05); }

/* Journal: unpublished posts */
.emc-journal-card--soon { cursor: default; }
.emc-journal-card--soon:hover { transform:none; box-shadow:0 1px 2px 0 rgba(0,0,20,0.05); }
.emc-journal-card--soon .emc-journal-card__date { font-style: italic; }
[data-cat][hidden] { display:none !important; }
.emc-journal-featured[hidden] { display:none; }

/* Contact: intake panel (replaces mock calendar) */
.emc-contact-start__panel { padding: 40px; display:flex; flex-direction:column; align-items:flex-start; gap:28px; background:#fff; }
.emc-contact-start__steps { margin:0; padding:0 0 0 22px; display:grid; gap:18px; font-family:var(--font-body); font-size:17px; line-height:1.55; color:var(--cool-gray); max-width:560px; }
.emc-contact-start__steps strong { color: var(--tectonic-black); font-weight:600; display:block; }
.emc-contact-start__steps li::marker { color: var(--quartz-500); font-family: var(--font-display); font-weight:700; }

/* Contact form: chips are real checkboxes now */
.emc-contact-form__fieldset { border:0; padding:0; margin:0 0 24px; min-width:0; }
.emc-contact-form__fieldset legend { padding:0; }
.emc-contact-form__field .emc-contact-form__chip input { position:absolute; opacity:0; width:1px; height:1px; padding:0; margin:0; border:0; }
.emc-contact-form__chip { position:relative; cursor:pointer; user-select:none; }
.emc-contact-form__chip:focus-within { outline:2px solid var(--stream-500); outline-offset:2px; }
.emc-contact-faq__h { margin:0; font: inherit; }
.emc-contact-news__row input { flex:1; min-width:0; }
.emc-contact-form__success .emc-btn { margin-top: 8px; }

/* ---- Small screens: scale the big display type ---- */
@media (max-width: 720px) {
  .emc-container { padding: 0 20px; }
  .emc-section { padding: 64px 0; }
  .emc-section__title { font-size: 34px; margin-bottom: 36px; }
  .emc-hero-photo { min-height: 600px; }
  .emc-hero-photo__inner { padding: 72px 20px 88px; }
  .emc-hero-photo__title { font-size: 56px; }
  .emc-hero-photo__sub { font-size: 18px; }
  .emc-hero-photo__mark { width: 220px; }
  .emc-intro__title { font-size: 32px; }
  .emc-intro__body { font-size: 18px; }
  .emc-stats { padding: 56px 0; }
  .emc-stats__grid { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .emc-stat__num { font-size: 60px; }
  .emc-svc-card { padding: 28px; min-height: 0; }
  .emc-svc-card__title, .emc-service-row__title { font-size: 26px; }
  .emc-work__grid, .emc-work__grid--2 { grid-template-columns: 1fr; }
  .emc-quote-bleed { padding: 80px 0; }
  .emc-quote-bleed__text { font-size: 30px; }
  .emc-cta__title { font-size: 34px; }
  .emc-footer__cols { grid-template-columns: 1fr 1fr; }
  .emc-footer__bottom { flex-direction: column; gap: 6px; padding: 20px; }
  .emc-about-hero, .emc-journal-hero { padding: 88px 0 64px; }
  .emc-about-hero__title, .emc-journal-hero__title { font-size: 52px; }
  .emc-about-hero__sub, .emc-journal-hero__sub { font-size: 19px; }
  .emc-about-hero__mark, .emc-journal-hero__mark, .emc-contact-hero__mark { width: 260px; }
  .emc-about-story__lede { font-size: 20px !important; }
  .emc-about-value__title { font-size: 24px; }
  .emc-about-network__item { padding: 24px 0 !important; }
  .emc-about-clients__grid { grid-template-columns: 1fr 1fr; }
  .emc-journal-featured { padding: 48px 0 32px; }
  .emc-journal-featured__card { min-height: 440px; }
  .emc-journal-featured__body { padding: 24px; }
  .emc-journal-featured__title { font-size: 26px; }
  .emc-journal-newsletter { padding: 64px 0; }
  .emc-post__header { padding: 48px 0 32px; }
  .emc-post__title { font-size: 36px; }
  .emc-post__lede { font-size: 19px; }
  .emc-post__cover { height: 240px; margin: 0 20px; }
  .emc-post__body { padding: 48px 20px 64px; }
  .emc-post__h2 { font-size: 26px; }
  .emc-post__quote { padding: 20px 0 20px 20px; }
  .emc-post__quote p { font-size: 21px !important; }
  .emc-contact-start__panel { padding: 28px 20px; }
  .emc-contact-news__row { flex-direction: column; }
}

/* Nav height is fixed so the photo hero can slide under it with no gap */
.emc-nav { box-sizing: border-box; height: 72px; padding-top: 0; padding-bottom: 0; }
.emc-hero-photo { margin-top: -72px; padding-top: 72px; }
@media (max-width: 900px) {
  .emc-nav { height: 64px; }
  .emc-hero-photo { margin-top: -64px; padding-top: 64px; }
}
.emc-contact-form__field label.emc-contact-form__chip {
  font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--tectonic-black);
}
.emc-contact-form__field label.emc-contact-form__chip.is-on { color: #fff; }
.emc-contact-form__fieldset legend { margin-bottom: 10px; }

/* Logos keep their true proportions (8:1) at any height */
.emc-nav__brand img, .emc-footer__brand img { width: auto; max-width: 100%; }

/* ============================================================
   Home: five practices as a stacked system (01 = foundation)
   ============================================================ */
.emc-stack__lede { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--cool-gray); max-width: 640px; margin: -32px 0 48px; }
.emc-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.emc-stack__layer {
  display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px;
  padding: 22px 32px; border-radius: 8px;
  transition: transform 200ms var(--ease-standard);
}
.emc-stack__layer:hover { transform: translateY(-2px); }
.emc-stack__num { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; }
.emc-stack__title { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 4px; }
.emc-stack__line { font-family: var(--font-body); font-size: 16px; line-height: 1.5; margin: 0; }
/* widths step out toward the foundation, colors deepen */
.emc-stack__layer--5 { margin: 0 16%; background: var(--surface-altitude-blue); }
.emc-stack__layer--4 { margin: 0 12%; background: var(--cobalt-100); }
.emc-stack__layer--3 { margin: 0 8%;  background: var(--cobalt-200); }
.emc-stack__layer--2 { margin: 0 4%;  background: var(--cobalt-400); }
.emc-stack__layer--1 { margin: 0;     background: var(--cobalt-600); }
.emc-stack__layer--5 .emc-stack__num, .emc-stack__layer--4 .emc-stack__num { color: var(--cobalt-400); }
.emc-stack__layer--3 .emc-stack__num { color: var(--cobalt-600); }
.emc-stack__layer--5 .emc-stack__title, .emc-stack__layer--4 .emc-stack__title, .emc-stack__layer--3 .emc-stack__title { color: var(--cobalt-700); }
.emc-stack__layer--5 .emc-stack__line, .emc-stack__layer--4 .emc-stack__line { color: var(--neutral-700); }
.emc-stack__layer--3 .emc-stack__line { color: var(--tectonic-black); }
.emc-stack__layer--2 .emc-stack__num, .emc-stack__layer--1 .emc-stack__num { color: var(--stream-200); }
.emc-stack__layer--2 .emc-stack__title, .emc-stack__layer--1 .emc-stack__title,
.emc-stack__layer--2 .emc-stack__line, .emc-stack__layer--1 .emc-stack__line { color: #fff; }

/* ============================================================
   Home: partner logo carousel (3 per page on desktop)
   ============================================================ */
.emc-partners { background: #fff; }
.emc-partners__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
.emc-partners__head .emc-section__title { margin-bottom: 12px; }
.emc-partners__lede { font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--cool-gray); margin: 0; max-width: 620px; }
.emc-partners__controls { display: flex; gap: 10px; }
.emc-partners__btn {
  width: 48px; height: 48px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--neutral-200); background: #fff; color: var(--cobalt-500);
  font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1;
  transition: background 120ms, border-color 120ms;
}
.emc-partners__btn:hover { background: var(--cobalt-50); border-color: var(--cobalt-200); }
.emc-partners__btn:focus-visible, .emc-partners__viewport:focus-visible { outline: 2px solid var(--stream-500); outline-offset: 3px; }
.emc-partners__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; border-radius: 8px; }
.emc-partners__viewport::-webkit-scrollbar { display: none; }
.emc-partners__track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; }
.emc-partners__item { scroll-snap-align: start; }
.emc-partners__logo {
  height: 180px; display: flex; align-items: center; justify-content: center;
  background: var(--neutral-50); border: 1px solid var(--neutral-100); border-radius: 8px; padding: 28px;
}
.emc-partners__logo img {
  max-width: 78%; max-height: 96px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.72; mix-blend-mode: multiply;
  transition: filter 200ms var(--ease-standard), opacity 200ms var(--ease-standard);
}
.emc-partners__item:hover .emc-partners__logo img { filter: none; opacity: 1; }
.emc-partners__wordmark { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--neutral-500); text-align: center; line-height: 1.1; }
.emc-partners__name { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stream-700); margin-top: 14px; }
.emc-partners__dots { display: flex; gap: 8px; justify-content: center; margin-top: 28px; }
.emc-partners__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--neutral-200); border: 0; padding: 0; cursor: pointer; transition: width 200ms, background 200ms; }
.emc-partners__dot.is-on { width: 24px; background: var(--cobalt-500); }

/* Journal cards on Home: unpublished ones are not links */
div.emc-card--soon { cursor: default; }
a.emc-card { color: inherit; text-decoration: none; }

@media (max-width: 900px) {
  .emc-stack__layer--5, .emc-stack__layer--4, .emc-stack__layer--3, .emc-stack__layer--2 { margin: 0; }
  .emc-stack__layer { padding: 20px; grid-template-columns: 40px 1fr; }
  .emc-stack__title { font-size: 22px; }
  .emc-partners__track { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }
  .emc-partners__logo { height: 140px; padding: 18px; }
}
@media (max-width: 720px) {
  .emc-stack__lede { margin: -20px 0 32px; font-size: 17px; }
  .emc-partners__controls { display: none; }
}
.emc-partners__logo { box-sizing: border-box; height: 160px; }
@media (max-width: 900px) { .emc-partners__logo { height: 120px; } }
.emc-partners__logo img { max-height: 100%; }

/* Partner logos: full color by default, gentle lift on hover */
.emc-partners__logo img { filter: none; opacity: 1; transition: transform 200ms var(--ease-standard); }
.emc-partners__logo { transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard); }
.emc-partners__item:hover .emc-partners__logo { border-color: var(--cobalt-100); box-shadow: 0 8px 20px rgba(0,0,20,0.06); }
.emc-partners__item:hover .emc-partners__logo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .emc-partners__item:hover .emc-partners__logo img { transform: none; } }

/* About: founder headshot fills the 4:5 frame */
.emc-about-principal__photo picture { display: block; width: 100%; height: 100%; }
.emc-about-principal__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Journal: hero on Altitude Blue so it reads differently from About */
.emc-journal-hero { background: var(--surface-altitude-blue); border-bottom: 1px solid var(--cobalt-100); }
.emc-journal-hero__mark { opacity: 0.09; }

/* Journal post: lists match the body text */
.emc-post__body ul, .emc-post__body ol { margin: 0 0 28px; padding-left: 24px; }
.emc-post__body li { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--tectonic-black); margin-bottom: 14px; padding-left: 4px; }
.emc-post__body li::marker { color: var(--quartz-500); font-weight: 700; }
.emc-post__body li strong { font-weight: 600; }
@media (max-width: 720px) { .emc-post__body li { font-size: 17px; } }

/* Journal cover images */
.emc-cover-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.emc-post__cover { overflow: hidden; }
.emc-card__img .emc-cover-img { position: absolute; inset: 0; }
/* Featured card with a photo: deeper overlay so the headline stays readable */
.emc-journal-featured__card[style] { background-position: center 25% !important; }
.emc-journal-featured__card[style] .emc-journal-featured__overlay {
  background: linear-gradient(180deg, rgba(0,0,20,0.05) 0%, rgba(0,0,20,0.55) 45%, rgba(0,0,20,0.9) 100%);
}

/* Journal post: copy-and-use template box */
.emc-post__template { background: var(--surface-altitude-blue); border-left: 3px solid var(--stream-500); border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 0 0 28px; }
.emc-post__template-label { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stream-700); margin-bottom: 8px; }
.emc-post__body .emc-post__template p { margin: 0; font-size: 17px; line-height: 1.6; }

/* Contact: warm Sandstone hero, distinct from Home, About, and Journal */
.emc-contact-hero { background: var(--surface-sandstone); border-bottom: 1px solid var(--quartz-100); }
.emc-contact-hero__mark { opacity: 0.08; }

/* Contact: keep the mountain mark at its true proportions (it is wider than it is tall) */
.emc-contact-cal__brand img { width: auto; height: 28px; }

/* Contact: Deep Cobalt hero (overrides the Sandstone version above) */
.emc-contact-hero { background: var(--cobalt-600); border-bottom: 0; }
.emc-contact-hero .emc-eyebrow { color: var(--stream-200); }
.emc-contact-hero__title { color: #fff; }
.emc-contact-hero__title--accent { color: var(--stream-200); }
.emc-contact-hero__sub { color: rgba(255,255,255,0.82); }
.emc-contact-hero__mark { opacity: 0.1; }
.emc-contact-hero__mark img { filter: brightness(0) invert(1); }
