/* =========================================================
   SAFAA QAZI — PORTFOLIO
   Design language taken from the PDF portfolio deck:
   cream + oxblood maroon + navy, Rammetto One display type,
   pill tags, muted rose product blocks, alternating dark
   "details" sections. Interaction patterns (underline nav
   hover, hover-reveal project tiles, rotating tagline,
   scroll reveal) inspired by judychourbaji.com / ameliabryant.me.
   ========================================================= */

:root {
  --max-width: 1160px;
  --side-margin: 64px;

  --body: 10.5pt;
  --body-line: 13pt;

  --h1: 30pt;
  --h1-line: 34pt;

  --h2: 17pt;
  --h2-line: 21pt;

  --h3: 12pt;
  --h3-line: 16pt;

  /* palette — sampled directly from the PDF */
  --cream: #F2EFEB;
  --cream-soft: #FAF8F5;
  --navy: #142840;
  --red: #4E0000;
  --red-deep: #300000;
  --rose: #9F7877;
  --slate: #57606B;
  --grey-mid: #B4B4B5;
  --grey-light: #D7DADE;
  --ink-soft: #5B5F66;

  --font-display: "Rammetto One", "Baloo 2", cursive;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--body-line);
  color: var(--navy);
}

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

/* GRID SYSTEM */

.page-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 88px var(--side-margin);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.col-span-12 { grid-column: span 12; }
.col-span-8  { grid-column: span 8; }
.col-span-6  { grid-column: span 6; }
.col-span-4  { grid-column: span 4; }
.col-span-3  { grid-column: span 3; }

/* HEADINGS */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.2px;
}

h1 {
  font-size: var(--h1);
  line-height: var(--h1-line);
  color: var(--red);
  margin: 0 0 16px;
}

h2 {
  font-size: var(--h2);
  line-height: var(--h2-line);
  color: var(--navy);
  margin: 0 0 14px;
}

h3 {
  font-size: var(--h3);
  line-height: var(--h3-line);
  color: var(--navy);
  margin: 0 0 8px;
}

p {
  color: var(--navy);
  margin: 0 0 14px;
}

a { color: inherit; }

/* NAVIGATION */

nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(242, 239, 235, 0.92);
  backdrop-filter: blur(6px);
  z-index: 100;
  transition: box-shadow 0.3s ease;
}

nav.scrolled {
  box-shadow: 0 2px 16px rgba(20, 40, 64, 0.08);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px var(--side-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--red);
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  padding: 4px;
}

.nav-links a {
  position: relative;
  margin-left: 20px;
  text-decoration: none;
  color: var(--navy);
  font-size: 14px;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--red);
}

.nav-links a:hover::after {
  width: 100%;
}

/* PILLS (skill tags) */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 20px;
}

.pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(20, 40, 64, 0.25);
  background: var(--cream-soft);
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}


/* META LINE (small caps caption) */

.meta-line {
  font-size: 11.5px;
  letter-spacing: 0.4px;
  color: var(--navy);
  line-height: 1.8;
  margin-top: 18px;
}

/* DIVIDER */

.divider {
  width: 100%;
  max-width: 640px;
  height: 1px;
  background: rgba(20, 40, 64, 0.18);
  margin: 20px auto 0;
}

/* ============ SCROLL REVEAL ============ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ HOME HERO ============ */

.home-hero {
  padding: 150px var(--side-margin) 60px;
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.home-hero .hero-copy {
  max-width: 720px;
  margin: 0 auto;
}

.home-hero h1 {
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.05;
  margin-bottom: 6px;
}

.tagline-rotate {
  height: 34px;
  overflow: hidden;
  position: relative;
  margin-bottom: 18px;
}

.tagline-rotate span {
  position: absolute;
  left: 50%;
  top: 0;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--rose);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tagline-rotate span.active {
  opacity: 1;
  transform: translate(-50%, 0);
}

.home-hero .hero-copy p {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.home-hero .pill-row,
.home-hero .contact-row {
  justify-content: center;
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 22px;
}

.contact-row a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--navy);
  font-size: 13.5px;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-row a:hover {
  color: var(--red);
  border-color: var(--red);
}

.linkedin-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: currentColor;
}

/* ============ WORK GRID ============ */

.work-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px var(--side-margin) 100px;
}

.work-section h2.display-lg {
  font-size: 30px;
  color: var(--red);
  text-align: center;
  margin-bottom: 40px;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.project-tile {
  text-decoration: none;
  color: inherit;
  display: block;
}

.tile-image {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 4 / 3;
  background: var(--rose);
}

.tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.project-tile:hover .tile-image img {
  transform: scale(1.08);
}

.tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(180deg, rgba(20,40,64,0) 40%, rgba(20,40,64,0.82) 100%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.project-tile:hover .tile-overlay {
  opacity: 1;
  transform: translateY(0);
}

.tile-overlay h3 {
  margin: 0;
  font-size: 16px;
  color: var(--cream);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tile-overlay h3::after {
  content: '↗';
  font-family: var(--font-body);
  font-size: 14px;
  opacity: 0.8;
}

.tile-overlay p {
  margin: 4px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.3px;
  color: var(--cream);
  opacity: 0.85;
}

/* "More to Come" teaser tile — no destination, so no hover-to-navigate
   affordance; the message is shown by default instead of on hover. */
.project-tile.coming-soon {
  cursor: default;
}

.project-tile.coming-soon .tile-overlay {
  opacity: 1;
  transform: translateY(0);
  background: linear-gradient(180deg, rgba(20, 40, 64, 0.1) 0%, rgba(20, 40, 64, 0.78) 100%);
}

.project-tile.coming-soon .tile-overlay h3::after {
  content: '';
}

/* ============ CTA / CONTACT DARK BAND ============ */

.cta-dark {
  background: linear-gradient(160deg, var(--red-deep), var(--red) 70%);
  color: var(--cream);
  text-align: center;
  padding: 90px var(--side-margin);
}

.cta-dark h2 {
  color: var(--cream);
  font-size: 32px;
}

.cta-dark p {
  color: rgba(242,239,235,0.85);
  max-width: 480px;
  margin: 0 auto 22px;
}

.cta-dark .contact-row {
  justify-content: center;
}

.cta-dark .contact-row a {
  color: var(--cream);
}

.cta-dark .contact-row a:hover {
  color: #fff;
  border-color: var(--cream);
}

/* FOOTER */

footer {
  border-top: 1px solid rgba(20,40,64,0.15);
  padding: 24px var(--side-margin);
  background: var(--cream);
  color: var(--navy);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.footer-links a {
  margin-left: 16px;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--red);
}

/* =========================================================
   PROJECT PAGES
   ========================================================= */

.project-page .page-grid,
.project-page .page-grid-balanced {
  padding-top: 48px;
  padding-bottom: 48px;
}

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

/* background-size:100% (not cover) means the image always renders at
   exactly the box's full width with zero horizontal cropping — the box's
   height is driven by the text content and varies per page, but that no
   longer changes the image's zoom level the way cover did. Any leftover
   box height below the image (on taller-text pages) just shows the page
   background, anchored from the top so the title always sits on the
   image. */
.project-hero-bg {
  width: 100%;
  position: relative;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  /* The box's width scales with the full viewport (edge-to-edge), but its
     height was previously driven only by the text content, which doesn't
     grow at the same rate — so on wide screens the image (scaling up with
     width) needed more height than the box gave it and got clipped at the
     bottom, looking "zoomed in". min-height via aspect-ratio guarantees
     the box is never shorter than the image needs at ANY viewport width;
     on pages with enough text it still grows taller than this to fit
     content, same as before. All hero images are 2700 x 1503. */
  min-height: calc(100vw * 1503 / 2700);
}

.autopipette-page .project-hero-bg {
  background-image: url('assets/autopipette_hero.png');
}

.colourpulse-page .project-hero-bg {
  background-image: url('assets/colourpulse_hero.png');
}

.cultureclub-page .project-hero-bg {
  background-image: url('assets/cultureclub_hero.png');
}

.thermofluids-page .project-hero-bg {
  background-image: url('assets/thermofluids_hero.png');
}

.fea-page .project-hero-bg {
  background-image: url('assets/fea_hero.png');
}

/* SUBMISSION LINKS — a full-width grid row directly below the hero-copy
   column (same vertical gap below the meta-line/Key Contribution as
   before), centered across the whole hero rather than confined to the
   text column, not boxed up like the skill pills. */
.hero-submissions {
  grid-column: 1 / -1;
  margin-top: -40px;
  text-align: left;
}

.hero-submissions .label {
  display: flex;
  align-items: left;
  justify-content: left;
  gap: 6px;
  margin: 0 0 13px;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--navy);
}

.hero-submissions .links {
  margin-top: -10px;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.hero-submissions a {
  color: var(--navy);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(20, 40, 64, 0.35);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.hero-submissions a:hover {
  color: var(--red);
  text-decoration-color: var(--red);
}

.project-hero-split {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 150px var(--side-margin) 64px;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 56px;
  align-items: start;
}

.project-hero-split .hero-copy h1 {
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.02;
  white-space: nowrap;
}

.project-hero-split .aim-solution {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-hero-split .aim-solution h3 {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.project-hero-split .aim-solution p {
  font-size: 13.5px;
  max-width: 480px;
}

.hero-visual {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: var(--rose);
  min-height: 420px;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* ---- hero video: full-bleed, between the hero image and the process section ---- */

.hero-video-section {
  width: 100%;
  background: #000;
  line-height: 0;
}

.hero-video-section video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ---- process ---- */

.process-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px var(--side-margin) 80px;
}

.process-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.process-intro h2 {
  color: var(--red);
  font-size: 26px;
}

.process-intro p {
  font-size: 13.5px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin-top: 44px;
}

.process-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  margin-bottom: 16px;
}

.process-card h3 {
  font-size: 14px;
}

.process-card p {
  font-size: 12.5px;
}

/* ---- details (dark) ---- */

.details-dark {
  background: linear-gradient(155deg, var(--red-deep), var(--red) 75%);
  color: var(--cream);
  position: relative;
}

/* fixed background: the image stays put in the viewport while the page
   content scrolls over it, like judychourbaji.com's hero. background-size
   uses vw units (not %/cover) because for fixed attachment, sizing is
   resolved against the viewport, not this element — vw sidesteps that
   ambiguity. The container's aspect-ratio (set per project below) matches
   each image's real file dimensions, so it displays edge-to-edge. */
.details-inner {
  position: relative;
  width: 100%;
  background-size: 100vw auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center;
}

.colourpulse-page .details-inner {
  background-image: url('assets/colourpulse_details_wide.png');
  aspect-ratio: 5143 / 2181;
}

.autopipette-page .details-inner {
  background-image: url('assets/autopipette_bottom.png');
  aspect-ratio: 5143 / 2181;
}

.details-copy {
  --details-pad-top: clamp(48px, 30vw - 240px, 110px);
  position: absolute;
  top: 0;
  left: max(0px, calc((100% - var(--max-width)) / 2));
  height: 100%;
  width: 44%;
  padding: 48px var(--side-margin);
  padding-top: var(--details-pad-top);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 2;
}

.details-copy-light {
  left: auto;
  right: max(0px, calc((100% - var(--max-width)) / 2));
  color: var(--navy);
  /* offsets "Flat-Pack Packaging" down so it lines up with "TFT Display"
     (the first list item), not with "The Details" heading above it */
  padding-top: calc(var(--details-pad-top) + 60px);
}

.details-copy-light h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14.5px;
  color: var(--navy);
  margin: 0 0 4px;
}

.details-copy-light h4:not(:first-child) {
  margin-top: 22px;
}

.details-copy-light p { color: var(--navy); font-size: 13px; }

.details-inner h2 {
  color: var(--cream);
  font-size: 28px;
  margin-bottom: 8px;
}

.details-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.details-list h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14.5px;
  color: var(--cream);
  margin: 0 0 4px;
}

.details-list p {
  font-size: 12.5px;
  color: rgba(242,239,235,0.78);
  margin: 0 0 20px;
}

/* RESULTS (dark, text-only) — a plain gradient section for data-forward
   summaries with no image, e.g. a results comparison. */
.results-dark {
  background: linear-gradient(155deg, var(--red-deep), var(--red) 75%);
  color: var(--cream);
  padding: 72px var(--side-margin);
}

.results-inner {
  max-width: 680px;
  margin: 0 auto;
}

.results-inner h2 {
  color: var(--cream);
  font-size: 28px;
  margin-bottom: 28px;
}

.results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.results-list h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--cream);
  margin: 0 0 4px;
}

.results-list p {
  font-size: 13px;
  color: rgba(242, 239, 235, 0.8);
  margin: 0;
}

/* split details (autopipette: dark panel + light panel) */

.details-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.details-split .details-dark {
  padding: 0;
}

.details-split .panel {
  padding: 80px 48px;
}

.details-split .panel.light {
  background: var(--cream-soft);
  color: var(--navy);
}

.details-split .panel.light h2 { color: var(--red); }
.details-split .panel.light p { color: var(--navy); }

.details-split .panel img {
  border-radius: 0;
  margin-top: 24px;
}

/* =========================================================
   PLACEHOLDER PROJECT PAGES (project3–6)
   ========================================================= */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 150px var(--side-margin) 40px;
}

.project-header h1 {
  font-size: 42px;
}

.project-header p {
  font-size: 14px;
}

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

.section img {
  border-radius: 0;
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* About hero — photo + title/text are pinned to the viewport (position:
   fixed) while page-grid-balanced, which is pushed down to clear it and
   given an opaque background, scrolls up over the top of it. about-me.png
   is 2937 x 1359. */
.about-hero-bg {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  background-image: url('assets/about-me.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  min-height: calc(100vw * 1359 / 2937);
}

.about-hero-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 150px var(--side-margin) 48px;
}

.about-hero-content h1 {
  font-size: clamp(32px, 4.6vw, 48px);
}

.about-hero-content .about-tagline {
  margin-bottom: 24px;
}

.about-hero-content p {
  max-width: 45%;
}

.page-grid-balanced {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--cream);
  margin-top: calc(100vw * 1359 / 2937);
}

.page-grid-balanced-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px var(--side-margin) 96px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}

.about-page footer {
  position: relative;
  z-index: 1;
}

.page-grid-balanced-inner .col-span-12 { grid-column: span 12; }
.page-grid-balanced-inner .col-span-8  { grid-column: span 8; }
.page-grid-balanced-inner .col-span-6  { grid-column: span 6; }
.page-grid-balanced-inner .col-span-4  { grid-column: span 4; }

.bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bullet-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(20,40,64,0.12);
  font-size: 13.5px;
  color: var(--navy);
}

/* Amelia-style "label / description" info grid for About sections */

.about-block {
  margin-top: 56px;
}

.about-block h2 {
  color: var(--red);
  font-size: 22px;
  margin-bottom: 4px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  row-gap: 22px;
  align-items: start;
  margin-top: 28px;
}

.info-grid .label {
  text-align: right;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--navy);
}

.info-grid .label span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--navy);
  margin-top: 4px;
}

.info-grid .desc {
  text-align: left;
  color: var(--navy);
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 700px) {
  .info-grid {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .info-grid .label {
    text-align: left;
  }
  .info-grid .desc {
    margin-bottom: 12px;
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  :root {
    --side-margin: 28px;
  }

  .home-hero,
  .project-hero-split {
    grid-template-columns: 1fr;
  }

  .details-inner {
    position: static;
    flex-direction: column;
    min-height: 0;
    background-attachment: scroll;
  }

  .about-hero-bg {
    position: static;
  }

  .page-grid-balanced {
    margin-top: 0;
  }

  .details-copy,
  .details-copy-light {
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    height: auto;
    padding: 20px 16px;
  }

  .details-copy h2 {
    font-size: 20px;
  }

  .details-list {
    gap: 12px;
    margin-top: 12px;
  }

  .details-list h4 {
    font-size: 12px;
  }

  .details-list p {
    font-size: 10.5px;
  }

  .home-hero {
    padding-top: 140px;
  }

  .project-hero-split {
    padding-top: 130px;
  }

  .hero-visual {
    min-height: 320px;
  }

  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-grid,
  .page-grid-balanced-inner {
    grid-template-columns: repeat(6, 1fr);
  }

  .col-span-8, .col-span-6, .col-span-4, .col-span-3 {
    grid-column: span 6;
  }
}

@media (max-width: 560px) {
  .work-grid {
    grid-template-columns: 1fr;
  }

  .nav-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--cream);
    padding: 12px var(--side-margin) 22px;
    box-shadow: 0 12px 20px rgba(20, 40, 64, 0.1);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    margin-left: 0;
    padding: 8px 0;
    width: 100%;
  }
}