/* ============================================
   douglooney.com — base styles
   Simple, clean, no build tools required.
   Edit colors under :root to re-theme the whole site.
   ============================================ */

:root {
  /* Doug Looney brand: black, dark grey, teal (from resume/proposal/Vimeo brand kit) */
  --bg: #10161a;           /* page background — dark grey */
  --surface: #171f23;      /* slightly-lifted dark surface for cards */
  --text: #f4f6f6;
  --text-muted: #a9b7ba;
  --accent: #20a8b2;       /* brand teal */
  --accent-deep: #16707a;  /* deep teal — hovers, pressed states */
  --accent-muted: #1a8a93; /* muted teal — secondary use */
  --accent-soft: #e4f4f5;  /* pale teal — used as a light accent chip against the dark page */
  --border: rgba(255, 255, 255, 0.14);
  --max-width: 960px;
  --radius: 10px;

  /* Fixed dark "ink" colors — for text sitting on light-colored chips (accent-soft, etc.)
     regardless of the overall (now dark) page theme */
  --ink: #0a0a0a;
  --ink-muted: #55585a;

  /* Header stays light — the logo art is black-on-transparent and needs a light backdrop */
  --header-bg: #ffffff;
  --header-text: #0a0a0a;
  --header-text-muted: #55585a;
  --header-border: #e6e6e6;

  /* Deepest-black accent sections — hero + closing CTA, a second darker tone against --bg */
  --dark-bg: #070b0c;
  --dark-text-muted: #9db1b4;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

h1, h2, h3, .nav .brand {
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800; /* Extra Bold, matching the DOUG LOONEY wordmark */
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Header / Nav ---- */

header.site-header {
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.nav .brand {
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--header-text);
  text-decoration: none;
  display: flex;
  align-items: center;
}

.logo-img {
  height: 42px;
  width: auto;
}

.nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 22px;
  margin: 0;
  padding: 0;
}

.nav a {
  color: var(--header-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
}

.nav a.active,
.nav a:hover {
  color: var(--accent);
}

/* ---- Hero ---- */

.hero {
  padding: 64px 0 40px;
}

.hero h1 {
  font-size: 2.1rem;
  line-height: 1.3;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.story-lede {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 22px;
  max-width: 620px;
}

@media (max-width: 600px) {
  .story-lede {
    font-size: 1.2rem;
  }
}

.hero p.lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 0 24px;
}

.hero-flex {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-flex > div:first-child {
  flex: 1 1 380px;
}

.hero-photo {
  position: relative;
  flex: 0 0 auto;
}

.hero-photo img.headshot-img {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--accent);
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .hero-photo img.headshot-img {
    width: 140px;
    height: 140px;
  }
}

/* Unified button style — one look for every button on the site: white/light
   text on a teal outline by default, fills solid teal on rollover. .btn-outline
   and .btn-ghost are kept only so existing markup doesn't need to change; all
   three now render identically. */
.btn,
.btn-outline,
.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--accent);
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover,
.btn-outline:hover,
.btn-ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  text-decoration: none;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* ---- Pull quote / recurring tagline ---- */

.pull-quote {
  font-size: 1.35rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  border-left: 4px solid var(--accent);
  padding: 6px 0 6px 22px;
  margin: 36px 0;
  max-width: 640px;
}

/* ---- Proof strip (3-up stat callouts) ---- */

.proof-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 8px 0;
}

.proof-item {
  display: block;
  padding: 22px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.proof-item:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.proof-item strong {
  color: var(--accent-deep);
}

/* ---- Recognition badges ---- */

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 0;
}

.badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
}

.badge .num {
  color: var(--accent);
  font-weight: 800;
}

/* ---- Service pillar blocks ---- */

.service-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  margin-bottom: 24px;
}

.service-block h2 {
  font-size: 1.35rem;
  margin: 0 0 12px;
}

.service-block ul {
  margin: 16px 0;
  padding-left: 20px;
}

.service-block li {
  margin-bottom: 8px;
}

.service-proof {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

/* ---- Service proof callouts (thumbnail cards linking into Work) ---- */

.service-proof-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 10px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

.proof-callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.proof-callout {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--dark-bg);
}

.proof-callout img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.proof-callout:hover img {
  transform: scale(1.06);
}

.proof-callout .proof-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  color: #fff;
  padding: 30px 12px 10px;
  font-weight: 600;
  font-size: 0.85rem;
}

.proof-callout--large {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9;
}

.proof-callout--large .proof-label {
  font-size: 1rem;
  padding: 44px 18px 16px;
}

.service-proof-text {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 12px;
}

/* ---- Photo figures ---- */

.figure {
  margin: 32px 0;
}

.figure img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.figure figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.banner-figure {
  margin: 40px 0;
}

.banner-figure img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.banner-figure figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.split-block {
  display: flex;
  gap: 32px;
  align-items: center;
  margin: 28px 0;
  flex-wrap: wrap;
}

.split-block p {
  flex: 1 1 380px;
  margin: 0;
}

.split-img {
  flex: 0 0 380px;
  width: 380px;
  height: 285px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

@media (max-width: 700px) {
  .split-img {
    width: 100%;
    height: auto;
    max-height: 320px;
    flex-basis: 100%;
  }
}

.inline-figure {
  margin: 20px 0;
}

.inline-figure img {
  width: 100%;
  max-height: 640px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.inline-figure figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---- Wave motif (decorative graphic — dividers, hero/CTA backgrounds) ---- */
/* images/wave-motif.png — the real brand water-graphic, cropped from Doug's source art */

.wave-motif {
  display: block;
}

/* Large, low-opacity background placement behind a hero or CTA */
.wave-motif--bg {
  position: absolute;
  opacity: 0.14;
  pointer-events: none;
}

/* ---- Hero logo emblem (large, blended loon mark bleeding off the edge) ---- */

.hero-emblem {
  position: absolute;
  top: 0;
  right: -40px;
  height: 100%;
  width: auto;
  max-width: 62%;
  object-fit: contain;
  object-position: right center;
  opacity: 0.6;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 30%, black 65%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 30%, black 65%);
  /* The source PNG includes a stylized waterline/ripple pattern under the
     loon (its own baked-in "pond art") in addition to the bird itself. With
     the real wave-motif graphic now anchored to the "pitch" headline text,
     that baked-in ripple pattern reads as a second, darker duplicate of the
     same pond art lower on the page. Clip it off non-destructively so only
     the bird silhouette shows. */
  -webkit-clip-path: inset(0 0 32% 0);
  clip-path: inset(0 0 32% 0);
}

@media (max-width: 900px) {
  .hero-emblem {
    display: none;
  }
}

/* ---- Home hero wave (large gradient graphic, anchored to the word "pitch") ---- */

/* Anchored directly to the H1 text itself, not to the headshot or the
   viewport — the wave's `left`/`top` are percentages resolved against its
   containing block, which is `.pitch-anchor`: a one-letter inline span
   wrapped around the "c" in "pitch" (see index.html). Because that anchor
   is a normal inline element, it moves exactly where the browser's own text
   reflow puts it at any viewport width or font metrics — no viewport-width
   formula needed, and it can never drift out of alignment with the word the
   way a viewport- or headshot-relative offset could.

   left: 0            → wave's left edge starts exactly at the "c".
   top: 50%            → resolves against .pitch-anchor's own box height
                          (equal to the text line's line-height), so the
                          wave's top edge lands at the vertical middle of
                          the word "pitch" — splitting it top/bottom.
   z-index: -1          → paints behind all normal in-flow content sharing
                          this stacking context (the surrounding H1 text,
                          the CTA buttons below), since .pitch-anchor itself
                          is position:relative with z-index:auto and so does
                          NOT open its own stacking context — the wave's
                          negative z-index bubbles up to the nearest one
                          that does (here, none closer than the page root),
                          landing it below ordinary page content generally. */
.pitch-anchor {
  position: relative;
}

.hero-wave {
  position: absolute;
  left: 0;
  top: 50%;
  width: 480px;
  max-width: none; /* override the global `img { max-width: 100%; }` reset —
                       without this the browser caps the wave to its
                       one-character containing block's tiny width. */
  height: auto;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 900px) {
  .hero-wave {
    width: 360px;
  }
}

@media (max-width: 640px) {
  .hero-wave {
    display: none;
  }
}

/* ---- Dark accent sections (hero + closing CTA) ---- */

.section-dark {
  background: var(--dark-bg);
  color: #ffffff;
}

.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: #ffffff;
}

.section-dark p,
.section-dark .lede,
.section-dark .story-lede {
  color: var(--dark-text-muted);
}

.section-dark .hero-photo img {
  border-color: var(--accent);
}

.hero-dark {
  position: relative;
  overflow: hidden;
  z-index: 0; /* establishes a stacking context here so .hero-wave's
                 z-index:-1 (see "Home hero wave" below) is trapped above
                 this section's own background but below its normal
                 content, instead of bubbling all the way to the page root
                 and disappearing behind the section's background entirely. */
}

.hero-dark .hero-flex {
  position: relative;
}

/* ---- About hero: one large off-center wave graphic, behind the text ---- */

.about-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 110px;
}

.about-hero .hero-flex {
  position: relative;
  z-index: 1;
}

.about-hero-wave {
  position: absolute;
  top: 209px;
  left: calc(50vw - 456px);
  width: 574px;
  max-width: 50vw;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .about-hero-wave {
    left: 24px;
    max-width: 70vw;
    opacity: 0.4;
  }
}

@media (max-width: 600px) {
  .about-hero-wave {
    display: none;
  }
}

/* ---- Services hero: large off-center wave graphic, bleeding to the right edge ---- */

.services-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 200px;
  margin-bottom: -224px;
}

.services-hero-wave {
  position: absolute;
  top: 165px;
  right: -40px;
  width: 760px;
  max-width: 58vw;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.services-hero .wrap {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .services-hero-wave {
    max-width: 78vw;
    opacity: 0.35;
  }
}

@media (max-width: 600px) {
  .services-hero-wave {
    display: none;
  }
}

.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 72px 0;
}

.cta-band .wave-motif--bg {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 680px;
  opacity: 0.1;
}

.cta-band h2 {
  position: relative;
  font-size: 1.9rem;
  margin: 0 0 14px;
}

.cta-band p {
  position: relative;
  max-width: 520px;
  margin: 0 auto 26px;
}

.cta-band .btn {
  position: relative;
}

/* ---- Section breaks (large standalone wave-motif divider) ---- */

.section-break {
  display: flex;
  justify-content: center;
  margin: 12px 0 56px;
}

.section-break .wave-motif {
  width: min(360px, 70%);
  height: auto;
  opacity: 0.9;
}

.section-break--work {
  justify-content: flex-start;
}

.section-break--work .wave-motif {
  width: min(450px, 88%);
}

/* ---- Contact logo block: solid teal panel, logo mark + wave graphic in white ---- */

.contact-logo-block {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: var(--radius);
  padding: 44px 32px;
  margin: 8px 0 48px;
}

.contact-logo-clean {
  width: min(528px, 84%);
  height: auto;
}

/* ---- Showcase callout (link to the full password-protected Vimeo showcase) ---- */

.showcase-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 22px;
}

.showcase-callout h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--ink);
}

.showcase-callout p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.showcase-callout .password-note {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.showcase-callout .password-note code {
  background: #ffffff;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 600;
  color: var(--accent-deep);
}

.showcase-callout .btn {
  flex: 0 0 auto;
}

/* Exception to the unified outline button: on the pale showcase-callout chip,
   an outline button in light text blends into the light background. Solid
   teal fill with white text instead. */
.showcase-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.showcase-btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #ffffff;
}

.services-showcase-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 24px 0 4px;
}

.services-showcase-note a {
  color: var(--accent);
}

.services-showcase-note code {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 600;
  color: var(--accent);
}

/* ---- Video embeds (inline Vimeo player) ---- */

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 20px 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Video thumbnails (case-study links to Vimeo, etc. — kept for potential future use) ---- */

.video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  margin: 20px 0;
  background: var(--dark-bg);
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.video-thumb:hover img {
  transform: scale(1.03);
}

.video-thumb .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease, background 0.15s ease;
}

.video-thumb .play-icon::after {
  content: "";
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--accent-deep);
  margin-left: 4px;
}

.video-thumb:hover .play-icon {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}

.video-thumb .thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.68));
  color: #fff;
  padding: 34px 16px 12px;
  font-weight: 600;
  font-size: 0.92rem;
}

/* Placeholder state — used until a real thumbnail image is dropped in.
   Swap <div class="video-thumb video-thumb--placeholder"> for
   <a class="video-thumb" href="[vimeo link]"><img src="images/[thumb].jpg" ...></a>
   once assets are ready. */
.video-thumb--placeholder {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
}

.video-thumb--placeholder .thumb-note {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Case studies ---- */

.case-study {
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}

.case-study:last-of-type {
  border-bottom: none;
}

.case-study .cs-subtitle {
  color: var(--accent-deep);
  font-weight: 600;
  margin: -8px 0 18px;
}

.stat-callout {
  background: var(--dark-bg);
  color: #fff;
  padding: 22px 26px;
  border-radius: var(--radius);
  margin: 20px 0;
  font-size: 1rem;
  line-height: 1.65;
}

.stat-callout strong {
  color: var(--accent);
}

/* ---- Sections ---- */

main {
  padding: 8px 0 80px;
}

section {
  padding: 40px 0;
}

section h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}

.card h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.card .meta {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.tag {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 6px 6px 0;
}

.placeholder {
  border: 1px dashed var(--border);
  background: #fffceb;
  color: #8a6d1a;
  font-size: 0.85rem;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* ---- Footer ---- */

footer.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.social a {
  margin-left: 16px;
}

.social a:first-child {
  margin-left: 0;
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 1.6rem;
  }
  .nav ul {
    gap: 12px 16px;
  }
}

/* ---- Resume page: dedicated black-background / white-text treatment,
   rule lines in brand teal — distinct from the rest of the site's dark-grey
   body, per Doug's request. ---- */

.resume-main {
  background: var(--dark-bg);
  color: #ffffff;
  padding: 56px 0 88px;
}

.resume-header {
  padding-bottom: 28px;
  margin-bottom: 40px;
  border-bottom: 2px solid var(--accent);
}

.resume-header h1 {
  font-size: 2.3rem;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.resume-title {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}

.resume-contact {
  color: var(--dark-text-muted);
  font-size: 0.95rem;
  margin: 0 0 24px;
}

.resume-contact a {
  color: var(--dark-text-muted);
}

.resume-contact a:hover {
  color: var(--accent);
}

.resume-section {
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.resume-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.resume-section h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin: 0 0 22px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
}

.resume-summary {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #ffffff;
  max-width: 760px;
  margin: 0;
}

.resume-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.resume-tags span {
  border: 1.5px solid var(--accent);
  color: #ffffff;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.resume-employer {
  margin-bottom: 36px;
}

.resume-employer:last-child {
  margin-bottom: 0;
}

.resume-employer-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 16px;
}

.resume-company {
  font-weight: 800;
  font-size: 1.08rem;
  color: #ffffff;
}

.resume-location {
  color: var(--dark-text-muted);
  font-size: 0.92rem;
}

.resume-role {
  margin: 0 0 24px;
  padding-left: 18px;
  border-left: 2px solid var(--accent);
}

.resume-role:last-child {
  margin-bottom: 0;
}

.resume-role-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 10px;
}

.resume-role-title {
  font-weight: 700;
  color: #ffffff;
}

.resume-dates {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.resume-role ul {
  margin: 0;
  padding-left: 20px;
  color: var(--dark-text-muted);
}

.resume-role li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.resume-tools {
  display: grid;
  gap: 12px;
  color: var(--dark-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.resume-tools strong {
  color: #ffffff;
}

.resume-badges.badge-row {
  margin-top: 0;
}

.resume-badges .badge {
  background: rgba(255, 255, 255, 0.05);
}

.resume-plain {
  color: var(--dark-text-muted);
  font-size: 0.98rem;
  margin: 0;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .resume-employer-head,
  .resume-role-head {
    flex-direction: column;
  }
}