/* =======================================================
   Tokens
   ======================================================= */
   :root {
    --dark-grit: #2F2828;
    --dark-grit-2: #3A3232;
    --card: #2F2828;
    --card-2: #2F2828;
    --line: #2F2828;
    --text: #FBFFF0;
    --text-dim: #C9C0BB;
    --accent: #DCFFB0;       /* lime */
    --accent-2: #DCFFB0;
    --cream: #FBFFF0;
    --white: #FBFFF0;
    --shadow: 0 6px 18px rgba(0,0,0,.35);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --max-w: 1440px;

    --font-display: "Arvo", Georgia, serif;
    --font-body: "Niveau Grotesk", "Space Grotesk", system-ui, sans-serif;
    --type-section: 26px;
    --type-hero-title: 22px;
    --type-card-title: 20px;
    --type-edit: 18px;
    --type-edit-small: 16px;
    --type-body: 16px;
    --type-button: 16px;
    --type-small: 12px;
    --tracking-normal: .02em;
    --tracking-ui: .08em;
    --tracking-meta: .1em;
    }
  
  /* =======================================================
     Base
     ======================================================= */

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: var(--font-body);
    font-size: var(--type-body);
    color: var(--text);
    background: var(--dark-grit);
    line-height: 1.5;
    letter-spacing: var(--tracking-normal);
    min-width: 1280px;
  }

    h1, h2, h3, h4, p {

      margin: 0;
    
  }

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

  button { 
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
  }

  .section-title {

    color: var(--cream);

    font-family: var(--font-display);
  
    font-size: var(--type-section);
  
    font-weight: 500;
  
    letter-spacing: var(--tracking-normal);
  
    margin-bottom: 36px;
    
  }
  
  .rcard h3,
  .pcard h3 {
    margin-bottom: 18px;
    font-family: var(--font-body);
    font-size: var(--type-card-title);
    font-weight: 500;
    letter-spacing: var(--tracking-normal);
  }
  
  .hero p.lead, .skills-list li, .exp-item .meta, .edu-item .meta, 
  .reference-contact-card div, .info-row, .form-field label, .form-field input, .form-field textarea {
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: 1.5;
  
  }
  
  .btn,
  
  nav.main-nav a,
  
  .scroll-top {
  
    font-family: var(--font-body);
  
    font-size: var(--type-button);
  
    font-weight: 500;
  
    letter-spacing: var(--tracking-ui);
  
  }

  /* Grunge / paper texture overlay used on section backgrounds */

  .grit {
    position: relative;
    background-color: var(--dark-grit);
    background-image:
      radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      radial-gradient(rgba(0,0,0,0.25) 1px, transparent 1px),
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,255,255,.02));
    background-size: 3px 3px, 5px 5px, 100% 100%;
    background-position: 0 0, 1px 2px, 0 0;
  }

  .grit::before {
    content: "";
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
      repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px);
    pointer-events: none;
    mix-blend-mode: overlay;
  }

  .grit > * { position: relative; }
  
  /* Subtle paper-grid for hero band */

  .paper {
    background-color: #D9D2C7;
    background-image:
      linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px),
      radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
    background-size: 22px 22px, 22px 22px, 3px 3px;
  }
  
  .wrap {   
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 120px;
  }
  
  /* =======================================================
     Top nav (paper band)
     ======================================================= */

  .topbar {
    width: 100%;
    background-color: #2F2828;
    height: 80px;
    display: flex;
    align-items: center;  
    }

  .topbar .row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FBFFF0;
    font-family: "Arvo", serif;
    font-weight: 700;
    font-size: var(--type-edit);
  }

  nav.main-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 8px;
  }

  nav.main-nav li {
    width: 120px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  nav.main-nav a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #FBFFF0;
    font-size: var(--type-button);
    font-weight: 500;
    letter-spacing: .08em;
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      transform 0.15s ease;
  }

  nav.main-nav a:hover {
    background-color: #DCFFB0;
    color: #2F2828;
    font-weight: 550;
    transform: translateY(-1px);
  }
  
  /* =======================================================
     Hero
     ======================================================= */

    .hero {
      padding: 60px 0 100px;

      position: relative;
    
      overflow: hidden;

      background-image: url("imgs/darkgridpaper.png");
    
      background-size: cover;
    
      background-position: center;
    
      background-repeat: no-repeat;
    
    }

    .hero .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 96px;
      position: relative;
    }

    .hero-copy {
      width: 700px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 0px;
    }

    .hero-copy img.signature-img {
      width: 300px !important;
      height: auto !important;
      display: block !important;
      margin-bottom: 0px;
    }

    .hero h1 {
      font-size: var(--type-hero-title);
      color: #2F2828;
      margin: 0;
    }

    .hero p.lead {
      width: 645px;
      max-width: 645px;
      color: #FBFFF0;
      font-size: var(--type-body);
      line-height: 1.5;
      margin: 32px 0;
      padding-bottom: 16px;
    }

    .hero-photo-wrap {
    
      position: absolute;
    
      right: -80px;
    
      top: 60%;

      transform: translateY(-50%);
    
      height: 100%;
    
      display: flex;
    
      align-items: center;
    
    }
    
    .hero-photo {
    
      height: 510px;
    
      width: auto;
    
      display: block;
    
    }

    .btn-row {
      width: 645px;
      gap: 40px;
      display: flex;
      align-items: center;
    }

    .btn {
      
      height: 40px;

      display: inline-flex;
    
      align-items: center;
    
      justify-content: center;
    
      background-color: #2F2828;
    
      color: #FBFFF0;
    
      border-radius: 8px;
    
      font-family: var(--font-body);
    
      font-size: var(--type-button);
    
      font-weight: 500;
    
      letter-spacing: var(--tracking-ui);
    
      position: relative;

      transition: transform 0.15s ease;
    
    }

    .hero .btn {

      flex: 1;
    
    }
    
    .reference-contact-card .btn,
    
    .form-card .btn,
    
    .scroll-top {
    
      width: 180px;
    
    }

    .btn:hover {

      background-color: var(--accent);
    
      color: #2F2828;
    
    }

    .btn.accent:hover, .scroll-top:hover {

    background-color: var(--cream);

    color: #2F2828;

    }

    .btn:hover, .scroll-top:hover, nav.main-nav a:hover {

    transform: translateY(-1px);

    }

    .btn.accent {
      background: var(--accent);
      color: #2F2828;
    }

    .btn.accent:hover,

    .scroll-top:hover {
    
      background-color: var(--cream);
    
      color: #2F2828;
    
    }
  
  /* Hero portrait + socials */

  .portrait-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    position: relative;
    left: -80px;
  }

  .portrait {
    width: 240px; height: 240px; border-radius: 50%;
    background: #8a8077;
    box-shadow: inset 0 6px 14px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.2);
    position: relative; overflow: hidden;
  }

  .portrait::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.15), transparent 55%);
  }

  .socials {
    display:flex;
    gap: 24px;
  }

  .social {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent); color: #2F2828;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow);
    transition: transform .15s ease;
  }

  .social:hover { 
    transform: translateY(-1px); 
  }

  .social svg {
    width: 18px;
    height: 18px;
  }
  
  /* =======================================================
     Section header (dark)
     ======================================================= */

  section.dark {
    padding-top: 60px;
    padding-bottom: 100px;
  }
  
  /* =======================================================
     Portfolio cards
     ======================================================= */

     .case-study-list {

      display: flex;
    
      flex-direction: column;
    
      gap: 40px;
    
    }
    
    .case-study-card {
    
      min-height: 320px;
    
      background: var(--card);
    
      color: var(--text-dim);
    
      border-radius: var(--radius-lg);
    
      padding: 40px;
    
      display: grid;
    
      grid-template-columns: 1fr 420px;
    
      gap: 40px;
    
      align-items: stretch;
    
      box-shadow: var(--shadow);
    
      transition: transform 0.15s ease, background-color 0.15s ease;
    
    }

    .case-copy {

      display: flex;
    
      flex-direction: column;
    
      height: 100%;
    
    }

    .case-copy h3 {
    
      font-family: var(--font-display);
    
      font-size: var(--type-edit);
    
      color: var(--accent);
    
      margin-bottom: 8px;
    
    }
    
    .case-meta {
    
      font-size: var(--type-body);
    
      color: var(--text-dim);
    
      margin-bottom: 20px;
    
    }
    
    .case-desc {
    
      max-width: 600px;
    
      color: var(--text-dim);
    
      margin-bottom: 24px;

      flex-grow: 1;
    
    }
    
    .case-btn {

      width: 100%;
    
      max-width: 320px;
    
      height: 44px;
    
      background: var(--accent);
    
      color: #2F2828;
    
      border-radius: 999px;
    
      display: grid;
    
      grid-template-columns: 1fr auto 1fr;
    
      align-items: center;
    
      margin-top: auto;

      transition: background-color .15s ease, transform .15s ease;

      cursor: pointer;
          
    }

    .case-btn:hover {

      background: var(--cream);
    
      transform: translateY(-1px);
    
    }

    .case-btn:hover .case-btn-icon {

      background: var(--card);
    
      color: var(--cream);

      font-weight: 700;
    
    }

    .case-btn.disabled {

      background-color: #5F5858;
    
      color: #A8A0A0;
    
      opacity: 0.75;
    
      cursor: not-allowed;

      transform: none;
    
    }
    
    .case-btn.disabled::after {
    
      background-color: #5F5858;
    
      color: #C9C0BB;
    
    }
    
    .case-btn-text {

      grid-column: 2;
    
      justify-self: center;
    
      font-family: var(--font-body);
    
      font-size: var(--type-button);
    
      font-weight: 500;
    
      letter-spacing: var(--tracking-normal);
    
      color: #2F2828;
    
    }
    
    .case-btn-icon {
    
      grid-column: 3;
    
      justify-self: end;
    
      width: 28px;
    
      height: 28px;
    
      margin-right: 8px;
    
      border-radius: 50%;
    
      background: #2F2828;
    
      color: var(--accent);
    
      display: flex;
    
      align-items: center;
    
      justify-content: center;
    
      font-size: 14px;
    
      line-height: 1;
    
    }
    
    .case-image {

      height: 100%;
    
      background: #8a8077;
    
      border-radius: 8px;
    
      position: relative;
    
      overflow: hidden;
    
      box-shadow:
    
        inset 0 6px 14px rgba(0,0,0,.25),
    
        0 6px 18px rgba(0,0,0,.2);
    
    }

    .case-image img {

      width: 100%;
    
      height: 100%;
    
      object-fit: cover;
    
      display: block;
    
    }
  
  /* =======================================================
     Resume
     ======================================================= */

  .resume-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    
  }
  
  .rcard {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 28px 30px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: visible;
  }

  .rcard::before {
    content: "";
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 7px);
    pointer-events: none;
  }
  
  .rcard.tall {
    grid-row: span 2;
  }

  .exp-item,
  .edu-item { 
    padding: 16px 0;
    border-bottom: 1px dashed rgba(255,255,255,.08); }
  
  .exp-item:last-child, 
  .edu-item:last-child { 
    border-bottom: none;
  }
  
  .exp-item h4, 
  .edu-item h4 {
    font-family: "Arvo", Georgia, serif;
    font-size: var(--type-edit-small);
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 4px;
    letter-spacing: .04em;
  }

  .ref-body .name {

    font-family: var(--font-display);

    font-size: 16px;

    font-weight: 500;

    letter-spacing: var(--tracking-normal);

    color: var(--cream);

}

  .ref-header {

    min-height: 60px; /* same height as avatar */

    display: flex;

    flex-direction: column;

    justify-content: center;

}

  .exp-item .meta, .edu-item .meta, .ref-body .role, footer .copy {
    font-family: var(--font-body);
    color: var(--text-dim);
    letter-spacing: var(--tracking-ui);
  }

  .skills-list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    }
  
  .skills-list li {
    display: flex;
    align-items: center;
    font-family: "Niveau Grotesk", "Space Grotesk", system-ui, sans-serif;
    font-size: var(--type-body);
    color: var(--text-dim);
    letter-spacing: .03em;
  }
  

  .skills-list li:last-child {
    border-bottom: none;
  }

  .skills-list li::before {
    content: "●";
    color: var(--text-dim);
    font-size: 6px;
    margin-right: 10px;
    position: relative;
  }
  
  .tools-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
  }
  
  .tool {
    width: 52px; 
    height: 52px;
    border-radius: 50%;
    background: var(--card-2);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.3);
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    color: var(--text-dim); 
    font-size: var(--type-body);
  }
  
  /* =======================================================
     References
     ======================================================= */

     .ref-list {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    
    .reference-row {
      display: grid;
      grid-template-columns: 1fr 400px;
      gap: 40px;
    }
    
    .reference-main-card {
      height: 200px;
      background: var(--card);
      border-radius: var(--radius-lg);
      padding: 24px;
      display: flex;
      gap: 20px;
      align-items: flex-start;
      box-shadow: var(--shadow);
    }
    
    .reference-contact-card {
      height: 200px;
      background: var(--card);
      border-radius: var(--radius-lg);
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: var(--shadow);
    }
    
    .reference-contact-card div {
      font-size: var(--type-body);
      color: var(--text-dim);
      line-height: 1.4;
    }
    
    .reference-contact-card b {
      color: var(--cream);
    }
    
    .reference-contact-card .btn {

      width: 100%;
    
      height: 40px;
    
      min-height: 40px;
    
      flex-shrink: 0;
    
      margin-top: 12px;
    
    }

    .ref-body {
      font-size: var(--type-edit-small);
      font-family: var(--font-body);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .ref-body .quote {
      margin-top: auto;
      margin-bottom: auto;
      padding-left: 16px;
      padding-right: 56px;
      font-family: var(--font-body);
      font-size: var(--type-body);
      font-style: normal;
      color: var(--text-dim);
    }

    .ref-avatar {
      width: 60px;
      height: 60px;
      min-width: 60px;
      border-radius: 50%;
      background: #8a8077;
      box-shadow:
        inset 0 4px 8px rgba(0,0,0,.3),
        0 2px 6px rgba(0,0,0,.15);
    }

    /* =======================================================
     Contact
     ======================================================= */
  
     .contact-grid {
      display: grid;
      grid-template-columns: 400px 1fr;
      gap: 40px;
      align-items: stretch;
    }
    
    .contact-left {
      display: flex;
      flex-direction: column;
      gap: 40px;
      height: 100%;
    }
    
    .invite {
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--accent);
      color: #2F2828;
      border-radius: var(--radius-md);
      padding: 32px 40px;
      box-shadow: var(--shadow);
    }
  
    .invite h3 {
      font-family: "Arvo", serif;
      font-size: var(--type-card-title);
      margin-bottom: 10px;
    }
  
    .invite p { 
      font-size: var(--type-body);
      color: #5a5252;
      line-height: 1.5; }
  
    .info-card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      width: 100%;
      background: var(--card);
      color: var(--text);
      border-radius: var(--radius-md);
      padding: 18px 22px;
      box-shadow: var(--shadow);
    }
  
    .info-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 24px 0;
      font-size: var(--type-body);
      color: var(--text-dim);
      border-bottom: 1px dashed rgba(255,255,255,.08);
    }
  
    .info-row:last-child { 
      border-bottom: none;
    }
  
    .info-row .ic {
      width: 30px; 
      height: 30px;
      border-radius: 50%;
      background: var(--card-2);
      display: inline-flex; 
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }
  
    .info-row .ic svg {
      width: 14px;
      height: 14px;
    }
    
    /* Form */
  
    .form-card {
      background: var(--card);
      border-radius: var(--radius-lg);
      padding: 40px 160px;
      box-shadow: var(--shadow);
    }
  
    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 24px;
    }

    .form-row.single {
      grid-template-columns: 1fr;
    }
  
    .form-field { 
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px; }
  
    .form-field label {
      font-size: var(--type-small);
      letter-spacing: .12em; 
      color: var(--text-dim);
      text-transform: none;
    }
  
    .form-field input, .form-field textarea {
      background: var(--cream);
      border: none; border-radius: 8px;
      padding: 10px 12px;
      font-size: var(--type-body);
      font-family: "Niveau Grotesk", "Space Grotesk", system-ui, sans-serif;
      color: #2F2828;
      outline: none;
    }
  
    .form-field input:focus, .form-field textarea:focus {
      box-shadow: 0 0 0 2px var(--accent);
    }
  
    .form-field textarea { 
      min-height: 120px; 
      resize: vertical; 
    }
  
    .form-card .btn {
      width: 180px;
      height: 40px;
      margin-top: 40px;
      margin-left: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* =======================================================
       Footer
       ======================================================= */
  
    footer.site-footer {
      background: var(--dark-grit-2);
      padding: 32px 0;
      color: var(--text);
      border-top: 1px solid rgba(255,255,255,.08);
    }
  
    footer.site-footer .row {
      display: flex; align-items: center; justify-content: space-between;
    }
  
    footer .copy {

      font-size: var(--type-small);
    
      color: var(--text-dim);
    
      letter-spacing: var(--tracking-meta);
    
      margin-top: 4px;
    
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 30px;
    }
    
    .footer-name {
      font-family: "Arvo", serif;
      font-size: var(--type-edit);
      font-weight: 400;
      color: var(--text);
    }
  
    .scroll-top {
      width: 180px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent);
      color: #2F2828;
      font-size: var(--type-button);
      font-weight: 500;
      letter-spacing: .08em;
      transition:
        background-color 0.2s ease,
        transform 0.15s ease;
    }
    
    /* =======================================================
       Utility
       ======================================================= */
  
    .visually-hidden {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
  
    /* =======================================================
       Changes
       ======================================================= */
  
    .logo {
      display: flex;
      align-items: center;
      gap: 30px;
      color: #FBFFF0;
    }
    
    .logo-img {
      height: 42px;
      width: auto;
      display: block;
    }
    
    .logo-divider {
      width: 3px;
      height: 42px;
      border-radius: 999px;
      background-color: var(--text-dim);
    }
    
    .logo-name {
      font-family: 'Arvo', serif;
      font-size: var(--type-edit);
      font-weight: 400;
    }

/* Case Study Overview Section */
.case-study-overview {
  position: relative;
  padding: 60px 0 100px;
  background-color: #2F2828;
  background-image:
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.25) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(255,255,255,.02));
  background-size: 3px 3px, 5px 5px, 100% 100%;
  background-position: 0 0, 1px 2px, 0 0;
}

.case-study-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px);
  pointer-events: none;
  mix-blend-mode: overlay;
}

.case-study-overview > * {
  position: relative;
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 120px;
}

/* Project Title */
.project-title {
  font-family: "Arvo", Georgia, serif;
  font-size: 42px;
  color: #DCFFB0;
  margin-bottom: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Project Meta */
.project-meta {
  font-size: 20px;
  color: #C9C0BB;
  margin-bottom: 40px;
  letter-spacing: 0.02em;
}

/* Hero Image */
.hero-image {

  width: 100%;

  height: 440px;

  overflow: hidden;

}

.hero-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: 22px;

}

/* Summary Grid */
.summary-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  margin-top: 40px;
}

/* Left Column */
.summary-left {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Summary Block */
.summary-block {
  /* No additional styling needed */
}

.summary-heading {
  font-family: "Arvo", Georgia, serif;
  font-size: 20px;
  color: #DCFFB0;
  margin-bottom: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.summary-text {
  font-size: 16px;
  color: #C9C0BB;
  line-height: 1.6;
  margin: 0;
}

/* Bullet Lists */
.bullet-list,
.goals-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bullet-list li,
.goals-list li {
  display: flex;
  align-items: start;
  font-size: 16px;
  color: #C9C0BB;
  line-height: 1.6;
}

.bullet-list li::before {
  content: "●";
  color: #DCFFB0;
  font-size: 8px;
  margin-right: 12px;
  margin-top: 8px;
}

.goals-list li::before {
  content: "●";
  color: #DCFFB0;
  font-size: 8px;
  margin-right: 12px;
  margin-top: 8px;
}

.goals-list strong {
  color: #FBFFF0;
}

/* Project Details Card */
.project-details-card {
  position: relative;
  overflow: visible;
  background: #2F2828;
  border-radius: 22px;
  padding: 40px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  height: fit-content;
}

.project-details-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 2px, transparent 2px 7px);
  pointer-events: none;
}

.details-heading {
  position: relative;
  font-family: "Arvo", Georgia, serif;
  font-size: 18px;
  color: #DCFFB0;
  margin-bottom: 24px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.details-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-item {
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}

.detail-item.last {
  padding-bottom: 0;
  border-bottom: none;
}

.detail-label {
  font-size: 12px;
  color: #DCFFB0;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.detail-value {
  font-size: 16px;
  color: #C9C0BB;
  line-height: 1.6;
  white-space: pre-line;
}

/* Responsive */
@media (max-width: 1024px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .wrap {
    padding: 0 20px;
  }

  .project-title {
    font-size: clamp(28px, 5vw, 42px);
  }

  .hero-image {
    height: clamp(300px, 50vw, 600px);
  }
}