.fhcf,.fhcf *,.fhcf-dialog,.fhcf-dialog *{box-sizing:border-box}
.fhcf{--fhcf-clay:#f4f3ef;--fhcf-step:clamp(110px,16vh,170px);position:relative;isolation:isolate;width:100%;height:100vh;height:100svh;min-height:calc(240px + var(--fhcf-rows)*110px);background:transparent;color:#181818;font-family:'Unbounded',sans-serif;display:flex;flex-direction:column;overflow:hidden}
.fhcf .fhcf-heading{display:flex;justify-content:space-between;gap:20px;padding:clamp(24px,4vw,64px);flex:1;min-height:220px;align-items:flex-start}
.fhcf .fhcf-heading h2{font:600 clamp(30px,4vw,64px)/1.1 'Unbounded',sans-serif;letter-spacing:-.05em;margin:0;color:inherit}
.fhcf-hint{font-size:11px;padding-top:8px;line-height:1.6}.fhcf-hint span{font-size:22px;margin-left:16px}
.fhcf-stack{position:relative;height:calc(var(--fhcf-rows)*var(--fhcf-step));flex:none}
.fhcf-item{position:absolute;top:calc(var(--fhcf-row)*var(--fhcf-step));left:calc(var(--fhcf-col)*51%);width:52%;height:calc(var(--fhcf-step) + 42px);z-index:calc(var(--fhcf-i) + 1)}
.fhcf-item:nth-child(4n+3){width:39%}.fhcf-item:nth-child(4n+4){left:36%;width:64%}
.fhcf-item:nth-child(even){max-width:49%}.fhcf-item:nth-child(4n+4){max-width:64%}
.fhcf .fhcf-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;height:100%;border:0;border-radius:22px 0 0 0;clip-path:polygon(0 0,42% 0,calc(42% + 28px) 34px,100% 34px,100% 100%,0 100%);background:var(--fhcf-clay);box-shadow:inset 0 3px 5px #fff,inset 0 -14px 28px #dad8d466;color:#252525;cursor:pointer;padding:18px clamp(22px,3vw,48px);font-family:'Unbounded',sans-serif;text-align:left;transition:background .35s,color .35s;appearance:none;line-height:1.3}
.fhcf-number{font-size:11px;font-weight:500}.fhcf-title{font-size:clamp(18px,2.6vw,42px);font-weight:500;letter-spacing:-.06em;margin-top:8px;padding-right:32px;overflow-wrap:anywhere}.fhcf-arrow{position:absolute;right:24px;top:58px;font-size:24px}
.fhcf-item:hover,.fhcf-item:focus-within{z-index:40}
.fhcf-item:hover .fhcf-face,.fhcf-item:focus-within .fhcf-face{background:var(--fhcf-accent);color:var(--fhcf-ink)}
.fhcf-face:focus-visible .fhcf-title{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px}
.fhcf-fan{position:absolute;left:8%;top:-145px;width:310px;max-width:80%;height:210px;pointer-events:none;z-index:-1}
.fhcf-photo{position:absolute!important;bottom:0;width:46%!important;height:210px!important;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 10px #0002);opacity:0;transform:translateY(130px) rotate(0deg);transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .3s}
.fhcf-photo-1{left:0}.fhcf-photo-2{left:27%}.fhcf-photo-3{left:54%}
.fhcf-item:hover .fhcf-photo,.fhcf-item:focus-within .fhcf-photo{opacity:1}.fhcf-item:hover .fhcf-photo-1,.fhcf-item:focus-within .fhcf-photo-1{transform:translateY(0) rotate(-14deg)}.fhcf-item:hover .fhcf-photo-2,.fhcf-item:focus-within .fhcf-photo-2{transform:translateY(12px) rotate(4deg)}.fhcf-item:hover .fhcf-photo-3,.fhcf-item:focus-within .fhcf-photo-3{transform:translateY(-8px) rotate(15deg)}
@media(max-width:767px){.fhcf{--fhcf-step:90px;min-height:calc(230px + var(--fhcf-count)*75px);height:100svh}.fhcf .fhcf-heading{padding:28px 22px;min-height:200px}.fhcf-hint{display:none}.fhcf-stack{height:calc(var(--fhcf-count)*75px)}.fhcf-item,.fhcf-item:nth-child(n){left:0;top:calc(var(--fhcf-i)*75px);width:100%;max-width:none;height:130px}.fhcf .fhcf-face{padding:12px 22px;clip-path:polygon(0 0,62% 0,calc(62% + 22px) 28px,100% 28px,100% 100%,0 100%);border-radius:18px 0 0 0}.fhcf-title{font-size:23px;margin-top:5px}.fhcf-number{font-size:9px}.fhcf-arrow{top:38px}.fhcf-fan{left:18%;width:220px;top:-130px}.fhcf-photo{height:175px!important}}
@media(prefers-reduced-motion:reduce){.fhcf *{transition:none!important}}

/* 1.1: a continuous curved silhouette, without the inset border or bevel. */
.fhcf .fhcf-face,.fhcf .fhcf-face:hover,.fhcf .fhcf-face:focus,.fhcf .fhcf-face:active{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important;clip-path:none!important;border-radius:0!important;text-decoration:none!important}
.fhcf .fhcf-face::before,.fhcf .fhcf-face::after{content:none!important}
.fhcf .fhcf-face{overflow:visible;isolation:isolate}
.fhcf-shape{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}
.fhcf-shape path{fill:var(--fhcf-clay);stroke:none;transition:fill .35s ease}
.fhcf-item:hover .fhcf-shape path,.fhcf-item:focus-within .fhcf-shape path,.fhcf-item.is-revealed .fhcf-shape path{fill:var(--fhcf-accent)}
.fhcf-item.is-revealed{z-index:40}.fhcf-item.is-revealed .fhcf-face{color:var(--fhcf-ink)}
.fhcf-item.is-revealed .fhcf-photo{opacity:1}.fhcf-item.is-revealed .fhcf-photo-1{transform:translateY(0) rotate(-14deg)}.fhcf-item.is-revealed .fhcf-photo-2{transform:translateY(12px) rotate(4deg)}.fhcf-item.is-revealed .fhcf-photo-3{transform:translateY(-8px) rotate(15deg)}
@media(prefers-reduced-motion:reduce){.fhcf-shape path{transition:none}}

/* 1.1.2: bottom-anchored desktop stack and left-side mobile folders. */
.fhcf{justify-content:flex-end}
.fhcf .fhcf-heading{flex:0 0 auto;margin-bottom:auto}
.fhcf-stack{margin-top:auto}
@media(max-width:767px){
 .fhcf{--fhcf-mobile-step:160px;min-height:calc(120px + var(--fhcf-count)*var(--fhcf-mobile-step));height:auto;min-height:max(100svh,calc(120px + var(--fhcf-count)*var(--fhcf-mobile-step)));overflow:hidden}
 .fhcf .fhcf-heading{min-height:120px;padding:24px 20px;margin:0}
 .fhcf .fhcf-heading h2{font-size:28px}
 .fhcf-stack{width:100%;height:calc(var(--fhcf-count)*var(--fhcf-mobile-step));margin:0}
 .fhcf-item,.fhcf-item:nth-child(n){left:0;top:calc(var(--fhcf-i)*var(--fhcf-mobile-step));width:100px;max-width:none;height:calc(var(--fhcf-mobile-step) + 14px)}
 .fhcf .fhcf-face{padding:14px 12px;align-items:flex-start}
 .fhcf-title{writing-mode:vertical-rl;transform:rotate(180deg);font-size:18px;letter-spacing:-.04em;margin:10px 0 0 0;padding:0;max-height:125px;overflow-wrap:anywhere}
 .fhcf-number{font-size:9px}
 .fhcf-arrow{right:14px;top:20px;font-size:20px}
 .fhcf-fan{left:75px;top:0;width:calc(100vw - 125px);max-width:250px;height:160px}
 .fhcf-photo{height:150px!important;transform:translateX(-75px) scale(.85);transform-origin:left center}
 .fhcf-item:hover .fhcf-photo-1,.fhcf-item:focus-within .fhcf-photo-1,.fhcf-item.is-revealed .fhcf-photo-1{transform:translateX(0) rotate(-12deg)}
 .fhcf-item:hover .fhcf-photo-2,.fhcf-item:focus-within .fhcf-photo-2,.fhcf-item.is-revealed .fhcf-photo-2{transform:translateX(4px) rotate(3deg)}
 .fhcf-item:hover .fhcf-photo-3,.fhcf-item:focus-within .fhcf-photo-3,.fhcf-item.is-revealed .fhcf-photo-3{transform:translateX(0) rotate(12deg)}
}

.fhcf-shape-mobile{display:none}
@media(max-width:767px){.fhcf-shape-desktop{display:none}.fhcf-shape-mobile{display:block}.fhcf .fhcf-face{padding-left:27px}}

/* 1.1.3: compact section with an explicit bottom anchor. */
.fhcf{--fhcf-step:100px;height:72svh;max-height:720px;min-height:calc(250px + var(--fhcf-rows)*var(--fhcf-step));margin:0!important;padding:0!important}
.fhcf .fhcf-heading{position:relative;z-index:50;flex:0 0 auto;min-height:0;margin:0 0 auto;padding:24px clamp(22px,3vw,48px);pointer-events:none}
.fhcf .fhcf-heading h2{font-size:clamp(28px,3.4vw,48px)}
.fhcf .fhcf-stack{position:absolute;left:0;right:0;bottom:0;width:100%;height:calc(var(--fhcf-rows)*var(--fhcf-step));margin:0!important;padding:0!important}
.fhcf .fhcf-item{bottom:-30px;height:auto;margin:0!important}
.fhcf .fhcf-title{font-size:clamp(18px,2.3vw,34px)}
@media(max-width:767px){
 .fhcf{--fhcf-mobile-step:140px;height:calc(100px + var(--fhcf-count)*var(--fhcf-mobile-step));min-height:0;max-height:none}
 .fhcf .fhcf-heading{padding:20px;min-height:0}
 .fhcf .fhcf-heading h2{font-size:28px}
 .fhcf .fhcf-stack{height:calc(var(--fhcf-count)*var(--fhcf-mobile-step));bottom:0;left:0;right:0}
 .fhcf .fhcf-item,.fhcf .fhcf-item:nth-child(n){bottom:auto;height:calc(var(--fhcf-mobile-step) + 14px)}
 .fhcf .fhcf-title{font-size:17px;max-height:110px}
 .fhcf-fan{height:140px}
 .fhcf-photo{height:130px!important}
}

/* 1.1.4: wide mobile folders with horizontal labels and a right-side fan. */
@media(max-width:767px){
 .fhcf .fhcf-item,.fhcf .fhcf-item:nth-child(n){width:60%;max-width:none;left:0}
 .fhcf .fhcf-face{padding:17px 18px;justify-content:flex-start}
 .fhcf .fhcf-title{writing-mode:horizontal-tb;transform:none;font-size:clamp(17px,4.6vw,25px);line-height:1.25;letter-spacing:-.04em;margin:16px 0 0;padding:0 14px 0 0;max-height:none;width:100%;overflow-wrap:anywhere}
 .fhcf .fhcf-number{font-size:10px}
 .fhcf .fhcf-arrow{top:auto;bottom:22px;right:16px;font-size:20px}
 .fhcf .fhcf-shape-desktop{display:block}
 .fhcf .fhcf-shape-mobile{display:none}
 .fhcf .fhcf-fan{left:85%;top:4px;width:72%;max-width:none;height:140px}
 .fhcf .fhcf-photo{height:130px!important}
}

/* 1.2.0: restore the pre-transparency desktop layout; retain approved mobile. */
@media(min-width:768px){
 .fhcf{--fhcf-step:clamp(110px,16vh,170px);height:100vh;height:100svh;min-height:calc(240px + var(--fhcf-rows)*110px);max-height:none;justify-content:flex-start;background:#fff}
 .fhcf .fhcf-heading{position:static;z-index:auto;flex:1;min-height:220px;margin:0;padding:clamp(24px,4vw,64px);pointer-events:auto}
 .fhcf .fhcf-heading h2{font-size:clamp(30px,4vw,64px)}
 .fhcf .fhcf-stack{position:relative;left:auto;right:auto;bottom:auto;height:calc(var(--fhcf-rows)*var(--fhcf-step));flex:none}
 .fhcf .fhcf-item{bottom:auto;height:calc(var(--fhcf-step) + 42px)}
 .fhcf .fhcf-title{font-size:clamp(18px,2.6vw,42px)}
}

/* 1.2.1: plain white with a centred clay mark, and stacked mobile words. */
.fhcf{background:#fff}
.fhcf .fhcf-brand{position:absolute;left:50%;top:calc((100% - var(--fhcf-rows)*var(--fhcf-step))/2);transform:translate(-50%,-50%);width:25%;height:auto;max-width:none;pointer-events:none;z-index:0}
.fhcf .fhcf-heading,.fhcf .fhcf-stack{z-index:1}
.fhcf .fhcf-word{display:inline}
@media(max-width:767px){
 .fhcf{--fhcf-mobile-step:var(--fhcf-word-step,140px);height:calc(190px + var(--fhcf-count)*var(--fhcf-mobile-step))}
 .fhcf .fhcf-brand{top:125px;width:25%}
 .fhcf .fhcf-word{display:block;white-space:nowrap;overflow-wrap:normal}
 .fhcf .fhcf-title{font-size:clamp(16px,4.2vw,25px);line-height:1.28;padding-right:0}
}

/* 1.2.2: tighter mobile copy spacing. */
@media(max-width:767px){
 .fhcf .fhcf-face{padding:12px 10px}
 .fhcf .fhcf-title{margin-top:8px;padding:0;line-height:1.18}
}