/* ===== Design tokens (from Figma Job-Hunt-Materials file) ===== */
:root {
  --color-bg: #fffdfb;
  --color-nav-bg: #f0f1f2;
  --color-text: #000000;
  --color-green: #019c63;
  --color-blue: #346eb3;
  --color-grey: #939393;
  --color-connect-label: #e03c12;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --nav-height: 64px;
  --content-max: 1800px;
  --gutter: 24px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ===== Top Nav ===== */
.top-nav {
  background: var(--color-nav-bg);
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-height);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
}

/* Constrained/centered the same way .page-body is, so the nav's content
   lines up with the page grid instead of being pinned to the raw viewport
   edge with its own arbitrary padding. */
.top-nav__inner {
  max-width: var(--content-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
}

.top-nav__left {
  display: flex;
  align-items: center;
  gap: 133px;
}

.top-nav__name {
  flex: 0 0 auto;
  width: 219px;
  color: var(--color-text);
}

.top-nav__tagline {
  color: var(--color-green);
}

/* Pinned to the grid: Work sits in column 10, About in column 11 of the
   12-column layout, with column 12 left empty as trailing whitespace
   (percentages resolve against .top-nav__inner's content box, which is
   the same content-max minus gutter basis used across the site). */
.top-nav__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 16.6667%;
  margin-left: auto;
  margin-right: 8.3333%;
  color: var(--color-text);
}

.top-nav__links a[aria-current="page"] {
  color: var(--color-green);
}

/* ===== Page shell ===== */
.page-body {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 128px;
  padding-top: 128px;
  padding-bottom: 64px;
}

/* ===== Expressive Rows (label + big statement) ===== */
.row {
  padding: 0 var(--gutter);
}

.row__rule {
  border: none;
  border-top: 1px solid #d9d9d9;
  margin: 0 0 8px 0;
}

.row__inner {
  display: flex;
  align-items: flex-start;
  gap: 133px;
}

.row__label {
  flex: 0 0 auto;
  width: 219px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-blue);
}

.row__statement {
  flex: 1 1 auto;
  padding-right: 235px;
  font-weight: 400;
  font-size: 48px;
  line-height: 72px;
  color: var(--color-green);
  margin: 0;
}

.row__statement--link {
  color: var(--color-grey);
  cursor: pointer;
  transition: color 0.15s ease;
}

.row__statement--link:hover {
  color: var(--color-text);
}

/* ===== My Work grid ===== */
.work {
  padding: 0 var(--gutter);
}

.work__inner {
  display: flex;
  align-items: flex-start;
  gap: 133px;
}

.work__label {
  flex: 0 0 auto;
  width: 219px;
  padding-top: 8px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-blue);
}

/* Spans 8 of the 12 columns with 1 column of space to its right, scaling
   with --content-max instead of being capped at a fixed pixel width
   (percentages resolve against .work__inner's content box, same basis
   as the rest of the grid). */
.work-grid {
  flex: 0 0 auto;
  width: 66.6667%;
  margin-right: 8.3333%;
  padding-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 16px;
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
}

.work-card__image {
  width: 100%;
  aspect-ratio: 453 / 282;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(135deg, #cfe9e3, #e7e3cf);
}

.work-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.15s ease;
}

.work-card:hover .work-card__image img {
  opacity: 0.85;
}

.work-card__title {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  margin: 0 0 8px 0;
}

.work-card__desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  margin: 0;
  max-width: 336px;
}

/* ===== Footer ===== */
.footer {
  padding: 0 var(--gutter);
}

/* Left aligned with the nav tagline, row statements, and the About CTA
   link text - all of which sit 352px in (the same label-width + gap
   offset used by .cs-meta-row), not with the row labels themselves. */
.footer__inner {
  display: flex;
  padding-left: 352px;
}

.footer__label {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-connect-label);
  margin: 0 0 8px 0;
}

.footer__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  margin: 0;
}

/* ===== About page ===== */
.about-intro {
  padding: 0 var(--gutter);
  display: flex;
  align-items: flex-end;
  gap: 251px;
}

.about-intro__photo {
  flex: 0 0 auto;
  width: 453px;
  height: 453px;
  border-radius: 4px;
  overflow: hidden;
  background: #e2e2e2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-grey);
  font-size: 14px;
  text-align: center;
  padding: 16px;
}

.about-intro__photo img,
.about-intro__photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-intro__statement {
  flex: 1 1 auto;
  max-width: 571px;
  font-weight: 400;
  font-size: 28px;
  line-height: 42px;
  color: var(--color-text);
  margin: 0;
}

.about-columns {
  display: flex;
  gap: 16px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.about-col {
  flex: 1 1 300px;
  max-width: 337px;
}

.about-col h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 16px 0;
}

.about-col h3 .about-col__date {
  font-weight: 400;
  color: var(--color-text);
}

.about-col h3.about-col__title--accent {
  color: var(--color-green);
}

.about-col p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  margin: 0;
}

.about-contact p {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 8px 0;
}

.about-contact a:hover {
  color: var(--color-blue);
}

@media (max-width: 960px) {
  .about-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .about-intro__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .about-columns {
    flex-direction: column;
  }
  .about-col {
    max-width: 100%;
    flex-basis: auto;
  }
}

/* ===== Case study template (shared by all 4 project pages) ===== */
.cs-intro {
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.cs-intro__tagline {
  /* 5 of the site's 12 grid columns, offset by the preceding 6 columns.
     Percentage-based (not a fixed 704px offset) so it keeps its grid
     proportion instead of overflowing/wrapping at widths between the
     mobile breakpoint and the full content width. */
  margin: 0 0 0 50%;
  width: 41.6667%;
  font-weight: 400;
  font-size: 28px;
  line-height: 42px;
  color: var(--color-green);
}

.cs-hero {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: #eef0ef;
}

.cs-hero img {
  width: 100%;
  display: block;
}

.cs-meta-row {
  display: flex;
  gap: 133px;
  padding-left: 352px;
  align-items: flex-start;
}

.cs-meta {
  flex: 0 0 auto;
  width: 217px;
  font-size: 16px;
  line-height: 24px;
}

.cs-meta dt {
  font-weight: 600;
  color: var(--color-green);
  margin-top: 8px;
}

.cs-meta dt:first-child {
  margin-top: 0;
}

.cs-meta dd {
  margin: 0 0 8px 0;
  color: var(--color-text);
}

.cs-body {
  flex: 1 1 auto;
  max-width: 571px;
  font-weight: 400;
  font-size: 28px;
  line-height: 42px;
  color: var(--color-text);
}

.cs-body p {
  margin: 0 0 8px 0;
}

.cs-framing {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.cs-framing__image-wrap {
  flex: 0 0 auto;
  width: 688px;
  max-width: 100%;
}

.cs-framing__image-wrap figcaption {
  font-weight: 600;
  font-size: 14px;
  color: #7a7a7a;
  margin-top: 16px;
}

.cs-framing__text {
  flex: 0 0 auto;
  width: 335px;
  font-size: 16px;
  line-height: 24px;
}

.cs-framing__text p {
  margin: 0 0 8px 0;
}

.cs-section {
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cs-section-heading {
  /* Same 5-of-12-column grid proportion as .cs-intro__tagline. */
  margin-left: 50%;
  width: 41.6667%;
}

.cs-section-heading h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 32px;
  line-height: 48px;
  margin: 0 0 8px 0;
}

.cs-section-heading--green h2 { color: var(--color-green); }
.cs-section-heading--red h2 { color: #e03c12; }
.cs-section-heading--blue h2 { color: var(--color-blue); }

.cs-section-heading p {
  font-weight: 400;
  font-size: 28px;
  line-height: 42px;
  color: var(--color-text);
  margin: 0;
}

.cs-two-col {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.cs-two-col--reverse {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.cs-two-col__text {
  flex: 0 0 auto;
  width: 336px;
  font-size: 16px;
  line-height: 24px;
}

.cs-two-col__text h3 {
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 8px 0;
}

.cs-two-col__text p {
  font-weight: 400;
  margin: 0 0 8px 0;
}

.cs-two-col__media {
  flex: 1 1 auto;
  min-width: 0;
}

.cs-two-col__media img {
  width: 100%;
  display: block;
  border-radius: 4px;
}

/* Quarter-grid layout: a 25% spacer used to push text/media blocks to specific
   fractions of the page width when the default two-col split doesn't fit. */
.cs-quarter-spacer {
  flex: 0 0 25%;
}

.cs-two-col--quarters {
  gap: 0;
}

.cs-two-col--quarters > .cs-two-col__text {
  flex: 0 0 25%;
  width: auto;
}

.cs-two-col--quarters > .cs-two-col__media {
  flex: 0 0 50%;
  width: auto;
}

/* text 1/4, media 3/4 (no spacer) */
.cs-two-col--1-3 {
  gap: 0;
}

.cs-two-col--1-3 > .cs-two-col__text {
  flex: 0 0 25%;
  width: auto;
}

.cs-two-col--1-3 > .cs-two-col__media {
  flex: 0 0 75%;
}

/* media 1/2, spacer 1/4, text 1/4 */
.cs-two-col--half-quarters {
  gap: 0;
}

.cs-two-col--half-quarters > .cs-two-col__media {
  flex: 0 0 50%;
}

.cs-two-col--half-quarters > .cs-two-col__text {
  flex: 0 0 25%;
  width: auto;
}

/* media 1/2, spacer 1/6, text 1/4, spacer 1/12 (cybersecurity cover row) */
.cs-spacer-1-6 {
  flex: 0 0 16.6667%;
}

.cs-spacer-1-12 {
  flex: 0 0 8.3333%;
}

.cs-two-col--cyber-cover {
  gap: 0;
}

.cs-two-col--cyber-cover > .cs-two-col__media {
  flex: 0 0 50%;
}

.cs-two-col--cyber-cover > .cs-two-col__text {
  flex: 0 0 25%;
  width: auto;
}

/* single media block at 1/3 width, left-aligned */
.cs-two-col--third {
  gap: 0;
}

.cs-two-col--third > .cs-two-col__media {
  flex: 0 0 33.333%;
}

.cs-fullbleed {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: #eef0ef;
}

.cs-fullbleed img {
  width: 100%;
  display: block;
}

.cs-fullbleed--dark {
  background: #0d0d0d;
}

/* generic placeholder look while real exports aren't wired in yet */
.cs-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-grey);
  font-size: 14px;
  text-align: center;
  padding: 24px;
  min-height: 200px;
  background: repeating-linear-gradient(135deg, #f0f1f2, #f0f1f2 10px, #e7e8e9 10px, #e7e8e9 20px);
}

@media (max-width: 960px) {
  .cs-intro__tagline,
  .cs-section-heading {
    margin-left: 0;
    width: 100%;
  }
  .cs-meta-row {
    padding-left: 0;
    flex-direction: column;
    gap: 16px;
  }
  .cs-body {
    max-width: 100%;
  }
  .cs-framing,
  .cs-two-col,
  .cs-two-col--reverse {
    flex-direction: column;
  }
  .cs-framing__image-wrap,
  .cs-two-col__text {
    width: 100%;
  }
  .cs-quarter-spacer,
  .cs-spacer-1-6,
  .cs-spacer-1-12 {
    display: none;
  }
  /* Any two-col row using a fractional-width modifier (quarters, brand-grid,
     color-a11y, etc.) must reset both children back to natural stacked
     sizing on mobile — a leftover flex-basis percentage applies to HEIGHT
     once flex-direction switches to column, not width, which silently
     reserves dead vertical space. */
  [class*="cs-two-col--"] > .cs-two-col__text,
  [class*="cs-two-col--"] > .cs-two-col__media {
    flex: 0 0 auto;
    width: 100%;
  }
  /* Rows set a large inline gap (e.g. gap:368px) to space text and media
     apart at desktop widths. Inline styles win on specificity even inside
     this media query, so override with !important once columns stack. */
  .cs-two-col,
  .cs-two-col--reverse {
    gap: 32px !important;
  }
  /* A row-level side-by-side image pair (not built from cs-two-col__media)
     needs its own stacking rule on mobile. */
  .cs-stack-mobile {
    flex-direction: column !important;
  }
  .cs-stack-mobile img {
    width: 100% !important;
  }
  /* Lets a specific row put its image above its copy on mobile only,
     without changing DOM order or the desktop layout. */
  .cs-media-first-mobile {
    order: -1;
  }
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .top-nav {
    height: auto;
  }
  .top-nav__inner {
    padding: 16px var(--gutter);
    gap: 16px;
  }
  .top-nav__left {
    gap: 24px;
  }
  .top-nav__name {
    width: auto;
  }
  .top-nav__tagline {
    display: none;
  }
  .top-nav__links {
    display: flex;
    align-items: center;
    width: auto;
    margin-left: auto;
    margin-right: 0;
    gap: 16px;
  }
  .row__inner,
  .work__inner {
    flex-direction: column;
    gap: 16px;
  }
  .row__statement,
  .work-grid {
    padding-right: 0;
    max-width: 100%;
  }
  .row__statement {
    font-size: 32px;
    line-height: 44px;
  }
  .work-grid {
    width: 100%;
    margin-right: 0;
    grid-template-columns: 1fr;
  }
  .footer__inner {
    padding: 0;
  }
  .page-body {
    padding-top: 64px;
    gap: 64px;
  }
}