:root{
    --ink:#0b0b0b;
    --paper:#ffffff;
    --grey-800:#2a2a2a;
    --grey-700:#3f3f3f;
    --grey-600:#535353;
    --grey-500:#6f6f6f;
    --grey-400:#969696;
    --grey-300:#c2c2c2;
    --grey-200:#dadada;
    --grey-150:#e3e3e3;
    --grey-100:#ebebeb;
    --grey-50:#f3f3f3;
    --line:#cfcfcf;
    --maxw:1180px;
    --ease:cubic-bezier(.2,.7,.2,1);
    --font:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{font-family:var(--font);background:var(--paper);color:var(--ink);line-height:1.5;font-weight:400;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  ::selection{background:var(--ink);color:var(--paper);}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:10px 0px;}
  .eyebrow{font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--grey-500);font-weight:600;}
  .num{font-size:11px;letter-spacing:0.18em;color:var(--grey-500);font-weight:600;}

  /* text animations */
  .anim{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms);}
  .anim.in{opacity:1;transform:none;}
  .mask{opacity:1!important;transform:none!important;overflow:hidden;}
  .mask>span{display:block;transform:translateY(112%);transition:transform 1s var(--ease) var(--d,0ms);}
  .mask.in>span{transform:none;}

  /* header */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);}
  .nav{display:flex;align-items:center;justify-content:space-between;}
  .logo{font-size:18px;font-weight:700;letter-spacing:-0.02em;cursor:pointer;line-height:1;display:flex;align-items:center;gap:9px;flex-shrink:0;}
  .logo img{display:block;height:36px;width:auto;max-width:100%;object-fit:contain;}
  .logo .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);transform:translateY(-1px);}
  .nav-links{display:flex;gap:38px;align-items:center;}
  .nav-links a{font-size:13.5px;color:var(--grey-600);text-decoration:none;letter-spacing:0.01em;position:relative;padding:4px 0;transition:color .25s var(--ease);cursor:pointer;}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);transition:width .3s var(--ease);}
  .nav-links a:hover{color:var(--ink);}
  .nav-links a.active{color:var(--ink);}
  .nav-links a.active::after{width:100%;}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin:-8px;}
  .burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s var(--ease);}
  .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  .view{display:none;}
  .view.active{display:block;}

  /* hero */
  .hero{padding:118px 0 92px;border-bottom:1px solid var(--line);}
  .hero .eyebrow{display:block;margin-bottom:34px;}
  .hero h1{font-size:clamp(44px,8.5vw,104px);line-height:.96;font-weight:700;letter-spacing:-0.045em;max-width:11ch;}
  .hero .lede{font-size:clamp(17px,2.1vw,22px);color:var(--grey-600);max-width:34ch;margin-top:34px;line-height:1.45;letter-spacing:-0.015em;}
  .hero .sub{font-size:15px;color:var(--grey-500);max-width:46ch;margin-top:18px;line-height:1.55;}
  .btn{display:inline-flex;align-items:center;gap:12px;margin-top:42px;background:var(--ink);color:var(--paper);border:none;cursor:pointer;font-family:var(--font);font-size:13.5px;letter-spacing:0.02em;font-weight:500;padding:16px 26px;border-radius:999px;transition:transform .3s var(--ease),background .3s var(--ease);}
  .btn:hover{transform:translateY(-2px);background:var(--grey-800);}
  .btn .arr{transition:transform .3s var(--ease);}
  .btn:hover .arr{transform:translateX(4px);}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
  .btn-ghost:hover{background:var(--ink);color:var(--paper);}
  .btn-light{background:var(--paper);color:var(--ink);}
  .btn-light:hover{background:var(--grey-100);}

  /* featured Neopolis slide */
  .feature{position:relative;height:min(620px,82vh);border-bottom:1px solid var(--line);overflow:hidden;background:var(--grey-200);}
  .feature .fbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.04);transform:scale(1.04);transition:transform 1.4s var(--ease);}
  .feature:hover .fbg{transform:scale(1.08);}
  .feature .fshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.5) 42%,rgba(8,8,8,.12) 100%);}
  .feature .fwrap{position:relative;height:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px;display:flex;flex-direction:column;justify-content:center;color:var(--paper);}
  .feature .fbadge{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:0.26em;text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:600;margin-bottom:26px;}
  .feature .fbadge .pulse{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.8s var(--ease) infinite;}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.7);}}
  .feature h2{font-size:clamp(46px,9vw,120px);font-weight:700;letter-spacing:-0.05em;line-height:.9;}
  .feature .ftag{font-size:clamp(16px,2.4vw,26px);color:rgba(255,255,255,.85);margin-top:18px;letter-spacing:-0.02em;font-weight:400;max-width:24ch;}
  .feature .fmeta{display:flex;gap:26px;margin-top:30px;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:600;}
  .feature .btn{margin-top:34px;}

  /* sections */
  .section{padding:96px 0;border-bottom:1px solid var(--line);}
  .section.grey{background:var(--grey-50);}
  .section-head{margin-bottom:54px;}
  .section-head h2{font-size:clamp(28px,4vw,46px);font-weight:700;letter-spacing:-0.035em;line-height:1.02;margin-top:18px;max-width:18ch;}
  .decode-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
  .decode-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 34px 44px;position:relative;transition:background .35s var(--ease);background:var(--paper);}
  .decode-card:hover{background:var(--grey-100);}
  .decode-card .num{display:block;margin-bottom:60px;}
  .decode-card h3{font-size:19px;font-weight:600;letter-spacing:-0.02em;margin-bottom:12px;}
  .decode-card p{font-size:14px;color:var(--grey-600);line-height:1.6;max-width:34ch;}
  .decode-card::after{content:"";position:absolute;left:34px;bottom:0;height:2px;width:0;background:var(--ink);transition:width .4s var(--ease);}
  .decode-card:hover::after{width:34px;}

  /* recently decoded strip */
  .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .strip-card{cursor:pointer;}
  .strip-card .si{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:var(--grey-100);}
  .strip-card .si img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:transform .7s var(--ease);}
  .strip-card:hover .si img{transform:scale(1.05);}
  .strip-card .si .play{position:absolute;top:14px;left:14px;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:#fff;background:rgba(11,11,11,.55);backdrop-filter:blur(6px);padding:7px 11px;border-radius:999px;display:flex;align-items:center;gap:7px;font-weight:600;}
  .strip-card .si .play::before{content:"";border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent #fff;display:inline-block;}
  .strip-card h4{font-size:16px;font-weight:600;letter-spacing:-0.02em;margin-top:16px;}
  .strip-card span.t{font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--grey-500);font-weight:600;display:block;margin-top:8px;}

  /* why */
  .why{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
  .why .pull{font-size:clamp(26px,3.6vw,40px);font-weight:600;letter-spacing:-0.03em;line-height:1.1;}
  .why .pull em{font-style:normal;color:var(--grey-300);}
  .why .pull b{font-weight:600;color:var(--ink);}
  .why .body p{font-size:16px;color:var(--grey-600);line-height:1.7;margin-bottom:20px;max-width:42ch;}
  .why .body p:last-child{margin-bottom:0;color:var(--ink);}

  .cta{padding:108px 0;text-align:center;}
  .cta .eyebrow{display:block;margin-bottom:26px;}
  .cta h2{font-size:clamp(30px,5vw,60px);font-weight:700;letter-spacing:-0.04em;line-height:1.02;max-width:18ch;margin:0 auto;}

  /* stories page */
  .stories-head{padding:96px 0 30px;border-bottom:1px solid var(--line);}
  .stories-head h1{font-size:clamp(36px,6vw,72px);font-weight:700;letter-spacing:-0.04em;line-height:1;margin-top:22px;}
  .stories-head p{color:var(--grey-600);margin-top:24px;max-width:46ch;font-size:16px;line-height:1.6;}
  .stories-head .hint{margin-top:22px;font-size:12px;letter-spacing:0.04em;color:var(--grey-500);display:inline-flex;align-items:center;gap:9px;}
  .stories-head .hint::before{content:"";border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--grey-500);}
  .filters{display:flex;flex-wrap:wrap;gap:10px;padding:34px 0 8px;}
  .chip{font-family:var(--font);font-size:12px;letter-spacing:0.04em;padding:9px 16px;border:1px solid var(--grey-300);border-radius:999px;background:transparent;color:var(--grey-600);cursor:pointer;transition:all .25s var(--ease);}
  .chip:hover{border-color:var(--ink);color:var(--ink);}
  .chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  .masonry{columns:3;column-gap:24px;padding:30px 0 96px;}
  .story{break-inside:avoid;margin-bottom:24px;cursor:pointer;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);}
  .story:hover{transform:translateY(-4px);box-shadow:0 18px 44px -24px rgba(0,0,0,.35);border-color:var(--grey-400);}
  .story .ph{position:relative;display:block;width:100%;background:var(--grey-100);border-bottom:1px solid var(--line);overflow:hidden;}
  .story .ph svg,.story .ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
  .story:hover .ph svg,.story:hover .ph img{transform:scale(1.04);}
  .story .ph .play{position:absolute;top:13px;left:13px;font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:#fff;background:rgba(11,11,11,.5);backdrop-filter:blur(6px);padding:6px 10px;border-radius:999px;display:flex;align-items:center;gap:6px;font-weight:600;}
  .story .ph .play::before{content:"";border-style:solid;border-width:3.5px 0 3.5px 5px;border-color:transparent transparent transparent #fff;}
  .story .meta{padding:22px 22px 26px;}
  .story .tag{font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--grey-500);font-weight:600;display:inline-block;margin-bottom:14px;}
  .story h3{font-size:19px;font-weight:600;letter-spacing:-0.02em;line-height:1.18;margin-bottom:9px;}
  .story p{font-size:13.5px;color:var(--grey-600);line-height:1.55;}
  .story .read{margin-top:18px;font-size:12px;letter-spacing:0.04em;color:var(--ink);display:inline-flex;align-items:center;gap:7px;}
  .story .read .arr{transition:transform .3s var(--ease);}
  .story:hover .read .arr{transform:translateX(4px);}

  /* STORY PLAYER (video-story format) */
  .player{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(8,8,8,.86);backdrop-filter:blur(8px);}
  .player.open{display:flex;animation:fade .3s var(--ease);}
  @keyframes fade{from{opacity:0;}to{opacity:1;}}
  .pl-card{position:relative;width:min(440px,94vw);height:min(862px,92vh);background:#000;border-radius:20px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.7);animation:rise .45s var(--ease);}
  @keyframes rise{from{transform:translateY(22px) scale(.98);opacity:0;}to{transform:none;opacity:1;}}
  .pl-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.05);}
  .pl-bg svg{position:absolute;inset:0;width:100%;height:100%;}
  .pl-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.05) 22%,rgba(0,0,0,.08) 52%,rgba(0,0,0,.82) 100%);}
  .pl-bars{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:5px;z-index:5;}
  .pl-bars .bar{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden;}
  .pl-bars .bar i{display:block;height:100%;width:0;background:#fff;border-radius:2px;}
  .pl-close{position:absolute;top:26px;right:16px;z-index:8;width:34px;height:34px;border-radius:50%;border:none;background:rgba(0,0,0,.32);backdrop-filter:blur(6px);color:#fff;font-size:20px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;}
  .pl-kicker{position:absolute;top:30px;left:18px;z-index:6;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,.9);font-weight:700;display:flex;align-items:center;gap:8px;}
  .pl-kicker .d{width:6px;height:6px;border-radius:50%;background:#fff;}
  .pl-content{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:30px 28px 40px;color:#fff;}
  .pl-frame{animation:frameIn .6s var(--ease);}
  @keyframes frameIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
  .pl-tag{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,.78);font-weight:600;}
  .pl-cover-title{font-size:clamp(34px,9vw,46px);font-weight:700;letter-spacing:-0.04em;line-height:.96;margin-top:16px;}
  .pl-cover-sub{font-size:17px;color:rgba(255,255,255,.82);margin-top:14px;letter-spacing:-0.01em;line-height:1.4;}
  .pl-text{font-size:21px;font-weight:500;letter-spacing:-0.02em;line-height:1.42;}
  .pl-step{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:600;margin-bottom:16px;display:block;}
  .pl-list-h{font-size:13px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,.78);font-weight:700;margin-bottom:18px;}
  .pl-list{list-style:none;}
  .pl-list li{font-size:16px;line-height:1.4;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16);display:flex;gap:13px;align-items:baseline;}
  .pl-list li:last-child{border-bottom:none;}
  .pl-list li span{font-size:10px;letter-spacing:0.1em;color:rgba(255,255,255,.55);flex-shrink:0;font-weight:600;}
  .pl-tap{position:absolute;top:0;bottom:0;z-index:4;width:34%;}
  .pl-tap.left{left:0;}
  .pl-tap.right{right:0;width:66%;}
  .pl-foot{position:absolute;bottom:14px;left:0;right:0;z-index:6;text-align:center;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;}

  /* contact */
  .contact-head{padding:96px 0 64px;}
  .contact-head h1{font-size:clamp(34px,6vw,68px);font-weight:700;letter-spacing:-0.04em;line-height:1;margin-top:22px;max-width:16ch;}
  .contact-head p{color:var(--grey-600);margin-top:26px;max-width:46ch;font-size:16px;line-height:1.65;}
  .contact-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:80px;padding-bottom:110px;align-items:start;}
  .field{margin-bottom:26px;}
  .field label{display:block;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--grey-500);font-weight:600;margin-bottom:10px;}
  .field input,.field textarea{width:100%;font-family:var(--font);font-size:15px;color:var(--ink);background:transparent;border:none;border-bottom:1px solid var(--grey-300);padding:10px 0;transition:border-color .25s var(--ease);letter-spacing:-0.01em;}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);}
  .field input::placeholder,.field textarea::placeholder{color:var(--grey-400);}
  .field textarea{resize:vertical;min-height:90px;}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
  .upload{margin:8px 0 30px;display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border:1px dashed var(--grey-300);border-radius:10px;cursor:pointer;color:var(--grey-600);font-size:13.5px;transition:border-color .25s var(--ease),color .25s var(--ease);}
  .upload:hover{border-color:var(--ink);color:var(--ink);}
  .upload input{display:none;}
  .contact-info{border-left:1px solid var(--line);padding-left:48px;}
  .info-block{margin-bottom:36px;}
  .info-block .eyebrow{display:block;margin-bottom:12px;}
  .info-block a,.info-block span{font-size:16px;color:var(--ink);text-decoration:none;letter-spacing:-0.01em;display:block;line-height:1.5;}
  .info-block a{transition:color .2s var(--ease);}
  .info-block a:hover{color:var(--grey-500);}
  .form-note{font-size:12.5px;color:var(--grey-600);margin-top:18px;}

  footer.site{padding:64px 0 56px;border-top:1px solid var(--line);background:var(--grey-100);}
  .foot-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px;}
  .foot-tagline{font-size:clamp(22px,3vw,32px);font-weight:600;letter-spacing:-0.03em;max-width:18ch;line-height:1.1;}
  .foot-links{display:flex;gap:30px;}
  .foot-links a{font-size:13px;color:var(--grey-600);text-decoration:none;transition:color .2s var(--ease);cursor:pointer;}
  .foot-links a:hover{color:var(--ink);}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:54px;padding-top:26px;border-top:1px solid var(--line);}
  .foot-bottom span{font-size:12px;color:var(--grey-500);letter-spacing:0.01em;}
  .foot-bottom a{color:var(--grey-500);text-decoration:none;transition:color .2s var(--ease);}
  .foot-bottom a:hover{color:var(--ink);}

  @media(max-width:900px){.masonry{columns:2;}.strip{grid-template-columns:1fr 1fr;}}
  @media(max-width:820px){
    /* base wrap — only used when no section class overrides it */
    .wrap{padding:0 20px;}

    /* header nav — explicit padding so header has proper height (~60px) */
    .nav{padding:16px 20px;}
    .logo img{height:28px;}
    .burger{display:flex;}

    /* mobile nav dropdown — top matches header height */
    .nav-links{position:fixed;top:61px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:flex-start;gap:0;border-bottom:1px solid var(--line);transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .3s var(--ease),opacity .3s var(--ease);padding:10px 20px 20px;}
    .nav-links.open{transform:none;opacity:1;pointer-events:auto;}
    .nav-links a{width:100%;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;letter-spacing:0;}
    .nav-links a:last-child{border-bottom:none;}
    .nav-links a::after{display:none;}

    /* hero — horizontal padding included to beat .wrap override */
    .hero{padding:56px 20px 48px;}
    .hero .lede{max-width:100%;margin-top:24px;}
    .hero .sub{max-width:100%;margin-top:14px;}
    .btn{margin-top:28px;}

    /* feature */
    .feature{height:min(560px,80vh);}
    .feature .fwrap{padding:0 20px;}
    .feature .fshade{background:linear-gradient(180deg,rgba(8,8,8,.35) 0%,rgba(8,8,8,.4) 40%,rgba(8,8,8,.82) 100%);}
    .feature .fmeta{gap:16px;flex-wrap:wrap;}

    /* sections — horizontal 20px stops edge-to-edge content */
    .section{padding:52px 20px;}
    .section-head{margin-bottom:36px;}
    .cta{padding:64px 20px;}

    /* decode grid */
    .decode-grid{grid-template-columns:1fr;}
    .decode-card{padding:28px 20px 34px;}
    .decode-card .num{margin-bottom:40px;}

    /* why */
    .why{grid-template-columns:1fr;gap:36px;}

    /* stories */
    .stories-head{padding:52px 20px 24px;}
    .masonry{padding:24px 0 64px;}

    /* contact */
    .contact-head{padding:52px 20px 40px;}
    .contact-grid{grid-template-columns:1fr;gap:48px;padding-bottom:64px;}
    .contact-info{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:40px;}
    .field-row{grid-template-columns:1fr;gap:0;}

    /* footer */
    footer.site{padding:48px 0 40px;}
    .foot-top{flex-direction:column;align-items:flex-start;gap:24px;}
    .foot-links{flex-wrap:wrap;gap:16px;}
    .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px;margin-top:36px;}
  }
  @media(max-width:560px){
    .masonry{columns:1;}
    .strip{grid-template-columns:1fr;}
    .hero{padding:44px 20px 40px;}
    .section{padding:44px 20px;}
    .cta{padding:52px 20px;}
    .stories-head{padding:44px 20px 20px;}
    .contact-head{padding:44px 20px 32px;}
    .strip-card h4{font-size:15px;}
    .decode-card{padding:24px 16px 28px;}
  }