@charset "UTF-8";
/* FREESTYLE four-case real-screen portfolio; scoped to works page */
.works-hero {padding-bottom:82px;background:linear-gradient(112deg,#fff 0%,#f2faff 53%,#e2f3ff 100%)}
.works-hero .works-hero-grid{grid-template-columns:minmax(0,47fr) minmax(0,53fr);align-items:center;gap:14px}
.works-hero .d-hero-text{position:relative;z-index:2}
.works-hero .d-hero-text h1{font-size:clamp(33px,4.2vw,58px);letter-spacing:-.065em}
.works-hero-showcase{position:relative;padding:23px 27px 25px 20px;isolation:isolate}
.works-hero-showcase:before{content:"";position:absolute;inset:0 0 0 5%;background:linear-gradient(140deg,#ddf2ff,#bfe3ff);border-radius:30px;transform:rotate(-3deg);z-index:-1}
.works-hero-grid-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;transform:rotate(1.5deg)}
.works-hero-grid-images img{display:block;aspect-ratio:1.55;width:100%;height:auto;object-fit:cover;object-position:top;border:6px solid #fff;border-radius:13px;box-shadow:0 15px 36px #244c7230;background:#fff}
.works-hero-grid-images img:nth-child(2){transform:translateY(-11px)}
.works-hero-grid-images img:nth-child(3){transform:translateY(9px)}
.works-hero-stamp{position:absolute;right:9px;bottom:5px;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:14px;background:#fff;box-shadow:0 15px 30px #0b467b33;color:#206fbd;font-size:10px;font-weight:900;letter-spacing:.1em;line-height:1.4}
.works-hero-stamp-count{font-size:32px;line-height:1;font-weight:900}
.portfolio-section{background:linear-gradient(180deg,#fff 0%,#fafdff 100%)}
.portfolio-section .d-section-heading{margin-bottom:36px}
.portfolio-section .d-section-heading h2{line-height:1.42}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 25px}
.portfolio-card{background:#fff;border:1px solid #dce9f7;border-radius:21px;overflow:hidden;box-shadow:0 17px 42px #145b9b0f;transition:transform .24s ease,box-shadow .24s ease}
.portfolio-card:hover{transform:translateY(-4px);box-shadow:0 23px 45px #145b9b18}
.portfolio-browser{padding:14px 14px 0;background:#eaf4ff}
.portfolio-browser-bar{height:31px;background:#fff;border-radius:12px 12px 0 0;display:flex;gap:6px;align-items:center;padding:0 13px;border:1px solid #dce8f6;border-bottom:0}
.portfolio-browser-bar span{width:7px;height:7px;border-radius:50%;background:#a9c9e6}.portfolio-browser-bar span:first-child{background:#feadb1}.portfolio-browser-bar span:nth-child(2){background:#f1d68b}
.portfolio-browser-bar b{margin-left:auto;color:#94adc5;font-size:9px;font-weight:700;letter-spacing:.15em}
.portfolio-visual{display:block;position:relative;overflow:hidden;aspect-ratio:1.58;background:#f5faff;border:1px solid #dce8f6;border-top:0;border-radius:0 0 7px 7px}
.portfolio-visual img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s ease;transform-origin:center top}
.portfolio-visual:hover img{transform:scale(1.035)}
.portfolio-image-link{position:absolute;bottom:14px;right:14px;display:flex;gap:9px;align-items:center;background:#fff;color:#0e58ab;padding:10px 13px;border-radius:99px;font-size:11px;font-weight:900;box-shadow:0 7px 20px #112b4e26}
.portfolio-image-link span{font-size:16px}
.portfolio-info{padding:28px 29px 30px}.portfolio-meta{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:900;letter-spacing:.16em;color:#2581d6}
.portfolio-count{color:#fff;background:#1379e0;padding:7px 8px;border-radius:7px;letter-spacing:0}
.portfolio-info h3{font-size:clamp(20px,2.3vw,27px);font-weight:900;letter-spacing:-.04em;line-height:1.4;color:#09284d;margin:13px 0 6px}
.portfolio-category{font-size:12px!important;font-weight:800!important;color:#1777c9!important;margin:0 0 16px!important}
.portfolio-description{font-size:13px!important;line-height:1.95!important;color:#506c85!important;margin:0 0 17px!important;min-height:54px}
.portfolio-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:21px}.portfolio-tags span{background:#f1f8ff;border:1px solid #d9eafc;color:#477595;font-weight:700;border-radius:99px;padding:7px 10px;font-size:10px}
.portfolio-textlink{display:inline-flex;gap:12px;color:#0868ca;font-size:12px;font-weight:900;align-items:center;border-bottom:1px solid #b8d5f3;padding-bottom:6px}
.portfolio-textlink:hover{color:#004b9a}
.portfolio-endnote{display:flex;gap:8px;margin:24px 0 0;color:#70859a;line-height:1.85}.portfolio-endnote p{margin:0;font-size:11px}.portfolio-endnote-mark{font-size:11px}
.works-conversation{overflow:hidden}.works-conversation-inner{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.works-conversation-copy h2{font-size:clamp(28px,3.3vw,42px);line-height:1.45;margin:10px 0 17px;letter-spacing:-.05em}.works-conversation-copy h2 em{color:#116fdc;font-style:normal}
.works-conversation-copy p{color:#536d86;font-size:14px;line-height:2;margin-bottom:22px}
.works-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}.works-pills span{color:#2d73b1;background:#fff;border:1px solid #d7e8f9;border-radius:10px;padding:9px 11px;font-size:11px;font-weight:800}
.works-conversation-photo{position:relative}.works-conversation-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;object-position:center;border:9px solid #fff;border-radius:21px;box-shadow:0 20px 50px #0e4c812c;background:#fff}
.works-conversation-tag{position:absolute;right:-9px;bottom:-17px;background:#136eda;color:#fff;border-radius:9px;font-size:10px;font-weight:900;letter-spacing:.13em;padding:15px 16px;box-shadow:0 8px 24px #1355b939}
.mobile-only{display:none}
@media(max-width:1000px){.works-hero .works-hero-grid{grid-template-columns:1fr 1fr}.works-hero-stamp{right:-7px}.portfolio-grid{gap:18px}.portfolio-info{padding:24px 22px}}
@media(max-width:760px){.works-hero .works-hero-grid{grid-template-columns:1fr;gap:12px}.works-hero .d-hero-text h1{font-size:clamp(32px,8vw,43px)}.works-hero-showcase{padding:15px 15px 18px 10px;margin-top:15px}.works-hero-grid-images{gap:7px}.works-hero-grid-images img{border-width:4px;border-radius:10px}.works-hero-stamp{right:4px;bottom:0}.portfolio-grid{grid-template-columns:1fr;gap:22px}.portfolio-info{padding:24px}.portfolio-info h3{font-size:23px}.works-conversation-inner{grid-template-columns:1fr;gap:34px}.works-conversation-photo{margin-right:14px}.works-conversation-tag{right:-10px}.mobile-only{display:block}.portfolio-image-link{bottom:10px;right:10px}}
@media (prefers-reduced-motion:reduce){.portfolio-card,.portfolio-visual img{transition:none}}

.works-hero-grid > *, .works-conversation-inner > *{min-width:0}

/* Showcase update: new hero collage and premium portfolio images */
.works-hero-showcase { padding:20px 10px 18px 16px; }
.works-hero-showcase:before { inset:14px 6px 10px 22px; transform:rotate(-2deg); }
.works-hero-collage { display:block; width:100%; aspect-ratio:1672/941; height:auto; object-fit:cover; border:7px solid #fff; border-radius:18px; box-shadow:0 23px 48px rgba(14,72,125,.18); }
.works-hero-stamp {right:-3px;bottom:-5px;gap:10px;font-size:11px;padding:11px 16px;}
.works-hero-stamp-arrow {font-size:19px;color:#1686ed;}
.portfolio-browser {padding:0;background:#fff;}
.portfolio-browser-bar {display:none;}
.portfolio-visual {aspect-ratio:1532/1027;border:0;border-radius:0;background:#edf6ff;}
.portfolio-visual img {object-position:center;transform-origin:center;}
.portfolio-visual:hover img {transform:scale(1.025);}
.portfolio-image-link {bottom:15px;right:15px;}
@media(max-width:760px) {
  .works-hero-showcase {padding:16px 12px 18px 8px; margin-top:12px;}
  .works-hero-collage {border-width:5px;border-radius:13px;}
  .works-hero-stamp {right:0;bottom:-2px;padding:9px 11px;font-size:9px;}
  .portfolio-visual {aspect-ratio:1532/1027;}
  .portfolio-image-link {font-size:10px;}
}