/* =========================================================
   PORTFOLIO — horizontal accordion (Etude style) + work list
   ========================================================= */
.pf-works{padding:130px 0 120px}
.pf-works-head{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:end;margin-bottom:60px}
.page-portfolio main .pf-works-head h2{margin:0 !important}
.page-portfolio main .pf-works-head>p{color:#111111;max-width:520px;margin:0 !important}

.pf-accordion{display:flex;gap:18px;height:clamp(460px,44vw,640px)}
.pf-panel{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;cursor:pointer;outline:none;
  transition:flex-grow .8s cubic-bezier(.16,1,.3,1)}
.pf-panel.is-active{flex-grow:3.4;cursor:default}
.pf-panel figure{margin:0;flex:1 1 auto;height:100%;overflow:hidden;background:#e8dcc8;transition:height .8s cubic-bezier(.16,1,.3,1)}
.pf-panel.is-active figure{height:72%;flex:0 0 72%}
.pf-panel img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s}
.pf-panel:not(.is-active) img{filter:saturate(.85)}
.pf-panel:not(.is-active):hover img{transform:scale(1.06);filter:none}
.pf-panel.is-active img{transform:scale(1.02)}
.pf-vlabel{position:absolute;left:16px;bottom:18px;writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-size:var(--t-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.45);transition:opacity .4s}
.pf-panel.is-active .pf-vlabel{opacity:0}
.pf-info{padding-top:26px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1);white-space:normal;min-width:320px}
.pf-panel.is-active .pf-info{opacity:1;transform:none;pointer-events:auto;transition-delay:.3s}
.pf-cat{display:block;font-size:var(--t-label);font-weight:600;letter-spacing:.18em;color:#c6a75e;margin-bottom:10px}
.page-portfolio main .pf-info h3{font-size:clamp(22px,1.9vw,30px) !important;color:var(--blue);margin:0 0 8px}
.page-portfolio main .pf-info p{font-size:var(--t-small) !important;color:#111111;margin:0 0 16px;max-width:520px}
.pf-more{display:inline-flex;gap:8px;align-items:center;font-size:var(--t-small);font-weight:600;color:var(--blue);padding-bottom:4px;border-bottom:1px solid var(--blue)}
.pf-more b{font-weight:400;transition:transform .35s var(--ease)}
.pf-more:hover b{transform:translate(3px,-3px)}

/* ---------- Work list ---------- */
.pf-list{padding:30px 0 130px}
.pf-list-head{margin-bottom:50px}
.page-portfolio main .pf-list-head h2{margin:0 !important}
.pf-rows{border-top:1px solid rgba(31,42,68,.3)}
.pf-row{display:grid;grid-template-columns:70px 1fr 1.25fr 48px;gap:30px;align-items:start;padding:34px 0;border-bottom:1px solid rgba(31,42,68,.3);transition:background .4s var(--ease),padding .4s var(--ease)}
.pf-row:hover{background:#f7f2ea;padding-left:14px;padding-right:14px}
.pf-row-no{font-size:var(--t-label);font-weight:500;letter-spacing:.18em;color:#c6a75e;padding-top:8px}
.page-portfolio main .pf-row h3{color:var(--blue);margin:0 0 8px}
.page-portfolio main .pf-row p{font-size:var(--t-small) !important;color:#111111;margin:0}
.page-portfolio main .pf-row .pf-row-label{font-size:var(--t-label) !important;font-weight:600 !important;letter-spacing:.18em !important;text-transform:uppercase;color:var(--blue);margin:4px 0 12px}
.pf-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pf-tags li{font-size:12px;font-weight:500;padding:8px 14px;border:1px solid rgba(31,42,68,.22);border-radius:999px;color:var(--blue);background:#fbf8f3}
.pf-row-link{width:44px;height:44px;border-radius:50%;border:1px solid rgba(31,42,68,.3);display:grid;place-items:center;color:var(--blue);transition:background .3s,color .3s,transform .4s var(--ease)}
.pf-row:hover .pf-row-link{background:var(--blue);color:#fff;transform:rotate(45deg)}

/* ---------- Purpose statement ---------- */
.pf-purpose{padding:140px 0}
.pf-purpose-inner{max-width:900px;text-align:center}
.page-portfolio main .pf-purpose h2{margin:0 0 30px !important}
.page-portfolio main .pf-purpose .pf-purpose-lead{font-size:clamp(18px,1.5vw,23px) !important;line-height:1.55 !important;color:var(--ink);font-weight:500 !important;margin:0 0 22px}
.page-portfolio main .pf-purpose p:last-child{color:#111111;max-width:640px;margin:0 auto}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .pf-accordion{gap:10px}
  .pf-info{min-width:260px}
  .pf-row{grid-template-columns:50px 1fr 44px;gap:18px}
  .pf-row-detail{grid-column:2/3}
  .pf-row-link{grid-column:3;grid-row:1}
}
@media (max-width:760px){
  .pf-works{padding:80px 0}
  .pf-works-head{grid-template-columns:1fr;gap:18px;margin-bottom:36px}
  .pf-accordion{flex-direction:column;height:auto;gap:12px}
  .pf-panel,.pf-panel.is-active{flex:none}
  .pf-panel figure,.pf-panel.is-active figure{height:92px;flex:none;transition:height .7s cubic-bezier(.16,1,.3,1)}
  .pf-panel.is-active figure{height:260px}
  .pf-vlabel{writing-mode:horizontal-tb;transform:none;left:16px;bottom:14px}
  .pf-info{min-width:0;display:none}
  .pf-panel.is-active .pf-info{display:block;padding-top:18px}
  .pf-list{padding:10px 0 80px}
  .pf-row{grid-template-columns:40px 1fr 40px;padding:26px 0}
  .pf-row-link{width:38px;height:38px}
  .pf-purpose{padding:90px 0}
}

/* fix: info never takes space in narrow panels; images always full height */
@media (min-width:761px){
  .pf-panel{overflow:hidden;display:block}
  .pf-panel figure{position:absolute;left:0;right:0;top:0;height:100% !important;transition:height .8s cubic-bezier(.16,1,.3,1)}
  .pf-panel.is-active figure{height:72% !important}
  .pf-info{position:absolute;left:0;top:72%;width:max(100%,340px);min-width:0;padding-top:24px}
  .pf-vlabel{z-index:2}
}
.pf-panel figure::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(18,25,41,.6),transparent);transition:opacity .5s;pointer-events:none}
.pf-panel figure{position:relative}
@media (min-width:761px){.pf-panel figure{position:absolute}}
.pf-panel.is-active figure::after{opacity:0}

/* =========================================================
   V30 — thicker accordion panels, + list, Our Belief
   ========================================================= */
@media (min-width:761px){
  .pf-accordion{gap:14px}
  .pf-panel{flex:1 1 0;min-width:110px}
  .pf-panel.is-active{flex-grow:2.6}
}

/* What we create: + accordion */
.pf-list{padding:120px 0 130px;border-top:1px solid var(--line)}
.pf-list-grid{display:grid;grid-template-columns:.8fr 1.4fr;gap:7vw;align-items:start}
.pf-list-head{position:sticky;top:120px;margin:0}
.page-portfolio main .pf-list-head h2{margin:0 0 22px !important}
.page-portfolio main .pf-list-head>p:not(.eyebrow){color:#111111;margin:0 0 32px !important;max-width:400px}
.pf-list-head .ab-btn{display:inline-flex;gap:16px;align-items:center;padding:18px 28px}
.pf-items{border-top:1px solid rgba(31,42,68,.25)}
.pf-item{border-bottom:1px solid rgba(31,42,68,.25);transition:background .4s var(--ease)}
.pf-item.is-open{background:#f7f2ea}
.pf-item-q{width:100%;display:grid;grid-template-columns:56px 1fr 44px;gap:18px;align-items:center;padding:28px 20px 28px 18px;background:none;border:0;text-align:left;cursor:pointer;color:inherit}
.pf-item-no{font-size:var(--t-label);font-weight:500;letter-spacing:.18em;color:#c6a75e}
.pf-item-t b{display:block;font-size:var(--t-h3);font-weight:600;color:var(--blue);letter-spacing:-.01em;line-height:1.2;transition:transform .45s var(--ease)}
.pf-item-t small{display:block;margin-top:6px;font-size:var(--t-small);color:#111111;line-height:1.5}
.pf-item-q:hover .pf-item-t b{transform:translateX(6px)}
.pf-plus{position:relative;width:44px;height:44px;border-radius:50%;border:1px solid rgba(31,42,68,.3);transition:background .35s,border-color .35s,transform .5s var(--ease)}
.pf-plus::before,.pf-plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.6px;background:var(--blue);transform:translate(-50%,-50%);transition:transform .45s var(--ease),background .3s}
.pf-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.pf-item-q:hover .pf-plus{border-color:var(--blue)}
.pf-item.is-open .pf-plus{background:var(--blue);border-color:var(--blue);transform:rotate(180deg)}
.pf-item.is-open .pf-plus::before,.pf-item.is-open .pf-plus::after{background:#fbf8f3}
.pf-item.is-open .pf-plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.pf-item-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.pf-item.is-open .pf-item-a{grid-template-rows:1fr}
.pf-item-a>div{overflow:hidden}
.pf-item-body{padding:0 20px 30px 92px;opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .45s var(--ease)}
.pf-item.is-open .pf-item-body{opacity:1;transform:none;transition-delay:.12s}
.page-portfolio main .pf-item-detail p{font-size:var(--t-small) !important;color:#111111;margin:0 0 12px}
.page-portfolio main .pf-item-detail .pf-row-label{font-size:var(--t-label) !important;font-weight:600 !important;letter-spacing:.18em !important;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.pf-item-link{display:inline-flex;gap:10px;margin-top:18px;font-size:var(--t-label);font-weight:600;letter-spacing:.18em;color:var(--blue);padding-bottom:5px;border-bottom:1px solid var(--blue)}
.pf-item-link b{font-weight:400;transition:transform .35s var(--ease)}
.pf-item-link:hover b{transform:translate(3px,-3px)}

/* Our belief */
.pf-purpose{position:relative;overflow:hidden;padding:140px 0 !important;background:#f7f2ea !important}
.pf-purpose-word{position:absolute;right:-2vw;bottom:-3vw;font-size:clamp(120px,19vw,300px);font-weight:700;letter-spacing:-.05em;line-height:.8;color:rgba(31,42,68,.045);pointer-events:none;user-select:none}
.pf-purpose-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center;text-align:left;max-width:none}
.page-portfolio main .pf-purpose h2{margin:0 0 26px !important}
.page-portfolio main .pf-purpose .pf-purpose-big{font-size:clamp(20px,1.7vw,26px) !important;line-height:1.45 !important;font-weight:500 !important;color:var(--ink);margin:0 0 22px !important;padding-left:22px;border-left:3px solid #c6a75e}
.page-portfolio main .pf-purpose-lead>p:last-child{color:#111111;margin:0 !important;max-width:520px}
.page-portfolio main .pf-purpose-kicker{font-size:var(--t-label) !important;font-weight:600 !important;letter-spacing:.18em !important;text-transform:uppercase;color:var(--blue);margin:0 0 18px !important}
.pf-pillars{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-pillars article{position:relative;background:#fbf8f3;border:1px solid rgba(31,42,68,.12);padding:30px 26px 28px;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s}
.pf-pillars article:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(31,42,68,.1)}
.pf-pillars article:nth-child(2){background:var(--blue)}
.pf-pillar-no{position:absolute;top:24px;right:24px;font-size:var(--t-label);font-weight:500;letter-spacing:.18em;color:#c6a75e}
.pf-pillar-ic{width:40px;height:40px;color:var(--blue);margin-bottom:auto}
.pf-pillar-ic svg{width:100%;height:100%}
.page-portfolio main .pf-pillars h3{margin:24px 0 0 !important;color:var(--blue)}
.pf-pillars article:nth-child(2) .pf-pillar-ic{color:#fff}
.page-portfolio main .pf-pillars article:nth-child(2) h3{color:#fff !important}

@media (max-width:1000px){
  .pf-list-grid,.pf-purpose-grid{grid-template-columns:1fr;gap:50px}
  .pf-list-head{position:static}
}
@media (max-width:760px){
  .pf-list{padding:80px 0}
  .pf-item-q{grid-template-columns:36px 1fr 38px;gap:12px;padding:22px 6px}
  .pf-plus{width:38px;height:38px}
  .pf-item-body{padding:0 6px 24px 54px}
  .pf-purpose{padding:90px 0 !important}
  .pf-pillars article{min-height:150px;padding:22px 18px}
}
@media (min-width:761px){.pf-info{width:100% !important;padding-right:6px}.pf-panel.is-active{flex-grow:3}}

/* =========================================================
   V31 — wider panels + horizontal scrolling strip (desktop)
   ========================================================= */
@media (min-width:761px){
  .pf-accordion{
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;
    margin-right:calc((100vw - var(--shell)) / -2);padding-right:calc((100vw - var(--shell)) / 2);
    scroll-snap-type:none;-webkit-overflow-scrolling:touch;
  }
  .pf-accordion::-webkit-scrollbar{display:none}
  .pf-accordion.is-dragging{cursor:grabbing;user-select:none}
  .pf-accordion.is-dragging *{pointer-events:none}
  .pf-panel{flex:0 0 clamp(190px,17vw,260px) !important;min-width:0 !important;transition:flex-basis .8s cubic-bezier(.16,1,.3,1) !important}
  .pf-panel.is-active{flex:0 0 clamp(440px,40vw,600px) !important}
  .pf-panel img{pointer-events:none;-webkit-user-drag:none}
  .pf-vlabel{font-size:12px}
}
.pf-controls{display:flex;align-items:center;gap:12px;margin-top:34px}
.pf-arrow{width:52px;height:52px;border-radius:50%;border:1px solid rgba(31,42,68,.3);background:#fbf8f3;color:var(--blue);font-size:18px;cursor:pointer;transition:background .3s,color .3s,border-color .3s,opacity .3s}
.pf-arrow:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.pf-arrow:disabled{opacity:.35;pointer-events:none}
.pf-progress{flex:1;height:2px;background:rgba(31,42,68,.15);margin-left:18px;position:relative;overflow:hidden}
.pf-progress i{position:absolute;left:0;top:0;bottom:0;width:20%;background:var(--blue);transition:transform .25s linear}
.pf-hint{font-size:var(--t-label);font-weight:600;letter-spacing:.18em;color:#80869a;margin-left:18px;white-space:nowrap}
@media (max-width:760px){.pf-controls{display:none}}

/* V45 — open panel: always leave room for the text + button */
@media (min-width:761px){
  .pf-accordion{height:clamp(560px,46vw,680px) !important}
  .pf-panel.is-active figure{height:calc(100% - 270px) !important}
  .pf-info{top:calc(100% - 270px) !important;padding-top:22px !important;bottom:0}
  .page-portfolio main .pf-info h3{font-size:var(--t-h3) !important;margin:0 0 8px !important}
  .page-portfolio main .pf-info p{margin:0 0 16px !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pf-cat{margin-bottom:8px !important}
  .pf-more{margin-top:0 !important}
}

/* V122: real project media (images and videos) inside the portfolio panels */
.pf-panel video{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s;background:#1F2A44}
.pf-panel:not(.is-active) video{filter:saturate(.85)}
.pf-panel:not(.is-active):hover video{transform:scale(1.06);filter:none}