:root {
      --color-black: #0d0d0d;
      --color-bone: #f3f1eb;
      --color-blue: #2b5798;
      --color-blue-deep: #1c355e;
      --color-blue-light: #6b8cae;
      --color-cta: #b91c1c;
      --color-text-dark: #f5f5f5;
      --color-text-light: #111827;
      --color-text-muted: #6b6560;
    }
    html,body{margin:0;background:var(--color-black);color:var(--color-text-dark);font-family:'Inter',Arial,Helvetica,sans-serif}
    .hero{position:relative;min-height:100vh;overflow:hidden;background:var(--color-black)}
    .photo{
      position:absolute;inset:0 0 0 35%;
      background:url("../images/joelacevedo-profile.webp") right center/contain no-repeat;
      z-index:2;
    }
    /* Gemini-inspired warm atmosphere, but no box */
    .atmosphere{
      position:absolute;inset:0;z-index:3;pointer-events:none;
      background:
        radial-gradient(ellipse 46% 58% at 49% 48%,rgba(146,29,32,.48) 0%,rgba(109,20,28,.28) 34%,rgba(65,16,29,.13) 55%,transparent 74%),
        radial-gradient(ellipse 43% 60% at 72% 43%,rgba(18,105,151,.30) 0%,rgba(18,78,125,.19) 34%,rgba(12,45,88,.10) 58%,transparent 76%),
        radial-gradient(ellipse 28% 34% at 63% 76%,rgba(108,31,73,.14) 0%,transparent 70%),
        linear-gradient(90deg,#0d0d0d 0%,rgba(13,13,13,.97) 25%,rgba(30,13,22,.72) 43%,rgba(31,27,47,.42) 57%,rgba(8,28,46,.22) 72%,rgba(13,13,13,.08) 88%);
      mix-blend-mode:screen;
    }
    .left-fade{
      position:absolute;inset:0;z-index:4;pointer-events:none;
      background:linear-gradient(90deg,#0d0d0d 0%,rgba(13,13,13,.96) 27%,rgba(13,13,13,.67) 45%,rgba(13,13,13,.08) 72%);
    }
    .ghost{
      position:absolute;z-index:5;left:3.2%;top:8%;
      font-size:clamp(7rem,18vw,22rem);font-weight:900;line-height:.76;
      letter-spacing:-.075em;color:transparent;
      -webkit-text-stroke:1px rgba(143,159,178,.13);
      user-select:none;white-space:nowrap;
    }
    .ghost-bottom{
      position:absolute;z-index:5;left:31%;bottom:-7%;
      font-size:clamp(9rem,22vw,27rem);font-weight:900;line-height:.8;
      letter-spacing:-.08em;color:rgba(133,148,165,.045);user-select:none
    }
    .hairline{position:absolute;z-index:6;background:rgba(180,192,205,.15)}
    .diag{position:absolute;z-index:6;left:54%;top:-10%;width:1px;height:125%;background:rgba(176,188,202,.18);transform:rotate(9deg)}
    .content{position:relative;z-index:10;width:min(51rem,54vw);padding:5.5vh 0 0 3.5vw}
    .eyebrow{display:flex;align-items:center;gap:18px;font:700 12px/1 'JetBrains Mono',monospace;letter-spacing:.28em;color:#b8c2cf}
    .eyebrow:before{content:"";width:38px;height:2px;background:#b91c1c}
    .name{margin:4vh 0 0;font-weight:900;line-height:.78;letter-spacing:-.055em;text-transform:uppercase}
    .name .first{display:block;font-size:clamp(4.6rem,8.3vw,9rem)}
    .name .last{
      display:block;
      margin-top:4px;
      font-size:clamp(5rem,9vw,9.9rem);
      font-weight:800;
      line-height:.82;
      letter-spacing:-.045em;
      color:#f5f5f3;
      -webkit-text-stroke:0;
    }
    .tag{margin-top:26px;display:flex;align-items:center;gap:17px;font:800 13px/1 'JetBrains Mono',monospace;letter-spacing:.25em}
    .tag:before{content:"";width:42px;height:2px;background:#b91c1c}
    .copy{max-width:700px;margin-top:28px;font-size:clamp(17px,1.3vw,23px);line-height:1.55;color:#e2e4e8;font-weight:400}
    .actions{display:flex;gap:18px;margin-top:30px}
    .btn{
      position:relative;
      min-width:190px;
      padding:20px 28px;
      font:800 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.19em;
      text-decoration:none;
      color:white;
      display:flex;
      justify-content:space-between;
      align-items:center;
      transition:.25s ease;
    }
    .btn.primary{
      min-width:205px;
      background:linear-gradient(135deg,#b91c1c 0%,#991b1b 100%);
      box-shadow:0 14px 36px rgba(185,28,28,.28);
    }
    .btn.secondary{
      min-width:220px;
      border:1px solid rgba(255,255,255,.28);
      background:rgba(255,255,255,.025);
      backdrop-filter:blur(8px);
    }
    .btn:hover{transform:translateY(-2px)}
    .btn.primary:hover{filter:brightness(1.1);box-shadow:0 18px 40px rgba(185,28,28,.38)}
    .btn.secondary:hover{border-color:rgba(255,255,255,.58);background:rgba(255,255,255,.06)}
    .rail{position:absolute;z-index:10;right:2.7%;top:29%;display:flex;flex-direction:column;gap:50px;align-items:center}
    .rail span{writing-mode:vertical-rl;font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.34em;color:#e8e8e8}
    .meta{position:absolute;z-index:10;left:3.5%;bottom:5%;width:46%;border-top:1px solid rgba(255,255,255,.13);padding-top:24px;display:flex;gap:42px;font:700 10px/1 'JetBrains Mono',monospace;letter-spacing:.19em;color:#94a1b2}
    .red-square{position:absolute;z-index:7;left:58%;top:41%;width:12px;height:12px;background:#b91c1c}
    @media(max-width:850px){
      .hero{min-height:900px}.photo{inset:15% -30% 0 15%;opacity:.48;background-size:cover}
      .content{width:auto;padding:7vh 7vw}.name{margin-top:10vh}.copy{font-size:18px}
      .rail,.meta,.diag{display:none}.actions{flex-wrap:wrap}.ghost{left:-8%;top:13%}
    }

    /* Static skills ribbon */
    .skills-bar{
      position:relative;
      z-index:20;
      background:#0d0d0d;
      color:#fff;
      min-height:96px;
      display:flex;
      align-items:center;
      padding:0 clamp(24px,3.5vw,68px);
      overflow:hidden;
    }
    .skills-list{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(18px,2.4vw,46px);
      list-style:none;
      margin:0;
      padding:0;
    }
    .skills-list li{
      display:flex;
      align-items:center;
      gap:clamp(18px,2.4vw,46px);
      white-space:nowrap;
      font-weight:900;
      font-size:clamp(18px,1.55vw,30px);
      line-height:1;
      letter-spacing:-.035em;
      text-transform:uppercase;
    }
    .skills-list li:not(:last-child)::after{
      content:"";
      flex:0 0 15px;
      width:15px;
      height:15px;
      border-radius:50%;
      background:#b91c1c;
    }

    /* Section 02: solid blue continuation — NO gradient */
    .page-transition{
      position:relative;
      min-height:560px;
      overflow:hidden;
      background:#0d0d0d;
      color:#f5f5f5;
      padding:72px clamp(32px,5.5vw,106px) 88px;
    }
    .page-transition::before{display:none;}

    .section-number{
      position:absolute;
      right:-1.5%;
      top:-54px;
      font-size:clamp(12rem,22vw,28rem);
      font-weight:900;
      line-height:.8;
      letter-spacing:-.08em;
      color:rgba(255,255,255,.035);
      user-select:none;
      pointer-events:none;
    }
    .section-kicker{
      position:relative;
      z-index:2;
      font:700 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.22em;
      color:#6b8cae;
      text-transform:uppercase;
    }
    .section-title{
      position:relative;
      z-index:2;
      max-width:1100px;
      margin:28px 0 52px;
      font-size:clamp(3.7rem,6.1vw,7.2rem);
      line-height:.88;
      letter-spacing:-.055em;
      font-weight:900;
      text-transform:uppercase;
    }
    .process-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      border-top:1px solid rgba(255,255,255,.19);
    }
.process-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 104px;
  border-top: 1px solid rgba(255,255,255,.19);
}

.process-card {
  position: relative;
  padding: 42px 0 0;
  min-height: 250px;
}

.process-card + .process-card::before {
  content: "";
  position: absolute;
  left: -52px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.19);
}
    .process-label{
      font:700 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.05em;
      color:#6b8cae;
      text-transform:uppercase;
    }
    .process-card h3{
      margin:24px 0 16px;
      font-size:clamp(20px,1.45vw,28px);
      line-height:1.05;
      font-weight:900;
      text-transform:uppercase;
    }
    .process-card p{
      margin:0;
      max-width:500px;
      font-size:clamp(16px,1.1vw,21px);
      line-height:1.48;
      color:#dce5ef;
    }

    /* Ghost section number in HERO */
    .hero-number{
      position:absolute;
      z-index:5;
      right:-1.5%;
      top:-4%;
      font-size:clamp(12rem,22vw,27rem);
      font-weight:900;
      line-height:.8;
      letter-spacing:-.08em;
      color:rgba(143,159,178,.055);
      user-select:none;
      pointer-events:none;
    }

    @media(max-width:1050px){
      .skills-list{
        justify-content:flex-start;
        flex-wrap:wrap;
        gap:18px 30px;
      }
      .skills-bar{
        padding-top:26px;
        padding-bottom:26px;
      }
      .skills-list li{
        font-size:18px;
      }
      .skills-list li:not(:last-child)::after{
        width:10px;
        height:10px;
        flex-basis:10px;
      }
      .process-grid{grid-template-columns:1fr;}
      .process-card{padding:30px 0;}
      .process-card + .process-card{
        border-left:0;
        border-top:1px solid rgba(255,255,255,.19);
        padding-left:0;
      }
      .section-number{top:-10px;}
    }


    /* Experience strip between HERO and Section 01.
       The blue shape is angled; the content itself stays straight. */
    .experience-strip{
      position:relative;
      z-index:25;
      min-height:82px;
      color:#fff;
      display:flex;
      align-items:center;
      overflow:hidden;
      background:transparent;
    }
    .experience-strip::before{
      content:"";
      position:absolute;
      inset:0;
      background:#2b5798;
      z-index:-1;
    }
    .experience-strip-inner{
      width:100%;
      padding:0 clamp(32px,5.5vw,106px);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:42px;
    }
    .experience-strip-label{
      flex:0 0 auto;
      font:700 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.18em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .experience-companies{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:clamp(22px,2.4vw,48px);
      font:800 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.08em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .experience-companies span + span::before{
      content:"/";
      margin-right:clamp(22px,2.4vw,48px);
      opacity:.9;
    }
    @media(max-width:900px){
      .experience-strip{padding:18px 0;}
      .experience-strip-inner{align-items:flex-start;flex-direction:column;gap:18px;}
      .experience-companies{flex-wrap:wrap;justify-content:flex-start;white-space:normal;gap:14px 24px;}
      .experience-companies span + span::before{margin-right:24px;}
    }


    /* Section 02 — Work that shipped */
    .shipped{
      position:relative;
      overflow:hidden;
      background:#f3f1eb;
      color:#111827;
      padding:76px clamp(32px,5.5vw,106px) 92px;
    }
    .shipped-number{
      position:absolute;
      right:-1.2%;
      top:-34px;
      font-size:clamp(14rem,25vw,31rem);
      font-weight:900;
      line-height:.8;
      letter-spacing:-.08em;
      color:rgba(7,9,13,.045);
      user-select:none;
      pointer-events:none;
    }
    .shipped-kicker{
      position:relative;
      z-index:2;
      font:700 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.2em;
      text-transform:uppercase;
      color:#6b6560;
    }
    .shipped-title{
      position:relative;
      z-index:2;
      max-width:760px;
      margin:26px 0 50px;
      font-size:clamp(4rem,6.5vw,7.8rem);
      line-height:.82;
      letter-spacing:-.055em;
      font-weight:900;
      text-transform:uppercase;
    }
    .shipped-grid{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      border-top:3px solid #111;
      border-bottom:1px solid rgba(7,9,13,.28);
    }
.shipped-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 76px;
  border-top: 3px solid #111;
  border-bottom: 1px solid rgba(7,9,13,.28);
}

.shipped-card {
  position: relative;
  min-height: 290px;
  padding: 42px 0;
}

.shipped-card + .shipped-card {
  border-left: 0;
  padding-left: 0;
}

.shipped-card + .shipped-card::before {
  content: "";
  position: absolute;
  left: -38px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(7,9,13,.22);
}
    .shipped-stat{
      font-size:clamp(3.2rem,4.2vw,5.4rem);
      line-height:.9;
      font-weight:900;
      letter-spacing:-.055em;
      font-variant-numeric:tabular-nums;
      color:#2b5798;
    }
    .shipped-label{
      margin-top:10px;
      font:700 12px/1.25 'JetBrains Mono',monospace;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#6b6560;
    }
    .shipped-card p{
      margin:30px 0 0;
      max-width:360px;
      font-size:clamp(16px,1.05vw,20px);
      line-height:1.55;
      color:#30343b;
    }
    @media(max-width:1000px){
      .shipped-grid{grid-template-columns:repeat(2,1fr);}
      .shipped-card:nth-child(3){border-left:0;border-top:1px solid rgba(7,9,13,.22);padding-left:0;}
      .shipped-card:nth-child(4){border-top:1px solid rgba(7,9,13,.22);}
    }
    @media(max-width:650px){
      .shipped-grid{grid-template-columns:1fr;}
      .shipped-card,.shipped-card + .shipped-card{
        border-left:0;
        border-top:1px solid rgba(7,9,13,.22);
        padding:30px 0;
        min-height:0;
      }
      .shipped-card:first-child{border-top:0;}
    }


    /* Section 03 — Toolkit */
    .toolkit{
      position:relative;
      overflow:hidden;
      background:#2b5798;
      color:#f5f5f5;
      padding:78px clamp(32px,5.5vw,106px) 84px;
    }
    .toolkit-number{
      position:absolute;
      right:-1.5%;
      top:-42px;
      font-size:clamp(14rem,25vw,31rem);
      font-weight:900;
      line-height:.8;
      letter-spacing:-.08em;
      color:rgba(5,13,24,.18);
      user-select:none;
      pointer-events:none;
    }
    .toolkit-kicker{
      position:relative;
      z-index:2;
      font:700 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.2em;
      text-transform:uppercase;
      color:#6b8cae;
    }
    .toolkit-title{
      position:relative;
      z-index:2;
      margin:28px 0 58px;
      font-size:clamp(2.4rem,3.3vw,4.5rem);
      line-height:.95;
      letter-spacing:-.045em;
      font-weight:900;
      text-transform:uppercase;
    }
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(24px, 2.2vw, 44px);
}
    .toolkit-group h3,
    .toolkit-bottom h3{
      margin:0 0 22px;
      font:800 13px/1 'JetBrains Mono',monospace;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:#fff;
    }
    .toolkit-group ul{
      list-style:none;
      padding:0;
      margin:0;
    }
    .toolkit-group li{
      margin:0 0 16px;
      font:500 clamp(14px,1vw,18px)/1.35 'JetBrains Mono',monospace;
      color:#d1d9e3;
    }
    .toolkit-bottom{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:80px;
      margin-top:62px;
      padding-top:42px;
      border-top:1px solid rgba(255,255,255,.2);
    }
    .toolkit-bottom p{
      margin:0;
      font:500 clamp(14px,1vw,18px)/1.5 'JetBrains Mono',monospace;
      color:#d1d9e3;
    }
    .toolkit-bottom strong{color:#fff;}
    @media(max-width:1100px){
      .toolkit-grid{grid-template-columns:repeat(3,1fr);}
    }
    @media(max-width:720px){
      .toolkit-grid{grid-template-columns:1fr 1fr;}
      .toolkit-bottom{grid-template-columns:1fr;gap:34px;}
    }
    @media(max-width:480px){
      .toolkit-grid{grid-template-columns:1fr;}
    }


    /* Section 04 — Selected Work */
    .selected-work{
      position:relative;
      overflow:hidden;
      background:#f3f1eb;
      color:#111827;
      padding:86px 0 96px;
    }
    .selected-work-header{
      position:relative;
      z-index:2;
      padding:0 clamp(32px,5.5vw,106px);
      display:grid;
      grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
      gap:70px;
      align-items:end;
      margin-bottom:54px;
    }
    .selected-work-number{
      position:absolute;
      right:-1.5%;
      top:-44px;
      font-size:clamp(14rem,25vw,31rem);
      font-weight:900;
      line-height:.8;
      letter-spacing:-.08em;
      color:rgba(7,9,13,.045);
      user-select:none;
      pointer-events:none;
    }
    .selected-work-kicker{
      position:relative;
      z-index:2;
      font:700 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.2em;
      text-transform:uppercase;
      color:#2b5798;
    }
    .selected-work-title{
      position:relative;
      z-index:2;
      margin:24px 0 0;
      font-size:clamp(4.6rem,8vw,9rem);
      line-height:.78;
      letter-spacing:-.06em;
      font-weight:900;
      text-transform:uppercase;
    }
    .selected-work-title span{
      display:block;
      color:#2b5798;
    }
    .selected-work-intro{
      position:relative;
      z-index:2;
      max-width:560px;
      margin:0 0 8px auto;
      font-size:clamp(18px,1.35vw,26px);
      line-height:1.55;
      color:#4b5058;
    }

    .work-carousel{
      position:relative;
      z-index:2;
    }

    .work-track{
      display:flex;
      gap:clamp(34px,3vw,52px);
      overflow-x:auto;
      overscroll-behavior-inline:contain;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      scrollbar-width:none;
      margin-left:clamp(48px,5.5vw,106px);
      padding:0 clamp(48px,5.5vw,106px) 26px 0;
    }
    .work-track::-webkit-scrollbar{display:none;}
    .work-track{cursor:grab;}
    .work-track.is-dragging{cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto;}

    /* Apple-inspired: the project is NOT a boxed card.
       Image/presentation block above, content breathing freely below. */
    .work-card{
      flex:0 0 clamp(360px,29vw,470px);
      min-height:620px;
      background:transparent;
      border:0;
      border-radius:0;
      scroll-snap-align:start;
      display:block;
    }

    .work-card-media{
      position:relative;
      aspect-ratio: 4 / 3;
      overflow:hidden;
      background:#e7e8ea;
      padding:34px;
      display:flex;
      align-items:flex-end;
      border:0;
      border-radius:0;
    }
    .work-card-thumb{
      position:absolute;
      inset:0;
      z-index:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      display:block;
    }
    .work-card-media::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      <!-- background: -->
        <!-- linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.16)), -->
        <!-- repeating-linear-gradient(90deg,rgba(10,15,20,.028) 0 1px,transparent 1px 46px); -->
    <!-- } -->
    <!-- .work-card-media.has-image::before{ -->
      <!-- background: -->
        <!-- linear-gradient(180deg,rgba(11,13,18,0) 45%,rgba(11,13,18,.72) 100%), -->
        <!-- repeating-linear-gradient(90deg,rgba(10,15,20,.05) 0 1px,transparent 1px 46px); -->
    <!-- } -->

    .work-card-index{
      position:absolute;
      top:26px;
      left:26px;
      z-index:2;
      background:#0b0d12;
      color:#fff;
      min-width:34px;
      height:34px;
      padding:0 8px;
      display:grid;
      place-items:center;
      font:800 10px/1 'JetBrains Mono',monospace;
      letter-spacing:.08em;
    }

    .work-card-mark{
      position:relative;
      z-index:2;
      max-width:90%;
      font-size:clamp(2.3rem,3vw,4.35rem);
      line-height:.88;
      letter-spacing:-.055em;
      font-weight:900;
      text-transform:uppercase;
      color:#0b0d12;
    }
    .work-card-media.has-image .work-card-mark{color:#fff;}

    .work-card-body{
      padding:28px 6px 0;
      display:flex;
      flex-direction:column;
      min-height:260px;
      background:transparent;
    }

    .work-card-meta{
      display:flex;
      justify-content:space-between;
      gap:20px;
      margin-bottom:18px;
      font:700 10px/1 'JetBrains Mono',monospace;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:#8a8f98;
    }

    .work-card h3{
      margin:0 0 14px;
      font-size:clamp(1.55rem,1.8vw,2.25rem);
      line-height:.96;
      letter-spacing:-.035em;
      font-weight:900;
      text-transform:uppercase;
    }

    .work-card p{
      margin:0;
      font-size:clamp(15px,1vw,18px);
      line-height:1.55;
      color:#4b5058;
    }

    .work-card-footer{
      margin-top:auto;
      padding-top:24px;
      border-top:0;
      display:flex;
      justify-content:space-between;
      gap:18px;
      align-items:center;
      font:700 9px/1 'JetBrains Mono',monospace;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#777d86;
    }

    .work-card-link{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:9px 14px;
      border:1px solid #2b5798;
      color:#2b5798;
      text-decoration:none;
      font:800 9px/1 'JetBrains Mono',monospace;
      letter-spacing:.1em;
      text-transform:uppercase;
      white-space:nowrap;
      transition:.2s ease;
    }
    .work-card-link:hover{
      background:#2b5798;
      color:#fff;
    }

    /* CTA is its own visual object, not styled like the project items. */
    .work-card.cta{
      flex:0 0 clamp(360px,29vw,470px);
      min-height:620px;
      background:#b91c1c;
      color:#fff;
      display:flex;
      align-items:stretch;
    }

    .work-card.cta .cta-inner{
      padding:54px 44px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:100%;
    }

    .work-card.cta .cta-kicker{
      font:700 10px/1 'JetBrains Mono',monospace;
      letter-spacing:.18em;
      text-transform:uppercase;
      opacity:.78;
    }

    .work-card.cta h3{
      margin:22px 0 18px;
      font-size:clamp(3rem,4.3vw,5.5rem);
      line-height:.82;
      letter-spacing:-.055em;
      color:#fff;
    }

    .work-card.cta p{
      max-width:360px;
      color:rgba(255,255,255,.86);
      font-size:18px;
    }

    .work-card.cta a{
      width:max-content;
      margin-top:34px;
      padding:16px 20px;
      background:#0b0d12;
      color:#fff;
      text-decoration:none;
      font:800 10px/1 'JetBrains Mono',monospace;
      letter-spacing:.12em;
      text-transform:uppercase;
      transition:.2s ease;
    }
    .work-card.cta a:hover{
      background:#fff;
      color:var(--color-cta);
      transform:translateY(-2px);
    }

    .work-controls{
      padding:10px clamp(72px,7.2vw,150px) 0;
      display:flex;
      justify-content:flex-end;
      gap:10px;
    }

    .work-control{
      width:46px;
      height:46px;
      border:0;
      border-radius:0;
      background:#e2e3e6;
      color:#0b0d12;
      display:grid;
      place-items:center;
      font-size:22px;
      cursor:pointer;
      transition:.2s ease;
    }

    .work-control:hover{background:#d6d8dc;}
    .work-control:focus-visible{outline:2px solid var(--color-blue);outline-offset:2px;}
    .work-control:disabled{
      opacity:.35;
      cursor:not-allowed;
      background:#e2e3e6;
    }

    @media(max-width:900px){
      .selected-work-header{grid-template-columns:1fr;gap:30px;}
      .selected-work-intro{margin:0;}
      .work-card,.work-card.cta{flex-basis:min(84vw,420px);}
    }


    /* Site header */
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      height:74px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 clamp(28px,4vw,74px);
      background:rgba(243,241,235,.86);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(7,9,13,.08);
    }
    .site-logo{
      display:inline-flex;
      align-items:center;
      text-decoration:none;
    }
    .site-logo img{
      height:32px;
      width:auto;
      object-fit:contain;
      display:block;
    }
    .site-nav{
      display:flex;
      align-items:center;
      gap:36px;
    }
    .site-nav a{
      color:#101216;
      text-decoration:none;
      font:700 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .site-nav a:hover{opacity:.62;}
    .site-nav .contact-link{
      padding:11px 18px;
      border:1px solid #101216;
    }

    /* Contact/footer */
    .site-footer{
      background:#0d0d0d;
      color:#fff;
    }
    .footer-contact{
      padding:88px clamp(32px,5.5vw,106px) 110px;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .footer-kicker{
      font:700 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#919aaa;
    }
    .footer-title{
      margin:26px 0 24px;
      font-size:clamp(3rem,4.8vw,6.2rem);
      line-height:.9;
      letter-spacing:-.045em;
      font-weight:900;
      text-transform:uppercase;
    }
    .footer-copy{
      max-width:900px;
      margin:0;
      font-size:clamp(18px,1.5vw,28px);
      line-height:1.5;
      color:#b7bec9;
    }
    .footer-email{
      display:inline-flex;
      align-items:center;
      gap:18px;
      margin-top:42px;
      padding:20px 28px;
      background:#f3f1eb;
      color:#111827;
      text-decoration:none;
      font:800 12px/1 'JetBrains Mono',monospace;
      letter-spacing:.08em;
      text-transform:uppercase;
      transition:.2s ease;
    }
    .footer-email:hover{
      background:var(--color-cta);
      color:#fff;
      transform:translateY(-2px);
    }
    .footer-bottom{
      min-height:76px;
      padding:0 clamp(32px,4vw,74px);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:30px;
      font:500 11px/1 'JetBrains Mono',monospace;
      letter-spacing:.04em;
      color:#b3bac5;
    }
    .footer-links{
      display:flex;
      align-items:center;
      gap:28px;
    }
    .footer-links a{
      color:#c3c9d2;
      text-decoration:none;
      text-transform:uppercase;
      font-weight:700;
    }
    .footer-links a:hover{color:#fff;}

    @media(max-width:700px){
      .site-header{height:66px;padding:0 20px;}
      .site-nav{gap:18px;}
      .site-nav a{font-size:10px;}
      .site-nav .contact-link{padding:9px 12px;}
      .footer-bottom{align-items:flex-start;flex-direction:column;padding-top:24px;padding-bottom:24px;}
      .footer-links{flex-wrap:wrap;}
    }


a {
  color: inherit;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}

a:hover {
  text-decoration-thickness: 2px;
}

.contact-link, .footer-email, .site-logo, .work-card-link, .cta-card-link, .btn.primary, .btn.secondary {
  text-decoration: none !important;
}

/* =========================================================
   CASE STUDIES — shared portfolio integration
   Uses the same global palette, header, and footer as index.
   ========================================================= */
.case-study-page{
  background:var(--color-bone);
  color:var(--color-text-light);
}

.case-study-page .case-study-index{
  top:74px;
}

/* Bring case-study accent text into the portfolio blue palette. */
.case-study-page .text-blue-400{
  color:var(--color-blue) !important;
}

/* Keep the global shell above Tailwind utility styling. */
.case-study-page .site-header{
  background:rgba(243,241,235,.86);
  color:#101216;
}

.case-study-page .site-footer{
  background:var(--color-black);
  color:#fff;
}

@media(max-width:700px){
  .case-study-page .case-study-index{
    top:66px;
  }
}

/* Shared typography — portfolio + case studies */
.case-study-page,
.case-study-page .font-sans{
  font-family:'Inter',Arial,Helvetica,sans-serif !important;
}

.case-study-page .font-mono{
  font-family:'JetBrains Mono',monospace !important;
}

/* Disabled / Coming Soon Case Study Card */
.work-card.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  user-select: none;
}

.work-card.is-disabled .work-card-media {
  filter: grayscale(100%);
}

.work-card.is-disabled .work-card-link {
  pointer-events: none;
  cursor: not-allowed;
  border-color: #9ca3af;
  color: #9ca3af;
  background: transparent;
}