/* HAYY: a warm, graphic counterpoint to the dark portfolio shell. */
:root{--hy-red:#db1f31;--hy-deep:#a72430;--hy-yellow:#fad22b;--hy-blue:#2f397e;--hy-cream:#f7f1e9;--hy-ink:#202020}
#work .bi-card{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;padding:7%;background:radial-gradient(ellipse at 85% 25%,#493d3638,transparent 65%),#161716;color:#f7f2e9;isolation:isolate;text-align:left}
#work .bi-card-top{display:flex;align-items:center;justify-content:space-between;font-size:clamp(8px,.65vw,11px);letter-spacing:.18em;color:#bfb8af}
#work .bi-card-cross{color:#ff744d;font:400 clamp(20px,2.4vw,35px)/1 Georgia,serif}
#work .bi-card-body{display:grid;grid-template-columns:1fr 1fr;gap:7%;flex:1;align-items:center;min-height:0}
#work .bi-card-copy{position:relative;z-index:3;min-width:0}
#work .bi-card-copy strong{font:500 clamp(29px,3.8vw,54px)/1.02 Manrope,sans-serif;letter-spacing:-.07em;display:block}
#work .bi-card-copy em{font:italic 400 1.12em/1 Georgia,serif;color:#ff744d;letter-spacing:-.05em}
#work .bi-card-copy p{margin:20px 0 0;max-width:180px;font-size:clamp(9px,.85vw,13px);line-height:1.55;color:#a7a59f}
#work .bi-kit{position:relative;height:77%;width:100%;min-height:150px;direction:ltr}
#work .bi-sheet{position:absolute;width:90%;height:72%;display:flex;flex-direction:column;justify-content:space-between;padding:11%;box-shadow:0 10px 18px #0005;border:1px solid #fff1;transition:transform .35s ease}
#work .bi-sheet>span{font-size:clamp(5px,.44vw,7px);letter-spacing:.09em;white-space:nowrap}
#work .bi-sheet-back{top:0;left:0;background:#f1e7da;color:#4a4440;transform:rotate(-10deg)}
#work .bi-gridmark{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1;width:64%;margin:auto;gap:4px;transform:rotate(45deg)}
#work .bi-gridmark i{display:block;background:#ff744d;border-radius:50% 50% 0 50%}
#work .bi-gridmark i:nth-child(2){transform:rotate(90deg)}
#work .bi-gridmark i:nth-child(3){transform:rotate(-90deg)}
#work .bi-gridmark i:nth-child(4){transform:rotate(180deg)}
#work .bi-sheet-front{top:26%;left:12%;background:#303d55;color:#f1e7da;transform:rotate(8deg)}
#work .bi-specimen{font:400 clamp(36px,5vw,70px)/1 Georgia,serif;letter-spacing:-.08em}
#work .bi-specimen>span{display:block;margin:7px 0 0;font:400 clamp(8px,.8vw,12px)/1.2 Manrope,sans-serif;letter-spacing:.05em}
#work .bi-swatches{display:flex;width:100%;height:17%;min-height:12px;gap:3px}
#work .bi-swatches i{flex:1;background:#ff744d}
#work .bi-swatches i:nth-child(2){background:#f1e7da}
#work .bi-swatches i:nth-child(3){background:#9aafa3}
#work .bi-kit-caption{position:absolute;inset:auto 0 -11% 0;text-align:center;font-size:clamp(5px,.48vw,8px);letter-spacing:.09em;color:#948b81}
#work .bi-card-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f7f2e928;padding-top:4%;margin-top:7%;font-size:clamp(6px,.54vw,9px);letter-spacing:.06em;color:#bfb8af}
#work .bi-card-foot b{font:400 clamp(20px,2.2vw,30px)/1 Manrope,sans-serif;color:#ff744d}
#work .project-card:has(.bi-card).is-current .project-art{border-color:#ff744d80;box-shadow:0 26px 70px #000a,0 0 0 1px #ff744d66}
@media(hover:hover){#work .project-button:hover .bi-sheet-back{transform:translate(-3px,-3px) rotate(-13deg)}#work .project-button:hover .bi-sheet-front{transform:translate(3px,3px) rotate(11deg)}}
@media(max-width:700px){#work .bi-card-copy strong{font-size:clamp(24px,6.8vw,42px)}#work .bi-card-copy p{font-size:10px;margin-top:12px}#work .bi-kit{height:75%;min-height:120px}#work .bi-specimen{font-size:clamp(30px,9vw,48px)}#work .bi-card-body{gap:5%}#work .bi-card[dir=rtl] .bi-card-copy strong{font-size:26px}}
@media(prefers-reduced-motion:reduce){#work .bi-sheet{transition:none}}
html[lang=fr] #work .bi-card-copy strong{font-size:clamp(28px,3.2vw,46px)}
html[lang=ar] #work .bi-card{text-align:right}
html[lang=ar] #work .bi-card-copy strong,html[lang=ar] #work .bi-card-copy em{font-family:Arial,sans-serif;letter-spacing:0;line-height:1.25}
@media(max-width:700px){html[lang=fr] #work .bi-card-copy strong{font-size:clamp(22px,5.4vw,31px)}html[lang=ar] #work .bi-card-copy strong{font-size:27px}}
#project-dialog.hayy-project{--case-chrome:#101115;--case-rgb:219,31,49}
#project-dialog.hayy-project .project-nav-index{color:#ffd36a}
#project-dialog.hayy-project .project-nav-type{color:#e4b4ac}
.hy-page{background:var(--hy-cream);color:var(--hy-ink)}
.hy-page-bar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:72px;padding:12px clamp(22px,4vw,70px);background:#11131bed;color:#f7f1e9;backdrop-filter:blur(14px)}
.hy-page-bar>a:first-child{font-size:12px;letter-spacing:.04em}
.hy-page-brand{font:700 22px/1 'Manrope',sans-serif;letter-spacing:-.06em}
.hy-page-brand span{color:#ff744d}
.hy-language{justify-self:end;display:flex;gap:4px}
.hy-language button{padding:9px 10px;border:1px solid transparent;background:transparent;color:#a7a9b2;font-size:11px;letter-spacing:.08em}
.hy-language button[aria-pressed=true]{border-color:#ffffff55;color:#fff}
.hy-case{background:var(--hy-cream);color:var(--hy-ink);font-family:'DM Sans',sans-serif}
.hy-case *{box-sizing:border-box}
.hy-case h1,.hy-case h2,.hy-case h3,.hy-case p,.hy-case figure{margin:0}
.hy-case h1,.hy-case h2,.hy-case h3{font-family:'Manrope',sans-serif;font-weight:500}
.hy-case em{font-family:Georgia,serif;font-weight:400}
.hy-case img{display:block;width:100%}
.hy-case .hy-chapter,.hy-case .hy-kicker{display:block;font:600 11px/1.5 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase}
.hy-case .hy-chapter{color:var(--hy-deep)}
.hy-case p{font-size:clamp(16px,1.25vw,19px);line-height:1.65}
.hy-hero{display:grid;grid-template-columns:43% 57%;min-height:min(850px,calc(100svh - 82px));background:var(--hy-deep);color:var(--hy-cream)}
.hy-hero-copy{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(35px,5vw,95px) clamp(28px,5vw,95px) 35px;min-width:0}
.hy-kicker{color:#ffd6b8}
.hy-hero-title{font-size:clamp(54px,5.65vw,108px)!important;line-height:.94;letter-spacing:-.075em;margin:auto 0 30px!important;max-width:730px}
.hy-hero-title em{color:var(--hy-yellow);letter-spacing:-.055em}
.hy-hero-intro{max-width:520px;color:#ffe6db}
.hy-hero-actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin:35px 0 50px}
.hy-action{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 22px;min-width:210px;background:var(--hy-yellow);color:var(--hy-ink);font-size:13px;font-weight:700;transition:transform .25s,background .25s}
.hy-action:hover{transform:translateY(-3px);background:#ffe35a}
.hy-action span{font-size:23px;font-weight:400}
.hy-text-link{font-size:13px;border-bottom:1px solid #f7f1e9a0;padding:10px 0}
.hy-hero-credit{margin-top:auto;padding-top:18px;border-top:1px solid #ffffff50;width:100%;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.hy-hero-photo{position:relative;min-width:0;overflow:hidden}
.hy-hero-photo img{height:100%;object-fit:cover;object-position:50% center}
.hy-hero-photo span{position:absolute;right:30px;bottom:25px;padding:8px 10px;background:#201918b8;color:#fff;font-size:10px;letter-spacing:.15em}
.hy-intro,.hy-name,.hy-identity,.hy-place,.hy-launch,.hy-outro{padding-inline:clamp(24px,6vw,112px)}
.hy-intro{display:grid;grid-template-columns:27% 1fr;gap:5%;padding-block:clamp(90px,11vw,190px);border-bottom:1px solid #20202020}
.hy-intro h3,.hy-name h3,.hy-identity h3,.hy-place h3,.hy-launch h3,.hy-outro h3{font-size:clamp(40px,5.7vw,100px);line-height:.98;letter-spacing:-.068em}
.hy-intro h3 em,.hy-name h3 em,.hy-identity h3 em,.hy-place h3 em{color:var(--hy-red)}
.hy-intro p{max-width:690px;margin-top:28px;color:#4d4945}
.hy-name{display:grid;grid-template-columns:58% 1fr;gap:6%;align-items:center;padding-block:clamp(70px,9vw,150px);background:#f0e9df}
.hy-name-mark{padding:clamp(20px,3vw,55px);background:var(--hy-cream)}
.hy-name-mark img{max-height:290px;object-fit:contain}
.hy-name h3{font-size:clamp(36px,3.7vw,70px);margin-top:22px}
.hy-name p{margin-top:22px;color:#5e5751}
.hy-identity{padding-block:clamp(80px,9vw,150px)}
.hy-identity header{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:end}
.hy-identity h3{margin-top:25px}
.hy-identity h3 em{color:var(--hy-red)}
.hy-identity header p{max-width:590px;color:#5b5752}
.hy-palette{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:60px;padding:20px 0;border-block:1px solid #20202030}
.hy-palette>span{font-size:11px;letter-spacing:.15em}
.hy-palette>div{display:flex;gap:6px;width:min(60%,620px);height:58px}
.hy-palette i{display:block;flex:1;background:var(--swatch)}
.hy-system{margin-top:48px!important;display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:end}
.hy-graphic-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:24px;margin-top:44px}
.hy-graphic-grid figure{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:26px;background:#f0e9df}
.hy-graphic-grid img{height:190px;object-fit:contain;margin-top:26px;mix-blend-mode:multiply}
.hy-identity header>.hy-chapter{grid-column:1/-1}
.hy-hero-photo{background:#dbcabd}
.hy-case a:focus-visible,.hy-page-bar a:focus-visible,.hy-page-bar button:focus-visible,.hy-case button:focus-visible{outline:3px solid var(--hy-yellow);outline-offset:5px}
@media(max-width:700px){.hy-graphic-grid{grid-template-columns:1fr;gap:16px}.hy-graphic-grid img{height:auto;max-height:215px}.hy-case #hy-story{scroll-margin-top:64px}}
.hy-system img{background:var(--hy-cream);max-height:440px;object-fit:contain}
.hy-system figcaption{font-size:15px;line-height:1.5;color:#68625e;max-width:270px;padding-bottom:10px}
.hy-place{padding-block:clamp(80px,9vw,150px);background:#e9e7e0}
.hy-place-head{display:grid;grid-template-columns:1fr 1fr;gap:30px 5vw;align-items:end;margin-bottom:50px}
.hy-place-head .hy-chapter{grid-column:1/-1}
.hy-place-head p{max-width:580px;color:#55524e}
.hy-case figcaption{font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.hy-place-main img{aspect-ratio:1.75;object-fit:cover}
.hy-place-main figcaption,.hy-place-pair figcaption{padding-top:12px}
.hy-place-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.hy-place-pair img{aspect-ratio:1.35;object-fit:cover}
.hy-launch{display:grid;grid-template-columns:42% 58%;gap:3vw;align-items:center;padding-block:clamp(80px,9vw,150px);padding-right:calc(clamp(24px,6vw,112px) + 3vw);background:var(--hy-red);color:#fff8ed}
.hy-launch .hy-chapter{color:#ffe995}
.hy-launch h3{font-size:clamp(41px,4.3vw,82px);margin:30px 0}
.hy-launch h3 em{color:var(--hy-yellow)}
.hy-launch p{max-width:520px;color:#ffe0d5}
.hy-launch figure{min-width:0}
.hy-launch figure img{width:100%;aspect-ratio:1.4;object-fit:cover}
.hy-launch figcaption{padding-top:12px;color:#ffe0d5}
.hy-phases{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:42px}
.hy-phases span{border-top:1px solid #ffffff80;padding-top:10px;font-size:12px;letter-spacing:.08em}
.hy-phases b{margin-right:12px;color:var(--hy-yellow)}
.hy-outro{padding-block:clamp(90px,10vw,170px);background:var(--hy-blue);color:#fff;display:flex;flex-direction:column;align-items:flex-start}
.hy-outro>span{font-size:11px;letter-spacing:.17em}
.hy-outro h3{margin:45px 0 25px;max-width:930px}
.hy-outro h3 em{color:var(--hy-yellow)}
.hy-outro p{max-width:690px;color:#e0e3f2}
.hy-outro .hy-action{margin-top:36px}
.hy-outro small{margin-top:55px;font-size:12px;color:#d6d9ed}
.hy-case[lang=ar]{font-family:Arial,sans-serif}
.hy-case[lang=ar] h1,.hy-case[lang=ar] h2,.hy-case[lang=ar] h3{font-family:Arial,sans-serif;letter-spacing:0}
.hy-case[lang=ar] em{font-family:Arial,sans-serif}
.hy-case[lang=ar] .hy-chapter,.hy-case[lang=ar] .hy-kicker{font-family:Arial,sans-serif;letter-spacing:0}
.hy-case[dir=rtl] .hy-hero-photo span{right:auto;left:30px}
.hy-case[dir=rtl] .hy-phases b{margin-right:0;margin-left:12px}
@media(max-width:1000px){.hy-hero{grid-template-columns:48% 52%}.hy-hero-title{font-size:clamp(50px,7vw,80px)!important}.hy-launch{grid-template-columns:1fr}.hy-launch figure{margin-top:32px}}
@media(max-width:700px){#work .hy-card{grid-template-columns:52% 48%}#work .hy-card-panel{padding:8%}#work .hy-card-index{font-size:8px}#work .hy-card-line{font-size:14px}#work .hy-card-foot{font-size:8px}.hy-page-bar{grid-template-columns:1fr auto;gap:10px;min-height:64px}.hy-page-brand{display:none}.hy-hero{display:flex;flex-direction:column;min-height:0}.hy-hero-copy{padding:40px 6vw}.hy-hero-title{font-size:clamp(52px,11vw,76px)!important;margin:65px 0 25px!important}.hy-hero-actions{margin:28px 0 35px}.hy-hero-credit{margin-top:10px}.hy-hero-photo{height:65vw;min-height:290px}.hy-intro,.hy-name,.hy-identity header,.hy-place-head,.hy-system{grid-template-columns:1fr}.hy-intro{gap:28px}.hy-name{gap:45px}.hy-name-mark img{max-height:180px}.hy-identity header{gap:22px}.hy-palette{display:block}.hy-palette>div{margin-top:20px;width:100%;height:48px}.hy-system{gap:10px}.hy-place-head .hy-chapter{grid-column:auto}.hy-place-pair{grid-template-columns:1fr}.hy-launch{padding-right:clamp(24px,6vw,112px)}.hy-launch figure img{aspect-ratio:1.45}.hy-outro h3{margin-top:30px}}
@media(prefers-reduced-motion:reduce){#work .hy-card-image img,.hy-action{transition:none!important}}