/* ==========================================================================
   econdevconsult.com — static rebuild
   Design tokens lifted from the original The7 theme configuration so the
   rebuilt site matches the approved aesthetic. Nothing here derives from
   The7 or WPBakery stylesheets; only the values were carried across.
   ========================================================================== */

:root {
  --orange:        #e97d1f;   /* accent: links, active nav, icons */
  --gold:          #f7b535;   /* section headings */
  --btn:           #ef5a34;   /* button fill */
  --btn-hover:     #f2c943;   /* button hover fill */
  --text:          #777;      /* body copy */
  --text-dark:     #313131;   /* nav, strong copy */
  --heading-dark:  #222;
  --body-bg:       #f4f4f4;
  --panel:         #fff;
  --footer-bg:     #fbfbfb;
  --rule:          rgba(0, 0, 0, .09);

  --font-base:     "Open Sans", Helvetica, Arial, Verdana, sans-serif;
  --font-slab:     "Roboto Slab", Georgia, serif;

  --wrap:          1180px;
  --gutter:        24px;
  --topbar-h:      48px;
  --header-h:      86px;
}

/* --- reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Anchor jumps (#individual, #workshops, the skip link, and keyboard focus
   scrolling) stop this far below the top of the viewport, so the target clears
   the sticky header with room to spare. Without it the browser parks the target
   at y=0 — underneath the header. Bias is deliberately generous: a heading
   pushed slightly low is fine; a heading hidden behind the header is not. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 32px);
}

body {
  margin: 0;
  background: var(--body-bg);
  color: var(--text);
  font: 400 14px/26px var(--font-base);
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a { color: var(--orange); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--btn); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  color: var(--gold);
  font-family: var(--font-base);
  font-weight: 700;
  line-height: 1.25;
}

h1 { font-size: 44px; }
h2 { font-size: 34px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }

/* Visible keyboard focus — the original theme suppressed it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--orange); color: #fff; padding: 10px 18px; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- top bar ----------------------------------------------------------- */

.topbar {
  background: var(--btn);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a { color: #fff; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: rgba(255, 255, 255, .75); }
.topbar svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

.topbar-social { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.topbar-social a {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-social a:hover { background: #fff; color: var(--btn); }
.topbar-social svg { width: 13px; height: 13px; }

/* --- header / nav ------------------------------------------------------ */

.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .wrap {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { flex: none; }
.brand img { width: 320px; max-width: 100%; height: auto; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: 10px; color: var(--text-dark);
}
.nav-toggle svg { width: 26px; height: 26px; fill: currentColor; }

.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 26px;
}
.nav li { margin: 0; }
.nav a {
  color: var(--heading-dark);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  display: block;
}
.nav a:hover { color: var(--orange); }
.nav a[aria-current="page"] { color: var(--orange); border-bottom-color: var(--orange); }

/* --- hero -------------------------------------------------------------- */

.hero {
  position: relative;
  background: #4a4a4a center / cover no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .42);
}
.hero .wrap { position: relative; z-index: 1; }

.hero-home { min-height: 520px; text-align: center; }
.hero-home h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: 54px;
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  margin-bottom: 28px;
}

.hero-page { min-height: 290px; }
.hero-page h1 {
  color: #fff;
  text-transform: uppercase;
  font-size: 46px;
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
/* Post titles are real sentences — never force them to caps. */
.hero-post h1 { text-transform: none; font-size: 40px; }

.hero-page .hero-sub {
  margin-top: 10px;
  font-size: 17px;
  color: rgba(255, 255, 255, .92);
  max-width: 720px;
}

/* --- buttons ----------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--btn);
  color: #fff;
  font-family: var(--font-slab);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 30px;
  border: 1px solid var(--btn);
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover,
.btn:focus { background: var(--btn-hover); border-color: var(--btn-hover); color: #fff; }
.btn-lg { font-size: 18px; padding: 16px 40px; }
.btn-sm { font-size: 12px; padding: 12px 18px; letter-spacing: .02em; }
.btn-ghost { background: transparent; border-color: #fff; color: #fff; }
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--btn); }

/* Button rows share a baseline and stretch to equal height. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}
.btn-row.center { justify-content: center; }
.btn-row .btn { display: flex; align-items: center; justify-content: center; }

/* --- sections ---------------------------------------------------------- */

.section { padding: 72px 0; background: var(--panel); }
.section.alt { background: var(--body-bg); }
.section.tight { padding: 48px 0; }

.section-head { text-align: center; margin-bottom: 48px; }
.section-head h2 { margin-bottom: 0; text-transform: uppercase; }
.section-head .lede {
  max-width: 880px;
  margin: 18px auto 0;
  font-size: 15px;
}

/* Rule-with-ornament divider under a section heading. */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 16px auto 0;
  max-width: 260px;
  color: var(--orange);
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--orange);
  opacity: .55;
}
.ornament svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

.heading-orange { color: var(--orange); }
.heading-gold   { color: var(--gold); }

/* --- intro (text + image) ---------------------------------------------- */

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.intro-grid h2 { margin-bottom: 4px; text-transform: uppercase; }
.intro-grid .kicker {
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.intro-grid .ornament { margin-left: 0; margin-right: 0; max-width: 200px; }
.intro-cta {
  font-family: var(--font-base);
  font-style: italic;
  font-weight: 700;
  font-size: 30px;
  text-transform: uppercase;
  color: var(--orange);
  margin: 26px 0 20px;
}

/* --- feature grid (hexagon icon + text) -------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 56px;
}
.feature-grid.single { grid-template-columns: 1fr; }

.feature { display: flex; gap: 20px; align-items: flex-start; }

.hex {
  flex: none;
  width: 52px;
  height: 58px;
  background: var(--orange);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.hex svg { width: 22px; height: 22px; fill: currentColor; }

.feature-body { min-width: 0; }
.feature h3 {
  font-size: 19px;
  line-height: 1.35;
  color: var(--gold);
  margin: 6px 0 6px;
}
.feature p { font-size: 14px; margin: 0; }

/* Topic list: icon + title only, no body copy — keep titles centred on the hex. */
.feature.topic { align-items: center; }
.feature.topic h3 { margin: 0; }

/* --- full-width photo band --------------------------------------------- */

.band {
  height: 420px;
  background: #4a4a4a center / cover no-repeat;
}
.band-sm { height: 300px; }

/* --- testimonials ------------------------------------------------------ */

.testimonials {
  position: relative;
  background: #555 center / cover no-repeat;
  color: #fff;
  padding: 76px 0;
}
.testimonials::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(60, 60, 60, .82);
}
.testimonials .wrap { position: relative; z-index: 1; }
.testimonials h2 { color: var(--gold); text-align: center; text-transform: uppercase; }
.testimonials .ornament { color: var(--gold); }

.quotes {
  position: relative;
  max-width: 880px;
  margin: 44px auto 0;
}
.quote {
  display: none;
  text-align: left;
}
.quote.is-active { display: block; animation: fade .4s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.quote blockquote {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 30px;
  font-weight: 600;
  color: #fff;
}
.quote cite { font-style: normal; display: block; }
.quote .who { color: var(--gold); font-weight: 700; font-size: 15px; }
.quote .role { color: rgba(255, 255, 255, .72); font-size: 13px; margin-top: 3px; }

.quote-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: var(--orange); color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.quote-nav:hover { background: var(--btn-hover); }
.quote-nav svg { width: 14px; height: 14px; fill: currentColor; }
.quote-prev { left: -58px; }
.quote-next { right: -58px; }

.quote-dots { display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
.quote-dots button {
  width: 10px; height: 10px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
}
.quote-dots button[aria-selected="true"] { background: var(--gold); }

/* --- about strip ------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 44px;
  align-items: center;
}
.about-grid img { width: 100%; }

/* --- resource / download lists ----------------------------------------- */

.res-group { margin-bottom: 44px; }
.res-group h4 {
  color: var(--orange);
  font-size: 22px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 18px;
}
.res-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; }
.res-list li {
  margin: 0 0 11px;
  break-inside: avoid;
  padding-left: 26px;
  position: relative;
  font-weight: 600;
  color: var(--text-dark);
}
.res-list li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 15px; height: 18px;
  background: var(--orange);
  clip-path: polygon(0 0, 68% 0, 100% 30%, 100% 100%, 0 100%);
}
.res-list a { color: var(--text-dark); font-weight: 600; }
.res-list a:hover { color: var(--orange); }

/* --- webinar cards ----------------------------------------------------- */

.webinars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}
/* Cards are a flex column so every "Watch Now" sits on the same baseline —
   the misalignment the Captain flagged on the original Resources page. */
.webinar {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--rule);
}
.webinar img { width: 100%; }
.webinar-body { padding: 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.webinar h3 { font-size: 19px; color: var(--gold); margin-bottom: 8px; }
.webinar p { font-size: 14px; }
.webinar .btn { margin-top: auto; align-self: flex-start; }

/* --- blog -------------------------------------------------------------- */

.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 36px;
}
.post-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.post-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.post-card h3 { font-size: 21px; margin-bottom: 8px; }
.post-card h3 a { color: var(--gold); }
.post-card h3 a:hover { color: var(--orange); }
.post-meta { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.post-card p { font-size: 14px; }
.post-card .more { margin-top: auto; padding-top: 14px; font-weight: 700; }

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}
.post-body h2 { font-size: 26px; color: var(--orange); margin-top: 1.6em; }
.post-body h3 { font-size: 21px; color: var(--gold); margin-top: 1.4em; }
.post-body ol, .post-body ul { padding-left: 1.4em; }
.post-body ol ol { list-style: lower-alpha; margin-top: .4em; }
.post-body > img { margin-bottom: 28px; }

.share { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--rule); }
.share h2 { font-size: 15px; color: var(--text-dark); text-transform: uppercase; letter-spacing: .06em; }
.share ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.share li { margin: 0; }
.share a {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.share a:hover { background: var(--btn-hover); }
.share svg { width: 16px; height: 16px; fill: currentColor; }

.sidebar { position: sticky; top: calc(var(--header-h) + 20px); }
.widget { background: var(--panel); border: 1px solid var(--rule); padding: 24px; margin-bottom: 28px; }
.widget h2 { font-size: 17px; color: var(--orange); text-transform: uppercase; letter-spacing: .05em; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.widget li:last-child { margin: 0; padding: 0; border: 0; }
.widget a { font-weight: 600; color: var(--text-dark); }
.widget a:hover { color: var(--orange); }
.widget .date { display: block; font-size: 12px; margin-top: 3px; }

.post-nav {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule);
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
}

/* --- resume ------------------------------------------------------------ */

.resume-head { text-align: center; }
.resume-head h1 { color: #fff; font-size: 50px; margin-bottom: 10px; text-transform: uppercase; }
.resume-head p { color: rgba(255, 255, 255, .92); font-size: 19px; max-width: 720px; margin: 0 auto 26px; }

.strength-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.strength {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--orange);
  padding: 24px;
}
.strength h4 { font-size: 17px; color: var(--gold); margin: 0; line-height: 1.4; }

.tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.tags span {
  background: var(--orange); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .03em;
  padding: 7px 16px;
}

.job { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--rule); }
.job:last-child { border: 0; margin-bottom: 0; padding-bottom: 0; }
.job-when { color: var(--orange); font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.job h3 { font-size: 24px; color: var(--gold); margin: 4px 0 2px; }
.job h4 { font-size: 16px; color: var(--text-dark); font-weight: 600; margin: 0 0 14px; }

.exp-list { list-style: none; margin: 0; padding: 0; }
.exp-list li { padding-left: 26px; position: relative; margin-bottom: 10px; }
.exp-list li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px;
  background: var(--orange);
  transform: rotate(45deg);
}

/* --- project list (relevant experience) -------------------------------- */

.project-list {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 48px;
}
.project-list li {
  break-inside: avoid;
  margin: 0 0 12px;
  padding-left: 26px;
  position: relative;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 14px;
  line-height: 22px;
}
.project-list li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px;
  background: var(--orange);
  transform: rotate(45deg);
}

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  padding-left: 26px; position: relative;
  margin-bottom: 12px; font-weight: 600; color: var(--text-dark);
}
.timeline li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 10px; height: 10px;
  background: var(--orange);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* --- forms ------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 13px; font-weight: 700; color: var(--text-dark);
  margin-bottom: 6px; letter-spacing: .02em;
}
.field input,
.field select,
.field textarea {
  font: 400 14px/22px var(--font-base);
  color: var(--text-dark);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0;
  padding: 11px 13px;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--orange); }

.radio-set { display: flex; flex-direction: column; gap: 8px; }
.radio-set label {
  display: flex; align-items: flex-start; gap: 9px;
  font-weight: 400; font-size: 14px; color: var(--text); margin: 0;
  letter-spacing: 0;
}
.radio-set input { width: auto; margin-top: 4px; }

.req { color: var(--btn); }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 44px;
}
.contact-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 26px;
  text-align: center;
}
.contact-card .hex { margin: 0 auto 14px; }
.contact-card h3 { font-size: 17px; color: var(--gold); margin-bottom: 6px; }
.contact-card a { font-weight: 700; font-size: 15px; word-break: break-word; }

.note {
  background: #fff8ee;
  border-left: 3px solid var(--gold);
  padding: 16px 20px;
  font-size: 14px;
  margin-bottom: 32px;
}

/* --- footer ------------------------------------------------------------ */

.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--rule);
  padding: 56px 0 40px;
  color: var(--text);
}
/* Two columns since the newsletter signup was removed (2026-09-10): brand
   block on the left, nav on the right at roughly its original width. A third
   empty track would have left the footer looking like something was missing. */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 360px);
  gap: 48px;
}
.footer-brand img { width: 260px; margin-bottom: 18px; }
.footer-brand a { display: block; margin-bottom: 5px; font-size: 14px; }

.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin: 0; border-bottom: 1px solid var(--rule); }
.footer-nav a {
  display: block; padding: 9px 0;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--orange);
}
.footer-nav a:hover { color: var(--btn); }
.footer-nav a[aria-current="page"] { color: var(--text-dark); }

.footer-social { display: flex; gap: 9px; margin-top: 18px; }
.footer-social a {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: var(--btn-hover); }
.footer-social svg { width: 15px; height: 15px; fill: currentColor; }

.bottom-bar {
  border-top: 1px solid var(--rule);
  margin-top: 44px; padding-top: 22px;
  font-size: 13px;
}

/* --- responsive -------------------------------------------------------- */

@media (max-width: 990px) {
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 22px rgba(0, 0, 0, .09);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 16px; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--rule); }
  .nav a[aria-current="page"] { border-bottom-color: var(--rule); }

  .intro-grid,
  .post-layout,
  .about-grid { grid-template-columns: 1fr; gap: 36px; }

  .about-grid img { max-width: 260px; }
  .sidebar { position: static; }
  .quote-prev { left: -12px; }
  .quote-next { right: -12px; }
  .quotes { padding: 0 34px; }
}

@media (max-width: 782px) {
  h1 { font-size: 34px; }
  h2 { font-size: 28px; }
  h3 { font-size: 23px; }

  .hero-home { min-height: 400px; }
  .hero-home h1 { font-size: 34px; }
  .hero-page { min-height: 220px; }
  .hero-page h1 { font-size: 32px; }
  .resume-head h1 { font-size: 34px; }

  .section { padding: 52px 0; }
  .feature-grid { grid-template-columns: 1fr; gap: 28px; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .res-list, .project-list { columns: 1; }
  .band { height: 260px; }
  .band-sm { height: 200px; }

  .topbar .wrap { justify-content: center; gap: 14px; }
  .topbar-social { margin-left: 0; width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .brand img { width: 240px; }
  .btn-row .btn { width: 100%; }
}

/* --- print ------------------------------------------------------------- */

@media print {
  .topbar, .site-header, .site-footer, .share, .quote-nav, .quote-dots, .band { display: none; }
  body { background: #fff; color: #000; }
  .hero { min-height: 0; color: #000; padding: 20px 0; background: none; }
  .hero::before { display: none; }
  .hero h1 { color: #000; text-shadow: none; }
  .quote { display: block !important; }
}