/* HHS / CONCEPTS — «لو طلبوا مني». Concepts for brands we love, one world per brand. Sits on assets/reverse/reverse.css
   (header, footer, tokens). Each film stands in a doorway (the studio's arch); pressing play opens the door. */
.r-concepts{--cx-hair:#c9beb2;--cx-w:clamp(292px,calc(min(78vh,820px)*.5625),462px);--cx-r:18px}
@supports (height:1svh){.r-concepts{--cx-w:clamp(292px,calc(min(78svh,820px)*.5625),462px)}}
html:has(.r-concepts){scrollbar-color:var(--r-blue) var(--r-paper)}
.r-concepts main{overflow-x:clip}
.r-concepts [hidden]{display:none!important}
.r-concepts bdi{unicode-bidi:isolate}

/* Opening: the title, her lines, the ledger of concepts. The first doorway already shows below it. */
.cx-open{padding:clamp(36px,4vw,64px) var(--r-pad) 0;max-width:1520px;margin:0 auto}
.cx-open-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(36px,6vw,110px);align-items:end}
.cx-title{font:500 clamp(76px,9.4vw,156px)/.9 var(--r-serif);letter-spacing:-.048em;color:var(--r-blue);text-wrap:balance}
.cx-title span{display:block}
.cx-title em{display:block;font-weight:400;font-size:.44em;line-height:1.12;letter-spacing:-.028em;color:var(--r-punch);margin-top:.42em}
.cx-say{display:grid;gap:22px;font-size:21px;line-height:1.55;color:#2b2722;max-width:36ch;padding-bottom:10px}
.cx-say p{margin:0}
.cx-say p:first-child{font:italic 400 28px/1.3 var(--r-serif);color:var(--r-ink);letter-spacing:-.015em}
.cx-index{margin-top:clamp(40px,3.6vw,60px);border-top:1px solid var(--cx-hair)}
.cx-index a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1fr) auto;gap:24px;align-items:center;min-height:76px;padding:14px 0;border-bottom:1px solid var(--cx-hair);transition:padding .35s var(--r-ease),color .2s}
.cx-index .ix-name{font:500 32px/1.1 var(--r-serif);letter-spacing:-.03em}
.cx-index .ix-alt{font:600 24px/1.5 'IBM Plex Sans Arabic',Tahoma,sans-serif;color:#4a443d}
.cx-index .ix-alt[lang=en]{font:italic 400 24px/1.3 'Bodoni Moda',serif}
.cx-index .ix-meta{font-size:17px;color:var(--r-muted)}
.cx-index .ix-go{display:inline-flex;align-items:center;gap:12px;font-size:17px;color:var(--r-blue);font-variant-numeric:tabular-nums}
.cx-index .ix-go svg{width:22px;height:22px;flex:none}
.cx-index .ix-sw{width:12px;height:12px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 3px color-mix(in srgb,var(--sw) 22%,transparent);flex:none}

/* One band per brand, painted from the brand's own colours. */
.cx-entry{--ink:#fbf3e8;--soft:rgba(251,243,232,.8);--line:rgba(251,243,232,.28);--accent:#e9c46a;background:var(--stage);color:var(--ink);padding:clamp(72px,6.4vw,120px) var(--r-pad) clamp(80px,7.4vw,130px);position:relative}
.cx-entry::selection,.cx-entry ::selection{background:var(--ink);color:var(--stage)}
.cx-entry :focus-visible{outline-color:var(--ink)}
.cx-open+.cx-entry{margin-top:clamp(40px,3.4vw,56px)}
/* a second name in the other script sits under the first, aligned with it (never pushed to the far edge) */
html[dir=ltr] .cx-alt,html[dir=ltr] .ix-alt{text-align:left}
html[dir=rtl] .cx-alt,html[dir=rtl] .ix-alt{text-align:right}
.cx-entry-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:'film head' 'film body';column-gap:clamp(56px,8vw,140px);row-gap:0;align-items:center}
.cx-entry.is-flip .cx-entry-in{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'head film' 'body film'}
.cx-head{grid-area:head;align-self:end}
.cx-body{grid-area:body;align-self:start}
.cx-name{font:500 clamp(66px,7.4vw,128px)/.92 var(--r-serif);letter-spacing:-.046em;color:var(--ink)}
.cx-name .cx-alt{display:block;margin-top:.24em;font:600 .4em/1.45 'IBM Plex Sans Arabic',Tahoma,sans-serif;letter-spacing:0;color:var(--accent)}
.cx-name .cx-alt[lang=en]{font:italic 400 .42em/1.2 'Bodoni Moda',serif;letter-spacing:-.02em}
.cx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:26px 0 0;padding:0;list-style:none;font-size:17px;color:var(--soft)}
.cx-meta li{display:inline-flex;align-items:center}
.cx-meta li+li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);margin-inline:14px}
.cx-idea{margin:38px 0 0;font:italic 400 clamp(29px,2.7vw,42px)/1.2 var(--r-serif);letter-spacing:-.02em;color:var(--ink);max-width:21ch;text-wrap:balance}
.cx-built{margin-top:42px}
.cx-built h3{font:600 16px/1.4 var(--r-sans);letter-spacing:.01em;color:var(--soft);margin:0 0 14px}
.cx-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.cx-chips li{font-size:16px;line-height:1.3;padding:11px 17px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.cx-note{margin:46px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--soft);max-width:58ch}

/* The doorway. Closed = an arch (semicircle on the frame's width); playing = the door opens to the whole film. */
.cx-film{grid-area:film;position:relative;margin:0;width:var(--cx-w);justify-self:center}
.cx-film::before{content:'';position:absolute;inset:-15px;border:1px solid var(--accent);opacity:.55;border-radius:calc(var(--cx-w)/2 + 15px) calc(var(--cx-w)/2 + 15px) calc(var(--cx-r) + 12px) calc(var(--cx-r) + 12px);transition:opacity .5s var(--r-ease),border-radius .8s var(--r-ease);pointer-events:none}
.cx-film.is-open::before{opacity:0;border-radius:calc(var(--cx-r) + 12px)}
.cx-door{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;isolation:isolate;background:#120c09;border-radius:calc(var(--cx-w)/2) calc(var(--cx-w)/2) var(--cx-r) var(--cx-r);box-shadow:0 46px 80px -38px rgba(10,6,4,.7),0 16px 30px -16px rgba(10,6,4,.45);transition:border-radius .8s var(--r-ease);-webkit-mask-image:-webkit-radial-gradient(white,black)}
.cx-film.is-open .cx-door{border-radius:var(--cx-r)}
.cx-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#120c09;cursor:pointer}
.cx-door::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none;z-index:2}
.cx-play{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);z-index:3;display:inline-flex;align-items:center;gap:12px;min-height:58px;padding-block:8px;padding-inline:8px 22px;border:0;border-radius:999px;background:var(--r-white);color:var(--r-ink);font:600 17px/1.2 var(--r-sans);white-space:nowrap;box-shadow:0 18px 34px -14px rgba(10,6,4,.6);transition:transform .3s var(--r-ease),opacity .3s,box-shadow .3s}
html[dir=rtl] .cx-play{left:auto;right:50%;transform:translate(50%,50%)}
.cx-play i{width:42px;height:42px;border-radius:50%;background:var(--r-punch);display:grid;place-items:center;flex:none}
.cx-play i svg{width:15px;height:15px;margin-inline-start:2px}
html[dir=rtl] .cx-play i svg{margin-inline-start:0;margin-inline-end:2px}
.cx-play .cx-dur{font-weight:400;color:var(--r-muted);font-variant-numeric:tabular-nums;padding-inline-start:12px;border-inline-start:1px solid #d9cfc4}
.cx-play:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.cx-film.is-open .cx-play{opacity:0;pointer-events:none;transform:translate(-50%,80%)}
html[dir=rtl] .cx-film.is-open .cx-play{transform:translate(50%,80%)}
.cx-film{padding-bottom:0;margin-bottom:29px}

/* Controls once the door is open: play/pause, the film's position, time, sound, full screen. */
.cx-bar{position:absolute;inset:auto 0 0 0;z-index:3;display:flex;align-items:center;gap:6px;padding:46px 10px 10px;background:linear-gradient(180deg,transparent,rgba(8,5,4,.74));color:#fff;opacity:0;transition:opacity .4s var(--r-ease) .25s;direction:ltr}
.cx-film.is-open .cx-bar{opacity:1}
.cx-bar button{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;padding:0}
.cx-bar button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.cx-bar svg{width:22px;height:22px}
.cx-bar .cx-time{font:500 16px/1 var(--r-sans);font-variant-numeric:tabular-nums;white-space:nowrap;padding-inline:4px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.cx-seek{flex:1;min-width:40px;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--p:0%}
.cx-seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--p),rgba(255,255,255,.34) var(--p))}
.cx-seek::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--p),rgba(255,255,255,.34) var(--p))}
.cx-seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;margin-top:-6px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.cx-seek::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}
.cx-seek:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cx-film [data-i=pause],.cx-film.is-playing [data-i=play],.cx-film [data-i=muted],.cx-film.is-muted [data-i=sound]{display:none}
.cx-film.is-playing [data-i=pause],.cx-film.is-muted [data-i=muted]{display:block}
.cx-film.is-wait .cx-door::before{content:'';position:absolute;z-index:3;left:50%;top:80%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:cx-spin .9s linear infinite}
@keyframes cx-spin{to{transform:rotate(360deg)}}

/* Closing: the soft invitation, on the studio's cobalt. */
.cx-close{background:var(--r-blue);color:var(--r-white);padding:clamp(92px,10vw,170px) var(--r-pad)}
.cx-close-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,6vw,110px);align-items:end}
.cx-close h2{font:400 clamp(52px,6.6vw,116px)/1 var(--r-serif);letter-spacing:-.045em;color:var(--r-white)}
.cx-close h2 span{display:block}
.cx-close h2 span:last-child{font-style:italic}
.cx-close p{font-size:20px;line-height:1.6;max-width:34ch;margin:0 0 28px;color:#e8ecf6}
.cx-actions{display:flex;flex-wrap:wrap;gap:12px}
.cx-actions a{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:14px 22px;font:600 17px/1.2 var(--r-sans);border:1px solid var(--r-white);border-radius:0}
.cx-actions a svg{width:22px;height:22px;flex:none}
.cx-actions .cx-talk{background:var(--r-white);color:var(--r-blue)}
.cx-actions .cx-wa{color:var(--r-white)}
.cx-close ::selection{background:var(--r-white);color:var(--r-blue)}
.cx-close :focus-visible{outline-color:var(--r-white)}
html[dir=rtl] .cx-talk .arr{scale:-1 1}

/* Hover only where a real pointer hovers (a tap on iPhone leaves :hover stuck). */
@media(hover:hover){
.cx-index a:hover{padding-inline-start:14px;color:var(--r-blue)}
.cx-play:hover{transform:translate(-50%,calc(50% - 3px));box-shadow:0 22px 40px -14px rgba(10,6,4,.65)}
html[dir=rtl] .cx-play:hover{transform:translate(50%,calc(50% - 3px))}
.cx-bar button:hover{background:rgba(255,255,255,.14)}
.cx-actions .cx-talk:hover{background:#fff}
.cx-actions .cx-wa:hover{background:rgba(251,247,241,.1)}
}
@media(hover:hover) and (prefers-reduced-motion:reduce){.cx-index a:hover{padding-inline-start:0}}
.motion-off .cx-index a:hover{padding-inline-start:0}

/* Arabic is its own composition. Display face = IBM Plex Sans Arabic: the site's Noto Naskh draws stacked letters in
   Safari/WebKit (بن over العميد), Plex does not (Hala's heading rule). */
html[dir=rtl] .cx-title{font:600 clamp(64px,7.4vw,120px)/1.3 'IBM Plex Sans Arabic',Tahoma,sans-serif;letter-spacing:0}
html[dir=rtl] .cx-title em{font:500 .4em/1.6 'IBM Plex Sans Arabic',Tahoma,sans-serif;letter-spacing:0;margin-top:.2em}
html[dir=rtl] .cx-say{font-size:23px;line-height:1.9}
html[dir=rtl] .cx-say p:first-child{font:600 30px/1.7 'IBM Plex Sans Arabic',Tahoma,sans-serif;letter-spacing:0}
html[dir=rtl] .cx-index .ix-name{font:600 30px/1.5 'IBM Plex Sans Arabic',Tahoma,sans-serif;letter-spacing:0}
html[dir=rtl] .cx-index .ix-meta,html[dir=rtl] .cx-index .ix-go{font-size:18px}
html[dir=rtl] .cx-name{font:600 clamp(64px,6.6vw,112px)/1.25 'IBM Plex Sans Arabic',Tahoma,sans-serif;letter-spacing:0}
html[dir=rtl] .cx-name .cx-alt{margin-top:.1em}
html[dir=rtl] .cx-meta{font-size:18px}
html[dir=rtl] .cx-idea{font:500 clamp(30px,2.7vw,42px)/1.6 'IBM Plex Sans Arabic',Tahoma,sans-serif;letter-spacing:0;max-width:22ch}
html[dir=rtl] .cx-built h3{font-size:18px;letter-spacing:0}
html[dir=rtl] .cx-chips li{font-size:17px}
html[dir=rtl] .cx-note{font-size:17px;line-height:1.85}
html[dir=rtl] .cx-play{font-size:18px}
html[dir=rtl] .cx-close h2{font:600 clamp(48px,5.4vw,92px)/1.35 'IBM Plex Sans Arabic',Tahoma,sans-serif;letter-spacing:0}
html[dir=rtl] .cx-close h2 span:last-child{font-style:normal;color:#ffd2c4}
html[dir=rtl] .cx-close p{font-size:21px;line-height:1.9}
html[dir=rtl] .cx-actions a{font-size:18px}
html[lang=fr] .cx-title em,html[lang=es] .cx-title em{font-size:.4em}

@media(max-width:1100px){
 .cx-open-grid{grid-template-columns:1fr;gap:34px;align-items:start}
 .cx-say{max-width:44ch}
 .cx-entry-in{column-gap:56px}
}
@media(max-width:860px){
 .r-concepts{--cx-w:min(80vw,370px)}
 .cx-index a{grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;min-height:0;padding:16px 0}
 .cx-index .ix-alt{grid-column:1;grid-row:2}
 .cx-index .ix-meta{grid-column:1;grid-row:3}
 .cx-index .ix-go{grid-column:2;grid-row:1 / span 3}
 .cx-entry-in,.cx-entry.is-flip .cx-entry-in{grid-template-columns:1fr;grid-template-areas:'head' 'film' 'body';row-gap:0}
 .cx-head{align-self:start;margin-bottom:46px}
 .cx-film{margin-bottom:62px}
 .cx-idea{max-width:none}
 .cx-close-in{grid-template-columns:1fr}
}
@media(max-width:760px){
 .cx-open{padding-top:32px}
 .cx-title{font-size:clamp(66px,19vw,96px)}
 .cx-title em{font-size:.42em}
 .cx-say{font-size:19px;gap:18px}
 .cx-say p:first-child{font-size:25px}
 .cx-index .ix-name{font-size:28px}
 .cx-index .ix-alt{font-size:21px}
 .cx-entry{padding-block:72px 64px}
 .cx-name{font-size:clamp(56px,15.5vw,80px)}
 .cx-meta{font-size:16px;margin-top:20px}
 .cx-idea{font-size:28px;margin-top:0}
 .cx-built{margin-top:34px}
 .cx-note{margin-top:36px}
 .cx-play{min-height:54px;gap:10px;padding-inline:7px 18px}
 .cx-play i{width:40px;height:40px}
 .cx-close h2{font-size:clamp(46px,12.4vw,68px)}
 .cx-close p{font-size:18px}
 .cx-actions{flex-direction:column;align-items:stretch}
 .cx-actions a{justify-content:space-between}
 html[dir=rtl] .cx-title{font-size:clamp(56px,15vw,80px)}
 html[dir=rtl] .cx-say{font-size:20px}
 html[dir=rtl] .cx-say p:first-child{font-size:26px}
 html[dir=rtl] .cx-name{font-size:clamp(52px,14vw,72px)}
 html[dir=rtl] .cx-idea{font-size:28px}
 html[dir=rtl] .cx-close h2{font-size:clamp(40px,10.6vw,58px)}
}
@media(max-width:370px){
 .cx-play .cx-dur{display:none}
 .cx-bar .cx-time{display:none}
}
@media(prefers-reduced-motion:reduce){
 .cx-door,.cx-film::before,.cx-play,.cx-bar,.cx-index a{transition:none!important}
}
.motion-off .cx-door,.motion-off .cx-film::before,.motion-off .cx-play,.motion-off .cx-bar,.motion-off .cx-index a{transition:none!important}
@media print{.cx-entry,.cx-close{background:#fff!important;color:#111!important;--ink:#111;--soft:#333;--line:#999}.cx-play,.cx-bar{display:none}}