.mos-portfolio{
      --mos-bg:#07111f;
      --mos-bg-soft:#0d1b2a;
      --mos-panel:#122235;
      --mos-text:#f7fafc;
      --mos-muted:#c7d2df;
      --mos-line:rgba(255,255,255,.12);
      --mos-accent:#c77b30;
      --mos-accent-2:#e3a05b;
      --mos-ice:#eaf2f8;
      --mos-shadow:0 20px 60px rgba(0,0,0,.34);
      --mos-max:1200px;
      font-family:Inter,"Inter Fallback",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
        radial-gradient(circle at top left, rgba(199,123,48,.15), transparent 32%),
        linear-gradient(180deg,#06101c 0%, #07111f 45%, #0d1b2a 100%);
      color:var(--mos-text);
      overflow:hidden;
      padding:28px 0 48px;
    }

    .mos-portfolio *,
    .mos-portfolio *::before,
    .mos-portfolio *::after{
      box-sizing:border-box;
    }

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

    .mos-portfolio a{
      text-decoration:none;
      color:inherit;
    }

    .mos-container{
      width:min(calc(100% - 32px),var(--mos-max));
      margin:0 auto;
    }

    .mos-section{
      padding:46px 0;
    }

    .mos-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:12px;
      text-transform:uppercase;
      letter-spacing:.16em;
      font-size:.76rem;
      font-weight:800;
      color:var(--mos-ice);
      opacity:.95;
    }

    .mos-eyebrow::before{
      content:"";
      width:44px;
      height:9px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--mos-accent),var(--mos-accent-2));
      flex:0 0 auto;
    }

    .mos-accent{
      color:var(--mos-accent-2);
    }

    .mos-hero-wrap{
      position:relative;
      overflow:hidden;
      border-radius:34px;
      min-height:620px;
      background:
        linear-gradient(90deg, rgba(5,11,20,.78) 0%, rgba(5,11,20,.62) 45%, rgba(5,11,20,.80) 100%),
        url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
      box-shadow:var(--mos-shadow);
      border:1px solid var(--mos-line);
    }

    .mos-hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:32px;
      min-height:620px;
      padding:42px;
    }

    .mos-hero-copy{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      max-width:700px;
    }

    .mos-hero-top{
      display:grid;
      gap:18px;
    }

    .mos-hero-title{
      margin:0;
      font-size:clamp(2.45rem,5vw,5.25rem);
      line-height:.96;
      letter-spacing:-.055em;
      font-weight:850;
      color:#fff;
    }

    .mos-hero-lead{
      margin:0;
      max-width:680px;
      font-size:1.08rem;
      line-height:1.68;
      color:var(--mos-muted);
    }

    .mos-quick-stats{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
      margin-top:24px;
    }

    .mos-quick-stat{
      background:rgba(234,242,248,.08);
      border:1px solid rgba(234,242,248,.12);
      border-radius:20px;
      padding:17px 18px;
      backdrop-filter:blur(8px);
    }

    .mos-quick-stat strong{
      display:block;
      font-size:1.55rem;
      letter-spacing:-.04em;
      color:#fff;
    }

    .mos-quick-stat span{
      display:block;
      color:var(--mos-muted);
      font-size:.94rem;
      line-height:1.42;
      margin-top:5px;
    }

    .mos-hero-quote{
      align-self:end;
      justify-self:end;
      width:min(100%,470px);
      background:linear-gradient(180deg,rgba(18,34,53,.82),rgba(13,27,42,.62));
      border:1px solid rgba(234,242,248,.14);
      backdrop-filter:blur(12px);
      border-radius:28px;
      padding:26px;
      box-shadow:0 18px 48px rgba(0,0,0,.25);
    }

    .mos-hero-quote-mark{
      font-size:3.1rem;
      color:var(--mos-accent-2);
      line-height:1;
      font-weight:900;
    }

    .mos-hero-quote h2{
      margin:8px 0 12px;
      font-size:clamp(1.65rem,2.5vw,2.7rem);
      line-height:1.04;
      letter-spacing:-.045em;
      color:#fff;
    }

    .mos-hero-quote p{
      margin:0;
      font-size:1rem;
      line-height:1.66;
      color:#dbe6ee;
    }

    .mos-intro-band{
      margin-top:22px;
      background:linear-gradient(90deg,#c77b30 0%,#e3a05b 100%);
      color:#07111f;
      border-radius:24px;
      padding:19px 23px;
      display:flex;
      justify-content:space-between;
      gap:20px;
      align-items:center;
      font-weight:800;
      box-shadow:var(--mos-shadow);
    }

    .mos-intro-band small{
      display:block;
      font-weight:650;
      opacity:.8;
      margin-top:4px;
    }

    .mos-section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:26px;
      margin-bottom:24px;
    }

    .mos-section-head h2{
      margin:10px 0 0;
      font-size:clamp(2rem,4vw,3.35rem);
      line-height:1;
      letter-spacing:-.05em;
      color:#fff;
    }

    .mos-section-head p{
      margin:0;
      max-width:650px;
      color:var(--mos-muted);
      line-height:1.68;
    }

    .mos-portfolio-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:30px;
    }

    .mos-project-card{
      position:relative;
      overflow:hidden;
      border-radius:32px;
      min-height:690px;
      border:1px solid rgba(234,242,248,.12);
      box-shadow:var(--mos-shadow);
      background:var(--mos-panel);
    }

    .mos-project-bg{
      position:absolute;
      inset:0;
      background-size:cover;
      background-position:center;
      transform:scale(1.03);
      z-index:0;
    }

    .mos-project-overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(90deg,rgba(5,11,20,.58) 0%,rgba(5,11,20,.42) 50%,rgba(5,11,20,.12) 100%);
      z-index:1;
      pointer-events:none;
    }

    .mos-project-content{
      position:relative;
      z-index:2;
      min-height:690px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:32px;
    }

    .mos-project-meta{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:16px;
      margin-bottom:36px;
    }

    .mos-meta-left{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
    }

    .mos-logo-box{
      position:relative;
      z-index:4;
      background:rgba(255,255,255,.97);
      border-radius:18px;
      padding:12px 18px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-width:210px;
      min-height:92px;
      box-shadow:0 14px 28px rgba(0,0,0,.22);
    }

    .mos-logo-box img{
      max-height:64px;
      max-width:178px;
      width:auto;
      height:auto;
      object-fit:contain;
      display:block;
    }

    .mos-chip{
      display:inline-flex;
      align-items:center;
      padding:10px 13px;
      border-radius:999px;
      background:rgba(234,242,248,.08);
      border:1px solid rgba(234,242,248,.12);
      color:#fff;
      font-size:.75rem;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.09em;
    }

    .mos-project-sector{
      padding:10px 13px;
      border-radius:999px;
      background:rgba(199,123,48,.18);
      color:#fff;
      border:1px solid rgba(227,160,91,.36);
      font-size:.82rem;
      font-weight:800;
      text-align:right;
      max-width:360px;
    }

    .mos-project-bottom{
      max-width:980px;
    }

    .mos-project-title{
      margin:0 0 12px;
      font-size:clamp(2.2rem,4vw,4.2rem);
      line-height:.94;
      letter-spacing:-.055em;
      color:#fff;
    }

    .mos-tag-list{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:18px;
    }

    .mos-tag{
      display:inline-flex;
      padding:10px 13px;
      border-radius:14px;
      background:rgba(234,242,248,.09);
      border:1px solid rgba(234,242,248,.10);
      font-size:.92rem;
      color:#fff;
    }

    .mos-project-description{
      margin:0 0 18px;
      color:#e7eef5;
      line-height:1.68;
      max-width:920px;
    }

    .mos-work-list{
      margin:0 0 20px;
      padding:0;
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px 18px;
      list-style:none;
    }

    .mos-work-list li{
      position:relative;
      padding-left:18px;
      color:#dbe6ee;
      line-height:1.45;
      font-size:.96rem;
    }

    .mos-work-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.62em;
      width:7px;
      height:7px;
      border-radius:999px;
      background:var(--mos-accent-2);
    }

    .mos-gallery-wrap{
      margin:20px 0 0;
    }

    .mos-gallery-label{
      font-size:.92rem;
      font-weight:850;
      color:#f8fafc;
      margin-bottom:11px;
      letter-spacing:.02em;
    }

    .mos-thumb-grid{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .mos-thumb{
      padding:0;
      border:1px solid rgba(234,242,248,.14);
      background:rgba(234,242,248,.07);
      border-radius:16px;
      overflow:hidden;
      cursor:pointer;
      width:112px;
      height:84px;
      transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
    }

    .mos-thumb:hover{
      transform:translateY(-2px);
      border-color:rgba(227,160,91,.65);
      box-shadow:0 12px 24px rgba(0,0,0,.24);
    }

    .mos-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .mos-mini-note{
      font-size:.92rem;
      color:var(--mos-muted);
      margin-top:12px;
    }

    .mos-value-band{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:24px;
      align-items:stretch;
      margin-top:10px;
    }

    .mos-value-copy,
    .mos-value-panel{
      border-radius:30px;
      border:1px solid rgba(234,242,248,.12);
      box-shadow:var(--mos-shadow);
      overflow:hidden;
    }

    .mos-value-copy{
      background:linear-gradient(180deg,#0d2235 0%,#102c43 100%);
      padding:30px;
    }

    .mos-value-copy h3{
      margin:0 0 14px;
      font-size:clamp(2rem,3vw,3.1rem);
      line-height:1;
      letter-spacing:-.05em;
      color:#fff;
    }

    .mos-value-copy p{
      margin:0;
      color:#dbe6ee;
      line-height:1.72;
      max-width:720px;
    }

    .mos-value-panel{
      background:linear-gradient(180deg,#e7edf2 0%,#cfdde8 100%);
      padding:22px;
      color:#07111f;
    }

    .mos-value-box{
      background:rgba(255,255,255,.72);
      border:1px solid rgba(7,17,31,.12);
      border-radius:22px;
      padding:19px;
      margin-bottom:14px;
    }

    .mos-value-box strong{
      display:block;
      font-size:1.55rem;
      line-height:1.05;
      letter-spacing:-.035em;
      margin-bottom:8px;
      color:#07111f;
    }

    .mos-value-box span{
      font-size:1rem;
      line-height:1.5;
      color:#2d4054;
    }

    .mos-value-box:last-child{
      margin-bottom:0;
    }

    .mos-cta-wrap{
      background:linear-gradient(120deg,#102c43 0%,#173a56 58%,#c77b30 100%);
      border-radius:30px;
      padding:30px 28px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:22px;
      border:1px solid rgba(234,242,248,.12);
      box-shadow:var(--mos-shadow);
    }

    .mos-cta-wrap h3{
      margin:0 0 9px;
      font-size:clamp(1.8rem,3vw,2.85rem);
      line-height:1.02;
      letter-spacing:-.05em;
      color:#fff;
    }

    .mos-cta-wrap p{
      margin:0;
      color:#dbe6ee;
      line-height:1.65;
      max-width:720px;
    }

    .mos-btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:14px 19px;
      border-radius:17px;
      background:#000000;
      color:#102c43;
      font-weight:900;
      box-shadow:0 12px 24px rgba(0,0,0,.18);
      white-space:nowrap;
    }

    .mos-footer-note{
      padding:10px 0 0;
      color:#94a3b8;
      font-size:.92rem;
    }

    .mos-lightbox{
      position:fixed;
      inset:0;
      background:rgba(3,8,15,.88);
      display:none;
      align-items:center;
      justify-content:center;
      padding:24px;
      z-index:999999;
    }

    .mos-lightbox.mos-open{
      display:flex;
    }

    .mos-lightbox-inner{
      position:relative;
      width:min(100%,980px);
      background:#07111f;
      border:1px solid rgba(234,242,248,.14);
      border-radius:24px;
      padding:18px;
      box-shadow:0 20px 70px rgba(0,0,0,.42);
    }

    .mos-lightbox-close{
      position:absolute;
      top:14px;
      right:14px;
      border:none;
      background:rgba(255,255,255,.12);
      color:#fff;
      width:42px;
      height:42px;
      border-radius:999px;
      font-size:1.5rem;
      cursor:pointer;
      line-height:1;
    }

    .mos-lightbox-title{
      margin:0 52px 12px 0;
      font-size:1rem;
      color:#e5edf4;
      font-weight:800;
    }

    .mos-lightbox-image{
      width:100%;
      max-height:75vh;
      object-fit:cover;
      border-radius:18px;
    }

    @media(max-width:980px){
      .mos-hero-grid,
      .mos-value-band{
        grid-template-columns:1fr;
      }

      .mos-hero-wrap{
        min-height:auto;
      }

      .mos-hero-grid{
        min-height:auto;
        padding:26px;
      }

      .mos-hero-quote{
        justify-self:start;
        width:100%;
      }

      .mos-section-head{
        flex-direction:column;
        align-items:flex-start;
      }

      .mos-intro-band,
      .mos-cta-wrap{
        flex-direction:column;
        align-items:flex-start;
      }

      .mos-project-card,
      .mos-project-content{
        min-height:auto;
      }

      .mos-project-overlay{
        background:linear-gradient(90deg,rgba(5,11,20,.58),rgba(5,11,20,.985));
      }

      .mos-work-list{
        grid-template-columns:1fr;
      }
    }

    @media(max-width:640px){
      .mos-portfolio{
        padding-top:16px;
      }

      .mos-section{
        padding:32px 0;
      }

      .mos-quick-stats{
        grid-template-columns:1fr;
      }

      .mos-project-content{
        padding:22px;
      }

      .mos-project-meta{
        flex-direction:column;
        align-items:flex-start;
      }

      .mos-logo-box{
        min-width:180px;
        min-height:78px;
      }

      .mos-logo-box img{
        max-height:54px;
        max-width:150px;
      }

      .mos-thumb{
        width:96px;
        height:74px;
      }

      .mos-hero-wrap,
      .mos-project-card,
      .mos-value-copy,
      .mos-value-panel,
      .mos-cta-wrap{
        border-radius:24px;
      }
    }